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]}`;
+ } 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]}`;
- } 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 @@
+
+