update: gros commit fix editor srt panl

src/components/editor/EditorSrtPanel.tsx

@@ -71,6 +71,10 @@ function formatSrtTime(totalSeconds: number): string {
   return `${padTime(hours)}:${padTime(minutes)}:${padTime(seconds)},000`;
 }
 
+function formatPreviewTime(totalSeconds: number): string {
+  return `${Math.floor(totalSeconds)}.${Math.floor((totalSeconds % 1) * 10)}s`;
+}
+
 function padTime(value: number): string {
   return value.toString().padStart(2, "0");
 }
@@ -227,17 +231,24 @@ export function EditorSrtPanel(): React.JSX.Element {
   const [status, setStatus] = useState("Chargement du SRT...");
   const [isSaving, setIsSaving] = useState(false);
   const [manifest, setManifest] = useState<DialogueManifest | null>(null);
+  const [audioCurrentTime, setAudioCurrentTime] = useState(0);
+  const [selectedDialogueId, setSelectedDialogueId] = useState("");
   const selectedVoice =
     SRT_VOICES.find((item) => item.id === voice) ?? DEFAULT_SRT_VOICE;
   const expectedDialogues = getExpectedDialogues(manifest, voice);
   const expectedCueIndexes = getExpectedCueIndexes(manifest, voice);
+  const parsedCues = parseSrt(content);
+  const activeCue =
+    parsedCues.find(
+      (cue) =>
+        audioCurrentTime >= cue.startTime && audioCurrentTime < cue.endTime,
+    ) ?? null;
   const diagnostic = getSrtDiagnostic(content, expectedCueIndexes);
   const isSrtValid = diagnostic.errors.length === 0;
   const srtTemplate = createSrtTemplate(
     selectedVoice.label,
     expectedCueIndexes,
   );
-  const [selectedDialogueId, setSelectedDialogueId] = useState("");
   const selectedDialogue =
     expectedDialogues.find((dialogue) => dialogue.id === selectedDialogueId) ??
     expectedDialogues[0] ??
@@ -388,7 +399,21 @@ export function EditorSrtPanel(): React.JSX.Element {
               key={selectedDialogue.audio}
               controls
               src={selectedDialogue.audio}
+              onLoadedMetadata={() => setAudioCurrentTime(0)}
+              onTimeUpdate={(event) =>
+                setAudioCurrentTime(event.currentTarget.currentTime)
+              }
             />
+            <div className="editor-srt-active-cue">
+              <span>Temps audio: {formatPreviewTime(audioCurrentTime)}</span>
+              {activeCue ? (
+                <p>
+                  <strong>Cue {activeCue.index}</strong> {activeCue.text}
+                </p>
+              ) : (
+                <p>Aucune cue active a ce moment.</p>
+              )}
+            </div>
             <button
               className="editor-srt-jump-button"
               type="button"

src/index.css

@@ -1506,6 +1506,32 @@ canvas {
   height: 34px;
 }
 
+.editor-srt-active-cue {
+  display: grid;
+  gap: 5px;
+  padding: 8px 10px;
+  border: 1px solid #242424;
+  border-radius: 12px;
+  background: #101010;
+}
+
+.editor-srt-active-cue span {
+  color: #8d8d8d;
+  font-size: 0.7rem;
+}
+
+.editor-srt-active-cue p {
+  margin: 0;
+  color: #d7d7d7;
+  font-size: 0.74rem;
+  line-height: 1.4;
+}
+
+.editor-srt-active-cue strong {
+  margin-right: 4px;
+  color: #ffffff;
+}
+
 .editor-srt-jump-button {
   width: 100%;
   padding: 8px 10px;