Update mobile transcript modal

web/template/partial/stream/transcript.gohtml

@@ -1,26 +1,28 @@
 {{define "transcript-modal"}}
-    <div x-data="{transcriptController: new watch.TranscriptController(), isOutOfSync: false}"
-         class="relative h-full border rounded-lg dark:border-gray-800 flex flex-col items-center justify-center">
-        <div class="h-full w-full max-w-3xl">
+    <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">
                 <div class="flex items-center space-x-2">
-                    <h3 class="font-bold text-sm text-xl text-3">Transcript</h3>
+                    <h3 class="font-bold text-sm md:text-xl text-3">Transcript</h3>
                     <span class="text-xs font-semibold text-white bg-red-500 rounded-full px-2 py-1 italic">beta</span>
                 </div>
                 <button type="button" title="Download transcript file"
-                        class="text-3 text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full px-2 py-1"
+                        class="text-3 text-xs md:text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full px-2 py-1"
                         @click="transcriptController.downloadTranscript()">
                     Export transcript
                 </button>
             </div>
-            {{template "transcript-list" .}}
-            <div class="w-full flex items-center justify-center" x-show="isOutOfSync">
+            <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>
     </div>
 {{end}}
@@ -30,8 +32,8 @@
          x-data="{ transcriptController: new watch.TranscriptController(), transcript: [] }"
          x-init="() => { transcriptController.init('transcript-list', $el);}"
          @update="(e) => (transcript = e.detail)"
-         class="h-[85%] w-full max-w-3xl mx-auto transcript-container">
-        <div class="relative grid gap-1 overflow-y-scroll pr-3 max-h-full">
+         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">

web/template/watch.gohtml

@@ -426,11 +426,20 @@
 
         <!-- Transcript -->
         <div id="transcript-desktop" x-cloak="" x-show="sidebar === watch.SidebarState.Transcript"
-                :class="sidebar === watch.SidebarState.Transcript ? 'lg:basis-1/4' : 'lg:basis-0'"
-                class="hidden md:block basis-full h-16/9 lg:h-16/6 px-5 md:px-2 lg:order-none order-4">
+            :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}}
         </div>
 
+        <!-- Scroll to Top Button -->
+        <button x-data="{ showScrollUp: false }"
+                x-show="showScrollUp"
+                @click="watch.pauseVideo();window.scrollTo({ top: 0, behavior: 'smooth' }); "
+                class="fixed bottom-4 right-4 md:hidden bg-blue-500 text-white rounded-full p-2 shadow-lg z-50"
+                @scroll.window="showScrollUp = (window.scrollY > 200)">
+            <i class="fa-solid fa-arrow-up"></i>
+        </button>
+
         <!-- Streams -->
         {{if .IndexData.TUMLiveContext.User}}
             <div id="streams-box" x-cloak="" x-show="sidebar === watch.SidebarState.Streams"
@@ -482,20 +491,20 @@
 
                         {{if .IndexData.TUMLiveContext.User}}
                             <button @click="sidebar = (sidebar === watch.SidebarState.Bookmarks ? watch.SidebarState.Hidden : watch.SidebarState.Bookmarks)"
-                                    class="rounded-lg px-4 py-2 h-fit w-fit bg-gray-100 hover:bg-gray-200 dark:bg-secondary-light dark:hover:bg-gray-600"
+                                    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="'New Bookmark'">
                                 <i class="fa-solid fa-bookmark text-4"></i>
                             </button>
                         {{end}}
 
                         <button @click="sidebar = (sidebar === watch.SidebarState.Transcript ? watch.SidebarState.Hidden : watch.SidebarState.Transcript)"
-                                class="rounded-lg px-4 py-2 h-fit w-fit bg-gray-100 hover:bg-gray-200 dark:bg-secondary-light dark:hover:bg-gray-600"
+                                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>
                         </button>
 
                         <button @click="showShare = true;"
-                                class="rounded-lg px-4 py-2 h-fit w-fit bg-gray-100 hover:bg-gray-200 dark:bg-secondary-light dark:hover:bg-gray-600"
+                                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="'Share'">
                             <i class="fa-solid fa-share text-4"></i>
                         </button>

web/ts/data-store/data-store.ts

@@ -1,12 +1,10 @@
 import { VideoSectionProvider } from "./video-sections";
 import { BookmarksProvider } from "./bookmarks";
-import { TranscriptProvider } from "./transcript";
 import { StreamPlaylistProvider } from "./stream-playlist";
 import { AdminLectureListProvider } from "./admin-lecture-list";
 
 export abstract class DataStore {
     static bookmarks: BookmarksProvider = new BookmarksProvider();
-    static transcript: TranscriptProvider = new TranscriptProvider();
     static videoSections: VideoSectionProvider = new VideoSectionProvider();
     static streamPlaylist: StreamPlaylistProvider = new StreamPlaylistProvider();
 

web/ts/watch.ts

@@ -133,6 +133,11 @@ export class ShareURL {
     }
 }
 
+export function pauseVideo() {
+    const player = getPlayers()[0];
+    player.pause();
+}
+
 export { repeatHeatMap } from "./repeat-heatmap";
 export { seekbarHighlights, MarkerType } from "./seekbar-highlights";
 export { seekbarOverlay, SeekbarHoverPosition } from "./seekbar-overlay";