📺 Stage reset button

- Set custom Bible.API key if needed
- Fixed stage label font size
- Insert/edit multiple textboxes as text format

src/electron/data/defaults.ts

@@ -79,6 +79,7 @@ export const defaultSettings: { [key in SaveListSettings]: any } = {
     driveData: { mainFolderId: null, disabled: false, initializeMethod: null, disableUpload: false },
     calendarAddShow: "",
     metronome: {},
+    bibleApiKey: "",
     special: {},
 }
 

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

@@ -12,8 +12,6 @@
     import Center from "../../system/Center.svelte"
     import Loader from "../Loader.svelte"
 
-    // API.Bible key. Will propably change in the future (Please don't abuse)
-    let key: string = "320b5b593fa790ced135a98861de51a9"
     let error: null | string = null
     let bibles: any[] = []
 
@@ -34,7 +32,7 @@
         }
 
         const api = "https://api.scripture.api.bible/v1/bibles"
-        fetch(api, { headers: { "api-key": key } })
+        fetch(api, { headers: { "api-key": $bibleApiKey } })
             .then((response) => response.json())
             .then((data) => {
                 bibles = data.data

src/frontend/components/show/Slides.svelte

@@ -73,7 +73,8 @@
     }
 
     // update show by its template
-    $: if (showId && !isLessons && loaded) setTimeout(updateTemplate, 100)
+    $: gridMode = $slidesOptions.mode === "grid" || $slidesOptions.mode === "simple"
+    $: if (showId && gridMode && !isLessons && loaded) setTimeout(updateTemplate, 100)
     function updateTemplate() {
         if (!loaded) return
 

src/frontend/components/show/TextEditor.svelte

@@ -3,7 +3,7 @@
     import { getQuickExample } from "../../converters/txt"
     import { slidesOptions } from "../../stores"
     import { _show } from "../helpers/shows"
-    import { formatText, getFirstNormalTextbox } from "./formatTextEditor"
+    import { formatText, getTextboxes } from "./formatTextEditor"
     import Notes from "./tools/Notes.svelte"
 
     export let currentShow: any
@@ -51,29 +51,37 @@
     function getItems(items: Item[]) {
         let text = ""
         let plainText = ""
-        let selectedItem: Item = getFirstNormalTextbox(items)
+        // let selectedItem: Item = getFirstNormalTextbox(items)
+        let selectedItems: Item[] = getTextboxes(items)
 
-        let hasTextboxItem = !!selectedItem?.lines
-        if (!hasTextboxItem) return { text, plainText, hasTextboxItem }
+        if (!selectedItems.length) return { text, plainText, hasTextboxItem: false }
 
-        let filteredLines = selectedItem.lines?.filter((line) => line.text?.filter((text) => text.value.length).length) || []
-        filteredLines.forEach((line, i) => {
-            let tempText = ""
-            line.text?.forEach((txt) => {
-                tempText += txt.value
+        selectedItems.forEach((item, i) => {
+            if (selectedItems.length > 1) {
+                let textboxId = "[#" + (i + 1) + "]"
+                text += textboxId + "\n"
+                plainText += textboxId + "\n"
+            }
+
+            let filteredLines = item.lines?.filter((line) => line.text?.filter((text) => text.value.length).length) || []
+            filteredLines.forEach((line, i) => {
+                let tempText = ""
+                line.text?.forEach((txt) => {
+                    tempText += txt.value
+                })
+
+                if (tempText.length) {
+                    text += tempText + "\n"
+                    plainText += tempText + (i < filteredLines.length - 1 ? "\n" : "")
+                }
             })
 
-            if (tempText.length) {
-                text += tempText + "\n"
-                plainText += tempText + (i < filteredLines.length - 1 ? "\n" : "")
-            }
+            // remove double enters
+            text = text.replaceAll("\n\n", "")
+            if (i === selectedItems.length - 1) text += "\n"
         })
 
-        // remove double enters
-        text = text.replaceAll("\n\n", "")
-        text += "\n"
-
-        return { text, plainText, hasTextboxItem }
+        return { text, plainText, hasTextboxItem: true }
     }
 
     const br = "||__$BREAK$__||"

src/frontend/components/show/formatTextEditor.ts

@@ -1,14 +1,13 @@
+import { get } from "svelte/store"
 import { uid } from "uid"
 import type { Item, Line, Show, Slide, SlideData } from "../../../types/Show"
-import { similarity } from "../../converters/txt"
+import { activeShow } from "../../stores"
 import { getItemText } from "../edit/scripts/textStyle"
 import { clone, keysToID, removeDuplicates } from "../helpers/array"
 import { history } from "../helpers/history"
+import { isEmptyOrSpecial } from "../helpers/output"
 import { getGlobalGroup } from "../helpers/show"
 import { _show } from "../helpers/shows"
-import { get } from "svelte/store"
-import { activeShow } from "../../stores"
-import { isEmptyOrSpecial } from "../helpers/output"
 
 export function formatText(e: any) {
     let newSlidesText = e.detail.split("\n\n")
@@ -28,7 +27,6 @@ export function formatText(e: any) {
 
     let groupedOldSlides = groupSlides(oldSlides)
     let groupedNewSlides = groupSlides(slides)
-    console.log(groupedOldSlides, groupedNewSlides)
 
     // TODO: renaming existing groups!
 
@@ -42,8 +40,7 @@ export function formatText(e: any) {
         // check matching from existing slides (both old and new)
         ;[...groupedOldSlides, ...doneGroupedSlides].forEach((old: any) => {
             if (matchFound) return
-            let similar = similarity(old.text, text)
-            if (similar < 1) return
+            if (old.text !== text) return
 
             matchFound = true
 
@@ -177,11 +174,24 @@ export function formatText(e: any) {
         if (!oldItems.length) return
 
         let items: Item[] = clone(oldItems)
-        let newItem: Item = slide.items[0]
-        if (newItem) {
-            let textboxItemIndex = getFirstNormalTextboxIndex(oldItems)
-            if (textboxItemIndex < 0) items.push(newItem)
-            else items[textboxItemIndex] = newItem
+        let newItems: Item[] = slide.items
+        if (newItems.length) {
+            // let textboxItemIndex = getFirstNormalTextboxIndex(oldItems)
+            let textboxItemIndexes = getTextboxesIndexes(oldItems)
+            if (!textboxItemIndexes.length) items.push(...newItems)
+            else {
+                textboxItemIndexes.forEach((index) => {
+                    // set to default if text has been removed
+                    items[index] = newItems.splice(index, 1)[0] || clone(defaultItem)
+                })
+
+                // new items added
+                if (newItems.length) {
+                    items.push(...newItems)
+                    // remove empty items
+                    items = items.filter((item) => getItemText(item).length)
+                }
+            }
         }
 
         slide.items = items
@@ -216,10 +226,9 @@ function getSlide(slideText): Slide {
         slideLines.splice(0, 1)
     }
 
-    let lines: Line[] = slideLines.map(getLine)
-    let item: Item = { type: "text", lines, style: "top:120px;left:50px;height:840px;width:1820px;" }
+    let items: Item[] = linesToTextboxes(slideLines)
+    let slide: Slide = { group, color: "", settings: {}, notes: "", items }
 
-    let slide: Slide = { group, color: "", settings: {}, notes: "", items: [item] }
     if (group) {
         let globalGroup = getGlobalGroup(group)
         if (globalGroup) slide.globalGroup = globalGroup
@@ -228,7 +237,33 @@ function getSlide(slideText): Slide {
     return slide
 }
 
-function getLine(text: string): Line {
+export const defaultItem: Item = { type: "text", lines: [], style: "top:120px;left:50px;height:840px;width:1820px;" }
+const textboxRegex = /\[#\d*]/
+export function linesToTextboxes(slideLines: string[]) {
+    let items: Item[] = []
+    let currentItemIndex: number = 0
+
+    slideLines.forEach((line) => {
+        let textboxKey = line.match(textboxRegex)?.[0]
+        if (textboxKey) {
+            let keyIndex = textboxKey.slice(textboxKey.indexOf("#") + 1, textboxKey.indexOf("]"))
+            currentItemIndex = Number(keyIndex)
+            // if (textboxKey === "[#1]") currentItemIndex = 0
+            // else currentItemIndex++
+
+            // add content on current line
+            line = line.slice(line.indexOf("]") + 1).trim()
+            if (!line.length) return
+        }
+
+        if (!items[currentItemIndex]) items[currentItemIndex] = clone(defaultItem)
+        items[currentItemIndex].lines!.push(getLine(line))
+    })
+
+    return items
+}
+
+export function getLine(text: string): Line {
     return { align: "", text: [{ value: text, style: "font-size: 100px;" }] }
 }
 
@@ -245,36 +280,36 @@ function groupSlides(slides: Slide[]) {
         if (!slideGroups[currentIndex]) slideGroups[currentIndex] = { text: "", slides: [] }
         slideGroups[currentIndex].slides.push(slide)
 
-        let firstTextItem = getFirstNormalTextbox(slide.items)
-        if (!firstTextItem) return
+        let textItems = getTextboxes(slide.items)
+        if (!textItems.length) return
 
-        let fullOldSlideText = getItemText(firstTextItem)
+        let fullOldSlideText = textItems.reduce((value, item) => (value += getItemText(item)), "")
         if (!fullOldSlideText) return
 
         // adding length so line breaks with no text changes works
-        slideGroups[currentIndex].text += fullOldSlideText + firstTextItem.lines?.length
+        let linesLength = textItems.reduce((value, item) => (value += item.lines?.length || 0), 0)
+        slideGroups[currentIndex].text += fullOldSlideText + linesLength
     })
 
     return slideGroups
 }
 
-// get first textbox item that has text, is not special or the only one left
-export function getFirstNormalTextboxIndex(items: Item[]) {
-    let selectedItemIndex: number = -1
+export function getTextboxesIndexes(items: Item[]): number[] {
+    let indexes: number[] = []
 
     items.forEach((item, i) => {
-        if (!item.lines) return
+        if (!item?.lines) return
 
         let special = isEmptyOrSpecial(item)
-        if (special && selectedItemIndex > -1) return
+        if (special) return
 
-        // set last normal textbox item if multiple (inverted order)
-        selectedItemIndex = i
+        indexes.push(i)
     })
 
-    return selectedItemIndex
+    return indexes
 }
 
-export function getFirstNormalTextbox(items: Item[]) {
-    return items[getFirstNormalTextboxIndex(items)]
+export function getTextboxes(items: Item[]) {
+    let indexes = getTextboxesIndexes(items)
+    return items.filter((_item, i) => indexes.includes(i))
 }

src/frontend/components/stage/StageTools.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
+    import { OUTPUT } from "../../../types/Channels"
     import type { TabsObj } from "../../../types/Tabs"
-    import { activeStage } from "../../stores"
+    import { send } from "../../utils/request"
+    import { activeStage, outputs, stageShows } from "../../stores"
+    import { keysToID } from "../helpers/array"
+    import { history } from "../helpers/history"
+    import Icon from "../helpers/Icon.svelte"
+    import { getResolution } from "../helpers/output"
+    import T from "../helpers/T.svelte"
+    import Button from "../inputs/Button.svelte"
     import Tabs from "../main/Tabs.svelte"
     import BoxStyle from "./tools/BoxStyle.svelte"
     import Items from "./tools/Items.svelte"
@@ -31,6 +39,55 @@
             active = "items"
         }
     })
+
+    function resetStageStyle() {
+        let resolution = getResolution()
+        let defaultItemStyle = `
+            width: ${resolution.width / 2}px;
+            height: ${resolution.height / 2}px;
+            left: ${resolution.width / 4}px;
+            top: ${resolution.height / 4}px;
+        `
+
+        let stageId = $activeStage.id
+        if (!stageId) return
+
+        if (active === "text") {
+            // this will not reset text css style
+            const resetData = { auto: true, chords: false, chordsData: {} }
+            Object.entries(resetData).forEach(([subkey, data]) => {
+                history({
+                    id: "UPDATE",
+                    newData: { data, key: "items", subkey, keys: $activeStage.items },
+                    oldData: { id: stageId },
+                    location: { page: "stage", id: "stage_item_content", override: stageId + "_reset_text" },
+                })
+            })
+        } else if (active === "item") {
+            // this will also reset any text style
+            history({
+                id: "UPDATE",
+                newData: { data: defaultItemStyle, key: "items", subkey: "style", keys: $activeStage.items },
+                oldData: { id: stageId },
+                location: { page: "stage", id: "stage_item_style", override: stageId + "_reset_item" },
+            })
+        } else if (active === "slide") {
+            if ($stageShows[stageId]?.settings?.outputScreen) removeOutput(stageId)
+            history({ id: "UPDATE", newData: { data: {}, key: "settings" }, oldData: { id: stageId }, location: { page: "stage", id: "stage", override: "stage_reset" } })
+        }
+    }
+
+    function removeOutput(stageId: string) {
+        outputs.update((a) => {
+            let outputWithStageId = keysToID(a).find((output) => output.stageOutput === stageId)?.id
+            if (!outputWithStageId) return a
+
+            delete a[outputWithStageId]
+            send(OUTPUT, ["REMOVE"], { id: outputWithStageId })
+
+            return a
+        })
+    }
 </script>
 
 <div class="main border stageTools">
@@ -55,14 +112,14 @@
     {/if}
 
     <!-- TODO: reset stage -->
-    <!-- <span style="display: flex;">
-    {#if active !== "items"}
-      <Button style="flex: 1;" dark center>
-        <Icon id="reset" right />
-        <T id={"actions.reset"} />
-      </Button>
-    {/if}
-  </span> -->
+    <span style="display: flex;flex-wrap: wrap;white-space: nowrap;">
+        {#if active !== "items"}
+            <Button style="flex: 1;" on:click={resetStageStyle} dark center>
+                <Icon id="reset" right />
+                <T id={"actions.reset"} />
+            </Button>
+        {/if}
+    </span>
 </div>
 
 <style>

src/frontend/components/stage/Stagebox.svelte

@@ -228,10 +228,9 @@
         width: 100%;
 
         background: rgb(0 0 0 / 0.5);
-        /* color: #fff7cb; */
         color: #dfd9b8;
-        font-size: 2.6em;
-        /* font-weight: 600; */
+        font-size: 42px;
+        font-weight: normal;
         text-align: center;
     }
 

src/frontend/components/stage/items/SlideText.svelte

@@ -107,5 +107,8 @@
     .loading {
         position: absolute;
         opacity: 0;
+        top: 0;
+        left: 0;
+        pointer-events: none;
     }
 </style>