From 694b292d69114d2ca9578f9449f242bc26fb46a5 Mon Sep 17 00:00:00 2001 From: Luke Hubmayer-Werner Date: Fri, 20 Dec 2024 00:44:46 +1030 Subject: [PATCH] [WIP] Timing entry and storage --- lyrics/static/lyrics/input.js | 30 ++++++++++++++++++++++++++++++ lyrics/static/lyrics/style.css | 9 ++++++++- lyrics/templates/lyrics/index.html | 23 ++++++++++++++++------- 3 files changed, 54 insertions(+), 8 deletions(-) diff --git a/lyrics/static/lyrics/input.js b/lyrics/static/lyrics/input.js index aa9908f..b2f8e1c 100644 --- a/lyrics/static/lyrics/input.js +++ b/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', {})); } diff --git a/lyrics/static/lyrics/style.css b/lyrics/static/lyrics/style.css index 724bb12..2a39f3e 100644 --- a/lyrics/static/lyrics/style.css +++ b/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; diff --git a/lyrics/templates/lyrics/index.html b/lyrics/templates/lyrics/index.html index 50c5203..d66dace 100644 --- a/lyrics/templates/lyrics/index.html +++ b/lyrics/templates/lyrics/index.html @@ -75,11 +75,15 @@

Japanese

- +

Translation

- + +
+
+

Syllable Timing

+
@@ -115,15 +119,20 @@ - - +
+ + +

Line Timer

- Tap the start of each line along with the video to record timing information.
- - + Tap the start of each line along with the video to record timing information. +
+ + +
+