Frontend/settings page (#72)

* did not know this was a bug...

* base settings

* bypasscache

* update interval time

* update sleeptimer

* store default config

* future me

* chore: bump version

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: DutchJavaDev

MyMusicClientSveltePwa/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mymusicclientsveltepwa",
   "private": true,
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

MyMusicClientSveltePwa/package.json

@@ -1,3 +1,69 @@
-<div>
-    Configure settings here.
-</div>
+<script>
+  import { onMount } from "svelte";
+  import { clearStorage, getConfiguration, setConfiguration } from "../scripts/storageService";
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    const sleepTimer = formData.get("sleepTimer");
+    const fetchTimer = formData.get("fetchTimer");
+    const byPassCache = formData.get("byPassCache") === "on";
+    
+    configuarion.sleepTimer = sleepTimer;
+    configuarion.fetchTimer = fetchTimer;
+    configuarion.byPassCache = byPassCache;
+
+    setConfiguration(configuarion);
+  }
+
+  let configuarion;
+  let sleepTimer = $state(0);
+  let fetchTimer = $state(0);
+  let byPassCache = $state(false);
+
+  onMount(() => {
+    configuarion = getConfiguration();
+    sleepTimer = configuarion.sleepTimer;
+    fetchTimer = configuarion.fetchTimer;
+    byPassCache = configuarion.byPassCache;
+  });
+</script>
+
+<!-- svelte-ignore event_directive_deprecated -->
+<form on:submit|preventDefault={handleSubmit} class="p-2 rounded rounded-2 tile-bg">
+  <div class="mb-3">
+    <label for="sleepTimer" class="form-label">Sleep Timer (Minutes)</label>
+    <input type="number" required class="form-control" id="sleepTimer" name="sleepTimer" value={sleepTimer} placeholder="Stop music after some time" />
+  </div>
+  <div class="mb-3">
+    <label for="fetchTimer" class="form-label">Fetch Timer (Seconds)</label>
+    <input type="number" required class="form-control" id="fetchTimer" name="fetchTimer" value={fetchTimer} placeholder="Api interval time" />
+  </div>
+  <div class="mt-3 mb-3 p-2 rounded rounded-2 tile-bg">
+    <label for="byPassCache" class="form-label">Ignore Cached urls</label>
+    <input type="checkbox" checked={byPassCache} id="byPassCache" name="byPassCache" class="form-check-input" />
+  </div>
+  <button type="submit" class="btn btn-primary">Save Settings</button>
+</form>
+
+<div class="mt-3 mb-3 p-2 rounded rounded-2 tile-bg">
+  <label for="localStorageClear" class="form-label">Local Storage !Expirmental</label>
+  <!-- This is causing some issues, playback breaks and updating ui freezes -->
+  <!-- svelte-ignore event_directive_deprecated -->
+  <button id="localStorageClear" class="btn btn-danger" on:click={() => clearStorage()}>Clear Local Storage</button>
+</div>
+
+<div class="mt-3 mb-3 p-2 rounded rounded-2 tile-bg">
+  <button id="exportData" class="btn btn-secondary">View Server Logs</button>
+</div>
+
+<style>
+  label {
+    font-weight: bold;
+    font-size: 1.1rem;
+  }
+
+  .tile-bg {
+    background-color: #2c2c2c;
+  }
+</style>

MyMusicClientSveltePwa/src/lib/pages/Settings.svelte

@@ -2,6 +2,8 @@ const baseApiUrl = import.meta.env.VITE_BASE_API_URL;
 const staticImageUrl = import.meta.env.VITE_STATIC_IMAGE_URL;
 const staticAudioUrl = import.meta.env.VITE_STATIC_AUDIO_URL;
 
