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 @@