From ece3fab18e91fa37ee214f45d365d1cfb2724722 Mon Sep 17 00:00:00 2001 From: Luke Hubmayer-Werner Date: Fri, 20 Dec 2024 02:43:31 +1030 Subject: [PATCH] Add some fades and animated blur to make subtitles less jarring --- lyrics/static/lyrics/subtitle_generator.js | 23 +++++++++++----------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/lyrics/static/lyrics/subtitle_generator.js b/lyrics/static/lyrics/subtitle_generator.js index d6736da..8054197 100644 --- a/lyrics/static/lyrics/subtitle_generator.js +++ b/lyrics/static/lyrics/subtitle_generator.js @@ -68,16 +68,15 @@ Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text const t1s = timecode(t1); const duration_seconds = t1-t0; const duration_ms = Math.floor(duration_seconds * 1000); - const fade_duration_ms = data.title_fade_duration_ms ?? 1000; - const fade = `{\\fade(255,0,255,0,${fade_duration_ms},${duration_ms-fade_duration_ms},${duration_ms})}`; + const title_fade_duration_ms = data.title_fade_duration_ms ?? 1000; + const lyric_fade_duration_ms = data.lyric_fade_duration_ms ?? 180; + // const fade = `{\\fade(255,0,255,0,${title_fade_duration_ms},${duration_ms-title_fade_duration_ms},${duration_ms})}`; + const title_fade = `{\\fad(${title_fade_duration_ms},${title_fade_duration_ms})\\blur10\\t(0,${title_fade_duration_ms},\\blur0)\\t(${duration_ms-title_fade_duration_ms},${duration_ms},\\blur10)}`; + const lyric_fade = `{\\fad(${lyric_fade_duration_ms},${lyric_fade_duration_ms})}`; s += ` Comment: 0,${t0s},${t1s},,,,,,,Title Card -Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${fade}作曲　${data.song_composer} -Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${fade}作詞　${data.song_lyricist} -Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${fade}曲名　${data.song_title} -Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}Music: ${data.song_composer_en} -Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}Lyrics: ${data.song_lyricist_en} -Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en} +Dialogue: 0,${t0s},${t1s},TitleJP,,,,,,${title_fade}曲名　${data.song_title}\\N作曲　${data.song_composer}\\N作詞　${data.song_lyricist} +Dialogue: 0,${t0s},${t1s},Title,,,,,,${title_fade}${data.song_title_en}\\NMusic: ${data.song_composer_en}\\NLyrics: ${data.song_lyricist_en} `; // Kanji Furigana layout stuff @@ -103,10 +102,10 @@ Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en} const furi_preamble = `Dialogue: 1,${t0s},${t1s}`; // Different layer to avoid kanji collision detection // Translation line is easy and static - s += `${sub_preamble},Translation,,,,,,${line.translated_line}\n`; + s += `${sub_preamble},Translation,,,,,,${lyric_fade}${line.translated_line}\n`; // Romaji line is also easy, just intersperse durations - let romaji_line = `{\\k${centiseconds[0]}}`; + let romaji_line = `${lyric_fade}{\\k${centiseconds[0]}}`; let i = 0; // syllable counter for (const syl of line.romaji_syllables) { if (syl.trim()){ // not whtespace @@ -121,7 +120,7 @@ Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en} // Now for the kanji and furi lines... const kanji_plain_str = line.furi_blocks.map(b => b[0]).join(''); const full_kanji_width = kanji_plain_str.length * size_kanji_x; - let kanji_line = `{\\k${centiseconds[0]}}`; + let kanji_line = `${lyric_fade}{\\k${centiseconds[0]}}`; let kanji_line_progress = 0; // increment as we go, to track furi position let furi_lines = []; i = 0; // syllable counter @@ -141,7 +140,7 @@ Dialogue: 0,${t0s},${t1s},Title,,,,,,${fade}${data.song_title_en} } else { // Kanji block const i0 = i; // Store this to later calculate block time for the kanji let syls = kana_to_syllable_list(furi_block[1]); - let furi_line = `{\\k${centiseconds[i]}}`; + let furi_line = `${lyric_fade}{\\k${centiseconds[i]}}`; let furi_chars = 0; for (const syl of syls) { furi_line += `{\\K${centiseconds[i+1]-centiseconds[i]}}${syl}`;