From 2d02cfcb4871e169b8592ef4a7e71154690987c9 Mon Sep 17 00:00:00 2001
From: theepicsaxguy <39008574+theepicsaxguy@users.noreply.github.com>
Date: Mon, 23 Feb 2026 14:00:59 +0000
Subject: [PATCH] Fix subtitle settings not being respected during playback

- Read show_subtitles and subtitle_mode from settings in player-render.js
- Add full text mode rendering that shows all sentences at once
- Hide subtitle container when show_subtitles is disabled
- Support both karaoke (word-by-word) and full text subtitle modes
---
 static/js/studio/player-render.js | 67 ++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 6 deletions(-)

diff --git a/static/js/studio/player-render.js b/static/js/studio/player-render.js
index ad2b24d..0efb99b 100644
--- a/static/js/studio/player-render.js
+++ b/static/js/studio/player-render.js
@@ -10,6 +10,7 @@ import * as playerControls from './player-controls.js';
 import * as playerChunk from './player-chunk.js';
 import * as playerQueue from './player-queue.js';
 import * as playerWaveform from './player-waveform.js';
+import * as state from './state.js';
 import { createElement, clearContent } from './dom.js';
 
 const SPEED_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
@@ -327,6 +328,24 @@ function renderChunkSegments() {
 }
 
 function updateSubtitleDisplay(chunk) {
+    const settings = state.get('settings') || {};
+    const showSubtitles = settings.show_subtitles !== 'false' && settings.show_subtitles !== false;
+    const subtitleMode = settings.subtitle_mode || 'full';
+
+    const container = $('fs-subtitles-container');
+    if (container) {
+        container.style.display = showSubtitles ? 'flex' : 'none';
+    }
+
+    if (!showSubtitles) {
+        playerState.setCurrentSubtitleText('');
+        playerState.setSubtitleSentences([]);
+        playerState.setSubtitleTimings([]);
+        const el = $('fs-subtitle-text');
+        if (el) clearContent(el);
+        return;
+    }
+
     if (chunk && chunk.text) {
         playerState.setCurrentSubtitleText(chunk.text);
         const sentences = chunk.text.split(/(?<=[.!?])\s+/).filter(s => s.trim());
@@ -336,7 +355,12 @@ function updateSubtitleDisplay(chunk) {
             return wordCount / 2.5;
         });
         playerState.setSubtitleTimings(timings);
-        renderKaraoke(sentences, 0, -1);
+
+        if (subtitleMode === 'full') {
+            renderFullText(sentences);
+        } else {
+            renderKaraoke(sentences, 0, -1);
+        }
     } else {
         playerState.setCurrentSubtitleText('');
         playerState.setSubtitleSentences([]);
@@ -358,6 +382,21 @@ function renderKaraokeIdle(message) {
     el.appendChild(fragment);
 }
 
+function renderFullText(sentences) {
+    const el = $('fs-subtitle-text');
+    if (!el || !sentences.length) return;
+
+    clearContent(el);
+    const fragment = document.createDocumentFragment();
+    sentences.forEach((sentence, i) => {
+        if (i > 0) {
+            fragment.appendChild(document.createTextNode(' '));
+        }
+        fragment.appendChild(createElement('span', { className: 'full-sentence' }, [sentence]));
+    });
+    el.appendChild(fragment);
+}
+
 function renderKaraoke(sentences, sentenceIndex, wordIndex) {
     const el = $('fs-subtitle-text');
     if (!el || !sentences.length) return;
@@ -379,6 +418,12 @@ function renderKaraoke(sentences, sentenceIndex, wordIndex) {
 }
 
 export function updateSubtitles(text) {
+    const settings = state.get('settings') || {};
+    const showSubtitles = settings.show_subtitles !== 'false' && settings.show_subtitles !== false;
+    const subtitleMode = settings.subtitle_mode || 'full';
+
+    if (!showSubtitles) return;
+
     const subtitleEl = $('fs-subtitle-text');
     if (!subtitleEl) return;
     if (!text) {
@@ -386,10 +431,17 @@ export function updateSubtitles(text) {
         return;
     }
     const sentences = text.split(/(?<=[.!?])\s+/).filter(s => s.trim());
-    renderKaraoke(sentences, 0, -1);
+    if (subtitleMode === 'full') {
+        renderFullText(sentences);
+    } else {
+        renderKaraoke(sentences, 0, -1);
+    }
 }
 
 export function updateSubtitlesSync() {
+    const settings = state.get('settings') || {};
+    const subtitleMode = settings.subtitle_mode || 'full';
+
     const audio = playerState.getAudio();
     const currentSubtitleText = playerState.getCurrentSubtitleText();
     if (!audio || !isFinite(audio.duration) || !currentSubtitleText) return;
@@ -418,10 +470,13 @@ export function updateSubtitlesSync() {
     const timeInSentence = currentTime - sentenceStart;
     const progress = Math.max(0, Math.min(1, timeInSentence / sentenceDuration));
 
-    const words = sentence.split(/\s+/);
-    const activeWordIndex = Math.floor(progress * words.length);
-
-    renderKaraoke(subtitleSentences, currentSentenceIndex, activeWordIndex);
+    if (subtitleMode === 'full') {
+        renderFullText(subtitleSentences);
+    } else {
+        const words = sentence.split(/\s+/);
+        const activeWordIndex = Math.floor(progress * words.length);
+        renderKaraoke(subtitleSentences, currentSentenceIndex, activeWordIndex);
+    }
 }
 
 export function updateCoverArt() {