From c5168937c22140904c9592f44c736d4ac96a62e9 Mon Sep 17 00:00:00 2001
From: udu3324 <builder7177@gmail.com>
Date: Wed, 15 Jan 2025 22:25:12 -0600
Subject: [PATCH] use db.js for storage/lookup

---
 src/lib/db.js                             | 80 ++++++++++++++++++-----
 src/routes/+layout.svelte                 | 27 --------
 src/routes/Footer.svelte                  | 16 +----
 src/routes/editor/+page.svelte            |  6 +-
 src/routes/editor/BottomBar.svelte        | 47 ++++---------
 src/routes/editor/TopBar.svelte           | 17 +----
 src/routes/editor/TrackContextMenu.svelte | 24 ++++---
 src/routes/editor/Tracks.svelte           | 28 ++------
 8 files changed, 104 insertions(+), 141 deletions(-)

diff --git a/src/lib/db.js b/src/lib/db.js
index 9c3cd67..21d2d1f 100644
--- a/src/lib/db.js
+++ b/src/lib/db.js
@@ -1,6 +1,11 @@
-import Dexie from 'dexie';
+import Dexie from 'dexie'
+import { writable } from 'svelte/store'
 
-export const db = new Dexie('webbase')
+const db = new Dexie('webbase')
+
+const darkMode = writable(false)
+const playSnap = writable(false)
+const analysisEnterAction = writable("flag")
 
 db.version(1).stores({
     load: 'projectID',
@@ -16,18 +21,59 @@ db.on('populate', () => {
     })
 })
 
-export async function setDarkMode(enable) {
-    try {
-        await db.preference.update(1, { darkMode: enable })
-  
-        // Update the document's class
-        const html = document.documentElement
-        if (enable) {
-            html.classList.add('dark')
-        } else {
-            html.classList.remove('dark')
-        }
-    } catch (error) {
-        console.error('Failed to set dark mode:', error)
-    }
-}
\ No newline at end of file
+db.on('ready', async () => {
+    //fetch preferences for svelte components
+    await db.preference.get(1).then(pref => {
+        darkMode.set(pref.darkMode)
+        playSnap.set(pref.playSnap)
+        analysisEnterAction.set(pref.analysisEnterAction)
+    }).catch(() => {
+        console.log("error loading preferences! might be missing. trying to create it...")
+        
+        //worse case scenario if db is very old
+        db.preference.add({
+            darkMode: false, 
+            playSnap: true, 
+            analysisEnterAction: "flag"
+        }).then(() => {
+            console.log("sucessfully created preference db")
+        }).catch(() => {
+            console.log("could not create preference db!!!! SECOND FAIL")
+        })
+    })
+
+    //subscribe to stores to save back to db
+    darkMode.subscribe((bool) => {
+        console.log("updating preference db")
+
+        db.preference.update(1, { darkMode: bool }).then(() => {
+            // Update the document's class
+            const html = document.documentElement
+            if (bool) {
+                html.classList.add('dark')
+            } else {
+                html.classList.remove('dark')
+            }
+        }).catch((error) => {
+            console.error('Failed to set dark mode:', error)
+        })
+    })
+
+    playSnap.subscribe((bool) => {
+        console.log("updating preference db")
+
+        db.preference.update(1, { playSnap: bool }).catch((error) => {
+            console.error('Failed to set play snap:', error)
+        })
+    })
+
+    analysisEnterAction.subscribe((str) => {
+        console.log("updating preference db")
+
+        db.preference.update(1, { analysisEnterAction: str }).catch((error) => {
+            console.error('Failed to set analysis enter action:', error)
+        })
+    })
+})
+
+export { db, darkMode, playSnap, analysisEnterAction }
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6303691..f07c818 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,4 @@
 <script>
-	import { db } from "$lib/db.js"
-    import { onMount } from "svelte";
-
 	import { injectAnalytics } from '@vercel/analytics/sveltekit'
 	//import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
 
@@ -12,30 +9,6 @@
 	
 	injectAnalytics()
 	//injectSpeedInsights()
