move utility methods to @/utils

src/App.vue

@@ -21,25 +21,27 @@
 </template>
 
 <script setup lang="ts">
-import { onStartTyping } from "@vueuse/core";
+import { onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { onStartTyping } from "@vueuse/core";
 
-import useContextStore from "@/stores/context";
 import useQStore from "@/stores/queue";
 import useModalStore from "@/stores/modal";
-import useShortcuts from "@/composables/useKeyboard";
+import useContextStore from "@/stores/context";
+import handleShortcuts from "@/composables/useKeyboard";
 
-import ContextMenu from "@/components/contextMenu.vue";
-import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
 import Logo from "@/components/Logo.vue";
 import Modal from "@/components/modal.vue";
 import NavBar from "@/components/nav/NavBar.vue";
+import Tabs from "@/components/RightSideBar/Tabs.vue";
+import ContextMenu from "@/components/contextMenu.vue";
 import Notification from "@/components/Notification.vue";
+import Navigation from "@/components/LeftSidebar/Navigation.vue";
+import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
 import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
-import Tabs from "@/components/RightSideBar/Tabs.vue";
-import { onMounted } from "vue";
+
+import { readLocalStorage, writeLocalStorage } from "@/utils";
 
 const queue = useQStore();
 const router = useRouter();
@@ -48,7 +50,7 @@ const context_store = useContextStore();
 const app_dom = document.getElementById("app");
 
 queue.readQueue();
-useShortcuts(useQStore);
+handleShortcuts(useQStore);
 
 app_dom.addEventListener("click", (e) => {
   if (context_store.visible) {
@@ -66,8 +68,21 @@ onStartTyping(() => {
   elem.value = "";
 });
 
+function handleWelcomeModal() {
+  let welcomeShowCount = readLocalStorage("shown-welcome-message");
+
+  if (!welcomeShowCount) {
+    welcomeShowCount = 0;
+  }
+
+  if (welcomeShowCount < 2) {
+    modal.showWelcomeModal();
+    writeLocalStorage("shown-welcome-message", welcomeShowCount + 1);
+  }
+}
+
 onMounted(() => {
-  modal.showWelcomeModal();
+  handleWelcomeModal();
 });
 </script>
 

src/components/AlbumView/Header.vue

@@ -40,15 +40,16 @@
 </template>
 
 <script setup lang="ts">
-import useVisibility from "@/composables/useVisibility";
+import { ref } from "vue";
+
 import { paths } from "@/config";
 import useNavStore from "@/stores/nav";
-import useAlbumStore from "@/stores/pages/album";
-import { ref } from "vue";
-import { getButtonColor, isLight } from "../../composables/colors/album";
-import { playSources } from "../../composables/enums";
-import { formatSeconds } from "../../composables/perks";
 import { AlbumInfo } from "../../interfaces";
+import useAlbumStore from "@/stores/pages/album";
+import { playSources } from "../../composables/enums";
+import { useVisibility, formatSeconds } from "@/utils";
+import { getButtonColor, isLight } from "../../composables/colors/album";
+
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const props = defineProps<{

src/components/BottomBar/BottomBar.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import "@/assets/scss/BottomBar/BottomBar.scss";
-import { formatSeconds } from "@/composables/perks";
+import { formatSeconds } from "@/utils";
 import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 

src/components/FolderView/SongList.vue

@@ -33,7 +33,7 @@ import { onBeforeRouteUpdate, useRoute } from "vue-router";
 
 import SongItem from "../shared/SongItem.vue";
 
-import { focusElem } from "@/composables/perks";
+import { focusElem } from "@/utils";
 import { onMounted, onUpdated, ref } from "vue";
 import { Track } from "@/interfaces";
 import useQStore from "@/stores/queue";

src/components/LeftSidebar/SongCard.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { putCommas } from "../../composables/perks";
+import { putCommas } from "@/utils";
 import { paths } from "../../config";
 import { Track } from "../../interfaces";
 const imguri = paths.images.thumb;

src/components/LeftSidebar/nowPlaying.vue

@@ -22,19 +22,21 @@
 </template>
 
 <script setup lang="ts">
-import { ContextSrc } from "@/composables/enums";
-import trackContext from "@/contexts/track_context";
-import useContextStore from "@/stores/context";
+import { ref } from "vue";
+
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
-import MenuSvg from "../../assets/icons/more.svg";
 import useQStore from "../../stores/queue";
+import useContextStore from "@/stores/context";
+import MenuSvg from "../../assets/icons/more.svg";
+import trackContext from "@/contexts/track_context";
+
+import { ContextSrc } from "@/composables/enums";
+import { formatSeconds } from "@/utils";
+
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
 import SongCard from "./SongCard.vue";
-import { formatSeconds } from "@/composables/perks";
-
-import { ref } from "vue";
 
 const queue = useQStore();
 const contextStore = useContextStore();

src/components/PlaylistView/Header.vue

@@ -47,19 +47,21 @@
 </template>
 
 <script setup lang="ts">
-import useVisibility from "@/composables/useVisibility";
-import useNavStore from "@/stores/nav";
-import usePStore from "@/stores/pages/playlist";
 import { ref } from "vue";
-import { ContextSrc, playSources } from "../../composables/enums";
-import { paths } from "../../config";
-import pContext from "../../contexts/playlist";
-import { Playlist } from "../../interfaces";
-import useContextStore from "../../stores/context";
+
+import useNavStore from "@/stores/nav";
 import useModalStore from "../../stores/modal";
+import pContext from "../../contexts/playlist";
+import usePStore from "@/stores/pages/playlist";
+import useContextStore from "../../stores/context";
+
+import { paths } from "../../config";
+import { Playlist } from "../../interfaces";
+import { useVisibility, formatSeconds } from "@/utils";
+import { ContextSrc, playSources } from "@/composables/enums";
+
 import Option from "../shared/Option.vue";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
-import { formatSeconds } from "@/composables/perks";
 
 const imguri = paths.images.playlist;
 const context = useContextStore();

src/components/RightSideBar/NowPlaying.vue

@@ -3,25 +3,25 @@
     <div class="art-tags">
       <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
-          :style="{
+        :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-          class="album-art image bg-black"
+        class="album-art image bg-black"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
         <div class="separator no-bg-black"></div>
         <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
-              artist
-            }}</span>
+            artist
+          }}</span>
         </div>
         <div v-else id="artist">
           <span>{{ current.albumartist }}</span>
         </div>
         <div id="type">
           <span v-if="current.bitrate > 330"
-          >FLAC • {{ current.bitrate }} Kbps</span
+            >FLAC • {{ current.bitrate }} Kbps</span
           >
           <span v-else>MP3 | {{ current.bitrate }} Kbps</span>
         </div>
@@ -29,7 +29,7 @@
     </div>
     <div class="progress">
       <div class="prog">
-        <Progress/>
+        <Progress />
       </div>
     </div>
     <div class="c-wrapper rounded">
@@ -38,7 +38,7 @@
           <div class="image"></div>
           <div class="image"></div>
         </div>
-        <HotKeys/>
+        <HotKeys />
         <div class="fav">
           <div class="image"></div>
           <div class="image"></div>
@@ -49,9 +49,11 @@
 </template>
 
 <script>
+import { ref } from "@vue/reactivity";
+
 import playAudio from "@/composables/playAudio.js";
-import {ref} from "@vue/reactivity";
-import {putCommas, formatSeconds} from "../../composables/perks.js";
+import { formatSeconds, putCommas } from "@/utils";
+
 import HotKeys from "../shared/HotKeys.vue";
 import Progress from "../shared/Progress.vue";
 
@@ -60,9 +62,9 @@ export default {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
 
-    const {playNext} = playAudio;
-    const {playPrev} = playAudio;
-    const {playPause} = playAudio;
+    const { playNext } = playAudio;
+    const { playPrev } = playAudio;
+    const { playPause } = playAudio;
     const isPlaying = playAudio.playing;
 
     const seek = () => {
@@ -80,7 +82,7 @@ export default {
       formatSeconds: perks.formatSeconds,
     };
   },
-  components: {Progress, HotKeys},
+  components: { Progress, HotKeys },
 };
 </script>
 

src/components/RightSideBar/Queue.vue

@@ -25,12 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "@/stores/queue";
-import PlayingFrom from "./Queue/playingFrom.vue";
-import UpNext from "./Queue/upNext.vue";
 import { onUpdated, ref } from "vue";
-import { focusElem } from "@/composables/perks";
+
+import { focusElem } from "@/utils";
+import useQStore from "@/stores/queue";
+
+import UpNext from "./Queue/upNext.vue";
+import TrackItem from "../shared/TrackItem.vue";
+import PlayingFrom from "./Queue/playingFrom.vue";
 import QueueActions from "./Queue/QueueActions.vue";
 
 const queue = useQStore();

src/components/RightSideBar/Queue/upNext.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script setup lang="ts">
-import { putCommas } from "@/composables/perks";
 import { paths } from "@/config";
+import { putCommas } from "@/utils";
 import { Track } from "@/interfaces";
 
 const imguri = paths.images.thumb;

src/components/nav/NavBar.vue

@@ -28,7 +28,7 @@ import Search from "./Search.vue";
 import { useRoute } from "vue-router";
 import { ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
-import createSubPaths from "@/composables/createSubPaths";
+import { createSubPaths } from "@/utils";
 import { subPath } from "@/interfaces";
 import Folder from "./Titles/Folder.vue";
 import Playlists from "./Titles/Playlists.vue";

src/components/nav/Titles/Folder.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { focusElem } from "@/composables/perks";
+import { focusElem } from "@/utils";
 import { subPath } from "@/interfaces";
 import { onUpdated } from "vue";
 

src/components/shared/SongItem.vue

@@ -75,17 +75,18 @@
 </template>
 
 <script setup lang="ts">
-import OptionSvg from "@/assets/icons/more.svg";
-import { ContextSrc } from "@/composables/enums";
-import { formatSeconds, putCommas } from "@/composables/perks";
-import useContextStore from "@/stores/context";
+import { ref } from "vue";
+
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
+import useContextStore from "@/stores/context";
+import trackContext from "@/contexts/track_context";
+import OptionSvg from "@/assets/icons/more.svg";
 
 import { paths } from "@/config";
-import trackContext from "@/contexts/track_context";
 import { Track } from "@/interfaces";
-import { ref } from "vue";
+import { ContextSrc } from "@/composables/enums";
+import { formatSeconds, putCommas } from "@/utils";
 
 const contextStore = useContextStore();
 

src/components/shared/TrackItem.vue

@@ -24,7 +24,7 @@
     </div>
     <div class="tags">
       <div class="title ellip">
-       {{ props.track.title }}
+        {{ props.track.title }}
       </div>
       <hr />
       <div class="artist ellip">
@@ -37,16 +37,17 @@
 </template>
 
 <script setup lang="ts">
-import { ContextSrc } from "@/composables/enums";
-import { putCommas } from "@/composables/perks";
-import trackContext from "@/contexts/track_context";
-import { Track } from "@/interfaces";
 import { ref } from "vue";
 
-import { paths } from "@/config";
-import useContextStore from "@/stores/context";
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
+import useContextStore from "@/stores/context";
+import trackContext from "@/contexts/track_context";
+
+import { paths } from "@/config";
+import { putCommas } from "@/utils";
+import { Track } from "@/interfaces";
+import { ContextSrc } from "@/composables/enums";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;

src/composables/perks.ts

@@ -1,32 +1,6 @@
 import { RouteLocationNormalized } from "vue-router";
 
-const putCommas = (artists: string[]) => {
-  let result = [];
 
-  artists.forEach((i, index, artists) => {
-    if (index !== artists.length - 1) {
-      result.push(i + ", ");
-    } else {
-      result.push(i);
-    }
-  });
-
-  return result;
-};
-
-function focusElem(className: string, delay?: number, pos?: any) {
-  const dom = document.getElementsByClassName(className)[0];
-
-  setTimeout(() => {
-    if (dom) {
-      dom.scrollIntoView({
-        behavior: "smooth",
-        block: `${pos ?? "start"}` as any,
-        inline: "center",
-      });
-    }
-  }, delay | 300);
-}
 
 function getElem(id: string, type: string) {
   switch (type) {
@@ -49,51 +23,4 @@ function isSameRoute(to: r, from: r) {
   return false;
 }
 
-/**
- * Converts seconds into minutes and hours.
- * @param seconds The seconds to convert
- * @param long Whether to provide the time in the long format
- */
-function formatSeconds(seconds: number, long?: boolean) {
-  if (seconds == undefined) {
-    return "00:00";
-  }
-
-  const date = new Date(seconds * 1000);
-
-  const hh = date.getUTCHours();
-  const mm = date.getUTCMinutes();
-  const ss = date.getUTCSeconds();
-
-  let _hh = hh < 10 ? `0${hh}` : hh;
-  let _mm = mm < 10 ? `0${mm}` : mm;
-  let _ss = ss < 10 ? `0${ss}` : ss;
-
-  if (long == true) {
-    if (hh === 1) {
-      _hh = hh + " Hour";
-    } else {
-      _hh = `${hh} Hours`;
-    }
-
-    if (mm === 1) {
-      _mm = mm + " Minute";
-    } else {
-      _mm = `${mm} Minutes`;
-    }
-
-    if (hh > 0) {
-      return `${_hh}, ${_mm}`;
-    } else {
-      return `${_mm}`;
-    }
-  }
-
-  if (hh > 0) {
-    return `${_hh}:${_mm}:${_ss}`;
-  } else {
-    return `${_mm}:${_ss}`;
-  }
-}
-
-export { putCommas, focusElem, formatSeconds, getElem, isSameRoute };
+export { getElem, isSameRoute };

src/composables/useLocalStorage.ts

@@ -1,3 +0,0 @@
-export function readLocalStorage(key: string) {
-  return JSON.parse(localStorage.getItem(key));
-}

src/layouts/HeaderContentBottom.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import useVisibility from "@/composables/useVisibility";
+import { useVisibility } from "@/utils";
 import useNavStore from "@/stores/nav";
 import { onBeforeRouteUpdate, RouteParams, useRoute } from "vue-router";
 

src/stores/search.ts

@@ -10,7 +10,7 @@ import {
   loadMoreArtists,
 } from "../composables/fetch/searchMusic";
 import { watch } from "vue";
-import useDebouncedRef from "../composables/useDebouncedRef";
+import useDebouncedRef from "../utils/useDebouncedRef";
 import useTabStore from "./tabs";
 /**
  *

src/stores/tabs.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { focusElem } from "../composables/perks";
+import { focusElem } from "@/utils";
 
 const tablist = {
   home: "home",

src/utils/index.ts

@@ -0,0 +1,18 @@
+import focusElem from "./useFocusElem";
+import putCommas from "./usePutCommas";
+import useVisibility from "./useVisibility";
+import formatSeconds from "./useFormatSeconds";
+import useDebouncedRef from "./useDebouncedRef";
+import createSubPaths from "./useCreateSubPaths";
+import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
+
+export {
+  readLocalStorage,
+  writeLocalStorage,
+  createSubPaths,
+  useDebouncedRef,
+  focusElem,
+  useVisibility,
+  formatSeconds,
+  putCommas,
+};

src/utils/useDebouncedRef.ts

@@ -1,4 +1,4 @@
-import { customRef, ref } from "vue";
+import { customRef, Ref, ref } from "vue";
 
 /**
  * Debounces a function
@@ -6,11 +6,14 @@ import { customRef, ref } from "vue";
  * @param {*} fn The function to debounce
  * @param {*} delay The delay in milliseconds
  * @param {*} immediate whether to debounce immediately
- * @returns {Function} The debounced function
  */
-const debounce = (fn, delay = 0, immediate = false) => {
-  let timeout;
-  return (...args) => {
+const debounce = (
+  fn: (...params: any) => void,
+  delay: number = 0,
+  immediate: any = false
+) => {
+  let timeout: any;
+  return (...args: any) => {
     if (immediate && !timeout) fn(...args);
     clearTimeout(timeout);
 
@@ -28,7 +31,11 @@ const debounce = (fn, delay = 0, immediate = false) => {
  * @param {*} immediate Whether to call the function immediately
  * @returns {Object} The ref and a function to call to update the ref
  */
-const useDebouncedRef = (initialValue, delay, immediate = false) => {
+const useDebouncedRef = (
+  initialValue: string,
+  delay: number,
+  immediate = false
+) => {
   const state = ref(initialValue);
   return customRef((track, trigger) => ({
     get() {

src/utils/useFocusElem.ts

@@ -0,0 +1,23 @@
+/**
+ * Scrolls a element into view.
+ * @param className The class to focus
+ * @param delay Delay in milliseconds
+ * @param pos Positioning of the focus element
+ */
+export default function focusElem(
+  className: string,
+  delay?: number,
+  pos?: any
+) {
+  const dom = document.getElementsByClassName(className)[0];
+
+  setTimeout(() => {
+    if (dom) {
+      dom.scrollIntoView({
+        behavior: "smooth",
+        block: `${pos ?? "start"}` as any,
+        inline: "center",
+      });
+    }
+  }, delay | 300);
+}

src/utils/useFormatSeconds.ts

@@ -0,0 +1,46 @@
+/**
+ * Converts seconds into minutes and hours.
+ * @param seconds The seconds to convert
+ * @param long Whether to provide the time in the long format
+ */
+export default function formatSeconds(seconds: number, long?: boolean) {
+  if (seconds == undefined) {
+    return "00:00";
+  }
+
+  const date = new Date(seconds * 1000);
+
+  const hh = date.getUTCHours();
+  const mm = date.getUTCMinutes();
+  const ss = date.getUTCSeconds();
+
+  let _hh = hh < 10 ? `0${hh}` : hh;
+  let _mm = mm < 10 ? `0${mm}` : mm;
+  let _ss = ss < 10 ? `0${ss}` : ss;
+
+  if (long == true) {
+    if (hh === 1) {
+      _hh = hh + " Hour";
+    } else {
+      _hh = `${hh} Hours`;
+    }
+
+    if (mm === 1) {
+      _mm = mm + " Minute";
+    } else {
+      _mm = `${mm} Minutes`;
+    }
+
+    if (hh > 0) {
+      return `${_hh}, ${_mm}`;
+    } else {
+      return `${_mm}`;
+    }
+  }
+
+  if (hh > 0) {
+    return `${_hh}:${_mm}:${_ss}`;
+  } else {
+    return `${_mm}:${_ss}`;
+  }
+}

src/utils/useLocalStorage.ts

@@ -0,0 +1,25 @@
+/**
+ * Retrieeves the value of a key from localStorage.
+ * @param key the key to read from local storage
+ * @returns A javascript object representing the value stored in local storage
+ */
+export function readLocalStorage(key: string) {
+  return JSON.parse(localStorage.getItem(key));
+}
+
+/**
+ * Stores a value in localStorage.
+ * @param key the key to store the value in local storage
+ * @param value the value to store in local storage
+ * @returns true if the value was successfully stored, false otherwise
+ * @throws if the value is not a valid JSON string
+ */
+
+export function writeLocalStorage(key: string, value: any) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}

src/utils/usePutCommas.ts

@@ -0,0 +1,18 @@
+/**
+ * Turns a list of artists into a string of artists separated by commas.
+ * @param artists artists array to put commas in
+ * @returns a string with commas in between each artist
+ */
+export default (artists: string[]) => {
+  let result = [];
+
+  artists.forEach((i, index, artists) => {
+    if (index !== artists.length - 1) {
+      result.push(i + ", ");
+    } else {
+      result.push(i);
+    }
+  });
+
+  return result;
+};

src/views/FolderView.vue

@@ -15,7 +15,6 @@
       <SongList
         :tracks="FStore.tracks"
         :path="FStore.path"
-        :copyright="null"
       />
     </div>
   </div>

src/views/album/Content.vue

@@ -20,7 +20,7 @@ const props = defineProps<{
   discs: {
     [key: string]: Track[];
   };
-  copyright: string;
+  copyright?: string;
 }>();
 
 // check if the disc is the last disc

src/views/playlist/Content.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="songlist rounded">
     <div v-if="tracks.length">
-      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid" />
+      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid"/>
     </div>
     <div v-else-if="tracks.length === 0 && count > 0">
       <div class="no-results">