From d8d698012f0ada4f85547fb6fa4f632d7b8447f2 Mon Sep 17 00:00:00 2001
From: Kristoffer <kristoffervassbo@gmail.com>
Date: Tue, 10 Dec 2024 13:34:47 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=BA=20Video=20preview=20controls=20out?=
 =?UTF-8?q?put=20if=20playing=20-=20Fixed=20video=20slider=20time=20set=20?=
 =?UTF-8?q?to=200=20sometimes=20if=20paused=20-=20Fixed=20audio=20playlist?=
 =?UTF-8?q?=20looping=20sometimes=20when=20it=20should=20not=20-=20Fixed?=
 =?UTF-8?q?=20next=20after=20media=20finished=20not=20working=20for=20mult?=
 =?UTF-8?q?iple=20outputs=20-=20Fixed=20output=20style=20adding=20template?=
 =?UTF-8?q?=20textbox=20when=20slide=20has=20none?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/lang/en.json                           |   4 +-
 src/frontend/components/helpers/audio.ts      |   3 +-
 src/frontend/components/helpers/output.ts     |   2 +-
 .../components/helpers/showActions.ts         |   8 +-
 .../components/output/VideoSlider.svelte      |   9 +-
 .../output/tools/MediaControls.svelte         |  39 +++--
 src/frontend/components/show/VideoShow.svelte | 136 ++++++++++++------
 src/frontend/utils/receivers.ts               |   8 +-
 8 files changed, 135 insertions(+), 74 deletions(-)

diff --git a/public/lang/en.json b/public/lang/en.json
index d37ea38a..5c021cc3 100644
--- 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
index 46cfea5a..12ef42b8 100644
--- 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
index e5243549..a5465372 100644
--- 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
index 92b0fd6c..27156371 100644
--- 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
index 8a0c0413..7b22d3fa 100644
--- 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
index 82a43193..dcd25087 100644
--- 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;
diff --git a/src/frontend/components/show/VideoShow.svelte b/src/frontend/components/show/VideoShow.svelte
index 953e5afb..6e4d8870 100644
--- a/src/frontend/components/show/VideoShow.svelte
+++ b/src/frontend/components/show/VideoShow.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { MediaStyle } from "../../../types/Main"
-    import { activeProject, activeRename, dictionary, focusMode, outLocked, outputs, playingVideos, projects, videoMarkers, volume } from "../../stores"
+    import { activeProject, activeRename, dictionary, focusMode, outLocked, outputs, playingVideos, projects, videoMarkers, videosData, videosTime, volume } from "../../stores"
     import Icon from "../helpers/Icon.svelte"
     import T from "../helpers/T.svelte"
     import { analyseAudio, getAnalyser } from "../helpers/audio"
@@ -10,10 +10,18 @@
     import HiddenInput from "../inputs/HiddenInput.svelte"
     import HoverButton from "../inputs/HoverButton.svelte"
     import VideoSlider from "../output/VideoSlider.svelte"
+    import MediaControls from "../output/tools/MediaControls.svelte"
     import Player from "../system/Player.svelte"
 
     export let show
 
+    $: showId = show?.id
+    $: type = show?.type
+
+    // show updates when videoTime updates for some reason?
+    // $: console.trace(show)
+    // $: console.trace(videoTime)
+
     export let mediaStyle: MediaStyle = {}
 
     let videoTime: number = 0
@@ -24,30 +32,59 @@
         loop: false,
     }
     $: if (!videoData) videoData = { paused: false, muted: true, duration: 0, loop: false }
+    $: if (playingInOutput && $videosData[outputId]) setVideoData()
+    $: if (playingInOutput && $videosData[outputId]?.paused && !videoData.paused) setPaused()
+    function setPaused() {
+        videoData.paused = true
+        // trigger time update
+        videoTime = 0
+    }
+    function setVideoData() {
+        videoData = { ...$videosData[outputId], muted: true }
+    }
 
     let prevId: string | undefined = undefined
