Arrangement display

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 + '<br>';
+	} else {
+		// console.log(`${line} is not a string`);
+		// Tokenized object
+		html += '<span class="lyrics-romaji">';
+		html += line.romaji_syllables.join('');
+		html += '<br></span>';
+		html += '<span class="lyrics-kanji">';
+		line.furi_blocks.forEach(block => {
+			if (block[1]) {
+				html += `<ruby>${block[0]}<rt>${block[1]}</rt></ruby>`;
+			} else {
+				html += block[0];
+			}
+		});
+		html += '<br></span>';
+	}
+	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 + '<br>';
-		} else {
-			console.log(`${line} is not a string`);
-			// Tokenized object
-			html += '<span class="lyrics-romaji">';
-			html += line.romaji_syllables.join('');
-			html += '<br></span>';
-			html += '<span class="lyrics-kanji">';
-			line.furi_blocks.forEach(block => {
-				if (block[1]) {
-					html += `<ruby>${block[0]}<rt>${block[1]}</rt></ruby>`;
-				} 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 += '<br></span>';
+				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}]<br>`; // 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";

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;

lyrics/templates/lyrics/index.html

@@ -55,6 +55,12 @@
 					</tr>
 				</table>
 			</div>
+			<!-- Arrangement input -->
+			<div id="arrangement_input">
+				<h2>Arrangement Input</h2>
+				Comma-separated section tags, numbers are beats to insert between sections.<br>
+				<textarea id="arrangement_input_textarea" rows="4" cols="30" wrap="soft" placeholder="v1, c, 8, v2, c, c, 16, b, c"></textarea>
+			</div>
 			<!-- Lyrics input -->
 			<div id="lyrics_input">
 				<h2>Lyrics Input</h2>
@@ -72,11 +78,11 @@
 				<div id="lyrics_output">
 				</div>
 			</div>
-			<!-- Arrangement input -->
-			<div id="arrangement_input">
-				<h2>Arrangement Input</h2>
-				Comma-separated section tags, numbers are beats to insert between sections.<br>
-				<textarea id="arrangement" rows="4" cols="30" wrap="soft" placeholder="v1, c, 8, v2, c, c, 16, b, c"></textarea>
+			<!-- Arrangement output -->
+			<div id="arrangement_output_outer">
+				<h2>Arrangement Output</h2>
+				<div id="arrangement_output">
+				</div>
 			</div>
 			<!-- Embedded video player for subtitle timing and preview -->
 			<div id="embedded_video">