birdulon
/
KaraokeTestudaiBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkboxes: Hide romaji and/or kanji+furi from lyrics output

This commit is contained in:
Luke Hubmayer-Werner 2024-12-18 22:23:47 +10:30
parent d63c39f4d5
commit 31895e2d42
3 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
lyrics/static/lyrics/input.js
View File

@ -3,23 +3,26 @@ const string_replacements_element = document.querySelector('#word_replacements_p
const word_overrides_element = document.querySelector('#word_replacements_post'); const word_overrides_element = document.querySelector('#word_replacements_post');
const lyrics_input_element = document.querySelector('#lyrics_input_textarea'); const lyrics_input_element = document.querySelector('#lyrics_input_textarea');
const lyrics_output_element = document.querySelector('#lyrics_output'); const lyrics_output_element = document.querySelector('#lyrics_output');
const req_tokenization_url = './tokenize' 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 has_lyrics_changed = false
let tokenized_lyric_lines = [] let tokenized_lyric_lines = [];
function update_lyrics_output(data) { function update_lyrics_output(data) {
tokenized_lyric_lines = data.parsed_lines; tokenized_lyric_lines = data.parsed_lines;
var html = '' var html = '';
tokenized_lyric_lines.forEach(line => { tokenized_lyric_lines.forEach(line => {
if ((typeof line) == "string") { if ((typeof line) == "string") {
console.log(`${line} is a string`) console.log(`${line} is a string`);
html += line; html += line + '<br>';
} else { } else {
console.log(`${line} is not a string`) console.log(`${line} is not a string`);
// Tokenized object // Tokenized object
html += '<span class="lyrics-romaji">';
html += line.romaji_syllables.join(''); html += line.romaji_syllables.join('');
html += '<br>'; html += '<br></span>';
html += '<span style="font-size: 32px;font-family: Droid Sans Japanese">'; html += '<span class="lyrics-kanji">';
line.furi_blocks.forEach(block => { line.furi_blocks.forEach(block => {
if (block[1]) { if (block[1]) {
html += `<ruby>${block[0]}<rt>${block[1]}</rt></ruby>`; html += `<ruby>${block[0]}<rt>${block[1]}</rt></ruby>`;
@ -27,9 +30,8 @@ function update_lyrics_output(data) {
html += block[0]; html += block[0];
} }
}); });
html += '</span>'; html += '<br></span>';
} }
html += '<br>';
}); });
lyrics_output_element.innerHTML = html; lyrics_output_element.innerHTML = html;
console.log(`updating lyrics: ${tokenized_lyric_lines}`); console.log(`updating lyrics: ${tokenized_lyric_lines}`);
@ -40,17 +42,17 @@ function lyrics_input_updated() {
const post_replacements = word_overrides_element.value; const post_replacements = word_overrides_element.value;
console.log(`preparing to update lyrics: ${content}`); console.log(`preparing to update lyrics: ${content}`);
let content_replaced = content let content_replaced = content;
pre_replacements.split('\n').forEach(element => { pre_replacements.split('\n').forEach(element => {
console.log(element); console.log(element);
const [search, replace] = element.replace('|', '\t').split('\t'); const [search, replace] = element.replace('|', '\t').split('\t');
if (search) content_replaced = content_replaced.replaceAll(search, replace) if (search) content_replaced = content_replaced.replaceAll(search, replace);
}); });
console.log(`preparing to request tokenization of lyrics: ${content_replaced}`); console.log(`preparing to request tokenization of lyrics: ${content_replaced}`);
const input = encodeURIComponent(content_replaced) const input = encodeURIComponent(content_replaced);
const wo = encodeURIComponent(post_replacements) const wo = encodeURIComponent(post_replacements);
const req = new Request(`${req_tokenization_url}?input=${input}&word_overrides=${wo}`, {method: "GET"}) const req = new Request(`${req_tokenization_url}?input=${input}&word_overrides=${wo}`, {method: "GET"});
// const lines = content_replaced.split('\n'); // const lines = content_replaced.split('\n');
fetch(req) fetch(req)
.then((rsp) => { .then((rsp) => {
@ -69,4 +71,19 @@ function lyrics_input_updated() {
}) })
} }
// lyrics_input_element.addEventListener('keyup', (event) => {if (update_lyrics_keys.has(event.key)) 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) lyrics_input_element.addEventListener('change', lyrics_input_updated);
function update_output_styles() {
style_lyrics_kanji.style.display = lyrics_output_show_kanji_element.checked ? "inline" : "none";
style_lyrics_romaji.style.display = lyrics_output_show_romaji_element.checked ? "inline" : "none";
}
const stylesheet = document.styleSheets[0];
console.log(stylesheet.cssRules)
const style_lyrics_kanji = stylesheet.cssRules[stylesheet.insertRule('.lyrics-kanji {display: inline}')];
const style_lyrics_romaji = stylesheet.cssRules[stylesheet.insertRule('.lyrics-romaji {display: inline}')];
console.log(style_lyrics_kanji)
console.log(style_lyrics_romaji)
lyrics_output_show_kanji_element.addEventListener('change', update_output_styles);
lyrics_output_show_romaji_element.addEventListener('change', update_output_styles);
update_output_styles();

11
lyrics/static/lyrics/style.css
View File

@ -56,3 +56,14 @@ input {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
.flex-container > div > table h2,
.flex-container > div > table td input,
.flex-container > div > table td label {
margin-top: 0;
margin-bottom: 0;
}
.lyrics-kanji {
font-size: xx-large;
font-family: Droid Sans Japanese;
}

8
lyrics/templates/lyrics/index.html
View File

@ -62,7 +62,13 @@
</div> </div>
<!-- Lyrics output --> <!-- Lyrics output -->
<div id="lyrics_output_outer"> <div id="lyrics_output_outer">
<h2>Lyrics Output</h2> <table><tr>
<td><h2>Lyrics Output</h2></td>
<td><input type="checkbox" id="lyrics_output_show_romaji" checked="true"></td>
<td><label for="lyrics_output_show_romaji">Romaji</label></td>
<td><input type="checkbox" id="lyrics_output_show_kanji" checked="true"></td>
<td><label for="lyrics_output_show_kanji">Kanji</label></td>
</table></tr>
<div id="lyrics_output"> <div id="lyrics_output">
</div> </div>
</div> </div>