From 00733baf3d3dd3d5fc0c0ed67f167555aae905b7 Mon Sep 17 00:00:00 2001
From: carlobortolan <carlobortolan@gmail.com>
Date: Tue, 12 Nov 2024 14:56:17 +0100
Subject: [PATCH] Add autoplay for transcript click events; clean up
 transcript.ts

---
 web/template/partial/stream/transcript.gohtml |  13 +--
 web/template/watch.gohtml                     |   7 +-
 web/ts/TUMLiveVjs.ts                          |   5 +-
 web/ts/track-bars.ts                          |   3 +-
 web/ts/transcript.ts                          | 104 ++++++++----------
 5 files changed, 61 insertions(+), 71 deletions(-)
diff --git a/web/template/partial/stream/transcript.gohtml b/web/template/partial/stream/transcript.gohtml
index 8dddc0acb..8979620c1 100644
--- a/web/template/partial/stream/transcript.gohtml
+++ b/web/template/partial/stream/transcript.gohtml
@@ -1,5 +1,5 @@
 {{define "transcript-modal"}}
-    <div x-data="{transcriptController: new watch.TranscriptController(), isOutOfSync: false, showScrollUp: false}"
+    <div x-data="{ transcriptController: new watch.TranscriptController(), isOutOfSync: false, showScrollUp: false }"
          class="relative h-full border rounded-lg dark:border-gray-800 flex flex-col items-center justify-center overflow-hidden">
         <div class="h-full w-full max-w-3xl flex flex-col">
             <div class="flex justify-between items-end p-4">
@@ -16,13 +16,6 @@
             <div class="flex-grow overflow-hidden relative">
                 {{template "transcript-list" .}}
             </div>
-            <!--<div class="w-full flex items-center justify-center" x-show="isOutOfSync">
-                <button type="button" title="Sync to video time"
-                        class="text-3 text-sm font-semibold hover:bg-blue-500 dark:bg-indigo-600 rounded-full p-1 my-3 w-1/2 max-w-3xl"
-                        @click="isOutOfSync = false;">
-                    Sync to video time
-                </button>
-            </div>-->
         </div>
     </div>
 {{end}}
@@ -30,13 +23,13 @@
 {{define "transcript-list"}}
     <div x-cloak
          x-data="{ transcriptController: new watch.TranscriptController(), transcript: [] }"
-         x-init="() => { transcriptController.init('transcript-list', $el);}"
+         x-init="() => { transcriptController.init('transcript-list', $el); }"
          @update="(e) => (transcript = e.detail)"
          class="h-full w-full max-w-3xl mx-auto transcript-container overflow-hidden">
         <div class="relative grid gap-1 overflow-y-auto pr-3 h-full">
             <template x-for="(cue, index) in transcript" :key="index">
                 <div class="flex items-start space-x-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded"
-                     @click="watch.jumpTo({Ms: cue.startTime * 1000});" :data-cue-start="cue.startTime">
+                     @click="watch.jumpTo({ Ms: cue.startTime * 1000 }, true);" :data-cue-start="cue.startTime">
                     <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                         <span x-text="new Date(cue.startTime * 1000).toISOString().substr(11, 8)"></span>
                     </div>
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index a06f325ad..572670cf8 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -27,7 +27,7 @@
         <script defer src="/static/node_modules/katex/dist/contrib/copy-tex.min.js"></script>
     {{end}}
 </head>
-<body x-data="{'streamID': {{$stream.Model.ID}}, seekLogger: new watch.SeekLogger('{{$stream.ID}}'), sidebar: $persist(watch.SidebarState.Hidden).as('sidebarState'), showShare: false}"
+<body x-data="{'streamID': {{$stream.Model.ID}}, seekLogger: new watch.SeekLogger('{{$stream.ID}}'), sidebar: $persist(watch.SidebarState.Hidden).as('sidebarState'), showShare: false, transcriptAvailable: false}"
       x-init="seekLogger.attach();">
 {{template "header" .IndexData.TUMLiveContext}}
 <div id="shortcuts-help-modal" class="hidden flex fixed top-0 h-screen w-screen z-50 backdrop-brightness-50">
@@ -425,7 +425,7 @@
         {{end}}
 
         <!-- Transcript -->
-        <div id="transcript-desktop" x-cloak="" x-show="sidebar === watch.SidebarState.Transcript"
+        <div id="transcript-desktop" x-cloak="" x-show="sidebar === watch.SidebarState.Transcript && transcriptAvailable"
             :class="sidebar === watch.SidebarState.Transcript ? 'lg:basis-1/4' : 'lg:basis-0'"
             class="basis-full md:h-16/9 lg:h-16/6 px-2 lg:order-none order-4">
             {{template "transcript-modal" $stream.ID}}
@@ -497,7 +497,8 @@
                             </button>
                         {{end}}
 
