v1.2.2 (#702)

* 📦 Fixed publisherName sign issue

* Made preview video time syncing less agressive (#701)

* ✔ Layout background is also copied when dragging slide to another show
- Fixed freeze when using "Verses on individual lines"

* ✔ Fixed preview stutter on video loop

* ✔ Many fixes
- Fixed scripture auto size when transition was disabled
- Fixed some slide actions removed when using multiple outputs
- Fixed text align resetting caret
- Pasting with multiple lines should set caret at the last line!
- Fixed output style not updating layer
- Setting output style background with disabled background will always use that
- Template background will be applied in output
- Fixed slide transition not working

---------

Co-authored-by: Jeremy Zongker <jeremy@zongker.net>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "freeshow",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "private": true,
     "main": "build/electron/index.js",
     "description": "Show song lyrics and more for free!",
@@ -116,8 +116,7 @@
         },
         "win": {
             "target": "NSIS",
-            "icon": "build/public/icon.png",
-            "publisherName": "FreeShow"
+            "icon": "build/public/icon.png"
         }
     },
     "devDependencies": {

src/electron/preload.ts

@@ -11,7 +11,7 @@ import type { ValidChannels } from "../types/Channels"
 // wait to log messages until after intial load is done
 let appLoaded: boolean = false
 const LOG_MESSAGES: boolean = process.env.NODE_ENV !== "production"
-const filteredChannels: any[] = ["AUDIO_MAIN", "VIZUALISER_DATA", "STREAM", "BUFFER", "REQUEST_STREAM", "MAIN_TIME", "GET_THUMBNAIL"]
+const filteredChannels: any[] = ["AUDIO_MAIN", "VIZUALISER_DATA", "STREAM", "BUFFER", "REQUEST_STREAM", "MAIN_TIME", "GET_THUMBNAIL", "ACTIVE_TIMERS"]
 
 let storedReceivers: any = {}
 

src/frontend/components/drawer/bible/scripture.ts

@@ -136,14 +136,16 @@ export function getSlides({ bibles, sorted }) {
         let slideIndex: number = 0
         slides[slideIndex].push(clone(emptyItem))
 
+        let verseLine = 0
         sorted.forEach((s: any, i: number) => {
             let slideArr: any = slides[slideIndex][bibleIndex]
             if (!slideArr?.lines[0]?.text) return
 
             let lineIndex: number = 0
             // verses on individual lines
             if (get(scriptureSettings).versesOnIndividualLines) {
-                lineIndex = i
+                lineIndex = verseLine
+                verseLine++
                 if (!slideArr.lines![lineIndex]) slideArr.lines![lineIndex] = { text: [], align: alignStyle }
             }
 
@@ -233,6 +235,7 @@ export function getSlides({ bibles, sorted }) {
             if (i + 1 >= sorted.length) return
 
             slideIndex++
+            verseLine = 0
             if (!slides[slideIndex]) slides.push([clone(emptyItem)])
             else slides[slideIndex].push(clone(emptyItem))
         })

src/frontend/components/edit/editbox/EditboxLines.svelte

@@ -56,6 +56,7 @@
         let lineBg = item.specialStyle?.lineBg ? `background-color: ${item.specialStyle.lineBg};` : ""
         item?.lines?.forEach((line) => {
             let align = line.align.replaceAll(lineBg, "")
+            if (align && !align.endsWith(";")) align += ";"
             s += align + lineBg
             line.text?.forEach((a) => {
                 s += EditboxHelper.getTextStyle(a)
@@ -64,6 +65,7 @@
 
         // dont replace while typing
         // && (window.getSelection() === null || window.getSelection()!.type === "None")
+        console.log(currentStyle !== s, currentStyle, s)
         if (currentStyle !== s) getStyle()
     }
 
@@ -466,7 +468,8 @@
 
             if (pastingIndex < 0) {
                 pastingIndex = lineIndex
-                caret = { line: pastingIndex, pos: lineSel.start + clipboard.length }
+                let lastPastedLine = pastingIndex + (clipboard.split("\n").length - 1)
+                caret = { line: lastPastedLine, pos: lineSel.start + clipboard.length }
             }
 
             let lineText: any[] = []

src/frontend/components/helpers/dropActions.ts

@@ -450,12 +450,14 @@ const slideDrop: any = {
         let layoutId: string = _show().get("settings.activeLayout")
 
         let slides: any = clone(get(showsCache)[get(activeShow)!.id].slides)
+        let media: any = clone(get(showsCache)[get(activeShow)!.id].media || {})
         let layout: any[] = _show().layouts([layoutId]).slides().get()[0]
 
         if (drop.index === undefined) drop.index = layout.length
         let newIndex: number = drop.index
 
-        drag.data.forEach(({ slide, layoutData }: any) => {
+        let newMedia: any = media
+        drag.data.forEach(({ slide, layoutData, media }: any) => {
             let id = uid()
             delete slide.id
             slides[id] = clone(slide)
@@ -466,11 +468,12 @@ const slideDrop: any = {
             // add layout data (if dragging a slide to another show)
             let newLayout = { id }
             if (layoutData) newLayout = { ...layoutData, id }
+            if (media) newMedia = { ...newMedia, ...media }
 
             layout = addToPos(layout, [newLayout], parent.index + 1)
         })
 
-        history.newData = { slides, layout }
+        history.newData = { slides, layout, media: newMedia }
         history.location.layout = layoutId
         return history
     },

src/frontend/components/helpers/history.ts

@@ -120,6 +120,7 @@ export function history(obj: History, undo: null | boolean = null) {
                 old = {
                     slides: _show(showID).set({ key: "slides", value: obj.newData.slides }),
                     layout: _show(showID).layouts([obj.location!.layout!]).set({ key: "slides", value: obj.newData.layout })[0]?.value,
+                    media: _show(showID).set({ key: "media", value: obj.newData.media }),
                 }
                 break
 

src/frontend/components/helpers/output.ts

@@ -621,13 +621,20 @@ export function getOutputTransitions(slideData: any, transitionData: any, disabl
     return clone(transitions)
 }
 
-export function setTemplateStyle(outSlide: any, currentStyle: any, items: Item[]) {
-    let isScripture = outSlide?.id === "temp"
-    let slideItems = isScripture ? outSlide.tempItems : items
-    if (_show(outSlide?.id).get("reference")?.type === "scripture") isScripture = true
+export function getStyleTemplate(outSlide: any, currentStyle: any) {
+    let isScripture = outSlide?.id === "temp" || _show(outSlide?.id).get("reference")?.type === "scripture"
 
     let templateId = currentStyle[`template${isScripture ? "Scripture" : ""}`]
     let template = get(templates)[templateId || ""] || {}
+
+    return template
+}
+
+export function setTemplateStyle(outSlide: any, currentStyle: any, items: Item[]) {
+    let isDrawerScripture = outSlide?.id === "temp"
+    let slideItems = isDrawerScripture ? outSlide.tempItems : items
+
+    let template = getStyleTemplate(outSlide, currentStyle)
     let templateItems = template.items || []
 
     let newItems = mergeWithTemplate(slideItems, templateItems, true) || []

src/frontend/components/helpers/showActions.ts

@@ -535,6 +535,8 @@ export function updateOut(showId: string, index: number, layout: any, extra: boo
 
 const runPerOutput = ["clear_background", "clear_overlays"]
 function playSlideActions(actions: any[], outputIds: string[] = [], slideIndex: number = -1) {
+    actions = clone(actions)
+
     // run these actions on each active output
     if (outputIds.length > 1) {
         runPerOutput.forEach((id) => {

src/frontend/components/output/Output.svelte

@@ -10,7 +10,7 @@
     import { destroy, receive, send } from "../../utils/request"
     import Draw from "../draw/Draw.svelte"
     import { clone } from "../helpers/array"
-    import { OutputMetadata, decodeExif, defaultLayers, getCurrentStyle, getMetadata, getOutputLines, getOutputTransitions, getResolution, getSlideFilter, joinMetadata, setTemplateStyle } from "../helpers/output"
+    import { OutputMetadata, decodeExif, defaultLayers, getCurrentStyle, getMetadata, getOutputLines, getOutputTransitions, getResolution, getSlideFilter, getStyleTemplate, joinMetadata, setTemplateStyle } from "../helpers/output"
     import { _show } from "../helpers/shows"
     import Zoomed from "../slide/Zoomed.svelte"
     import { updateAnimation } from "./animation"
@@ -41,7 +41,11 @@
     let clonedOverlays: any = {}
 
     // don't update when layer content changes, only when refreshing or adding/removing layer
-    $: if (JSON.stringify(layers) !== JSON.stringify(currentStyle.layers || defaultLayers)) layers = clone(currentStyle.layers || defaultLayers)
+    // currentOutput is set to refresh state when changed in preview
+    $: if (currentOutput && JSON.stringify(layers) !== JSON.stringify(currentStyle.layers || defaultLayers)) setNewLayers()
+    function setNewLayers() {
+        layers = clone(currentStyle.layers || defaultLayers)
+    }
     $: if (JSON.stringify(out) !== JSON.stringify(currentOutput?.out || {})) out = clone(currentOutput?.out || {})
 
     $: if (JSON.stringify(slide) !== JSON.stringify(out.slide || null)) updateOutData("slide")
@@ -114,9 +118,16 @@
     $: slideFilter = getSlideFilter(slideData)
 
     // custom template
+    // WIP revert to old style when output style is reverted to no style (REFRESH OUTPUT)
     $: outputStyle = currentOutput?.style
-    $: if (currentSlide && outputStyle && currentStyle) setTemplateItems()
+    // currentSlide is so the background updates when scripture is removed (if template background on both) - not changed in preview
+    $: if (outputStyle && currentStyle && currentSlide !== undefined) {
+        if (currentSlide) setTemplateItems()
+        getTemplateBackground()
+    }
     const setTemplateItems = () => (currentSlide.items = setTemplateStyle(slide, currentStyle, currentSlide.items))
+    let templateBackground = ""
+    const getTemplateBackground = () => (templateBackground = getStyleTemplate(slide, currentStyle).settings?.backgroundPath || "")
 
     // lines
     let lines: any = {}
@@ -207,13 +218,25 @@
     $: messageText = $showsCache[slide?.id]?.message?.text || ""
     $: metadataValue = metadata.value?.length && (metadata.display === "always" || (metadata.display?.includes("first") && slide?.index === 0) || (metadata.display?.includes("last") && slide?.index === currentLayout.length - 1))
     $: styleBackground = currentStyle?.clearStyleBackgroundOnText && slide ? "" : currentStyle?.backgroundImage || ""
-    $: backgroundData = background || { path: styleBackground, loop: true, ...($media[styleBackground] || {}) }
+    $: styleBackgroundData = { path: styleBackground, loop: true, ...($media[styleBackground] || {}) }
+    $: templateBackgroundData = { path: templateBackground, loop: true, ...($media[templateBackground] || {}) }
+    $: backgroundData = templateBackground ? templateBackgroundData : background || styleBackgroundData
 </script>
 
 <Zoomed id={outputId} background={backgroundColor} backgroundDuration={transitions.media?.duration || 800} center {style} {resolution} {mirror} cropping={currentStyle.cropping} bind:ratio>
     <!-- background -->
-    {#if layers.includes("background") || currentStyle?.backgroundImage}
-        <Background data={backgroundData} {outputId} transition={transitions.media} {currentStyle} {slideFilter} {ratio} {isKeyOutput} animationStyle={animationData.style?.background || ""} mirror={isKeyOutput || mirror} />
+    {#if layers.includes("background") || styleBackground}
+        <Background
+            data={layers.includes("background") ? backgroundData : styleBackgroundData}
+            {outputId}
+            transition={transitions.media}
+            {currentStyle}
+            {slideFilter}
+            {ratio}
+            {isKeyOutput}
+            animationStyle={animationData.style?.background || ""}
+            mirror={isKeyOutput || mirror}
+        />
     {/if}
 
     <!-- "underlays" -->

src/frontend/components/output/layers/BackgroundMedia.svelte

@@ -59,7 +59,19 @@
     $: if (mirror && $videosData[outputId]?.paused) videoData.paused = true
     $: if (mirror && $videosData[outputId]?.paused === false) videoData.paused = false
 
-    $: if (mirror && $videosTime[outputId]) videoTime = $videosTime[outputId]
+    $: if (mirror && $videosTime[outputId] !== undefined) setPreviewVideoTime()
+    function setPreviewVideoTime() {
+        const diff = Math.abs($videosTime[outputId] - videoTime)
+        if (diff > 0.5) {
+            videoTime = $videosTime[outputId]
+
+            if (videoTime < 0.6) {
+                videoData.paused = true // quick fix for preview stutter when video loops (should be a better fix)
+            } else {
+                videoData.paused = $videosData[outputId]?.paused
+            }
+        }
+    }
 
     $: if (!mirror && !fadingOut) send(OUTPUT, ["MAIN_DATA"], { [outputId]: videoData })
     $: if (!mirror && !fadingOut) sendVideoTime(videoTime)
@@ -146,7 +158,7 @@
     const speed = 0.01
     const margin = 0.9 // video should fade to 0 before clearing
     function fadeoutVideo() {
-        if (!video || !fadingOut || !duration) return
+        if (mirror || !video || !fadingOut || !duration) return
 
         let time = duration * speed * margin
         setTimeout(() => {

src/frontend/components/output/layers/SlideContent.svelte

@@ -60,7 +60,7 @@
             () => {
                 loading = true
                 // always use first if no transition
-                let loadingFirst = !slide1 || !transitionActive
+                let loadingFirst = !slide1 // || !transitionActive
 
                 if (loadingFirst) slide1 = { ref: slideRef, data: clone(currentSlide), lines: clone(lines) }
                 else slide2 = { ref: slideRef, data: clone(currentSlide), lines: clone(lines) }
@@ -115,10 +115,12 @@
     $: if (slide1) slide1Data = clone(slide1.data)
     $: if (slide2) slide2Data = clone(slide2.data)
 
-    $: transitionActive = transition.duration !== 0 && transition.type !== "none"
-
-    $: isFirstHidden = transitionActive && loading && !firstActive
-    $: isSecondHidden = !transitionActive || (loading && firstActive)
+    // this can be used to not wait for auto size if transition is set to 0
+    // $: transitionActive = transition.duration !== 0 && transition.type !== "none"
+    // $: isFirstHidden = transitionActive && loading && !firstActive
+    // $: isSecondHidden = !transitionActive || (loading && firstActive)
+    $: isFirstHidden = loading && !firstActive
+    $: isSecondHidden = loading && firstActive
 
     $: hasChanged = !!(transition.duration === 0 && !isAutoSize && slide1)
 

src/frontend/components/system/Movebox.svelte

@@ -10,10 +10,10 @@
 
 <section>
     {#each sides as line}
-        <div on:mousedown={() => openToolsTab.set("item")} class="line {line}l" class:active style="{line === 'n' || line === 's' ? 'height' : 'width'}: {active ? 25 : 50}px;" />
+        <div class="line {line}l" class:active style="{line === 'n' || line === 's' ? 'height' : 'width'}: {active ? 25 : 50}px;" />
     {/each}
     {#each corners as square}
-        <div class="square {square}" class:active style="width: {10 / ratio}px; cursor: {square}-resize;" />
+        <div on:mousedown={() => openToolsTab.set("item")} class="square {square}" class:active style="width: {10 / ratio}px; cursor: {square}-resize;" />
     {/each}
 </section>
 

src/frontend/components/system/SelectElem.svelte

@@ -63,11 +63,20 @@
 
     function convertDataToSlide(slideRef: { index: number }[]) {
         let currentSlides = _show().get("slides")
+        let currentMedia = _show().get("media") || {}
         let currentLayoutRef = _show().layouts("active").ref()[0]
 
         let slideData = slideRef.map(({ index }) => {
             let layout = currentLayoutRef[index] || {}
-            return { slide: clone(currentSlides[layout.id]), layoutData: layout.data }
+            let layoutMedia: any = {}
+            if (layout.data?.background) layoutMedia[layout.data.background] = currentMedia[layout.data?.background]
+            if (layout.data?.audio) {
+                layout.data.audio.forEach((audioId) => {
+                    layoutMedia[audioId] = currentMedia[audioId]
+                })
+            }
+
+            return { slide: clone(currentSlides[layout.id]), layoutData: layout.data, media: layoutMedia }
         })
 
         return slideData.filter((a) => a.slide)

src/frontend/utils/transitions.ts

@@ -1,4 +1,4 @@
-import { blur, fade, crossfade, fly, scale, slide } from "svelte/transition"
+import { blur, crossfade, fade, fly, scale } from "svelte/transition"
 import type { TransitionType } from "./../../types/Show"
 // import { quintInOut } from "svelte/easing"
 import { backInOut, bounceInOut, circInOut, cubicInOut, elasticInOut, linear, sineInOut } from "svelte/easing"
@@ -16,7 +16,12 @@ export const transitions: { [key in TransitionType]: any } = {
     crossfade,
     fly,
     scale,
-    slide,
+    // slide,
+    slide: () => {
+        return {
+            css: (t: number) => `transform: translate(-${(1 - t) * 100}%);`,
+        }
+    },
     spin: (node: any) => {
         const o = +getComputedStyle(node).opacity
         return {