-
-	onMount(() => {
-		db.preference.get(1).then(pref => {
-			console.log("loaded preference db sucessfully")
-
-            if (pref.darkMode) {
-                const html = document.documentElement
-                html.classList.add('dark')
-            }
-        }).catch(() => {
-            console.log("error loading preferences! might be missing. trying to create it...")
-			
-			//worse case scenario if db is very old
-            db.preference.add({
-                darkMode: false, 
-	    	    playSnap: true, 
-	    	    analysisEnterAction: "flag"
-            }).then(() => {
-                console.log("sucessfully created preference db")
-            }).catch(() => {
-                console.log("could not create preference db!!!! SECOND FAIL")
-            })
-        })
-	})
 </script>
 
 {@render children()}
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 94ece36..ce1f0ea 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -1,27 +1,15 @@
 <script>
 	import { faMoon } from "@fortawesome/free-solid-svg-icons";
-	import { onMount } from "svelte";
-    import { db } from "$lib/db.js"
-    import { setDarkMode } from "$lib/db"
+    import { darkMode } from "$lib/db"
 	import Fa from "svelte-fa";
 
-    let darkMode = false
-
     function open() {
         window.open("https://github.com/udu3324/mp3mark", "_blank")
     }
 
     function toggleDarkMode() {        
-        darkMode = !darkMode
-
-        setDarkMode(darkMode)
+        darkMode.set(!$darkMode)
     }
-
-    onMount(() => {
-        db.preference.get(1).then(pref => {
-            darkMode = pref.darkMode
-        })
-    })
 </script>
 
 <div class="fixed bottom-0 w-screen h-6 z-20 bg-slate-900 text-white text-center select-none">
diff --git a/src/routes/editor/+page.svelte b/src/routes/editor/+page.svelte
index ddf7e85..cdcfa4b 100644
--- a/src/routes/editor/+page.svelte
+++ b/src/routes/editor/+page.svelte
@@ -25,8 +25,6 @@
     let volume
     let volumeSet = false
     let enterAction
-
-    let centerPlayhead
     
     //for loader
     let dataTable
@@ -151,8 +149,8 @@
     </div>
 
     <TopBar bind:title={title} editorData={editorData} bind:projectID={projectID} bind:enterAction={enterAction} />
-    <Tracks bind:this={tracksObj} id="track-div" bind:loading={loading} bind:tracks={tracks} bind:bpm={bpm} bind:length={durration} bind:timeSigBeat={timeSignatureBeat} bind:centerPlayhead={centerPlayhead} bind:enterAction={enterAction}/>
-    <BottomBar bind:playing={playing} bind:volume={volume} bind:centerPlayhead={centerPlayhead}/>
+    <Tracks bind:this={tracksObj} id="track-div" bind:loading={loading} bind:tracks={tracks} bind:bpm={bpm} bind:length={durration} bind:timeSigBeat={timeSignatureBeat} bind:enterAction={enterAction}/>
+    <BottomBar bind:playing={playing} bind:volume={volume}/>
     <Playhead />
 </div>
 
diff --git a/src/routes/editor/BottomBar.svelte b/src/routes/editor/BottomBar.svelte
index ce75763..37d47aa 100644
--- a/src/routes/editor/BottomBar.svelte
+++ b/src/routes/editor/BottomBar.svelte
@@ -1,13 +1,10 @@
 <script>
     import { currentTime, resolution } from "$lib/editor"
-    import { setDarkMode } from "$lib/db"
+    import { darkMode, playSnap } from "$lib/db"
 	import { faDownLeftAndUpRightToCenter, faMoon, faPlay, faSquare, faVolumeHigh, faVolumeLow, faVolumeMute } from "@fortawesome/free-solid-svg-icons";
     import { wavesurfer } from "$lib/editor.js"
-	import Fa from "svelte-fa";
-	import { onMount } from "svelte";
-    import { db } from "$lib/db.js"
+	import Fa from "svelte-fa"
 
-    export let centerPlayhead = true
     export let playing = false
     export let volume
 
@@ -16,7 +13,7 @@
     let centerHeadColor = "bg-white"
 
     let scrollX = 0
-    let scrollY = 0
+    // biome-ignore lint/style/useConst: <explanation>
     let innerWidth = 0
 
     $: {
@@ -125,7 +122,7 @@
             return
         }
 
-        if (!centerPlayhead) {
+        if (!$playSnap) {
             return
         }
 
@@ -147,45 +144,29 @@
             })
         }
     })
