✨ Fixed animation not stopping

- Animations that don't repeat does not need to wait
- Updated Windows menu bar
- More optimized ghost thumbnails

src/frontend/App.svelte

@@ -47,7 +47,7 @@
         <MenuBar />
     {/if}
 
-    <main style={isWindows ? "height: calc(100% - 30px);" : ""} class:closeAd={$closeAd} class:background={$currentWindow === "output"}>
+    <main style={isWindows ? "height: calc(100% - 25px);" : ""} class:closeAd={$closeAd} class:background={$currentWindow === "output"}>
         <ContextMenu />
 
         {#if $currentWindow === "output"}

src/frontend/components/context/menuClick.ts

@@ -32,7 +32,6 @@ import {
     projectView,
     projects,
     refreshEditSlide,
-    saved,
     scriptures,
     selected,
     settingsTab,
@@ -47,7 +46,7 @@ import {
 } from "../../stores"
 import { hideDisplay, newToast } from "../../utils/common"
 import { send } from "../../utils/request"
-import { save } from "../../utils/save"
+import { initializeClosing, save } from "../../utils/save"
 import { updateThemeValues } from "../../utils/updateSettings"
 import { moveStageConnection } from "../actions/apiHelper"
 import { getShortBibleName } from "../drawer/bible/scripture"
@@ -88,10 +87,7 @@ const actions: any = {
         else if (get(activePage) === "settings") settingsTab.set("general")
         activePage.set("settings")
     },
-    quit: () => {
-        if (get(saved)) send(MAIN, ["CLOSE"])
-        else activePopup.set("unsaved")
-    },
+    quit: () => initializeClosing(),
     // view
     fullscreen: () => send(MAIN, ["FULLSCREEN"]),
     // edit

src/frontend/components/helpers/audio.ts

@@ -8,7 +8,6 @@ import { audioAnalyser } from "../output/audioAnalyser"
 import { clone, shuffleArray } from "./array"
 import { encodeFilePath } from "./media"
 import { checkNextAfterMedia } from "./showActions"
-import { newToast } from "../../utils/common"
 
 export async function playAudio({ path, name = "", audio = null, stream = null }: any, pauseIfPlaying: boolean = true, startAt: number = 0, playMultiple: boolean = false, crossfade: number = 0) {
     let existing: any = get(playingAudio)[path]
@@ -664,12 +663,12 @@ export function decodeURI(path: string) {
         return decodeURIComponent(cleanedURI)
     } catch (e) {
         console.error("URI malformed: ", path)
-        newToast("$error.uri")
+        // newToast("$error.uri")
         return path
     }
 }
 function cleanURI(uri) {
-    // only keep valid URI characters
-    const invalidChars = /[^A-Za-z0-9\-_.!~*'()%;:@&=+$,/?#[\]]/g
+    // only keep valid URI characters (and spaces)
+    const invalidChars = /[^ A-Za-z0-9\-_.!~*'()%;:@&=+$,/?#[\]]/g
     return uri.replace(invalidChars, "")
 }

src/frontend/components/helpers/dropActions.ts

@@ -29,6 +29,7 @@ import { getExtension, getFileName, getMediaType, removeExtension } from "./medi
 import { addToPos, getIndexes, mover } from "./mover"
 import { checkName } from "./show"
 import { _show } from "./shows"
+import { decodeURI } from "./audio"
 
 function getId(drag: any): string {
     let id: string = ""
@@ -116,11 +117,11 @@ export const dropActions: any = {
                     let type: string = getMediaType(extension)
 
                     let name: string = a.name || getFileName(a.path)
-                    return { name: removeExtension(name), id: a.path, type }
+                    return { name: decodeURI(removeExtension(name)), id: a.path, type }
                 })
                 .filter((a: any) => a)
         } else if (drag.id === "audio") {
-            data = data.map((a: any) => ({ id: a.path, name: removeExtension(a.name), type: "audio" }))
+            data = data.map((a: any) => ({ id: a.path, name: decodeURI(removeExtension(a.name)), type: "audio" }))
         } else if (drag.id === "player") {
             data = data.map((a: any) => ({ id: a, type: "player" }))
         } else if (drag.id === "scripture") {
@@ -284,7 +285,7 @@ const slideDrop: any = {
                 if (files[drop.id].includes(extension)) {
                     data.push({
                         path: a.path,
-                        name: removeExtension(a.name),
+                        name: decodeURI(removeExtension(a.name)),
                         type: getMediaType(extension),
                     })
                 }

src/frontend/components/helpers/media.ts

@@ -153,7 +153,8 @@ export function getThumbnailPath(input: string, size: number) {
     let loadedPath = get(loadedMediaThumbnails)[getThumbnailId({ input, size })]
     if (loadedPath) return loadedPath
 
-    return joinPath([get(tempPath), getFileName(hashCode(input), size)])
+    let encodedPath: string = joinPath([get(tempPath), "freeshow-cache", getFileName(hashCode(input), size)])
+    return encodedPath
 
     function getFileName(path, size) {
         return `${path}-${size}.jpg`

src/frontend/components/main/MenuBar.svelte

@@ -15,7 +15,7 @@
     let activeID: null | string = null
     let activeMenu: string[] = []
     let x: number = 0
-    let y: number = 30
+    let y: number = 25
 
     $: maximized = !!$windowState.maximized
 
@@ -71,13 +71,13 @@
     </div>
     <div class="window">
         <Button on:click={() => window.api.send(MAIN, { channel: "MINIMIZE" })} center>
-            <Icon id="remove" size={1.4} white />
+            <Icon id="remove" size={1.2} white />
         </Button>
         <Button on:click={() => window.api.send(MAIN, { channel: "MAXIMIZE" })} style="transform: rotate(180deg);" center>
-            <Icon id={maximized ? "maximized" : "unmaximized"} size={maximized ? 1 : 1.1} white />
+            <Icon id={maximized ? "maximized" : "unmaximized"} size={maximized ? 0.8 : 0.9} white />
         </Button>
         <Button id="close" on:click={initializeClosing} center>
-            <Icon id="close" size={1.4} white />
+            <Icon id="close" size={1.2} white />
         </Button>
     </div>
 </main>
@@ -93,7 +93,8 @@
         display: flex;
         justify-content: space-between;
         background-color: var(--primary-darkest);
-        height: 30px;
+        font-size: 0.9em;
+        height: 25px;
         -webkit-app-region: drag;
     }
 
@@ -104,7 +105,7 @@
     }
 
     .window :global(button) {
-        width: 60px;
+        width: 48px;
     }
 
     /* close */

src/frontend/components/output/Output.svelte

@@ -134,14 +134,21 @@
 
     // ANIMATE
     let animationData: any = {}
-    $: currentAnimationId = ""
+    let currentAnimationId = ""
     $: slideAnimation = slideData?.actions?.animate || {}
 
+    $: if (slide) stopAnimation()
+    onDestroy(stopAnimation)
+    function stopAnimation() {
+        animationData = {}
+        currentAnimationId = ""
+    }
+
+    // TODO: play slide animations on each textbox so animation can continue while transitioning
     $: if (slideAnimation) initializeAnimation()
     async function initializeAnimation() {
         if (!Object.keys(slideAnimation).length) {
-            animationData = {}
-            currentAnimationId = ""
+            stopAnimation()
             return
         }
 
@@ -167,8 +174,16 @@
             if (currentAnimationId !== currentId) return
 
             animationData = await updateAnimation(animationData, currentIndex, slide)
+            if (currentAnimationId !== currentId) {
+                animationData = {}
+                return
+            }
 
             if (typeof animationData.newIndex !== "number") return
+
+            // stop if ended & not repeating
+            if (!animationData.animation.repeat && !animationData.animation.actions[animationData.newIndex]) return
+
             animate(animationData.newIndex)
         }
     }

src/frontend/components/output/animation.ts

@@ -3,6 +3,8 @@ import { wait } from "../../utils/common"
 import { clone } from "../helpers/array"
 
 export async function updateAnimation(animationData: any, currentIndex: number, outSlide: any) {
+    console.log(animationData, currentIndex)
+
     // give time for initial element & prevent infinite loops
     if (currentIndex === 0) await wait(50)
 

src/frontend/components/show/tools/Media.svelte

@@ -200,7 +200,7 @@
                             <MediaLoader name={background.name} path={background.path} thumbnailPath={bgPath} type={background.type} {mediaStyle} />
                         </HoverButton>
 
-                        <p title={background.path}>{background.name}</p>
+                        <p title={decodeURI(background.path)}>{background.name}</p>
 
                         {#if background.count > 1}
                             <span style="color: var(--secondary);font-weight: bold;">{background.count}</span>

src/frontend/components/slide/Slide.svelte

@@ -25,6 +25,7 @@
     } from "../../stores"
     import { wait } from "../../utils/common"
     import { send } from "../../utils/request"
+    import { slideHasAction } from "../actions/actions"
     import MediaLoader from "../drawer/media/MediaLoader.svelte"
     import Editbox from "../edit/editbox/Editbox.svelte"
     import { getItemText } from "../edit/scripts/textStyle"
@@ -38,7 +39,6 @@
     import Icons from "./Icons.svelte"
     import Textbox from "./Textbox.svelte"
     import Zoomed from "./Zoomed.svelte"
-    import { slideHasAction } from "../actions/actions"
 
     export let slide: Slide
     export let layoutSlide: SlideData
@@ -146,7 +146,9 @@
     async function loadBackground() {
         if (ghostBackground) {
             await wait(100)
-            thumbnailPath = getThumbnailPath(bgPath, mediaSize.slideSize)
+            // will not load if not opened in the drawer (but original image will then be loaded)
+            thumbnailPath = getThumbnailPath(bgPath, mediaSize.drawerSize)
+            // thumbnailPath = await loadThumbnail(bgPath, mediaSize.drawerSize)
             return
         }