✔ Fixed metronome in prod

- Slide drag copy also includes layout data
- Fixed transition issues
- Rename overlay/template on creation

src/frontend/components/context/menuClick.ts

@@ -109,16 +109,13 @@ const actions: any = {
         if (!id) return
         let data = obj.sel.data[0]
 
-        if (id === "slide" || id === "group" || id === "overlay" || id === "template" || id === "player") activePopup.set("rename")
+        const renameById = ["show_drawer", "project", "folder", "stage", "theme", "style", "output"]
+        const renameByIdDirect = ["overlay", "template", "player", "layout"]
+
+        if (renameById.includes(id)) activeRename.set(id + "_" + data.id)
+        else if (renameByIdDirect.includes(id)) activeRename.set(id + "_" + data)
+        else if (id === "slide" || id === "group") activePopup.set("rename")
         else if (id === "show") activeRename.set("show_" + data.id + "#" + data.index)
-        else if (id === "show_drawer") activeRename.set("show_drawer_" + data.id)
-        else if (id === "project") activeRename.set("project_" + data.id)
-        else if (id === "folder") activeRename.set("folder_" + data.id)
-        else if (id === "layout") activeRename.set("layout_" + data)
-        else if (id === "stage") activeRename.set("stage_" + data.id)
-        else if (id === "theme") activeRename.set("theme_" + data.id)
-        else if (id === "style") activeRename.set("style_" + data.id)
-        else if (id === "output") activeRename.set("output_" + data.id)
         else if (obj.contextElem?.classList?.contains("#video_marker")) activeRename.set("marker_" + obj.contextElem.id)
         else if (id?.includes("category")) activeRename.set("category_" + get(activeDrawerTab) + "_" + data)
         else console.log("Missing rename", obj)

src/frontend/components/drawer/Card.svelte

@@ -11,6 +11,7 @@
     export let active: boolean = false
     export let outlineColor: string | null = null
     export let label: string
+    export let renameId: string = ""
     export let title: string = ""
     export let mediaData: string = ""
     export let width: number = 0
@@ -45,7 +46,7 @@
             {/if}
             <slot />
         </div>
-        <Label {label} {title} {icon} {white} {color} {mode} />
+        <Label {label} {renameId} {title} {icon} {white} {color} {mode} />
     </div>
 </div>
 

src/frontend/components/drawer/Label.svelte

@@ -1,21 +1,60 @@
 <script lang="ts">
-    import { fullColors } from "../../stores"
+    import { fullColors, overlays, playerVideos, templates } from "../../stores"
     import { getContrast } from "../helpers/color"
     import Icon from "../helpers/Icon.svelte"
+    import HiddenInput from "../inputs/HiddenInput.svelte"
 
     export let label: string
+    export let renameId: string = ""
     export let title: string = ""
     export let icon: null | string = null
     export let color: null | string = null
     export let white: boolean = false
     export let mode: "grid" | "list" | "lyrics" = "grid"
+
+    // RENAME!! (duplicate of NavigationButton.svelte)
+
+    const nameCategories: any = {
+        overlay: (c: any) => overlays.update((a) => setName(a, c)),
+        template: (c: any) => templates.update((a) => setName(a, c)),
+        player: (c: any) => playerVideos.update((a) => setName(a, c)),
+    }
+    const setName = (a: any, { name, id }: any, nameKey: string = "name") => {
+        if (!a[id]) return a
+
+        a[id][nameKey] = name
+        return a
+    }
+
+    function changeName(e: any, categoryId: string) {
+        let idSplit = categoryId.split("_")
+        let id: string = idSplit[0]
+        let elemId: string = idSplit[1]
+
+        if (nameCategories[id]) nameCategories[id]({ name: e.detail.value, id: elemId })
+        else console.log("Trying to rename unadded type: " + id)
+    }
+
+    let editActive: boolean = false
 </script>
 
-<div class="label" {title} class:list={mode !== "grid"} style={$fullColors ? `background-color: ${color};color: ${getContrast(color || "")};` : mode !== "list" ? `border-bottom: 2px solid ${color};` : ""}>
+<div
+    class="label"
+    class:alignRight={icon}
+    class:padding={!renameId}
+    {title}
+    class:list={mode !== "grid"}
+    style={$fullColors ? `background-color: ${color};color: ${getContrast(color || "")};` : mode !== "list" ? `border-bottom: 2px solid ${color};` : ""}
+>
     {#if icon}
         <Icon id={icon} class="icon" {white} />
     {/if}
-    <span class:alignRight={icon}>{label}</span>
+
+    {#if renameId}
+        <HiddenInput value={label} id={renameId} on:edit={(e) => changeName(e, renameId)} bind:edit={editActive} />
+    {:else}
+        <span>{label}</span>
+    {/if}
 </div>
 
 <style>
@@ -25,8 +64,6 @@
         align-items: center;
         background-color: var(--primary-darkest);
 
-        padding: 4px 5px;
-        padding-bottom: 3px;
         font-size: 0.8em;
         /* font-weight: bold; */
 
@@ -41,30 +78,50 @@
         text-align: center;
     }
 
-    div.list {
+    /* edit input */
+    .padding {
+        padding: 4px 5px;
+        padding-bottom: 3px;
+    }
+    div.label:not(.padding) :global(.icon) {
+        margin-left: 3px;
+    }
+    .label :global(input) {
+        padding: 6px;
+    }
+    div.label.alignRight :global(p),
+    div.label.alignRight :global(input) {
+        margin-left: 20px;
+    }
+    div.label :global(p),
+    div.label :global(input) {
+        text-align: center;
+    }
+
+    div.label.list {
         height: 100%;
         font-size: inherit;
         padding: 4px 16px;
         background-color: var(--primary);
     }
 
-    div :global(.icon) {
+    div.label :global(.icon) {
         position: absolute;
     }
 
-    div span {
+    div.label span {
         width: 100%;
         margin: 0 5px;
         text-align: center;
         overflow-x: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-    div span.alignRight {
+    div.label.alignRight span {
         margin: 0;
         margin-left: 24px;
     }
-    div.list span {
+    div.label.list span {
         text-align: left;
         padding: 0 10px;
     }

src/frontend/components/drawer/audio/metronome.ts

@@ -69,7 +69,7 @@ async function setAudioBuffers() {
 
     await Promise.all(
         audioFiles.map(async (fileName) => {
-            let path = `../assets/${fileName}.mp3`
+            let path = `./assets/${fileName}.mp3`
             let id = fileName.slice(fileName.indexOf("-") + 1)
 
             const audioBuffer = await fetch(path)

src/frontend/components/drawer/pages/Overlays.svelte

@@ -57,13 +57,17 @@
                         class="context #overlay_card"
                         outlineColor={findMatchingOut(overlay.id, $outputs)}
                         active={findMatchingOut(overlay.id, $outputs) !== null}
-                        label={overlay.name || "—"}
+                        label={overlay.name}
+                        renameId="overlay_{overlay.id}"
                         color={overlay.color}
                         icon={overlay.placeUnderSlide ? "under" : overlay.locked ? "locked" : null}
                         {resolution}
                         showPlayOnHover
                         on:click={(e) => {
-                            if (!$outLocked && !e.ctrlKey && !e.metaKey) setOutput("overlays", overlay.id, true)
+                            if ($outLocked || e.ctrlKey || e.metaKey) return
+                            if (e.target?.closest(".edit")) return
+
+                            setOutput("overlays", overlay.id, true)
                         }}
                     >
                         <SelectElem id="overlay" data={overlay.id} fill draggable>

src/frontend/components/drawer/pages/Templates.svelte

@@ -65,12 +65,15 @@
                     <Card
                         class="context #template_card"
                         active={template.id === activeTemplate}
-                        label={template.name || "—"}
+                        label={template.name}
+                        renameId="template_{template.id}"
                         color={template.color}
                         {resolution}
                         on:click={(e) => {
-                            if ((($activeShow && $activeShow.type === undefined) || $activeShow?.type === "show") && !e.ctrlKey && !e.metaKey)
-                                history({ id: "TEMPLATE", newData: { id: template.id, data: { createItems: true } }, location: { page: "none", override: "show#" + $activeShow.id } })
+                            if (e.target?.closest(".edit")) return
+                            if (!$activeShow || ($activeShow?.type || "show") !== "show" || e.ctrlKey || e.metaKey) return
+
+                            history({ id: "TEMPLATE", newData: { id: template.id, data: { createItems: true } }, location: { page: "none", override: "show#" + $activeShow.id } })
                         }}
                     >
                         <!-- icons -->

src/frontend/components/drawer/player/PlayerVideos.svelte

@@ -54,10 +54,13 @@
             active={findMatchingOut(video.rid, $outputs) !== null}
             outlineColor={findMatchingOut(video.rid, $outputs)}
             label={video.name || ""}
+            renameId="player_{video.rid}"
             title={video.id || ""}
             showPlayOnHover
             on:click={(e) => {
                 if ($outLocked || e.ctrlKey || e.metaKey) return
+                if (e.target?.closest(".edit")) return
+
                 if (findMatchingOut(video.rid, $outputs)) {
                     clearBackground()
                     return

src/frontend/components/helpers/dropActions.ts

@@ -437,10 +437,11 @@ const slideDrop: any = {
     },
     global_group: ({ drag, drop }: any, history: any) => {
         let ref: any[] = _show().layouts("active").ref()[0]
+        if (!drag.data[0].slide) return
 
         if (drop.center) {
             if (drop.trigger?.includes("end")) drop.index--
-            changeSlideGroups({ sel: { data: [{ index: drop.index }] }, menu: { id: drag.data[0].globalGroup } })
+            changeSlideGroups({ sel: { data: [{ index: drop.index }] }, menu: { id: drag.data[0].slide.globalGroup } })
             return
         }
 
@@ -454,15 +455,19 @@ const slideDrop: any = {
         if (drop.index === undefined) drop.index = layout.length
         let newIndex: number = drop.index
 
-        drag.data.forEach((slide: any) => {
+        drag.data.forEach(({ slide, layoutData }: any) => {
             let id = uid()
             delete slide.id
             slides[id] = clone(slide)
 
             let parent = ref[newIndex - 1] || { index: -1 }
             if (parent.type === "child") parent = parent.parent
 
-            layout = addToPos(layout, [{ id }], parent.index + 1)
+            // add layout data (if dragging a slide to another show)
+            let newLayout = { id }
+            if (layoutData) newLayout = { ...layoutData, id }
+
+            layout = addToPos(layout, [newLayout], parent.index + 1)
         })
 
         history.newData = { slides, layout }

src/frontend/components/helpers/historyActions.ts

@@ -52,7 +52,7 @@ export const historyActions = ({ obj, undo = null }: any) => {
                 if (keys && !key) id = "keys"
 
                 if (initializing && obj.location.id === "show") customActionActivation("show_created")
-                if (initializing && empty && updater.initialize) data.data = updater.initialize(data.data)
+                if (initializing && empty && updater.initialize) data.data = updater.initialize(data.data, id)
 
                 if (data.replace) {
                     data.data = { ...data.data, ...data.replace }

src/frontend/components/helpers/historyHelpers.ts

@@ -249,18 +249,13 @@ export const _updaters = {
     overlay: {
         store: overlays,
         empty: EMPTY_SLIDE,
-        initialize: (data) => {
+        initialize: (data, id: string) => {
             // get selected category
             if (get(drawerTabsData).overlays?.activeSubTab && get(overlayCategories)[get(drawerTabsData).overlays.activeSubTab!]) {
                 data.category = get(drawerTabsData).overlays.activeSubTab
             }
 
-            // auto name
-            let newName = 1
-            while (Object.values(get(overlays)).find((a) => a.name === newName.toString())) {
-                newName++
-            }
-            data.name = newName.toString()
+            activeRename.set("overlay_" + id)
 
             return data
         },
@@ -274,18 +269,13 @@ export const _updaters = {
     template: {
         store: templates,
         empty: EMPTY_SLIDE,
-        initialize: (data) => {
+        initialize: (data, id: string) => {
             // get selected category
             if (get(drawerTabsData).templates?.activeSubTab && get(templateCategories)[get(drawerTabsData).templates.activeSubTab!]) {
                 data.category = get(drawerTabsData).templates.activeSubTab
             }
 
-            // auto name
-            let newName = 1
-            while (Object.values(get(templates)).find((a) => a.name === newName.toString())) {
-                newName++
-            }
-            data.name = newName.toString()
+            activeRename.set("template_" + id)
 
             return data
         },

src/frontend/components/helpers/output.ts

@@ -374,6 +374,7 @@ export function getCurrentMediaTransition() {
 export function mergeWithTemplate(slideItems: Item[], templateItems: Item[], addOverflowTemplateItems: boolean = false, resetAutoSize: boolean = true) {
     slideItems = clone(slideItems)
     if (!templateItems.length) return slideItems
+    templateItems = clone(templateItems)
 
     let sortedTemplateItems = sortItemsByType(templateItems)
 

src/frontend/components/main/Splash.svelte

@@ -10,7 +10,7 @@
 
 <Center>
     <h1>FreeShow</h1>
-    <p>v{$version}</p>
+    <p style="opacity: 0.8;">v{$version}</p>
     <p style="padding: 30px">
         <Link url="https://freeshow.app/docs">
             <T id="main.docs" />
@@ -45,7 +45,6 @@
     }
 
     p {
-        opacity: 0.8;
         overflow: initial;
     }
 

src/frontend/components/main/popups/Rename.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { activePopup, activeShow, overlays, playerVideos, selected, showsCache, templates } from "../../../stores"
+    import { activePopup, activeShow, playerVideos, selected, showsCache } from "../../../stores"
     import { clone, removeDuplicates } from "../../helpers/array"
     import { history } from "../../helpers/history"
     import Icon from "../../helpers/Icon.svelte"
@@ -11,11 +11,8 @@
     let list: string[] = []
     $: {
         list = []
-        if ($selected.id === "overlay") {
-            list = removeDuplicates($selected.data.map((id) => $overlays[id].name))
-        } else if ($selected.id === "template") {
-            list = removeDuplicates($selected.data.map((id) => $templates[id].name))
-        } else if (($activeShow && $selected.id === "slide") || $selected.id === "group") {
+
+        if (($activeShow && $selected.id === "slide") || $selected.id === "group") {
             $selected.data.forEach((a, i) => {
                 let slide = a.id ? a : _show("active").layouts("active").ref()[0][a.index]
                 if (slide.parent) slide = slide.parent.id
@@ -25,8 +22,6 @@
                 if (i === 0) groupName = name
             })
             list = removeDuplicates(list)
-        } else if ($selected.id === "player") {
-            list = removeDuplicates($selected.data.map((id) => $playerVideos[id].name))
         } else if ($selected.id === "chord") {
             groupName = $selected.data?.[0]?.chord?.key || ""
         }

src/frontend/components/output/Output.svelte

@@ -237,7 +237,7 @@
             {preview}
             customTemplate={currentStyle.template}
             transition={transitions.text}
-            transitionEnabled={!mirror && transitions.text?.type !== "none" && transitions.text?.duration}
+            transitionEnabled={(!mirror || preview) && transitions.text?.type !== "none" && transitions.text?.duration}
             {isKeyOutput}
         />
     {/if}