-
-    $: {
-        if (centerPlayhead) {
+    
+    playSnap.subscribe((bool) => {
+        if (bool) {
             centerHeadColor = "bg-yellow-600 dark:bg-slate-900"
         } else {
             centerHeadColor = "bg-white dark:bg-slate-700"
         }
-    }
+    })
 
     function toggleCenterPlayhead() {
-        centerPlayhead = !centerPlayhead
-
-        db.preference.update(1, { playSnap: centerPlayhead }).then(() => {
-            console.log("sucessfully wrote to preferences db")
-        })
+        playSnap.set(!$playSnap)
     }
 
-    let toggledDark = false
-    function darkMode() {
-        //console.log("clicked with ", toggledDark)
-        toggledDark = !toggledDark
-
-        setDarkMode(toggledDark)
+    function toggleDark() {
+        darkMode.set(!$darkMode)
     }
-
-    onMount(() => {
-        db.preference.get(1).then(pref => {
-            centerPlayhead = pref.playSnap
-
-            toggledDark = pref.darkMode
-        })
-    })
 </script>
 
-<svelte:window on:keydown={onKeyDown} bind:scrollX={scrollX} bind:scrollY={scrollY}/>
+<svelte:window on:keydown={onKeyDown} bind:scrollX={scrollX}/>
 
 <div bind:clientWidth={innerWidth} class="fixed flex bottom-0 w-screen h-16 z-40 p-2 bg-yellow-500 dark:bg-slate-600 dark:text-slate-500">
     <div class="flex flex-col">
-        <button on:click={darkMode} class="controls-small bg-white dark:bg-slate-700" title="Toggle Dark Mode">
+        <button on:click={toggleDark} class="controls-small bg-white dark:bg-slate-700" title="Toggle Dark Mode">
             <Fa icon={faMoon}/>
         </button>
         <button on:click={toggleCenterPlayhead} class="controls-small mt-2 {centerHeadColor}" title="(s) Center Playhead">
@@ -227,7 +208,7 @@
     }
 
     .dynamic-pause:active {
-        @apply bg-red-400 dark:bg-red-700 text-red-600;
+        @apply bg-red-400 dark:bg-red-700 dark:text-red-600;
     }
 
     .button-icon {
diff --git a/src/routes/editor/TopBar.svelte b/src/routes/editor/TopBar.svelte
index ed7dd89..3fd1c98 100644
--- a/src/routes/editor/TopBar.svelte
+++ b/src/routes/editor/TopBar.svelte
@@ -1,6 +1,5 @@
 <script>
-   import { db } from "$lib/db.js"
-   import { onMount } from "svelte"
+   import { db, analysisEnterAction } from "$lib/db.js"
    import { currentTime } from "$lib/editor"
    import { goto } from '$app/navigation'
 	import Fa from "svelte-fa";
@@ -12,8 +11,6 @@
    export let editorData
    export let projectID
 
-   export let enterAction
-
    // biome-ignore lint/style/useConst: <explanation>
    let innerWidth = 0
    let branding = "mp3mark - "
@@ -167,7 +164,7 @@
 
       configLabel = "Default Enter Action"
       configDescription = "Set this between \"flag\" or \"mark\". This changes the action of pressing enter when creating an analysis object."
-      configValue = enterAction
+      configValue = $analysisEnterAction
    }
 
    function cancelConfig() {
@@ -238,9 +235,7 @@
                return
             }
 
-            enterAction = configValue
-
-            await db.preference.update(1, { analysisEnterAction: enterAction })
+            analysisEnterAction.set(configValue)
 
             //alert("Sucessfully set default enter action!")
             cancelConfig()
@@ -378,12 +373,6 @@
          closeAll()
       }
    }
-
-   onMount(() => {
-      db.preference.get(1).then(pref => {
-         enterAction = pref.analysisEnterAction
-      })
-   })
 </script>
 
 <svelte:window on:keydown={onKeyDown} on:mousedown={onMouseDown}/>
diff --git a/src/routes/editor/TrackContextMenu.svelte b/src/routes/editor/TrackContextMenu.svelte
index 4e9accc..79f73b5 100644
--- a/src/routes/editor/TrackContextMenu.svelte
+++ b/src/routes/editor/TrackContextMenu.svelte
@@ -1,17 +1,10 @@
 <script>
+    import { analysisEnterAction } from "$lib/db.js"
 	import { faFlag, faMarker, faXmark } from "@fortawesome/free-solid-svg-icons";
 	import Fa from "svelte-fa";
 
     export let tracks
-    export let enterAction
-
     export let note = ""
