✨ Improvements

- Changed default navigation size - No output refresh when another line changes - Updated about
ChurchApps · Jul 18, 2024 · 8b5d3e2 · 8b5d3e2
1 parent cd6986a
commit 8b5d3e2
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 45 deletions.
diff --git a/public/global.css b/public/global.css
@@ -43,7 +43,7 @@
     --border-radius: 0;
 
     /* --navigation-width: 18vw; */
-    --navigation-width: 300px;
+    --navigation-width: 290px;
 }
 
 html,

diff --git a/public/lang/en.json b/public/lang/en.json
@@ -30,9 +30,11 @@
     "about": {
         "check_updates": "Look for updates",
         "made": "Made in Norway by",
-        "report": "Want to report an issue? Create an issue on GitHub",
-        "help": "Want to help translate or request a feature? Send a mail to",
-        "support": "Support the project?",
+        "more": "Please check out more of our applications at",
+        "report": "To report an issue or request a feature? Go to",
+        "translate": "Want to help translate? Please head over to",
+        "mail": "Contact via email",
+        "support": "If you are grateful for this project, please consider supporting it",
         "assets": "Assets used",
         "libraries": "Libraries used",
         "thanks": "Thanks to",

diff --git a/src/electron/data/defaults.ts b/src/electron/data/defaults.ts
@@ -49,10 +49,10 @@ export const defaultSettings: { [key in SaveListSettings]: any } = {
         jesus: { name: "Jesus, Only Jesus", type: "vimeo", id: "426363743" },
     },
     resized: {
-        leftPanel: 300,
-        rightPanel: 300,
-        leftPanelDrawer: 300,
-        rightPanelDrawer: 300,
+        leftPanel: 290,
+        rightPanel: 290,
+        leftPanelDrawer: 290,
+        rightPanelDrawer: 290,
     },
     slidesOptions: { columns: 4, mode: "grid" },
     mediaOptions: { columns: 5, mode: "grid" },

diff --git a/src/frontend/MainLayout.svelte b/src/frontend/MainLayout.svelte
@@ -20,6 +20,7 @@
     import StageTools from "./components/stage/StageTools.svelte"
     import Resizeable from "./components/system/Resizeable.svelte"
     import { activeEdit, activePage, activeShow, activeStage, currentWindow, loaded, os } from "./stores"
+    import { DEFAULT_WIDTH } from "./utils/common"
 
     $: page = $activePage
     $: isWindows = !$currentWindow && $os.platform === "win32"
@@ -59,7 +60,7 @@
         </div>
 
         <Resizeable id="rightPanel" let:width side="right">
-            <div class="right" class:row={width > 300 * 1.5}>
+            <div class="right" class:row={width > DEFAULT_WIDTH * 1.8}>
                 <Preview />
                 {#if page === "show"}
                     {#if $activeShow && ($activeShow.type === "show" || $activeShow.type === undefined)}

diff --git a/src/frontend/components/drawer/Drawer.svelte b/src/frontend/components/drawer/Drawer.svelte
@@ -224,7 +224,7 @@
         background-color: rgb(0 0 0 / 0.2);
         color: var(--text);
         /* font-family: inherit; */
-        width: 300px;
+        width: var(--navigation-width);
         /* width: 50%; */
         padding: 0 8px;
         border: none;

diff --git a/src/frontend/components/main/Toast.svelte b/src/frontend/components/main/Toast.svelte
@@ -46,7 +46,7 @@
         position: absolute;
         bottom: 0;
         right: 0;
-        max-width: 300px;
+        max-width: var(--navigation-width);
         /* bottom: 80px;
         left: 50%;
         transform: translateX(-50%); */

diff --git a/src/frontend/components/main/Top.svelte b/src/frontend/components/main/Top.svelte
@@ -12,7 +12,7 @@
     <!-- {#if !isWindows}
     <div class="dragZone" />
     {/if} -->
-    <span style="width: 300px;">
+    <span style="width: var(--navigation-width);">
         {#if !$saved && $os.platform !== "win32"}
             <div class="unsaved" />
         {/if}
@@ -29,7 +29,7 @@
         <!-- <TopButton id="draw" /> -->
         <TopButton id="stage" />
     </span>
-    <span style="width: 300px;justify-content: flex-end;">
+    <span style="width: var(--navigation-width);justify-content: flex-end;">
         <!-- <TopButton id="stage" hideLabel /> -->
         <TopButton id="draw" red={$drawTool === "fill" || !!($drawTool === "paint" && $paintCache?.length)} hideLabel />
         <TopButton id="settings" hideLabel />

diff --git a/src/frontend/components/main/popups/About.svelte b/src/frontend/components/main/popups/About.svelte
@@ -5,20 +5,24 @@
 
     const assets: { [key: string]: string } = {
         "CMG Sans (Custom font)": "https://www.churchmotiongraphics.com/cmg-sans/",
-        "Google Fonts (Icons)": "https://fonts.google.com/icons",
-        "Icons8 (Icons)": "https://icons8.com",
+        "Google Fonts (Icons)": "https://fonts.google.com/icons/",
+        "Icons8 (Icons)": "https://icons8.com/",
         "Pixabay (Web Images)": "https://pixabay.com/",
         "Electron (Cross-platform desktop apps)": "https://www.electronjs.org/",
         "Svelte (DOM framework)": "https://svelte.dev/",
         "Rollup (Module bundler)": "https://rollupjs.org/",
         "Socket.io (LAN connections)": "https://socket.io/",
         "Express (Web framework)": "https://expressjs.com/",
         "NDI® SDK (IP-streaming)": "https://ndi.video/",
+        "CAPTION.Ninja (Live captions)": "https://caption.ninja/",
     }
 </script>
 
 <div style="text-align: center;">
-    <h1>FreeShow</h1>
+    <div class="logo">
+        <img style="height: 35px;" src="./import-logos/freeshow.webp" alt="FreeShow-logo" />
+        <h1 style="color: var(--text);font-size: 1.7em;">FreeShow</h1>
+    </div>
 
     <p>
         <span style="opacity: 0.8;">v{$version} -</span>
@@ -35,15 +39,27 @@
 <br />
 
 <div class="main">
-    <div><T id="about.made" /> Kristoffer Vassbø</div>
-    <div><T id="about.report" /></div>
-    <div>
-        <T id="about.help" />
-        <Link url="mailto:dev@freeshow.app">dev@freeshow.app</Link>
-    </div>
-    <div>
-        <T id="about.support" />
-        <Link url="https://livecs.org/partner">https://livecs.org/partner</Link>
+    <div class="text">
+        <div>
+            • <T id="about.more" />
+            <Link url="https://churchapps.org/">ChurchApps</Link>
+        </div>
+        <div>
+            • <T id="about.report" />
+            <Link url="https://github.com/ChurchApps/FreeShow/issues">GitHub Issues</Link>
+        </div>
+        <div>
+            • <T id="about.translate" />
+            <Link url="https://app.transifex.com/nettbiter/freeshow/">Transifex</Link>
+        </div>
+        <!-- <div>
+            • <T id="about.mail" />
+            <Link url="mailto:dev@freeshow.app">dev@freeshow.app</Link>
+        </div> -->
+        <div>
+            • <T id="about.support" />!
+            <Link url="https://livecs.org/partner">livecs.org/partner</Link>
+        </div>
     </div>
 
     <br />
@@ -60,6 +76,8 @@
             </div>
         {/each}
     </div>
+
+    <div style="text-align: center;font-size: 0.7em;opacity: 0.5;margin-top: 12px;"><T id="about.made" /> Kristoffer Vassbø (2021)</div>
 </div>
 
 <style>
@@ -69,6 +87,15 @@
         gap: 5px;
     }
 
+    .logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0px 10px;
+        width: 100%;
+        gap: 10px;
+    }
+
     h5 {
         color: var(--text);
         text-transform: uppercase;

diff --git a/src/frontend/components/output/Output.svelte b/src/frontend/components/output/Output.svelte
@@ -50,7 +50,19 @@
     $: refreshOutput = out.refresh
     $: if (outputId || refreshOutput) updateOutData()
     function updateOutData(type: string = "") {
-        if (!type || type === "slide") slide = clone(out.slide || null)
+        if (!type || type === "slide") {
+            let noLineCurrent = clone(slide || {})
+            delete noLineCurrent.line
+            let noLineNew = clone(out?.slide || {})
+            delete noLineNew.line
+
+            // don't refresh if changing lines on another slide & content is unchanged
+            if (!refreshOutput && lines[currentLineId]?.start === null && JSON.stringify(noLineCurrent) === JSON.stringify(noLineNew)) return
+
+            // WIP option to turn off "content refresh" if slide content is identical to previous content ?
+
+            slide = clone(out.slide || null)
+        }
         if (!type || type === "background") background = clone(out.background || null)
         if (!type || type === "overlays") {
             storedOverlayIds = JSON.stringify(out.overlays)
@@ -109,7 +121,7 @@
     // lines
     let lines: any = {}
     $: currentLineId = slide?.id
-    $: lines[currentLineId] = getOutputLines(slide, currentStyle.lines)
+    $: if (currentLineId) lines[currentLineId] = getOutputLines(slide, currentStyle.lines)
 
     // metadata
     let metadata: OutputMetadata = {}
@@ -221,6 +233,7 @@
             {lines}
             {ratio}
             {mirror}
+            {preview}
             customTemplate={currentStyle.template}
             transition={transitions.text}
             transitionEnabled={!mirror && transitions.text?.type !== "none" && transitions.text?.duration}

diff --git a/src/frontend/components/output/layers/SlideContent.svelte b/src/frontend/components/output/layers/SlideContent.svelte
@@ -18,6 +18,7 @@
 
     export let ratio: number
     export let mirror: boolean = false
+    export let preview: boolean = false
     export let customTemplate: string = ""
     export let transition: any = {}
     export let transitionEnabled: boolean = false
@@ -142,6 +143,7 @@
                                 {transitionEnabled}
                                 outputStyle={currentStyle}
                                 {mirror}
+                                {preview}
                                 slideIndex={outSlide.index}
                             />
                         {/if}

diff --git a/src/frontend/components/show/Projects.svelte b/src/frontend/components/show/Projects.svelte
@@ -121,11 +121,11 @@
         <div class="tabs">
             <Button on:click={() => history({ id: "UPDATE", newData: { replace: { parent: $projects[$activeProject || ""]?.parent || "/" } }, location: { page: "show", id: "project_folder" } })} center title={$dictionary.new?.folder}>
                 <Icon id="folder" right={!$labelsDisabled} />
-                {#if !$labelsDisabled}<T id="new.folder" />{/if}
+                {#if !$labelsDisabled}<p><T id="new.folder" /></p>{/if}
             </Button>
             <Button on:click={() => history({ id: "UPDATE", newData: { replace: { parent: $projects[$activeProject || ""]?.parent || "/" } }, location: { page: "show", id: "project" } })} center title={$dictionary.new?.project}>
                 <Icon id="project" right={!$labelsDisabled} />
-                {#if !$labelsDisabled}<T id="new.project" />{/if}
+                {#if !$labelsDisabled}<p><T id="new.project" /></p>{/if}
             </Button>
         </div>
     {:else}
@@ -163,7 +163,7 @@
     <div class="tabs">
         <Button style="width: 100%;" title={$dictionary.new?.section} on:click={addSection} center>
             <Icon id="section" right={!$labelsDisabled} />
-            {#if !$labelsDisabled}<T id="new.section" />{/if}
+            {#if !$labelsDisabled}<p><T id="new.section" /></p>{/if}
         </Button>
     </div>
 {/if}

diff --git a/src/frontend/components/show/Show.svelte b/src/frontend/components/show/Show.svelte
@@ -25,6 +25,7 @@
 <div class="main">
     {#if show}
         {#if show.type === "video" || show.type === "image" || show.type === "player"}
+            <!-- WIP indicate that this does not loop when played! -->
             <div style="display: flex;flex-direction: column;height: 100%;">
                 {#if show.type === "video" || show.type === "player"}
                     <VideoShow {show} {mediaStyle} />

diff --git a/src/frontend/components/slide/Textbox.svelte b/src/frontend/components/slide/Textbox.svelte
@@ -128,7 +128,7 @@
     $: lineBg = item?.specialStyle?.lineBg
 
     // actions
-    $: if ((preview || $currentWindow === "output") && item?.actions) runActions()
+    $: if ($currentWindow === "output" && item?.actions) runActions() // preview ||
     function runActions() {
         Object.keys(item?.actions || {}).forEach((action) => {
             if (actions[action]) actions[action](item?.actions[action])
@@ -365,7 +365,7 @@
         mediaItemPath = item.src || ""
 
         // only load thumbnails in main
-        if ($currentWindow) return
+        if ($currentWindow || preview) return
 
         let newPath = await loadThumbnail(mediaItemPath, mediaSize.slideSize)
         if (newPath) mediaItemPath = newPath

diff --git a/src/frontend/components/system/Resizeable.svelte b/src/frontend/components/system/Resizeable.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
     import { onMount } from "svelte"
     import { resized } from "../../stores"
+    import { DEFAULT_WIDTH } from "../../utils/common"
 
     export let id: string
     export let side: "left" | "right" | "top" | "bottom" = "left"
-    export let width: number = 300
-    let defaultWidth: number = Number(width.toString())
+
+    let width: number = DEFAULT_WIDTH
     let handleWidth: number = 4
-    export let maxWidth: number = defaultWidth * 2 // * 3
+    export let maxWidth: number = DEFAULT_WIDTH * 2.2
     export let minWidth: number = handleWidth
 
     let loaded = false
     onMount(() => {
         setTimeout(() => {
-            width = $resized[id] ?? 300
+            width = $resized[id] ?? DEFAULT_WIDTH
             loaded = true
         }, 2000)
     })
@@ -50,9 +51,9 @@
     }
 
     function getWidth(width: number) {
-        if (width < (defaultWidth * 0.6) / 2) return minWidth
-        if (width < defaultWidth * 0.6) return defaultWidth * 0.6
-        if (width > defaultWidth - 20 && width < defaultWidth + 20) return defaultWidth
+        if (width < (DEFAULT_WIDTH * 0.6) / 2) return minWidth
+        if (width < DEFAULT_WIDTH * 0.6) return DEFAULT_WIDTH * 0.6
+        if (width > DEFAULT_WIDTH - 20 && width < DEFAULT_WIDTH + 20) return DEFAULT_WIDTH
         if (width > maxWidth) return maxWidth
         move = true
         return width
@@ -76,7 +77,7 @@
             return
         }
 
-        width = storeWidth === null || storeWidth < defaultWidth / 2 ? defaultWidth : storeWidth
+        width = storeWidth === null || storeWidth < DEFAULT_WIDTH / 2 ? DEFAULT_WIDTH : storeWidth
         storeWidth = null
     }
 

diff --git a/src/frontend/stores.ts b/src/frontend/stores.ts
@@ -14,8 +14,8 @@ import type { BibleCategories, Categories, DrawerTabs, SettingsTabs, TopViews }
 import type { Playlist } from "./../types/Audio"
 import type { Outputs } from "./../types/Output"
 import type { DrawerTabIds } from "./../types/Tabs"
-import type { History } from "./components/helpers/history"
 import type { API_metronome } from "./components/actions/api"
+import type { History } from "./components/helpers/history"
 
 // ----- TEMPORARY VARIABLES -----
 
@@ -206,7 +206,7 @@ export const drawer: Writable<{ height: number; stored: null | number }> = writa
 export const mediaOptions: Writable<MediaOptions> = writable({ columns: 5, mode: "grid" }) // {default}
 
 // OTHER
-export const resized: Writable<NumberObject> = writable({ leftPanel: 300, rightPanel: 300, leftPanelDrawer: 300, rightPanelDrawer: 300 }) // {default}
+export const resized: Writable<NumberObject> = writable({ leftPanel: 290, rightPanel: 290, leftPanelDrawer: 290, rightPanelDrawer: 290 }) // {default}
 export const sorted: Writable<any> = writable({}) // {}
 export const dataPath: Writable<string> = writable("") // ""
 export const lockedOverlays: Writable<string[]> = writable([]) // []

diff --git a/src/frontend/utils/common.ts b/src/frontend/utils/common.ts
@@ -7,6 +7,8 @@ import { convertAutosave } from "../values/autosave"
 import { send } from "./request"
 import { save } from "./save"
 
+export const DEFAULT_WIDTH = 290 // --navigation-width (global.css) | resized (stores.ts & defaults.ts)
+
 // create toast popup
 export function newToast(msg: string) {
     if (!msg) return

diff --git a/src/frontend/utils/language.ts b/src/frontend/utils/language.ts
@@ -1,4 +1,4 @@
-import { derived, get } from "svelte/store"
+import { get } from "svelte/store"
 import { MAIN, REMOTE } from "../../types/Channels"
 import { dictionary, language } from "../stores"
 import { replace } from "./languageData"
@@ -12,7 +12,7 @@ import { send } from "./request"
 const defaultPath = "./lang/en.json"
 
 // WIP right to left
-const dir = derived(language, ($locale) => ($locale === "ar" ? "rtl" : "ltr"))
+// const dir = derived(language, ($locale) => ($locale === "ar" ? "rtl" : "ltr"))
 
 function setLanguage(locale: string = "") {
     if (!locale) {
@@ -80,4 +80,4 @@ const translate = (id: string, { parts = false } = {}) => {
     return `${pre}${id}${suf}`
 }
 
-export { dir, setLanguage, translate }
+export { setLanguage, translate }