+import { getConfiguration } from "./storageService";
+
 export async function fetchPlaylists() {
     try {
         const response = await fetch(`${baseApiUrl}/playlist`);
@@ -59,9 +61,23 @@ export async function fetchPlaylistSongs(playlistId) {
 }
 
 export function getImageUrl(path) {
+
+    var config = getConfiguration();
+
+    if(config.byPassCache){
+        return `${staticImageUrl}/${path}?cb=${new Date().getMilliseconds()}`;
+    }
+
     return `${staticImageUrl}/${path}`;
 }
 
 export function getPlaybackUrl(source_id) {
+
+    var config = getConfiguration();
+
+    if(config.byPassCache){
+        return `${staticAudioUrl}/${source_id}.opus?cb=${new Date().getMilliseconds()}`;
+    }
+
     return `${staticAudioUrl}/${source_id}.opus`; // Assuming all audio files are in .opus format
 }

MyMusicClientSveltePwa/src/lib/scripts/api.js

@@ -1,11 +1,12 @@
 import { writable } from "svelte/store";
-import { getCachedPlaylists, setPlaylists, setPlaylistSongs, getCachedPlaylistSongs } from "./storageService";
+import { getCachedPlaylists, setPlaylists, setPlaylistSongs, getCachedPlaylistSongs, appConfiguration, getConfiguration } from "./storageService";
 import { fetchPlaylists, fetchPlaylistSongs, fetchNewPlaylist, fetchNewPlaylistSongs } from "./api";
 
 export const playlistsStore = writable([]);
 
-const updateInterval = 1000 * 3; // 3 seconds
+let updateInterval; 
 let isUpdating = false;
+let intervalId;
 
 // Check storage for stored playlists, if empty fetch from API
 export async function initializePlaylistService() {
@@ -22,12 +23,30 @@ export async function initializePlaylistService() {
     }
   }
 
-  setInterval(() => {
+  updateInterval = getConfiguration().fetchTimer * 1000; // Need to multiply by 1000 to get milliseconds
+  // Subscribe to configuration changes
+  // If fetchTimer is updated, clear the old interval and set a new one
+  
+  appConfiguration.subscribe(config => {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+    updateInterval = config.fetchTimer * 1000; // Need to multiply by 1000 to get milliseconds
+
+    console.log("Update interval set to:", updateInterval, "ms");
+
+    intervalId = setInterval(() => {
+    
     if (isUpdating) return; // Prevent multiple updates at the same time
+    
     isUpdating = true;
+    
     backgroundUpdate();
+    
     isUpdating = false;
+
   }, updateInterval);
+  });
 }
 
 async function backgroundUpdate() {

MyMusicClientSveltePwa/src/lib/scripts/playlistService.js

@@ -8,10 +8,10 @@ import { getSearchParameters, createSearchParameters, searchQuery } from "../scr
 
 const componentsPathMap = new Map([
   ["/404", NotFound],
-  ["/Home", Home],
+  ["/home", Home],
   ["/", Home],
-  ["/Playlists", Playlists],
-  ["/Settings", Settings],
+  ["/playlists", Playlists],
+  ["/settings", Settings],
 ]);
 
 const NotFoundRoutePath = "/404";
@@ -47,7 +47,10 @@ export function initializeRouteService() {
 
 // Sets the current route and updates the component and parameters accordingly
 // If the route does not exist, it sets the NotFound component and parameters
-export function navigateTo(newRoute, parameters = null) {
+export function navigateTo(_newRoute, parameters = null) {
+
+  let newRoute = _newRoute.toLowerCase();
+
   if (!componentsPathMap.has(newRoute)) {
     component.set(componentsPathMap.get(NotFoundRoutePath));
     componentParams.set({ page: newRoute });

MyMusicClientSveltePwa/src/lib/scripts/routeService.js

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { writable, get } from "svelte/store";
+import { getConfiguration } from "./storageService";
 
 export let timeLeft = writable(0);
 export let isTimerEnabled = writable(false);
@@ -21,7 +22,9 @@ if (get(isTimerEnabled)) {
   return;
 }
 
-const totalMinutes = 30; // Default to 30 minutes if no time is provided
+const config = getConfiguration();
+
+const totalMinutes = config.sleepTimer; // Default to 30 minutes if no time is provided
 let remainingMinutes = totalMinutes;
 
 timeLeft.set(remainingMinutes);

MyMusicClientSveltePwa/src/lib/scripts/sleeptimerService.js

@@ -1,3 +1,5 @@
+import { get, writable } from "svelte/store";
+
 // @ts-ignore
 const storageType = "localStorage";
 const PlaylistsKey = "cachedPlaylists";
@@ -7,6 +9,14 @@ const CurrentPlaylistIdKey = "currentPlaylistId";
 const CurrentSongIndexKey = "currentSongIndex";
 const CurrentShuffeldPlaylistKey = "currentShuffledPlaylist";
 const CurrentSongTimeKey = "currentSongTime";
+const ConfigKey = "appConfig";
+
+export let appConfiguration = writable(getConfiguration());
+
+export function setConfiguration(config) {
+  appConfiguration.set(config);
+  setItem(ConfigKey, config);
+}
 
 export function setPlaylists(playlists) {
   setItem(PlaylistsKey, playlists);
@@ -73,6 +83,13 @@ export function getCurrentSongTime() {
   return getItem(CurrentSongTimeKey) || 0;
 }
 
+export function getConfiguration() {
+  return getItem(ConfigKey) || { sleepTimer: 15, // minutes 
+                                 fetchTimer: 3,  // seconds
+                                 byPassCache: false 
+                                };
+}
+
 export function clearStorage() {
     if (storageAvailable(storageType)) {
         try {