📺 Video preview controls output if playing

- Fixed video slider time set to 0 sometimes if paused - Fixed audio playlist looping sometimes when it should not - Fixed next after media finished not working for multiple outputs - Fixed output style adding template textbox when slide has none
ChurchApps · Dec 10, 2024 · d8d6980 · d8d6980
1 parent 2543e0b
commit d8d6980
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 74 deletions.
diff --git a/public/lang/en.json b/public/lang/en.json
@@ -413,7 +413,7 @@
         "import": "Import",
         "songbeamer_import": "Songbeamer Import",
         "export": "Export",
-        "importing": "Importing",
+        "importing": "Importing...",
         "import_scripture": "Import scripture",
         "player": "Player",
         "edit_event": "Edit event",
@@ -737,7 +737,7 @@
     "export": {
         "export": "Export",
         "export_as": "Export {} as",
-        "exporting": "Exporting",
+        "exporting": "Exporting...",
         "exported": "Exported!",
         "oneFile": "One file",
         "selected_shows": "Selected shows",

diff --git a/src/frontend/components/helpers/audio.ts b/src/frontend/components/helpers/audio.ts
@@ -467,7 +467,8 @@ function getPlayingAudio() {
                     get(playingAudio)[audioPath].audio.currentTime = 0
                     get(playingAudio)[audioPath].audio.play()
                 } else if (get(activePlaylist)?.active === audioPath) {
-                    let playlist = get(audioPlaylists)[audioPath] || {}
+                    let playlistId = get(activePlaylist).id || ""
+                    let playlist = get(audioPlaylists)[playlistId] || {}
 
                     playingAudio.update((a: any) => {
                         a[audioPath]?.audio?.pause()

diff --git a/src/frontend/components/helpers/output.ts b/src/frontend/components/helpers/output.ts
@@ -526,7 +526,7 @@ export function getCurrentMediaTransition() {
 // TEMPLATE
 
 export function mergeWithTemplate(slideItems: Item[], templateItems: Item[], addOverflowTemplateItems: boolean = false, resetAutoSize: boolean = true) {
-    if (!slideItems) return []
+    if (!slideItems?.length) return []
     slideItems = clone(slideItems)
 
     if (!templateItems.length) return slideItems

diff --git a/src/frontend/components/helpers/showActions.ts b/src/frontend/components/helpers/showActions.ts
@@ -798,13 +798,13 @@ export function playNextGroup(globalGroupIds: string[], { showRef, outSlide, cur
 }
 
 // go to next slide if current output slide has nextAfterMedia action
-let nextActive = false
+let nextActive: string[] = []
 export function checkNextAfterMedia(endedId: string, type: "media" | "audio" | "timer" = "media", outputId: string = "") {
-    if (nextActive) return false
+    if (nextActive.includes(outputId)) return false
 
-    nextActive = true
+    nextActive.push(outputId)
     setTimeout(() => {
-        nextActive = false
+        nextActive.splice(nextActive.indexOf(outputId), 1)
     }, 600) // MAKE SURE NEXT SLIDE HAS TRANSITIONED
 
     if (!outputId) outputId = getActiveOutputs(get(outputs), true, true, true)[0]

diff --git a/src/frontend/components/output/VideoSlider.svelte b/src/frontend/components/output/VideoSlider.svelte
@@ -9,6 +9,7 @@
     export let activeOutputIds: string[] = []
     export let unmutedId: string = ""
     export let toOutput: boolean = false
+    export let big: boolean = false
     export let disabled: boolean = false
     export let changeValue: number = 0
 
@@ -103,7 +104,7 @@
     }}
 />
 
-<div class="main">
+<div class="main" class:big>
     {#if hover}
         <span>
             {time}
@@ -146,6 +147,9 @@
         margin: 0 5px;
         font-size: 0.8em;
     }
+    .main.big {
+        font-size: 1em;
+    }
 
     .slider {
         flex: 1;
@@ -154,4 +158,7 @@
         display: flex;
         align-items: center;
     }
+    .main.big .slider {
+        margin: 0 10px;
+    }
 </style>
diff --git a/src/frontend/components/output/tools/MediaControls.svelte b/src/frontend/components/output/tools/MediaControls.svelte
@@ -12,6 +12,7 @@
 
     export let currentOutput: any
     export let outputId: string
+    export let big: boolean = false
 
     $: videoData = $videosData[outputId] || {}
 
@@ -26,6 +27,7 @@
 
     // custom time update (for player videos)
     onMount(() => {
+        if ($videosTime[outputId]) videoTime = $videosTime[outputId]
         setInterval(() => {
             if (videoData.paused || timeJustUpdated) return
             videoTime++
@@ -89,21 +91,23 @@
 <svelte:window on:keydown={keydown} />
 
 {#if background}
-    <span class="name" on:click={openPreview}>
-        {#if background?.type === "player"}
-            <p>{$playerVideos[background?.id || ""]?.name || "—"}</p>
-        {:else}
-            <p>{mediaName}</p>
-        {/if}
-    </span>
+    {#if !big}
+        <span class="name" on:click={openPreview}>
+            {#if background?.type === "player"}
+                <p>{$playerVideos[background?.id || ""]?.name || "—"}</p>
+            {:else}
+                <p>{mediaName}</p>
+            {/if}
+        </span>
+    {/if}
 
     {#if type === "video" || background?.type === "player"}
-        <span class="group">
+        <span class="group" class:big>
             <Button center title={videoData.paused ? $dictionary.media?.play : $dictionary.media?.pause} disabled={$outLocked} on:click={playPause}>
-                <Icon id={videoData.paused ? "play" : "pause"} white={videoData.paused} size={1.2} />
+                <Icon id={videoData.paused ? "play" : "pause"} white={videoData.paused} size={big ? 1.7 : 1.2} />
             </Button>
 
-            <VideoSlider disabled={$outLocked} {activeOutputIds} bind:videoData bind:videoTime bind:changeValue unmutedId={outputId} toOutput />
+            <VideoSlider disabled={$outLocked} {activeOutputIds} bind:videoData bind:videoTime bind:changeValue unmutedId={outputId} toOutput big />
 
             <Button
                 center
@@ -112,7 +116,7 @@
                     changeValue = Math.max(videoTime - 10, 0.01)
                 }}
             >
-                <Icon id="back_10" white size={1.2} />
+                <Icon id="back_10" white size={big ? 1.4 : 1.2} />
             </Button>
             <Button
                 center
@@ -121,7 +125,7 @@
                     changeValue = Math.min(videoTime + 10, videoData.duration - 0.1)
                 }}
             >
-                <Icon id="forward_10" white size={1.2} />
+                <Icon id="forward_10" white size={big ? 1.4 : 1.2} />
             </Button>
             <Button
                 center
@@ -131,7 +135,7 @@
                     sendToOutput()
                 }}
             >
-                <Icon id="loop" white={!videoData.loop} size={1.2} />
+                <Icon id="loop" white={!videoData.loop} size={big ? 1.4 : 1.2} />
             </Button>
             <Button
                 center
@@ -143,7 +147,7 @@
                     sendToOutput()
                 }}
             >
-                <Icon id={videoData.muted === false ? "volume" : "muted"} white={videoData.muted !== false} size={1.2} />
+                <Icon id={videoData.muted === false ? "volume" : "muted"} white={videoData.muted !== false} size={big ? 1.4 : 1.2} />
             </Button>
         </span>
     {/if}
@@ -159,6 +163,13 @@
         padding: 0.3em !important;
     }
 
+    .group.big {
+        background-color: var(--primary-darkest);
+    }
+    .group.big :global(.slider input) {
+        background-color: var(--primary);
+    }
+
     .name {
         display: flex;
         justify-content: center;