From 1b41322b9ec243f78a7abb6c0f760a5c8a6a353d Mon Sep 17 00:00:00 2001 From: Luke Hubmayer-Werner Date: Wed, 18 Dec 2024 23:26:44 +1030 Subject: [PATCH] Arrangement display --- lyrics/static/lyrics/input.js | 89 ++++++++++++++++++++++++------ lyrics/static/lyrics/style.css | 4 +- lyrics/templates/lyrics/index.html | 16 ++++-- 3 files changed, 86 insertions(+), 23 deletions(-) diff --git a/lyrics/static/lyrics/input.js b/lyrics/static/lyrics/input.js index 425846c..17ccbcc 100644 --- a/lyrics/static/lyrics/input.js +++ b/lyrics/static/lyrics/input.js @@ -4,39 +4,95 @@ 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_output_element = document.querySelector('#lyrics_output'); +const arrangement_input_element = document.querySelector('#arrangement_input_textarea'); +const arrangement_output_element = document.querySelector('#arrangement_output'); const lyrics_output_show_romaji_element = document.querySelector('#lyrics_output_show_romaji'); const lyrics_output_show_kanji_element = document.querySelector('#lyrics_output_show_kanji'); const req_tokenization_url = './tokenize'; // let has_lyrics_changed = false let tokenized_lyric_lines = []; +let lyric_section_ranges = {}; // [start, end) line indices +const re_lyric_section = /\[(.+)\]/; + +function format_parsed_line(line) { + var html = ''; + if ((typeof line) == "string") { + // console.log(`${line} is a string`); + html += line + '
'; + } else { + // console.log(`${line} is not a string`); + // Tokenized object + html += ''; + html += line.romaji_syllables.join(''); + html += '
'; + html += ''; + line.furi_blocks.forEach(block => { + if (block[1]) { + html += `${block[0]}${block[1]}`; + } else { + html += block[0]; + } + }); + html += '
'; + } + return html; +} function update_lyrics_output(data) { tokenized_lyric_lines = data.parsed_lines; var html = ''; + + lyric_section_ranges = {}; + var current_lyric_section + var line_counter = 0 tokenized_lyric_lines.forEach(line => { if ((typeof line) == "string") { - console.log(`${line} is a string`); - html += line + '
'; - } else { - console.log(`${line} is not a string`); - // Tokenized object - html += ''; - html += line.romaji_syllables.join(''); - html += '
'; - html += ''; - line.furi_blocks.forEach(block => { - if (block[1]) { - html += `${block[0]}${block[1]}`; - } else { - html += block[0]; + // console.log(`${line} is a string`); + const section_match = re_lyric_section.exec(line); + if (section_match) { + if (current_lyric_section) { + // Clean up current section + lyric_section_ranges[current_lyric_section].push(line_counter); } - }); - html += '
'; + current_lyric_section = section_match[1]; + lyric_section_ranges[current_lyric_section] = [line_counter]; + } } + html += format_parsed_line(line); + line_counter++; }); + if (current_lyric_section) { + // Clean up current section + lyric_section_ranges[current_lyric_section].push(line_counter); + } lyrics_output_element.innerHTML = html; console.log(`updating lyrics: ${tokenized_lyric_lines}`); + + update_arrangement_output(); } + +function update_arrangement_output() { + console.log('Updating arrangement output'); + + const arrangement_str = arrangement_input_element.value; + var html = ''; + arrangement_str.split(',').forEach(section => { + const s = section.trim(); + if (s in lyric_section_ranges) { + console.log(`Adding section [${s}]`); + + // html += `[${s}]
`; // Section name is already in the line range :) + const [i0, i1] = lyric_section_ranges[s]; + for (let i = i0; i < i1; i++) { + html += format_parsed_line(tokenized_lyric_lines[i]); + } + } else { + console.log(`Cannot add section [${s}]`); + } + }) + arrangement_output_element.innerHTML = html; +} + function lyrics_input_updated() { const content = lyrics_input_element.value; const pre_replacements = string_replacements_element.value; @@ -73,6 +129,7 @@ function lyrics_input_updated() { } // lyrics_input_element.addEventListener('keyup', (event) => {if (update_lyrics_keys.has(event.key)) lyrics_input_updated();}); lyrics_input_element.addEventListener('change', lyrics_input_updated); +arrangement_input_element.addEventListener('change', update_arrangement_output); function update_output_styles() { style_lyrics_kanji.style.display = lyrics_output_show_kanji_element.value > 0 ? "inline" : "none"; diff --git a/lyrics/static/lyrics/style.css b/lyrics/static/lyrics/style.css index a22a1f9..ba42e38 100644 --- a/lyrics/static/lyrics/style.css +++ b/lyrics/static/lyrics/style.css @@ -22,10 +22,10 @@ input { min-width: 400px; max-width: 800px; } -#lyrics_output_outer { +#lyrics_output_outer, #arrangement_output_outer { min-width: 600px; } -#lyrics_output { +#lyrics_output, #arrangement_output { background-color: beige; /* border-color: grey; */ border-color: #47c7ce; diff --git a/lyrics/templates/lyrics/index.html b/lyrics/templates/lyrics/index.html index e9eab55..c114c3d 100644 --- a/lyrics/templates/lyrics/index.html +++ b/lyrics/templates/lyrics/index.html @@ -55,6 +55,12 @@ + +
+

Arrangement Input

+ Comma-separated section tags, numbers are beats to insert between sections.
+ +

Lyrics Input

@@ -72,11 +78,11 @@
- -
-

Arrangement Input

- Comma-separated section tags, numbers are beats to insert between sections.
- + +
+

Arrangement Output

+
+