asdsadas

src/main/index.ts

@@ -108,22 +108,27 @@ function createWindow() {
         const version = app.getVersion();
         return { version: version };
     });
-    ipcMain.on('dir:open', () => {
-        openFolderDialog();
+    ipcMain.on('dir:open', (_, type) => {
+        openFolderDialog(type);
     });
 
-    ipcMain.on('dir:scan', async (_, filePath) => {
+    ipcMain.on('dir:scan', async (_, type, filePath) => {
         if (!win) return;
         if (scan) scan.cancel();
         console.log(filePath);
-        win.webContents.send('files:selected', { dir: filePath, done: false });
+        win.webContents.send('files:selected', {
+            type,
+            dir: filePath,
+            done: false
+        });
         // attempt to prevent race conditions lol
         setTimeout(async function () {
-            store.set('path', filePath);
+            store.set(type, filePath);
             if (scan) scan.cancel(); // stop existing search
-            scan = scanDir();
+            scan = scanDir(type);
             await scan.start(filePath);
             win?.webContents.send('files:selected', {
+                type,
                 dir: filePath,
                 done: true
             });
@@ -202,8 +207,8 @@ ipcMain.on('closed', () => {
         app.quit();
     }
 });
-
-async function openFolderDialog() {
+export type listType = 'standby' | 'track';
+async function openFolderDialog(type: listType) {
     if (!win) return;
     const result = await dialog
         .showOpenDialog(win, { properties: ['openDirectory'] })
@@ -213,14 +218,18 @@ async function openFolderDialog() {
     if (result.canceled) return;
     const filePath = result.filePaths[0];
     if (!filePath || filePath[0] === 'undefined') return;
-    win.webContents.send('files:selected', { dir: filePath, done: false });
+    win.webContents.send('files:selected', {
+        type,
+        dir: filePath,
+        done: false
+    });
     // attempt to prevent race conditions lol
     setTimeout(async function () {
-        store.set('path', filePath);
+        store.set(type, filePath);
         if (scan) scan.cancel(); // stop existing search
-        scan = scanDir();
+        scan = scanDir(type);
         await scan.start(filePath);
-        win?.webContents.send('files:selected', { dir: filePath, done: true });
+        win?.webContents.send('files:selected', { type, filePath, done: true });
 
         //watchDir(filePath);
     }, 500);
@@ -242,7 +251,7 @@ function checkIfAudioFile(file: string) {
         file.endsWith('.opus')
     );
 }
-function scanDir() {
+function scanDir(type: listType) {
     let isCancelled = false;
 
     async function walk(dir: string) {
@@ -263,21 +272,25 @@ function scanDir() {
                 } else if (checkIfAudioFile(file)) {
                     ///
                     const metadata = await parseMetadata(path);
-                    win?.webContents.send('playlist:add', metadata);
+                    win?.webContents.send('playlist:add', type, metadata);
                 }
             }
         } catch (e) {
             console.error(e);
             isCancelled = true;
-            win?.webContents.send('files:selected', { dir: '', done: true });
+            win?.webContents.send('files:selected', {
+                type,
+                dir: '',
+                done: true
+            });
             return;
         }
     }
     // cancel the recursion
     function cancelWalk() {
         isCancelled = true;
         console.log('scan directory cancelled');
-        win?.webContents.send('files:selected', { dir: '', done: true });
+        win?.webContents.send('files:selected', { type, dir: '', done: true });
     }
 
     return {

src/preload/index.ts

@@ -2,7 +2,7 @@ import { contextBridge, ipcRenderer } from 'electron';
 import { electronAPI } from '@electron-toolkit/preload';
 import { Song, parseMetadata } from '../main/parseMetadata';
 
-import type { updateData } from '../main/index';
+import type { updateData, listType } from '../main/index';
 //const { contextBridge, ipcRenderer } = require('electron')
 import { statSync } from 'fs';
 import { sep } from 'path';
@@ -13,16 +13,17 @@ const api = {
     handleSaveSetting: (callback) => ipcRenderer.on('save-settings', callback),
     handleLastPlayed: (callback) => ipcRenderer.on('last-played', callback),
     handleSortChange: (callback) => ipcRenderer.on('sort-change', callback),
-    onPlaylistChanged: (callback: (e, data: { dir; done }) => void) =>
+    onPlaylistChanged: (callback: (e, data: { type; dir; done }) => void) =>
         ipcRenderer.on('files:selected', callback),
-    onPlaylistAdd: (callback: (e, song: Song) => void) =>
+    onPlaylistAdd: (callback: (e, type: listType, song: Song) => void) =>
         ipcRenderer.on('playlist:add', callback),
-    onPlaylistRemoved: (callback) =>
+    onPlaylistRemoved: (callback: (e, type: listType, path: string) => void) =>
         ipcRenderer.on('playlist:remove', callback),
     handleClosed: () => ipcRenderer.send('closed'),
-    handleScanDir: (path: string) => ipcRenderer.send('dir:scan', path),
+    handleScanDir: (type: listType, path: string) =>
+        ipcRenderer.send('dir:scan', type, path),
     cancelScanDir: () => ipcRenderer.send('dir:scan:cancel'),
-    openDir: () => ipcRenderer.send('dir:open'),
+    openDir: (type: listType) => ipcRenderer.send('dir:open', type),
     logging: (callback) => ipcRenderer.on('logging', callback),
     fsStatSync: (path: string) => statSync(path),
     parseMetadata: (filePath: string) => parseMetadata(filePath),

src/renderer/src/App.svelte

@@ -45,10 +45,10 @@ onMount(() => {
     });
 
     async function checkSettings() {
-        const getpath = await eAPI.dataGet('path');
+        const getpath = await eAPI.dataGet('track');
         if (!!getpath && getpath.type === 'ok') {
             if (!getpath.data) return;
-            eAPI.handleScanDir(getpath.data);
+            eAPI.handleScanDir('track', getpath.data);
             path = getpath.data;
         }
     }
@@ -85,6 +85,8 @@ eAPI.handleSortChange((_, arg) => {
 });
 
 eAPI.onPlaylistChanged(async (_, data) => {
+    if (data.type !== 'track') return;
+
     if ($isPlaying) isPlaying.set(false);
 
     if (!data.done) {

src/renderer/src/Playlist.svelte

@@ -8,7 +8,7 @@ import { song } from './store';
 export let playlist: ClientSong[];
 export let title = 'Track List';
 export let path = '';
-
+export let type: 'standby' | 'track' = 'track';
 let loading;
 let search = '';
 const eAPI = window.api;
@@ -33,14 +33,15 @@ function changeSong(number) {
 }
 
 eAPI.onPlaylistChanged(async (_, data) => {
+    if (data.type !== type) return;
     loading = !data.done;
     if (!loading) {
         song.set(playlist[0]);
         console.log('playlist finish load');
     }
 });
-eAPI.onPlaylistAdd(async (_, metadata) => {
-    if (!playlist) return;
+eAPI.onPlaylistAdd(async (_, listtype, metadata) => {
+    if (!playlist || type !== listtype) return;
     if (playlist.some((item) => item.filePath === metadata.filePath)) return;
 
     const i = playlist.length;
@@ -53,8 +54,8 @@ eAPI.onPlaylistAdd(async (_, metadata) => {
         }
     ];
 });
-eAPI.onPlaylistRemoved((_, path) => {
-    if (!playlist) return;
+eAPI.onPlaylistRemoved((_, type, path) => {
+    if (!playlist || type !== listtype) return;
 
     const remIndex = playlist.findIndex((x) => x.filePath == path);
     if (remIndex == -1) return;
@@ -79,15 +80,15 @@ eAPI.onPlaylistRemoved((_, path) => {
             <p class="text-xs text-white/75">{path}</p>
         </div>
         {#if list.length !== 0}
-            <FileLoadButton showReload {path} />
+            <FileLoadButton showReload {path} {type} />
         {/if}
     </div>
 
     {#if list.length === 0}
         <div class="grid place-items-center w-full h-1/2">
             <div class="flex flex-col items-center gap-2">
                 <p>click "open folder" 2 get started 🐸</p>
-                <FileLoadButton {path} />
+                <FileLoadButton {path} {type} />
             </div>
         </div>
     {:else}

src/renderer/src/StandbyMode.svelte

@@ -1,16 +1,19 @@
 <script>
-import { crossfade, fade } from 'svelte/transition';
+import { crossfade, fade, fly } from 'svelte/transition';
 import { quintOut } from 'svelte/easing';
 import Playlist from './Playlist.svelte';
 import { isPlaying } from './store';
+import { onMount } from 'svelte';
+import Fa from 'svelte-fa';
+import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 const eAPI = window.api;
 let isOpen = false;
 let playlist;
 let path = '';
 const [send, receive] = crossfade({
     duration: (d) => Math.sqrt(d * 200),
 
-    fallback(node, params) {
+    fallback(node, _) {
         const style = getComputedStyle(node);
         const transform = style.transform === 'none' ? '' : style.transform;
 
@@ -24,13 +27,25 @@ const [send, receive] = crossfade({
         };
     }
 });
+onMount(() => {
+    async function checkSettings() {
+        const getpath = await eAPI.dataGet('standby');
+        if (!!getpath && getpath.type === 'ok') {
+            if (!getpath.data) return;
+            eAPI.handleScanDir('standby', getpath.data);
+            path = getpath.data;
+        }
+    }
+    checkSettings();
+});
 
 eAPI.onPlaylistChanged(async (_, data) => {
+    if (data.type !== 'standby') return;
     if ($isPlaying) isPlaying.set(false);
     if (!data.done) {
         playlist = [];
         console.log('playlist load');
-        const getpath = await eAPI.dataGet('path');
+        const getpath = await eAPI.dataGet('standby');
         if (!getpath?.data) return;
         path = getpath.data;
     }
@@ -39,28 +54,45 @@ eAPI.onPlaylistChanged(async (_, data) => {
 
 {#if isOpen}
     <article class="wrapper">
-        <div
-            class="container"
-            in:receive={{ key: 'standby' }}
-            out:send={{ key: 'standby' }}
-        >
-            <button on:click={() => (isOpen = !isOpen)}>click</button>
-            <Playlist bind:playlist title="standby list" />
+        <div class="container" transition:fly={{ y: 200, duration: 300 }}>
+            <button
+                class="toggle rounded-t-xl"
+                on:click={() => (isOpen = !isOpen)}
+            >
+                Close
+                <Fa icon={faChevronDown} />
+            </button>
+
+            <Playlist
+                {path}
+                bind:playlist
+                title="standby list"
+                type="standby"
+            />
         </div>
 
-        <div class="backdrop" transition:fade></div>
+        <div class="backdrop" transition:fade={{ duration: 300 }}></div>
     </article>
 {:else}
-    <div
-        class="bg-blue-900"
-        in:receive={{ key: 'standby' }}
-        out:send={{ key: 'standby' }}
-    >
-        <button on:click={() => (isOpen = !isOpen)}>click</button>
+    <div class="bg-blue-900 rounded-t-xl">
+        <button
+            class="toggle"
+            class:invisible={isOpen}
+            on:click={() => (isOpen = !isOpen)}
+        >
+            Open Standby Playlist
+            <Fa icon={faChevronUp} />
+        </button>
     </div>
 {/if}
 
 <style lang="postcss">
+.toggle {
+    @apply flex w-full items-center justify-center gap-3 px-3 py-1;
+}
+.toggle:hover {
+    @apply bg-gray-800;
+}
 .wrapper {
     @apply absolute left-0 top-0  z-0 h-full w-full;
 }

src/renderer/src/components/FileLoadButton.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { handleConfirm } from './ModalConcert.svelte';
 import Fa from 'svelte-fa';
 import {
@@ -9,22 +9,24 @@ import {
 
 export let path = '';
 export let showReload = false;
+export let type: 'standby' | 'track';
 let loading;
 
 const eAPI = window.api;
 
 function reloadFolder() {
     handleConfirm('reload folder', () => {
         if (!path) return;
-        eAPI.handleScanDir(path);
+        eAPI.handleScanDir(type, path);
     });
 }
 function openFolder() {
     handleConfirm('open folder', () => {
-        eAPI.openDir();
+        eAPI.openDir(type);
     });
 }
 eAPI.onPlaylistChanged(async (_, data) => {
+    if (data.type !== type) return;
     loading = !data.done;
 });
 </script>