-                        <button @click="sidebar = (sidebar === watch.SidebarState.Transcript ? watch.SidebarState.Hidden : watch.SidebarState.Transcript)"
+                        <!-- Transcript Button -->
+                        <button x-show="transcriptAvailable" @toggletranscript.window="e => {transcriptAvailable=true}" @click="sidebar = (sidebar === watch.SidebarState.Transcript ? watch.SidebarState.Hidden : watch.SidebarState.Transcript)"
                                 class="rounded-lg px-3 py-1 md:px-4 py-2 h-fit w-fit bg-gray-100 hover:bg-gray-200 dark:bg-secondary-light dark:hover:bg-gray-600"
                                 :title="'Show Transcript'">
                             <i class="fa-solid fa-text-height text-4"></i>
diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts
index 9553b349f..8d5e77d10 100644
--- a/web/ts/TUMLiveVjs.ts
+++ b/web/ts/TUMLiveVjs.ts
@@ -635,7 +635,7 @@ export type jumpToSettings = {
     S: number | undefined;
 };
 
-export function jumpTo(settings: jumpToSettings) {
+export function jumpTo(settings: jumpToSettings, autoplay = false) {
     if (settings.timeParts) {
         settings.time = new Time(settings.timeParts.hours, settings.timeParts.minutes, settings.timeParts.seconds);
     } else if (settings.Ms) {
@@ -646,6 +646,9 @@ export function jumpTo(settings: jumpToSettings) {
     for (let j = 0; j < players.length; j++) {
         players[j].ready(() => {
             players[j].currentTime(settings.time.toSeconds());
+            if (autoplay && players[j].paused()) {
+                players[j].play();
+            }
         });
     }
 }
diff --git a/web/ts/track-bars.ts b/web/ts/track-bars.ts
index 14524c2fd..0cfa8567d 100644
--- a/web/ts/track-bars.ts
+++ b/web/ts/track-bars.ts
@@ -9,7 +9,8 @@ export async function loadAndSetTrackbars(player: VideoJsPlayer, streamID: numbe
     for (const language of LANGUAGES) {
         await fetch(`/api/stream/${streamID}/subtitles/${language.id}`).then((res) => {
             if (res.ok) {
-                window.dispatchEvent(new CustomEvent("togglesearch", { detail: { streamID: streamID } }));
+                window.dispatchEvent(new CustomEvent("togglesearch", { detail: { streamID: streamID } })); // Used for enabling watch searchbar
+                window.dispatchEvent(new CustomEvent("toggletranscript", { detail: { streamID: streamID } })); // Used for enabling button to show transcript-modal
                 player.addRemoteTextTrack(
                     {
                         src: `/api/stream/${streamID}/subtitles/${language.id}`,
diff --git a/web/ts/transcript.ts b/web/ts/transcript.ts
index b22e59613..b125b3d43 100644
--- a/web/ts/transcript.ts
+++ b/web/ts/transcript.ts
@@ -2,10 +2,7 @@ import { getPlayers } from "./TUMLiveVjs";
 import { VideoJsPlayer } from "video.js";
 
 export class TranscriptController {
-    static initiatedInstances: Map<string, Promise<TranscriptController>> = new Map<
-        string,
-        Promise<TranscriptController>
-    >();
+    static initiatedInstances: Map<string, Promise<TranscriptController>> = new Map();
 
     private list: VTTCue[];
     private elem: HTMLElement;
@@ -13,15 +10,15 @@ export class TranscriptController {
     private player: VideoJsPlayer;
     private selectedTrackLabel: string;
 
-    reset(): void {
-        this.player = getPlayers()[0];
-    }
-
     constructor() {
         this.lastSyncTime = 0;
         this.selectedTrackLabel = "English";
     }
 
+    reset(): void {
+        this.player = getPlayers()[0];
+    }
+
     async init(key: string, element: HTMLElement) {
         if (TranscriptController.initiatedInstances[key]) {
             (await TranscriptController.initiatedInstances[key]).unsub();
@@ -35,22 +32,19 @@ export class TranscriptController {
     }
 
     async syncTranscript() {
-        const transcriptDesktop = document.getElementById('transcript-desktop');
+        const transcriptDesktop = document.getElementById("transcript-desktop");
         if (!this.elem || !transcriptDesktop || transcriptDesktop.offsetParent === null) {
             return;
         }
 
         const now = Date.now();
-        if (now - this.lastSyncTime < 1000) {
+        // Sync once every second
+        if (now - this.lastSyncTime < 1000 || this.player.paused()) {
             return;
         }
         this.lastSyncTime = now;
-
-        if (this.player.paused()) {
-            return;
-        }
-
         console.debug("Syncing transcript...");
+
         const currentTime = this.player.currentTime();
         const transcript = await this.fetchTranscript(this.player);
         this.updateTranscript(transcript);
@@ -62,57 +56,56 @@ export class TranscriptController {
         let transcript: VTTCue[] = [];
 
         // Try to find the selected track first
-        for (let i = 0; i < textTracks.length; i++) {
-            const track = textTracks[i];
-            if ((track.kind === "captions" || track.kind === "subtitles") && track.label === this.selectedTrackLabel) {
-                for (let j = 0; j < track.cues.length; j++) {
-                    const cue = track.cues[j] as VTTCue;
-                    transcript.push(cue);
-                }
-                if (transcript.length > 0) {
-                    return transcript;
-                }
-            }
+        transcript = this.getTranscriptFromTracks(textTracks, this.selectedTrackLabel);
+        if (transcript.length > 0) {
+            return transcript;
         }
 
         // If no selected track is found, use other available subtitles
+        transcript = this.getTranscriptFromTracks(textTracks);
+        return transcript;
+    }
+
+    getTranscriptFromTracks(textTracks: TextTrackList, label?: string): VTTCue[] {
+        let transcript: VTTCue[] = [];
         for (let i = 0; i < textTracks.length; i++) {
             const track = textTracks[i];
-            if (track.kind === "captions" || track.kind === "subtitles") {
+            if ((track.kind === "captions" || track.kind === "subtitles") && (!label || track.label === label)) {
                 for (let j = 0; j < track.cues.length; j++) {
                     const cue = track.cues[j] as VTTCue;
                     transcript.push(cue);
                 }
+                if (label && transcript.length > 0) {
+                    return transcript;
+                }
             }
         }
-
         return transcript;
     }
 
     updateTranscript(transcript: VTTCue[]) {
         this.list = transcript;
-        const event = new CustomEvent('update', { detail: transcript });
+        const event = new CustomEvent("update", { detail: transcript });
         this.elem.dispatchEvent(event);
     }
 
     highlightActiveCue(currentTime: number) {
-        const activeCue = this.list.find(cue => cue.startTime <= currentTime && cue.endTime >= currentTime);
-        const cueElements = this.elem.querySelectorAll('[data-cue-start]');
+        const activeCue = this.list.find((cue) => cue.startTime <= currentTime && cue.endTime >= currentTime);
+        const cueElements = this.elem.querySelectorAll("[data-cue-start]");
         cueElements.forEach((cueElement: HTMLElement) => {
-            cueElement.classList.remove('bg-blue-100', 'dark:bg-blue-700');
+            cueElement.classList.remove("bg-blue-100", "dark:bg-blue-700");
         });
 
         if (activeCue) {
             const cueElement = this.elem.querySelector(`[data-cue-start="${activeCue.startTime}"]`);
             if (cueElement) {
-                cueElement.classList.add('bg-blue-100', 'dark:bg-blue-700');
-                cueElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                cueElement.classList.add("bg-blue-100", "dark:bg-blue-700");
+                cueElement.scrollIntoView({ behavior: "smooth", block: "center" });
             }
         }
     }
 
     onUpdate(data: any) {
-        // Process the data and update the transcript list
         this.updateTranscript(data);
     }
 
@@ -123,43 +116,42 @@ export class TranscriptController {
     async downloadTranscript() {
         const player = getPlayers()[0];
         const textTracks = player.textTracks();
-        let transcript = "";
+        let transcript = this.getTranscriptText(textTracks, this.selectedTrackLabel);
+
+        // If no selected track is found, use other available subtitles
+        if (transcript === "") {
+            transcript = this.getTranscriptText(textTracks);
+        }
 
-        // Iterate over the text tracks to find the selected track
+        this.downloadTextAsFile(transcript, "transcript.txt");
+    }
+
+    getTranscriptText(textTracks: TextTrackList, label?: string): string {
+        let transcript = "";
         for (let i = 0; i < textTracks.length; i++) {
             const track = textTracks[i];
-            if ((track.kind === "captions" || track.kind === "subtitles") && track.label === this.selectedTrackLabel) {
-                // Iterate over the cues to extract the transcript text
+            if ((track.kind === "captions" || track.kind === "subtitles") && (!label || track.label === label)) {
                 for (let j = 0; j < track.cues.length; j++) {
                     const cue = track.cues[j];
                     transcript += `${cue.text}\n\n`;
                 }
-            }
-        }
-
-        // If no selected track is found, use other available subtitles
-        if (transcript === "") {
-            for (let i = 0; i < textTracks.length; i++) {
-                const track = textTracks[i];
-                if (track.kind === "captions" || track.kind === "subtitles") {
-                    // Iterate over the cues to extract the transcript text
-                    for (let j = 0; j < track.cues.length; j++) {
-                        const cue = track.cues[j];
-                        transcript += `${cue.text}\n\n`;
-                    }
+                if (label && transcript !== "") {
+                    return transcript;
                 }
             }
         }
+        return transcript;
+    }
 
-        // Create a Blob from the transcript text
-        const blob = new Blob([transcript], { type: "text/plain" });
+    downloadTextAsFile(text: string, filename: string) {
+        const blob = new Blob([text], { type: "text/plain" });
         const url = URL.createObjectURL(blob);
         const a = document.createElement("a");
         a.href = url;
-        a.download = "transcript";
+        a.download = filename;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
     }
-}
\ No newline at end of file
+}
