[WIP] Timing entry and storage

lyrics/static/lyrics/input.js

@@ -4,6 +4,8 @@ const string_replacements_element = document.querySelector('#word_replacements_p
 const word_overrides_element = document.querySelector('#word_replacements_post');
 const lyrics_input_element = document.querySelector('#lyrics_input_textarea');
 const lyrics_tl_input_element = document.querySelector('#lyrics_tl_input_textarea');
+const lyrics_timing_input_element = document.querySelector('#lyrics_timing_input_textarea');
+const line_timer_element = document.getElementById('line_timer_textarea');
 const lyrics_output_element = document.querySelector('#lyrics_output');
 const arrangement_input_element = document.querySelector('#arrangement_input_textarea');
 const arrangement_output_element = document.querySelector('#arrangement_output');
@@ -13,6 +15,8 @@ const lyrics_output_show_kanji_element = document.querySelector('#lyrics_output_
 const subtitle_editor_textarea = document.getElementById('subtitle_editor_textarea');
 const btn_generate_subtitles = document.getElementById('btn_generate_subtitles');
 const btn_download_subtitles = document.getElementById('btn_download_subtitles');
+const btn_start_of_line = document.getElementById('btn_start_of_line');
+const video_element = document.querySelector('video');
 const req_tokenization_url = './tokenize';
 // let has_lyrics_changed = false
 let tokenized_lyric_lines = [];
@@ -172,6 +176,23 @@ update_output_styles();
 
 document.getElementById('btn_syllable').addEventListener('click', () => {console.log(`Syllable button clicked! ${performance.now()}ms`)});
 document.getElementById('btn_metronome').addEventListener('click', () => {console.log(`Metronome button clicked! ${performance.now()}ms`)});
+function timecode(s) {
+	return new Date(s*1000).toISOString().substring(14, 22);  // MM:SS.cs
+}
+btn_start_of_line.addEventListener('click', () => {
+	const t = video_element.currentTime;
+	console.log(`Start of Line button clicked! ${performance.now()}ms Video at ${t}s`)
+	line_timer_element.value += `${t}\t(${timecode(t)})\n`;
+});
+
+document.getElementById('btn_p_video').addEventListener('click', () => {
+	if (video_element.paused){
+		video_element.play();
+	} else {
+		video_element.pause();
+		video_element.currentTime -= 1.0;
+	}
+});
 
 function save_text_file(filename, data, mime_type="text/plain") {
 	const a = document.createElement("a");
@@ -194,6 +215,10 @@ function save_song() {
 		lyrics: lyrics_input_element.value,
 		lyrics_translation: lyrics_tl_input_element.value,
 		arrangement: arrangement_input_element.value,
+
+		// Subject to change
+		syllable_timings: lyrics_timing_input_element.value,
+		line_timings: line_timer_element.value,
 	};
 	save_text_file(`${data.song_title_en}.json`, JSON.stringify(data, null, 2), "application/json");
 }
@@ -211,6 +236,11 @@ function load_song(data) {
 	lyrics_input_element.value = data.lyrics ?? '';
 	lyrics_tl_input_element.value = data.lyrics_translation ?? '';
 	arrangement_input_element.value = data.arrangement ?? '';
+
+	// Subject to change
+	lyrics_timing_input_element.value = data.syllable_timings ?? '',
+	line_timer_element.value = data.line_timings ?? '';
+
 	// lyrics_input_updated()
 	lyrics_input_element.dispatchEvent(new Event('change', {}));
 }

lyrics/static/lyrics/style.css

@@ -46,7 +46,8 @@ table {
 	max-width: 260px;
 }
 #line_timer {
-	max-width: 200px;
+	/* max-width: 200px; */
+	max-width: 230px;
 }
 #syllable_timer {
 	max-width: 200px;
@@ -62,9 +63,15 @@ table {
 }
 #div_lyrics_input_jp {
 	grid-column: 1;
+	grid-row: 1;
 }
 #div_lyrics_input_tl {
+	grid-column: 3;
+	grid-row: 1;
+}
+#div_lyrics_input_timing {
 	grid-column: 2;
+	grid-row: 1;
 }
 #lyrics_input h3 {
 	margin-top: 0;

lyrics/templates/lyrics/index.html

@@ -75,11 +75,15 @@
 				<div class="grid-container">
 					<div id="div_lyrics_input_jp">
 						<h3>Japanese</h3>
-						<textarea id="lyrics_input_textarea" rows="20" cols="40" placeholder="[v1]&#10;おはよう世界"></textarea>
+						<textarea id="lyrics_input_textarea" rows="20" cols="40" placeholder="[v1]&#10;おはよう世界" wrap="off"></textarea>
 					</div>
 					<div id="div_lyrics_input_tl">
 						<h3>Translation</h3>
-						<textarea id="lyrics_tl_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;Hello world"></textarea>
+						<textarea id="lyrics_tl_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;Hello world" wrap="off"></textarea>
+					</div>
+					<div id="div_lyrics_input_timing">
+						<h3>Syllable Timing</h3>
+						<textarea id="lyrics_timing_input_textarea" rows="20" cols="40" placeholder="[v1]&#10;1 3 2 2" wrap="off"></textarea>
 					</div>
 				</div>
 			</div>
@@ -115,15 +119,20 @@
 					<input type="number" id="beats_per_bar" min="1" max="32" value="4">
 					<label for="beats_per_bar">Beats per bar</label>
 				</div>
-				<button id="btn_metronome">Metronome</button>
-				<button id="btn_syllable">Syllable</button>
+				<div>
+					<button id="btn_metronome">Metronome</button>
+					<button id="btn_syllable">Syllable</button>
+				</div>
 			</div>
 			<!-- Line Timer -->
 			<div id="line_timer">
 				<h2>Line Timer</h2>
-				Tap the start of each line along with the video to record timing information.<br>
-				<button id="btn_start_of_line">Start of Line</button>
-				<button id="btn_p_video">Play/Pause Video</button>
+				Tap the start of each line along with the video to record timing information.
+				<div>
+					<button id="btn_start_of_line">Start of Line</button>
+					<button id="btn_p_video">Play/Pause Video</button>
+				</div>
+				<textarea id="line_timer_textarea" rows="20" cols="26"></textarea>
 			</div>
 			<!-- Embedded video player for subtitle timing and preview -->
 			<div id="embedded_video">