-    
-    // biome-ignore lint/style/useConst: its assigned multiple times
-    export let mouseX = 0
-    // biome-ignore lint/style/useConst: ~
-    export let mouseY = 0
-
     export let trackMenuHidden = "hidden"
 
     let menuLeftPX = 0
@@ -19,6 +12,16 @@
 
     let noteInput
 
+    //track mouse position 
+    let mouseX
+    let mouseY
+
+	function handleMousemove(event) {
+		mouseX = event.clientX;
+		mouseY = event.clientY;
+        //console.log("m", mouseX, mouseY)
+	}
+
     export function showContext(trackIndex, i) {
         //console.log("showing mark menu for track", trackIndex, i)
         //console.log("mouseX", mouseX)
@@ -85,8 +88,7 @@
 
     function onKeyDown(e) {
         if (e.keyCode === 13) {
-            //console.log("enterAction", enterAction)
-            if (enterAction === "flag") {
+            if ($analysisEnterAction === "flag") {
                 createFlag()
             } else {
                 createMark()
@@ -95,6 +97,8 @@
     }
 </script>
 
+<svelte:window on:mousemove={handleMousemove}/>
+
 <div style="--menu-left: {menuLeftPX}px; --menu-top: {menuTopPX}px;" class="track-menu {trackMenuHidden}">
     <div class="flex flex-row mb-1">
         <button on:click={closeContext} class="button-icon text-3xl mr-1"><Fa icon={faXmark}/></button>
diff --git a/src/routes/editor/Tracks.svelte b/src/routes/editor/Tracks.svelte
index 9eb23d2..01b1d05 100644
--- a/src/routes/editor/Tracks.svelte
+++ b/src/routes/editor/Tracks.svelte
@@ -4,7 +4,7 @@
 	
     import { onMount } from "svelte"
     import { resolution, tracksHeight } from "$lib/editor.js"
-    import { db } from "$lib/db.js"
+    import { playSnap } from "$lib/db.js"
 	
 	import TrackContextMenu from "./TrackContextMenu.svelte"
 	import TrackVisualizer from "./TrackVisualizer.svelte"
@@ -18,11 +18,10 @@
 
     export let loading = true
 
-    export let centerPlayhead
-
     // biome-ignore lint/style/useConst: it isnt actually constant
     let note = ""
     let trackContextMenu
+    // biome-ignore lint/style/useConst: <explanation>
     let trackMenuHidden = "hidden"
 
     let pollingTrack
@@ -58,15 +57,9 @@
     }
 
     async function checkForSnap() {
-        const pref = await db.preference.get(1)
-
-        if (pref.playSnap) {
+        if ($playSnap) {
             //toggle it off
-            db.preference.update(1, { playSnap: false }).then(() => {
-                console.log("unsnapped playhead sucessfully")
-            })
-            
-            centerPlayhead = false
+            playSnap.set(false)
         } else {
             trackContextMenu.closeContext()
         }
@@ -86,15 +79,6 @@
 
         console.log("secondsPerBeat", secondsPerBeat, "total ticks", ticks, "tickOffset", tickOffset)
     }
-    
-    //track mouse position for track context menu
-    let mouseX
-    let mouseY
-	function handleMousemove(event) {
-		mouseX = event.clientX;
-		mouseY = event.clientY;
-        //console.log("m", mouseX, mouseY)
-	}
 
     function deleteFlag(track, flag) {
         console.log("removing flag", flag)
@@ -303,8 +287,8 @@
 </div>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div bind:clientHeight={clientHeight} on:mousemove={handleMousemove} id="track-d" class="pt-12 pb-16 dark:bg-slate-800" style="min-width: {trackLength}px">
-    <TrackContextMenu bind:enterAction={enterAction} bind:this={trackContextMenu} bind:trackMenuHidden={trackMenuHidden} bind:note={note} mouseX={mouseX} mouseY={mouseY} bind:tracks={tracks}/>
+<div bind:clientHeight={clientHeight} id="track-d" class="pt-12 pb-16 dark:bg-slate-800" style="min-width: {trackLength}px">
+    <TrackContextMenu bind:enterAction={enterAction} bind:this={trackContextMenu} bind:trackMenuHidden={trackMenuHidden} bind:note={note} bind:tracks={tracks}/>
     
     <TrackVisualizer bind:pollingTrack={pollingTrack} trackLength={trackLength} ticks={ticks} timeSigBeat={timeSigBeat} marginRightValue={marginRightValue}/>