-    $: if (show?.id !== prevId) {
+    $: if (showId !== prevId) {
         videoTime = 0
         autoPause = true
-        prevId = show?.id
+        prevId = showId
 
-        timeMarkersEnabled = !!$videoMarkers[show.id]?.length || false
+        timeMarkersEnabled = !!$videoMarkers[showId]?.length || false
     }
 
-    $: currentOutput = $outputs[getActiveOutputs()[0]]
+    $: outputId = getActiveOutputs($outputs, false, true, true)[0]
+    $: currentOutput = $outputs[outputId]
 
     // outBackground.subscribe(backgroundChanged)
     $: background = currentOutput?.out?.background || {}
-    $: if (JSON.stringify(background) !== JSON.stringify(currentOutput?.out?.background || {})) backgroundChanged()
+    $: if (background || showId) backgroundChanged()
+    let playingInOutput: boolean = false
     function backgroundChanged() {
-        background = currentOutput?.out?.background || {}
-        if (background === null || background.path !== show?.id || videoData.paused) return
-        if (background.type !== undefined || background.type !== "media") return
+        // background = currentOutput?.out?.background || {}
+        // || videoData.paused
+        if (background === null || (background.path || background.id) !== showId) {
+            playingInOutput = false
+            return
+        }
+        // if (background.type !== "media" && background.type !== "video") return
+
         autoPause = true
-        videoData.paused = true
+        // videoData.paused = true
+        playingInOutput = true
+
+        // trigger time update
+        setTimeout(() => (videoTime = 0), 50)
+    }
+    $: if (playingInOutput && Math.abs(videoTime - $videosTime[outputId]) > 1) updateVideoTime()
+    function updateVideoTime() {
+        // get and set actual time
+        videoTime = $videosTime[outputId]
     }
 
-    $: if (background.path === show?.id && autoPause) videoData.paused = true
+    // WIP toggle between output/preview video...
+    // WIP player video output time
+
+    // $: if (background.path === showId && autoPause) videoData.paused = true
 
     let autoPause: boolean = true
     let hasLoaded: boolean = false
@@ -57,6 +94,7 @@
 
     function onLoad() {
         hasLoaded = true
+        if (videoData.paused) return
 
         if ($focusMode) {
             // set right after loaded
@@ -72,7 +110,7 @@
     }
 
     // player
-    $: if (show.type === "player") playerLoad()
+    $: if (type === "player") playerLoad()
     function playerLoad() {
         if (!$focusMode) return
 
@@ -87,29 +125,29 @@
     async function onPlay() {
         // autoPause = false
         if (hasLoaded) {
-            videoTime = 0
+            if (!playingInOutput) videoTime = 0
             hasLoaded = false
 
             let analyser = await getAnalyser(video)
             if (!analyser) return
 
             playingVideos.update((a) => {
-                a.push({ id: show!.id, location: "preview", analyser })
+                a.push({ id: showId, location: "preview", analyser })
                 return a
             })
             analyseAudio()
         }
     }
-    $: if (videoData) {
-        playingVideos.update((a) => {
-            let existing = a.findIndex((a) => a.id === show?.id && a.location === "preview")
-            if (existing > -1) {
-                a[existing].paused = videoData.muted ? true : videoData.paused
-                if (!a[existing].paused) analyseAudio()
-            }
-            return a
-        })
-    }
+    // $: if (videoData) {
+    //     playingVideos.update((a) => {
+    //         let existing = a.findIndex((a) => a.id === showId && a.location === "preview")
+    //         if (existing > -1) {
+    //             a[existing].paused = videoData.muted ? true : videoData.paused
+    //             if (!a[existing].paused) analyseAudio()
+    //         }
+    //         return a
+    //     })
+    // }
 
     function keydown(e: any) {
         if (e.target.closest("input") || e.target.closest(".edit")) return
@@ -117,23 +155,23 @@
         let output = $outputs[getActiveOutputs()[0]] || {}
         let outputPath = output.out?.background?.path
 
-        if (e.key === " " && !$focusMode && show && (!outputPath || outputPath !== show.id)) {
+        if (e.key === " " && !$focusMode && show && (!outputPath || outputPath !== showId)) {
             e.preventDefault()
-            if ((show!.type === "video" && outputPath !== show.id) || (show!.type === "player" && output.out?.background?.id !== show.id)) playVideo()
-            else if (show!.type === "image" && !$outLocked) setOutput("background", { path: show?.id, ...mediaStyle })
+            if ((type === "video" && outputPath !== showId) || (type === "player" && output.out?.background?.id !== showId)) playVideo()
+            else if (type === "image" && !$outLocked) setOutput("background", { path: showId, ...mediaStyle })
             // TODO: this will play first slide
-            // else if (show.type === "section") goToNextProjectItem()
+            // else if (type === "section") goToNextProjectItem()
         }
     }
 
     function playVideo(startAt: number = 0) {
         if ($outLocked) return
 
-        let bg: any = { type: show!.type, startAt, muted: false, loop: false, ...mediaStyle }
+        let bg: any = { type: type, startAt, muted: false, loop: false, ...mediaStyle }
 
-        if (show!.type === "player") bg.id = show!.id
+        if (type === "player") bg.id = showId
         else {
-            bg.path = show!.id
+            bg.path = showId
             // if (filter) data.filter = filter
         }
 
@@ -155,15 +193,15 @@
         videoMarkers.update((a) => {
             const newMarker = { name: "", time: Math.floor(videoTime || 0) }
 
-            if (a[show.id]?.find((a) => a.time === newMarker.time)) return a
+            if (a[showId]?.find((a) => a.time === newMarker.time)) return a
 
-            if (!a[show.id]) a[show.id] = []
-            a[show.id].push(newMarker)
+            if (!a[showId]) a[showId] = []
+            a[showId].push(newMarker)
 
             // sort by time
-            a[show.id] = a[show.id].sort((a, b) => a.time - b.time)
+            a[showId] = a[showId].sort((a, b) => a.time - b.time)
 
-            let markerIndex = a[show.id].findIndex((a) => a.time === newMarker.time)
+            let markerIndex = a[showId].findIndex((a) => a.time === newMarker.time)
             activeRename.set("marker_" + markerIndex)
 
             return a
@@ -177,7 +215,7 @@
         if (currentMarker === undefined) return
 
         videoMarkers.update((a) => {
-            a[show.id][currentMarker].name = e.detail.value
+            a[showId][currentMarker].name = e.detail.value
 
             return a
         })
@@ -198,17 +236,17 @@
 
 <svelte:window on:keydown={keydown} />
 
-{#key show.id}
+{#key showId}
     <div class="media context #media_preview" style="flex: 1;overflow: hidden;">
         <!-- TODO: info about: CTRL click to play at current pos -->
         <HoverButton icon="play" size={10} on:click={(e) => playVideo(e.ctrlKey || e.metaKey ? videoTime : 0)} title={$dictionary.media?.play}>
-            {#if show.type === "player"}
-                <Player id={show.id} bind:videoData bind:videoTime preview />
+            {#if type === "player"}
+                <Player id={showId} bind:videoData bind:videoTime preview />
             {:else}
                 <!-- TODO: on:error={videoError} - ERR_FILE_NOT_FOUND -->
                 <video
                     style="width: 100%;height: 100%;filter: {mediaStyle.filter || ''};transform: scale({mediaStyle.flipped ? '-1' : '1'}, {mediaStyle.flippedY ? '-1' : '1'});"
-                    src={show.id}
+                    src={showId}
                     on:loadedmetadata={onLoad}
                     on:playing={onPlay}
                     bind:this={video}
@@ -223,11 +261,12 @@
             {/if}
         </HoverButton>
     </div>
-    {#if timeMarkersEnabled}
+
+    {#if playingInOutput ? $videoMarkers[showId]?.length : timeMarkersEnabled}
         <div class="buttons" style="display: flex;">
             <div class="markers">
-                {#if $videoMarkers[show.id]?.length}
-                    {#each $videoMarkers[show.id] as marker, i}
+                {#if $videoMarkers[showId]?.length}
+                    {#each $videoMarkers[showId] as marker, i}
                         <Button
                             class="context #video_marker"
                             id={i}
@@ -251,7 +290,7 @@
                 {/if}
             </div>
 
-            {#if previewControls}
+            {#if previewControls && !playingInOutput}
                 <Button on:click={addMarker}>
                     <Icon id="add" right />
                     <p><T id="actions.add_time_marker" /></p>
@@ -259,7 +298,10 @@
             {/if}
         </div>
     {/if}
-    {#if previewControls}
+
+    {#if playingInOutput}
+        <MediaControls {currentOutput} {outputId} big />
+    {:else if previewControls}
         <div class="buttons" style="display: flex;">
             <Button
                 style="flex: 0;"
@@ -280,7 +322,7 @@
                 <Icon id="timeMarker" white={!timeMarkersEnabled} size={1.2} />
             </Button>
         </div>
-    {:else if !$focusMode}
+    {:else if !$focusMode && !playingInOutput}
         <Button on:click={() => (previewControls = true)} style="background-color: var(--primary-darkest);" center dark>
             <Icon id="eye" right />
             <T id="preview.enable_controls" />
diff --git a/src/frontend/utils/receivers.ts b/src/frontend/utils/receivers.ts
index 1b305519..b6341408 100644
--- a/src/frontend/utils/receivers.ts
+++ b/src/frontend/utils/receivers.ts
@@ -290,7 +290,7 @@ const receiveFILE = {
 
 // OUTPUT
 
-let clearing: boolean = false
+let clearing: string[] = []
 const receiveOUTPUTasMAIN: any = {
     BUFFER: ({ id, time, buffer, size }) => {
         // this will infinitely increace if this is not in place
@@ -350,9 +350,9 @@ const receiveOUTPUTasMAIN: any = {
     MAIN_DATA: (msg: any) => videosData.update((a) => ({ ...a, ...msg })),
     MAIN_TIME: (msg: any) => videosTime.update((a) => ({ ...a, ...msg })),
     MAIN_VIDEO_ENDED: async (msg) => {
-        if (!msg || clearing) return
-        clearing = true
-        setTimeout(() => (clearing = false), msg.duration || 1000)
+        if (!msg || clearing.includes(msg.id)) return
+        clearing.push(msg.id)
+        setTimeout(() => clearing.splice(clearing.indexOf(msg.id), 1), msg.duration || 1000)
 
         let videoPath: string = get(outputs)[msg.id]?.out?.background?.path || get(outputs)[msg.id]?.out?.background?.id || ""
         if (!videoPath) return