✨ Merged list item with textbox item

- Merged variable item with textbox dynamic values
- Fixed audio not clearing if started while another clears
- Improved UI

public/lang/en.json

@@ -825,6 +825,7 @@
         "size": "Size",
         "max_lines": "Max lines",
         "invert_items": "Invert items",
+        "list": "List",
         "chords": "Chords",
         "transpose": "Transpose",
         "auto_size": "Auto size",
@@ -894,7 +895,6 @@
     },
     "items": {
         "text": "Textbox",
-        "list": "List",
         "media": "Media",
         "image": "Image",
         "camera": "Camera",

src/frontend/MainLayout.svelte

@@ -21,7 +21,7 @@
     import StageShow from "./components/stage/StageShow.svelte"
     import StageTools from "./components/stage/StageTools.svelte"
     import Resizeable from "./components/system/Resizeable.svelte"
-    import { activeEdit, activePage, activeShow, activeStage, currentWindow, focusMode, loaded, os, textEditActive } from "./stores"
+    import { activeEdit, activePage, activeShow, activeStage, currentWindow, focusMode, loaded, os, showsCache, textEditActive } from "./stores"
     import { DEFAULT_WIDTH } from "./utils/common"
 
     $: page = $activePage
@@ -87,10 +87,14 @@
                 {:else if page === "edit"}
                     {#if $activeEdit.type === "media"}
                         <MediaTools />
+                    {:else if $activeEdit.type === "audio"}
+                        <!-- Audio tools -->
                     {:else if $activeEdit.type === "effect"}
                         <EffectTools />
-                    {:else if !$focusMode && !$textEditActive}
-                        <EditTools />
+                    {:else if $activeEdit.type === "overlay" || $activeEdit.type === "template" || $showsCache[$activeShow?.id || ""]}
+                        {#if !$focusMode && !$textEditActive}
+                            <EditTools />
+                        {/if}
                     {/if}
                 {:else if page === "draw"}
                     <DrawSettings />

src/frontend/components/context/loadItems.ts

@@ -233,7 +233,19 @@ const loadActions = {
         let firstShowIndex = values.findIndex((a) => a.id.includes("show_"))
         let firstVideoIndex = values.findIndex((a) => a.id.includes("video_"))
         let firstMetaIndex = values.findIndex((a) => a.id.includes("meta_"))
-        values = [...values.slice(0, firstShowIndex), "SEPERATOR", ...values.slice(firstShowIndex, firstVideoIndex), "SEPERATOR", ...values.slice(firstVideoIndex, firstMetaIndex), "SEPERATOR", ...values.slice(firstMetaIndex)]
+        let firstVarIndex = values.findIndex((a) => a.id.includes("variable_"))
+
+        values = [
+            ...values.slice(0, firstShowIndex),
+            "SEPERATOR",
+            ...values.slice(firstShowIndex, firstVideoIndex),
+            "SEPERATOR",
+            ...values.slice(firstVideoIndex, firstMetaIndex),
+            "SEPERATOR",
+            ...values.slice(firstMetaIndex, firstVarIndex),
+            "SEPERATOR",
+            ...values.slice(firstVarIndex),
+        ]
 
         return values
     },

src/frontend/components/edit/Editor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte"
-    import { activeEdit, activeShow, drawer, refreshEditSlide, showsCache, textEditActive } from "../../stores"
+    import { activeEdit, activeShow, drawer, focusMode, refreshEditSlide, showsCache, textEditActive } from "../../stores"
     import Splash from "../main/Splash.svelte"
     import EffectEditor from "./editors/EffectEditor.svelte"
     import MediaEditor from "./editors/MediaEditor.svelte"
@@ -39,7 +39,7 @@
     {:else if $activeEdit.type === "audio"}
         <!--  -->
     {:else if $activeEdit.slide !== undefined && $activeEdit.slide !== null}
-        {#if $textEditActive}
+        {#if $textEditActive && !$focusMode}
             <TextEditor currentShow={$showsCache[$activeShow?.id || ""]} />
         {:else}
             <SlideEditor />

src/frontend/components/edit/Navigation.svelte

@@ -53,11 +53,11 @@
             if (edit.name === undefined) return a
 
             if (type === "show") {
-                let active = $activeShow
+                let active = clone($activeShow)
                 // focus mode
                 if (!active && currentShowId) active = { type: "show", id: currentShowId, index: $activeEdit.slide || 0 }
 
-                edit.show = clone($activeShow)
+                edit.show = active
             }
 
             a.push(edit)
@@ -79,7 +79,7 @@
 
     let clonedHistory: any[] = []
     // don't change order when changing edits
-    $: if ($editHistory.length !== clonedHistory.length || !$activeEdit.id) setTimeout(() => (clonedHistory = clone($editHistory).reverse()))
+    $: if ($editHistory.length !== clonedHistory.length || (!$activeEdit.id && !$activeShow?.id)) setTimeout(() => (clonedHistory = clone($editHistory).reverse()))
 </script>
 
 {#if $focusMode}
@@ -109,7 +109,7 @@
                                 else activeShow.set(edited.show)
                             }
                         }}
-                        active={$activeEdit.id === edited.id}
+                        active={$activeEdit.id ? $activeEdit.id === edited.id : currentShowId === edited.id}
                         bold={false}
                         border
                     >

src/frontend/components/edit/editbox/EditboxHelper.ts

@@ -118,10 +118,12 @@ export class EditboxHelper {
         let html = ""
         let firstTextStyleArchive: string = ""
         let lineBg = item.specialStyle?.lineBg ? `background-color: ${item.specialStyle.lineBg};` : ""
+        let listStyle = "" // item.list?.enabled ? `;list-style${item.list?.style?.includes("disclosure") ? "-type:" : ": inside"} ${item.list?.style || "disc"};` : ""
+
         item?.lines?.forEach((line, i) => {
             let align = line.align.replaceAll(lineBg, "")
             currentStyle += align + lineBg // + line.chords?.map((a) => a.key)
-            let style = align || lineBg ? 'style="' + align + ";" + lineBg + '"' : ""
+            let style = align || lineBg || listStyle ? 'style="' + align + ";" + lineBg + listStyle + '"' : ""
             html += `<div class="break" ${plain ? "" : style}>`
 
             // fix removing all text in a line
@@ -139,7 +141,8 @@ export class EditboxHelper {
                 let textChords = currentChords.filter((a) => a.pos >= textIndex && (a.pos <= textEnd || line.text.length - 1 >= tIndex))
                 textIndex = textEnd
 
-                let style = a.style ? 'style="' + a.style + '"' : ""
+                let listStyle = "" // item.list?.enabled ? ";display: list-item;" : ""
+                let style = a.style || listStyle ? 'style="' + a.style + listStyle + '"' : ""
                 let value = a.value.replaceAll("\n", "<br>") || "<br>"
                 if (value === " ") value = "&nbsp;"
 

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

@@ -56,6 +56,7 @@
 </script>
 
 {#if item?.type === "list"}
+    <!-- moved to textbox in 1.3.3 -->
     <ListView list={item.list} disableTransition />
 {:else if item?.type === "media"}
     {#if thumbnailPath}
@@ -72,6 +73,7 @@
 {:else if item?.type === "events"}
     <DynamicEvents {...item.events} edit textSize={Number(getStyles(item.style, true)?.["font-size"]) || 80} />
 {:else if item?.type === "variable"}
+    <!-- moved to textbox in 1.3.3 -->
     <Variable {item} style={item?.style?.includes("font-size") && item.style.split("font-size:")[1].trim()[0] !== "0" ? "" : `font-size: ${autoSize}px;`} ref={{ showId: ref.showId, slideIndex: $activeEdit.slide }} hideText={false} edit />
 {:else if item?.type === "web"}
     <Website src={item?.web?.src || ""} {ratio} />

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

@@ -92,6 +92,15 @@
         </div>
     {/if}
 
+    <!-- list mode -->
+    {#if item.list?.enabled}
+        <div title={$dictionary.edit?.list} class="actionButton" style="zoom: {1 / ratio};left: 0;right: unset;">
+            <span style="padding: 5px;z-index: 3;font-size: 0;">
+                <Icon id="list" white />
+            </span>
+        </div>
+    {/if}
+
     <!-- bindings -->
     {#if item.bindings?.length}
         <div title={$dictionary.actions?.remove_binding} class="actionButton" style="zoom: {1 / ratio};left: 0;right: unset;">

src/frontend/components/edit/editors/SlideEditor.svelte

@@ -336,12 +336,14 @@
                     {#if !$labelsDisabled}<T id="edit.chords" />{/if}
                 </Button>
 
-                <div class="seperator" />
+                {#if !$focusMode}
+                    <div class="seperator" />
 
-                <Button on:click={() => textEditActive.set(true)}>
-                    <Icon id="text" right />
-                    <p><T id="show.text" /></p>
-                </Button>
+                    <Button on:click={() => textEditActive.set(true)}>
+                        <Icon id="text" right />
+                        <p><T id="show.text" /></p>
+                    </Button>
+                {/if}
 
                 <div class="seperator" />
 

src/frontend/components/edit/tools/BoxStyle.svelte

@@ -139,6 +139,14 @@
         box.edit.text[4].value = !!styles["white-space"]?.includes("nowrap")
         box.edit.special[0].value = item?.scrolling?.type || "none"
     }
+    $: if (id === "text" && box?.edit?.list) {
+        box.edit.list[0].value = item?.list?.enabled || false
+        box.edit.list[1].value = item?.list?.style || "disc"
+        // box.edit.list[2].value = item?.list?.interval || 0
+
+        box.edit.list[1].hidden = !item?.list?.enabled
+        // box.edit.list[2].hidden = !item?.list?.enabled
+    }
     $: if (id === "text" && box?.edit?.chords) {
         box.edit.chords[0].value = item?.chords?.enabled || false
         box.edit.chords[1].value = item?.chords?.color || "#FF851B"
@@ -147,6 +155,9 @@
         box.edit.chords[1].hidden = !item?.chords?.enabled
         box.edit.chords[2].hidden = !item?.chords?.enabled
     }
+    $: if (id === "camera" && box?.edit?.default?.[0] && item?.device?.name) {
+        box.edit.default[0].name = item.device.name
+    }
     $: if (id === "slide_tracker" && box?.edit?.default?.[3]) {
         box.edit.default[2].hidden = item?.tracker?.type !== "group"
         box.edit.default[3].hidden = item?.tracker?.type !== "group"

src/frontend/components/edit/tools/EditValues.svelte

@@ -206,6 +206,9 @@
             "style_box-shadow_2": 8,
             // "style_box-shadow_3": 0,
         },
+        list: {
+            "list.enabled": true,
+        },
         chords: {
             "chords.enabled": true,
             chords: true,
@@ -287,7 +290,7 @@
         return state
     }
 
-    const setDefaults: string[] = ["outline", "shadow", "chords", "border"]
+    const setDefaults: string[] = ["list", "outline", "shadow", "chords", "border"]
     function openEdit(id: string) {
         storedEditMenuState.update((a) => {
             if (!a[sessionId]) a[sessionId] = []
@@ -460,19 +463,29 @@
                         >
                             <Icon id={input.icon || input.id} right />
                             {#key input.name}
-                                <T id={input.name.includes(".") ? input.name : "popup." + input.name} />
+                                <p style="padding: 0;flex: initial;width: fit-content;min-width: unset;{input.name.includes('.') || !input.name.includes(' ') ? '' : 'opacity: 1;'}">
+                                    {#if input.name.includes(" ")}
+                                        {input.name}
+                                    {:else}
+                                        <T id={input.name.includes(".") ? input.name : "popup." + input.name} />
+                                    {/if}
+                                </p>
                             {/key}
                         </Button>
                     </CombinedInput>
                 {:else if input.input === "media"}
-                    <MediaPicker id={"item_" + sessionId} title={input.value} style="overflow: hidden;margin-bottom: 10px;" filter={{ name: "Media files", extensions: mediaExtensions }} on:picked={(e) => valueChange(e, input)}>
-                        <Icon id="image" right />
-                        {#if input.value}
-                            <p style="padding: 0;opacity: 1;">{getFileName(input.value)}</p>
-                        {:else}
-                            <p style="padding: 0;"><T id="edit.choose_media" /></p>
-                        {/if}
-                    </MediaPicker>
+                    <CombinedInput>
+                        <MediaPicker id={"item_" + sessionId} title={input.value} style="width: 100%;" filter={{ name: "Media files", extensions: mediaExtensions }} on:picked={(e) => valueChange(e, input)}>
+                            <span style="display: flex;align-items: center;max-width: 100%;">
+                                <Icon id="image" right />
+                                {#if input.value}
+                                    <p style="padding: 0;opacity: 1;">{getFileName(input.value)}</p>
+                                {:else}
+                                    <p style="padding: 0;"><T id="edit.choose_media" /></p>
+                                {/if}
+                            </span>
+                        </MediaPicker>
+                    </CombinedInput>
                 {:else if input.input === "multiselect"}
                     <div class="line">
                         {#each input.values as option}

src/frontend/components/edit/tools/Items.svelte

@@ -26,10 +26,8 @@
     ]
 
     const specialItems: ItemRef[] = [
-        { id: "list" },
         // { id: "table" },
         { id: "camera" },
-        { id: "variable" },
         { id: "slide_tracker", icon: "percentage" },
         { id: "events", icon: "calendar" },
         { id: "mirror" },

src/frontend/components/edit/values/boxes.ts

@@ -111,6 +111,42 @@ export const boxes: Box = {
                 { name: "background_color", id: "specialStyle.lineBg", input: "color", value: "", enableNoColor: true },
                 { name: "background_opacity", id: "specialStyle.opacity", input: "number", value: 1, values: { step: 0.1, decimals: 1, max: 1, inputMultiplier: 10 } },
             ],
+            list: [
+                { name: "list", id: "list.enabled", input: "checkbox", value: false },
+                {
+                    name: "style",
+                    input: "dropdown",
+                    id: "list.style",
+                    value: "disc",
+                    values: {
+                        options: [
+                            // common
+                            { id: "disc", name: "$:list.disc:$" },
+                            { id: "circle", name: "$:list.circle:$" },
+                            { id: "square", name: "$:list.square:$" },
+                            { id: "disclosure-closed", name: "$:list.disclosure-closed:$" },
+                            { id: "disclosure-open", name: "$:list.disclosure-open:$" },
+                            // numbers
+                            { id: "decimal", name: "$:list.decimal:$" },
+                            { id: "decimal-leading-zero", name: "$:list.decimal-leading-zero:$" },
+                            // alpha
+                            { id: "lower-alpha", name: "$:list.lower-alpha:$" }, // same as latin
+                            { id: "upper-alpha", name: "$:list.upper-alpha:$" }, // same as latin
+                            { id: "lower-roman", name: "$:list.lower-roman:$" },
+                            { id: "upper-roman", name: "$:list.upper-roman:$" },
+                            { id: "lower-greek", name: "$:list.lower-greek:$" },
+                            // special
+                            // {id: "bengali", name: "$:list.bengali:$" },
+                            // {id: "cambodian", name: "$:list.cambodian:$" },
+                            // {id: "devanagari", name: "$:list.devanagari:$" },
+                        ],
+                    },
+                    // disabled: "list.interval", // WIP still disabled when set back to 0
+                    hidden: true,
+                },
+                // { name: "one_at_a_time", id: "one_at_a_time", input: "checkbox", value: false },
+                // { name: "interval", id: "list.interval", input: "number", value: 0, hidden: true }, // slide timers can be user for this
+            ],
             outline: [
                 { name: "color", id: "style", key: "-webkit-text-stroke-color", input: "color", value: "#000000" },
                 { name: "width", id: "style", key: "-webkit-text-stroke-width", input: "number", value: 0, values: { max: 100 }, extension: "px" },

src/frontend/components/helpers/audio.ts

@@ -109,15 +109,20 @@ let currentlyCrossfading: string[] = []
 // if no "path" is provided it will fade out/clear all audio
 async function crossfadeAudio(crossfade: number = 0, path: string = "", waitToPlay: boolean = false) {
     if (currentlyCrossfading[path]) return
-    if (path) currentlyCrossfading.push(path)
 
     // fade in
     if (path) {
         let playing = get(playingAudio)[path]?.audio
         if (!playing) return
 
-        setTimeout(() => fadeAudio(playing, waitToPlay ? crossfade * 0.4 : crossfade, true), waitToPlay ? crossfade * 0.6 * 1000 : 0)
-        currentlyCrossfading.splice(currentlyCrossfading.indexOf(path), 1)
+        currentlyCrossfading.push(path)
+        setTimeout(
+            async () => {
+                await fadeAudio(playing, waitToPlay ? crossfade * 0.4 : crossfade, true)
+                currentlyCrossfading.splice(currentlyCrossfading.indexOf(path), 1)
+            },
+            waitToPlay ? crossfade * 0.6 * 1000 : 0
+        )
         return
     }
 
@@ -127,6 +132,7 @@ async function crossfadeAudio(crossfade: number = 0, path: string = "", waitToPl
     })
 
     async function fadeoutAudio(audio, path) {
+        currentlyCrossfading.push(path)
         let faded = await fadeAudio(audio, crossfade)
         if (faded) deleteAudio(path)
     }
@@ -568,7 +574,7 @@ function getHighestNumber(numbers: number[]): number {
     return Math.max(...numbers)
 }
 
-let clearing = false
+let clearing: string[] = []
 let forceClear: boolean = false
 export function clearAudio(path: string = "", clearPlaylist: boolean = true, playlistCrossfade: boolean = false, commonClear: boolean = false) {
     // turn off any playlist
@@ -579,15 +585,14 @@ export function clearAudio(path: string = "", clearPlaylist: boolean = true, pla
 
     const clearTime = playlistCrossfade ? 0 : (get(special).audio_fade_duration ?? 1.5)
 
-    if (clearing) {
+    if (clearing.includes(path)) {
         if (!commonClear) return
         // force stop audio files (bypass timeout if already active)
         forceClear = true
         setTimeout(() => (forceClear = false), 100)
         return
     }
     if (!Object.keys(get(playingAudio)).length) return
-    clearing = true
 
     let newPlaying: any = get(playingAudio)
     playingAudio.update((a) => {
@@ -597,6 +602,7 @@ export function clearAudio(path: string = "", clearPlaylist: boolean = true, pla
         return a
 
         async function clearAudio(path) {
+            clearing.push(path)
             if (!a[path]?.audio) return deleteAudio(path)
 
             let faded = await fadeAudio(a[path].audio, clearTime)
@@ -627,7 +633,7 @@ export function clearAudio(path: string = "", clearPlaylist: boolean = true, pla
         setTimeout(() => {
             playingAudio.set(newPlaying)
             clearAudioStreams()
-            clearing = false
+            clearing.splice(clearing.indexOf(path), 1)
         }, 200)
     }
 }