update interfaces to use the updated property names

+ misc changes related to moving to sqlite

src/components/AlbumView/Header.vue

@@ -5,23 +5,27 @@
     :style="{
       backgroundImage: album.colors
         ? `linear-gradient(
-        37deg, ${album.colors[0]}, ${album.colors[3]}
+        37deg, ${album.colors[2]}, ${album.colors[2]}
       )`
         : '',
     }"
   >
-    <div class="big-img no-scroll" :class="{ imgSmall: albumHeaderSmall }">
+    <div
-      <img :src="imguri.thumb.large + album.image" class="rounded" />
+      class="big-img no-scroll"
+      :class="`${albumHeaderSmall ? 'imgSmall' : ''} shadow-lg rounded-sm`"
+    >
+      <img :src="imguri.thumb.large + album.image" class="rounded-sm" />
     </div>
     <div
       class="info"
-      :class="{ nocontrast: album.colors ? isLight(album.colors[0]) : false }"
+      :class="{ nocontrast: album.colors ? isLight(album.colors[2]) : false }"
     >
       <div class="album-info">
         <div class="top">
           <div v-auto-animate class="h">
             <span v-if="album.is_soundtrack">Soundtrack</span>
             <span v-else-if="album.is_compilation">Compilation</span>
+            <span v-else-if="album.is_EP">EP</span>
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
@@ -32,7 +36,7 @@
         <div class="bottom">
           <div class="stats ellip">
             <div class="border rounded-sm pad-sm">
-              {{ album.artist }} • {{ album.date }} • {{ album.count }}
+              {{ album.albumartist }} • {{ album.date }} • {{ album.count }}
               {{ album.count === 1 ? "Track" : "Tracks" }} •
               {{ formatSeconds(album.duration, true) }}
             </div>
@@ -40,7 +44,6 @@
           <PlayBtnRect
             :source="playSources.album"
             :store="useAlbumStore"
-            :background="getButtonColor(album.colors)"
           />
         </div>
       </div>
@@ -99,6 +102,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
   height: $banner-height;
   background-color: $black;
   overflow: hidden;
+  align-items: flex-end;
 
   .big-img {
     height: calc(100%);
@@ -114,6 +118,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
   .big-img.imgSmall {
     width: 12rem;
+    height: 12rem;
 
     img {
       height: 12rem;

src/components/AlbumsExplorer/AlbumList.vue

@@ -17,7 +17,7 @@
         <div class="play"></div>
         <div class="album-art image rounded"></div>
         <div class="name ellip">{{ album.title }}</div>
-        <div class="artist ellip">{{ album.artist }}</div>
+        <div class="artist ellip">{{ album.albumartist }}</div>
       </router-link>
     </div>
   </div>

src/components/AlbumsExplorer/TopAlbums.vue

@@ -11,7 +11,7 @@
         <div class="image rounded"></div>
         <div class="info">
           <div class="name ellip">{{ album.title }}</div>
-          <div class="artist ellip">{{ album.artist }}</div>
+          <div class="artist ellip">{{ album.albumartist }}</div>
           <div class="separator"></div>
           <div class="top">
             <div class="play-icon"></div>

src/components/ContextMenu.vue

@@ -2,7 +2,7 @@
   <div
     v-show="context.visible"
     class="context-menu rounded shadow-lg no-select"
-    ref="contextMenu"
+    ref="contextMenuRef"
     id="context-menu"
   >
     <ContextItem
@@ -21,31 +21,72 @@
 import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
-import useContextStore from "../stores/context";
+import useContextStore from "@/stores/context";
-import useSettingsStore from "../stores/settings";
+import useSettingsStore from "@/stores/settings";
 
 import ContextItem from "./Contextmenu/ContextItem.vue";
 
 const context = useContextStore();
 const settings = useSettingsStore();
-const contextMenu = ref<HTMLElement>();
+const contextMenuRef = ref<HTMLElement>();
 
-let clickCount = 0;
+// let clickCount = 0;
 
-onClickOutside(contextMenu, (e) => {
+// onClickOutside(
-  if (!context.visible) {
+//   contextMenuRef,
-    clickCount = 0;
+//   (e) => {
+//     console.log(clickCount);
+
+//     if (!context.visible) {
+//       // clickCount = 0;
+//       return;
+//     }
+
+//     clickCount++;
+
+//     if (context.visible && clickCount === 1) {
+//       context.hideContextMenu();
+//       e.stopImmediatePropagation();
+//       clickCount = 0;
+//     }
+//   },
+//   {
+//     capture: false,
+//   }
+// );
+
+let watcher: any = null;
+
+context.$subscribe((mutation, state) => {
+  // let watchers = [];
+  // console.log("watchers count: " + watchers.length)
+  // let wat: any = () => {};
+
+  if (state.visible) {
+    setTimeout(() => {
+      if (watcher !== null) {
+        watcher();
+      }
+      watcher = onClickOutside(
+        contextMenuRef,
+        (e) => {
+          e.stopImmediatePropagation();
+          console.log("clicked outside ref");
+          context.hideContextMenu();
+        },
+        {
+          capture: false,
+        }
+      );
+    }, 200);
     return;
   }
-  clickCount++;
 
-  if (context.visible && clickCount == 2) {
+  if (watcher !== null) {
-    context.hideContextMenu();
+    watcher();
-    e.stopImmediatePropagation();
-    clickCount = 0;
   }
-}, {
+
-  capture: false
+  // wat();
 });
 </script>
 

src/components/Contextmenu/ContextItem.vue

@@ -98,7 +98,6 @@ function hideContextMenu() {
 function runAction() {
   if (props.option.children) {
     if (childrenShown.value) {
-      console.log("what");
       hideChildren();
       return;
     }

src/components/FolderView/SongList.vue

@@ -17,7 +17,7 @@
     <div class="songlist">
       <SongItem
         v-for="(track, index) in tracks"
-        :key="track.trackid"
+        :key="track.id"
         :track="track"
         :index="
           on_album_page
@@ -28,7 +28,7 @@
         "
         @playThis="updateQueue(track.index !== undefined ? track.index : index)"
         :isCurrentPlaying="queue.playing"
-        :isCurrent="queue.currentid == track.trackid"
+        :isCurrent="queue.currentid == track.id"
       />
     </div>
     <div class="copyright" v-if="copyright && copyright">
@@ -59,7 +59,7 @@ const props = defineProps<{
   tracks: Track[];
   path?: string;
   pname?: string;
-  playlistid?: string;
+  id?: string;
   on_album_page?: boolean;
   disc?: string | number;
   copyright?: string | null;

src/components/LeftSidebar/Playlists.vue

@@ -7,7 +7,7 @@
           :to="{
             name: 'PlaylistView',
             params: {
-              pid: p.playlistid,
+              pid: p.id,
             },
           }"
         >

src/components/PlaylistView/Header.vue

@@ -26,7 +26,7 @@
     </div>
     <div class="last-updated" :class="{ lightbg: !info.image }">
       <span class="status"
-        >Last updated {{ info.lastUpdated }} &#160;|&#160;&#160;</span
+        >Last updated {{ info.last_updated }} &#160;|&#160;&#160;</span
       >
       <span class="edit" @click="editPlaylist">Edit</span>
     </div>
@@ -43,23 +43,23 @@ import useModalStore from "../../stores/modal";
 import { playSources } from "@/composables/enums";
 import { formatSeconds, useVisibility } from "@/utils";
 import { paths } from "../../config";
-import { Playlist } from "../../interfaces";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import { storeToRefs } from "pinia";
 
-const imguri = paths.images.playlist;
 const modal = useModalStore();
 const nav = useNavStore();
+const playlist = usePStore();
+
+const imguri = paths.images.playlist;
+
 const playlistheader = ref<HTMLElement | null>(null);
+const { info } = storeToRefs(playlist);
 
 useVisibility(playlistheader, nav.toggleShowPlay);
 
-const props = defineProps<{
-  info: Playlist;
-}>();
-
 function editPlaylist() {
-  modal.showEditPlaylistModal(props.info);
+  modal.showEditPlaylistModal(info.value);
 }
 </script>
 

src/components/PlaylistsList/PlaylistCard.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link
-    :to="{ name: 'PlaylistView', params: { pid: playlist.playlistid } }"
+    :to="{ name: 'PlaylistView', params: { pid: playlist.id } }"
     class="p-card rounded no-scroll"
   >
     <img

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -3,7 +3,7 @@
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
-        :key="`${album.artist}-${album.title}`"
+        :key="`${album.albumartist}-${album.title}`"
         :album="album"
       />
     </div>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -3,10 +3,10 @@
     <div v-if="search.tracks.value.length">
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
-        :key="track.trackid"
+        :key="track.id"
-        :isCurrent="queue.currentid === track.trackid"
+        :isCurrent="queue.currentid === track.id"
         :isHighlighted="false"
-        :isCurrentPlaying="queue.currentid === track.trackid && queue.playing"
+        :isCurrentPlaying="queue.currentid === track.id && queue.playing"
         :track="track"
         @playThis="updateQueue(index)"
         :index="index + 1"

src/components/WelcomeModal.vue

@@ -55,7 +55,9 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts"></script>
+
 <style lang="scss">
 .welcome-to-alice {
   p {

src/components/modals/updatePlaylist.vue

@@ -45,10 +45,10 @@
 import { onMounted, ref } from "vue";
 // import { useDropZone } from "@vueuse/core";
 
+import { updatePlaylist } from "@/composables/fetch/playlists";
 import { paths } from "@/config";
 import { Playlist } from "@/interfaces";
 import usePStore from "@/stores/pages/playlist";
-import { updatePlaylist } from "@/composables/fetch/playlists";
 
 const pStore = usePStore();
 
@@ -131,7 +131,7 @@ function update_playlist(e: Event) {
   formData.append("image", image);
 
   if (name && name.toString().trim() !== "") {
-    updatePlaylist(props.playlist.playlistid, formData, pStore).then(() => {
+    updatePlaylist(props.playlist.id, formData, pStore).then(() => {
       emit("hideModal");
     });
   }

src/components/nav/Titles/QueueTitle.vue

@@ -64,7 +64,7 @@ function getSource() {
         location: {
           name: Routes.playlist,
           params: {
-            pid: source.playlistid,
+            pid: source.id,
           },
         },
       };

src/components/shared/AlbumCard.vue

@@ -9,14 +9,14 @@
     <img class="rounded" :src="imguri + album.image" alt="" />
     <div>
       <h4 class="title ellip" v-tooltip>{{ album.title }}</h4>
-      <div class="artist ellip">{{ album.artist }}</div>
+      <div class="artist ellip">{{ album.albumartist }}</div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
-import { AlbumInfo } from "../../interfaces";
 import { paths } from "../../config";
+import { AlbumInfo } from "../../interfaces";
 
 const imguri = paths.images.thumb.large;
 defineProps<{

src/components/shared/PlayBtnRect.vue

@@ -2,10 +2,6 @@
   <button
     class="playbtnrect"
     @click="usePlayFrom(source, useQStore, store)"
-    :style="{
-      background: background?.color,
-    }"
-    :class="{ playbtnrectdark: background?.isDark }"
   >
     <playBtnSvg />
     <div class="text">Play</div>
@@ -43,13 +39,6 @@ defineProps<{
   justify-content: center;
   transition: all 0.5s ease-in-out;
   color: $white;
-}
+  background: $darkestblue !important;
-
-.playbtnrectdark {
-  color: $black !important;
-
-  svg > path {
-    fill: $accent !important;
-  }
 }
 </style>

src/composables/colors/album.ts

@@ -24,18 +24,16 @@ interface BtnColor {
  * @param {string[]} colors The album colors to choose from.
  * @returns {BtnColor} A color to use as the play button background
  */
-export function getButtonColor(colors: string[]): BtnColor {
+export function getButtonColor(colors: string[], index: number): BtnColor {
-  const def = {
+  const fallback = {
-    color: "#fff",
+    color: "#234ece",
     isDark: true,
   };
 
-  if (!colors || colors.length === 0) return def;
+  if (!colors || colors.length === 0) return fallback;
-
-  const base_color = colors[0];
 
   for (let i = 0; i < colors.length; i++) {
-    if (theyContrast(base_color, colors[i])) {
+    if (theyContrast(colors[index], colors[i])) {
       return {
         color: colors[i],
         isDark: isLight(colors[i]),
@@ -43,7 +41,7 @@ export function getButtonColor(colors: string[]): BtnColor {
     }
   }
 
-  return def;
+  return fallback;
 }
 
 /**

src/composables/fetch/playlists.ts

@@ -1,8 +1,6 @@
 import { paths } from "@/config";
-import { Artist } from "../../interfaces";
+import { Artist, Playlist, Track } from "../../interfaces";
-import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
-import state from "../state";
 import useAxios from "./useAxios";
 
 const {
@@ -67,12 +65,12 @@ async function getAllPlaylists(): Promise<Playlist[]> {
 }
 
 async function addTrackToPlaylist(playlist: Playlist, track: Track) {
-  const uri = `${basePlaylistUrl}/${playlist.playlistid}/add`;
+  const uri = `${basePlaylistUrl}/${playlist.id}/add`;
 
   const { status } = await useAxios({
     url: uri,
     props: {
-      track: track.trackid,
+      track: track.trackhash,
     },
   });
 
@@ -92,13 +90,13 @@ async function getPlaylist(pid: string) {
     tracks: Track[];
   }
 
-  const { data, error } = await useAxios({
+  const { data, status } = await useAxios({
     url: uri,
     get: true,
   });
 
-  if (error) {
+  if (status == 404) {
-    new Notification("Something funny happened!", NotifType.Error);
+    new Notification("Playlist not found", NotifType.Error);
   }
 
   if (data) {

src/composables/usePlayFrom.ts

@@ -33,7 +33,7 @@ export default function play(
 
       useQueue.playFromAlbum(
         a_store.info.title,
-        a_store.info.artist,
+        a_store.info.albumartist,
         a_store.info.hash,
         a_store.allTracks
       );
@@ -45,7 +45,7 @@ export default function play(
 
       if (p.tracks.length === 0) return;
 
-      useQueue.playFromPlaylist(p.info.name, p.info.playlistid, p.tracks);
+      useQueue.playFromPlaylist(p.info.name, p.info.id, p.tracks);
       useQueue.play();
       break;
   }

src/interfaces.ts

@@ -6,7 +6,7 @@ export interface AlbumDisc {
 }
 
 export interface Track extends AlbumDisc {
-  trackid: string;
+  id: string;
   title: string;
   album?: string;
   artist: string[];
@@ -21,7 +21,7 @@ export interface Track extends AlbumDisc {
   track: number;
   disc: number;
   index: number;
-  hash: string;
+  trackhash: string;
   copyright?: string;
   filetype: string;
 }
@@ -37,18 +37,20 @@ export interface Folder {
 export interface AlbumInfo {
   albumid: string;
   title: string;
-  artist: string;
+  albumartist: string;
   count: number;
   duration: number;
   date: string;
   image: string;
   artistimg: string;
-  is_compilation: boolean;
-  is_soundtrack: boolean;
-  is_single: boolean;
   hash: string;
   colors: string[];
   copyright?: string;
+
+  is_compilation: boolean;
+  is_soundtrack: boolean;
+  is_single: boolean;
+  is_EP: boolean;
 }
 
 export interface Artist {
@@ -66,12 +68,12 @@ export interface Option {
 }
 
 export interface Playlist {
-  playlistid: string;
+  id: string;
   name: string;
   image: string | FormData;
   tracks: Track[];
   count: number;
-  lastUpdated: string;
+  last_updated: string;
   thumb: string;
   duration: number;
 }
@@ -95,7 +97,7 @@ export interface fromAlbum {
 export interface fromPlaylist {
   type: FromOptions.playlist;
   name: string;
-  playlistid: string;
+  id: string;
 }
 
 export interface fromSearch {

src/layouts/HeaderAndVList.vue

@@ -40,7 +40,7 @@
           <SongItem
             v-else
             style="height: 60px"
-            :key="t.data.trackid"
+            :key="t.data.id"
             :track="t.data"
             :hide_album="on_album_page"
             :index="
@@ -50,9 +50,9 @@
                 ? t.data.index + 1
                 : t.index + 1
             "
-            :isCurrent="queue.currentid === t.data.trackid"
+            :isCurrent="queue.currentid === t.data.id"
             :isCurrentPlaying="
-              queue.currentid === t.data.trackid && queue.playing
+              queue.currentid === t.data.id && queue.playing
             "
             @playThis="
               updateQueue(

src/stores/context.ts

@@ -55,19 +55,12 @@ export default defineStore("context-menu", {
                 },
               },
             ],
-          });
+            onFirstUpdate: () => {
-        });
-
               this.visible = true;
               this.src = src;
-
+            },
-      // const xy = normalize(e.clientX, e.clientY);
+          });
-
+        })
-      // this.x = xy.normalX;
-      // this.y = xy.normalY;
-
-      // this.normalizedX = xy.normalizedX;
-      // this.normalizedY = xy.normalizedY;
     },
     hideContextMenu() {
       this.visible = false;

src/stores/pages/playlist.ts

@@ -17,27 +17,30 @@ export default defineStore("playlist-tracks", {
   actions: {
     /**
      * Fetches a single playlist information, and its tracks from the server
-     * @param playlistid The id of the playlist to fetch
+     * @param id The id of the playlist to fetch
      */
-    async fetchAll(playlistid: string) {
+    async fetchAll(id: string) {
-      const playlist = await getPlaylist(playlistid);
+      const playlist = await getPlaylist(id);
 
       this.info = playlist?.info || ({} as Playlist);
       this.allTracks = playlist?.tracks || [];
     },
 
-    // async fetchArtists(playlistid: string) {
+    // async fetchArtists(id: string) {
-    //   this.artists = await getPlaylistArtists(playlistid);
+    //   this.artists = await getPlaylistArtists(id);
     // },
+
     /**
      * Updates the playlist header info. This is used when the playlist is
      * updated.
      * @param info Playlist info
      */
     updatePInfo(info: Playlist) {
-      const duration = this.info.duration;
+      const { duration, count } = this.info;
+
       this.info = info;
-      this.info.duration = duration;
+
+      this.info = { ...this.info, duration, count };
     },
     resetArtists() {
       this.artists = [];

src/stores/queue.ts

@@ -1,4 +1,3 @@
-import { ref } from "@vue/reactivity";
 import { paths } from "@/config";
 import { defineStore } from "pinia";
 import { Ref } from "vue";
@@ -12,7 +11,7 @@ import {
     fromFolder,
     fromPlaylist,
     fromSearch,
-  Track,
+    Track
 } from "../interfaces";
 
 function shuffle(tracks: Track[]) {
@@ -52,7 +51,7 @@ export default defineStore("Queue", {
       }
 
       const track = this.tracklist[index];
-      const uri = `${paths.api.files}/${track.trackid}-${track.hash}`;
+      const uri = `${paths.api.files}/${track.id}-${track.trackhash}`;
 
       new Promise((resolve, reject) => {
         audio.autoplay = true;
@@ -172,7 +171,7 @@ export default defineStore("Queue", {
       this.from = <fromPlaylist>{
         type: FromOptions.playlist,
         name: pname,
-        playlistid: pid,
+        id: pid,
       };
 
       this.setNewQueue(tracks);
@@ -195,7 +194,7 @@ export default defineStore("Queue", {
       const next: Track = this.tracklist[nextindex];
 
       // if track is already next, skip
-      if (next?.trackid === track.trackid) {
+      if (next?.id === track.id) {
         Toast.showNotification("Track is already queued", NotifType.Info);
         return;
       }
@@ -227,14 +226,14 @@ export default defineStore("Queue", {
       }
 
       const current = this.currenttrack;
-      const current_hash = current?.hash;
+      const current_hash = current?.trackhash;
 
       this.tracklist = shuffle(this.tracklist);
       // find current track after shuffle
 
       if (this.playing) {
         const newindex = this.tracklist.findIndex(
-          (track) => track.hash === current_hash
+          (track) => track.trackhash === current_hash
         );
 
         // remove current track from queue
@@ -294,7 +293,7 @@ export default defineStore("Queue", {
       return this.tracklist[this.currentindex];
     },
     currentid(): string {
-      return this.currenttrack?.trackid || "";
+      return this.currenttrack?.id || "";
     },
     previndex(): number {
       return this.currentindex === 0

src/stores/settings/index.ts

@@ -4,7 +4,7 @@ import { defineStore } from "pinia";
 
 export default defineStore("settings", {
   state: () => ({
-    use_np_img: false,
+    use_np_img: true,
     use_sidebar: true,
     extend_width: false,
     contextChildrenShowMode: contextChildrenShowMode.click,

src/utils/useCreateTrackProps.ts

@@ -5,8 +5,8 @@ export default function createTrackProps(track: Track) {
   return {
     track,
     index: track.index + 1,
-    isCurrent: queue().currentid === track.trackid,
+    isCurrent: queue().currentid === track.id,
     isCurrentPlaying:
-      queue().currentid === track.trackid && queue().playing,
+      queue().currentid === track.id && queue().playing,
   };
 }

src/views/FolderView.vue

@@ -62,9 +62,9 @@ class songItem {
     this.props = {
       track,
       index: track.index + 1,
-      isCurrent: queue.currentid === track.trackid,
+      isCurrent: queue.currentid === track.id,
       isCurrentPlaying:
-        queue.currentid === track.trackid && queue.playing,
+        queue.currentid === track.id && queue.playing,
     };
   }
 }

src/views/PlaylistList.vue

@@ -3,7 +3,7 @@
     <div class="grid">
       <PlaylistCard
         v-for="p in pStore.playlists"
-        :key="p.playlistid"
+        :key="p.id"
         :playlist="p"
       />
     </div>

src/views/PlaylistView/index.vue

@@ -25,9 +25,9 @@
 import { computed } from "@vue/reactivity";
 import { onBeforeRouteLeave } from "vue-router";
 
-import useQueueStore from "@/stores/queue";
+import { isMedium, isSmall } from "@/stores/content-width";
 import usePlaylistStore from "@/stores/pages/playlist";
-import { isSmall, isMedium } from "@/stores/content-width";
+import useQueueStore from "@/stores/queue";
 
 import Header from "@/components/PlaylistView/Header.vue";
 import SongItem from "@/components/shared/SongItem.vue";
@@ -38,16 +38,16 @@ const playlist = usePlaylistStore();
 interface ScrollerItem {
   id: string | number;
   component: typeof Header | typeof SongItem;
-  props: Record<string, unknown>;
+  // props: Record<string, unknown>;
   size: number;
 }
 
 const header: ScrollerItem = {
   id: "header",
   component: Header,
-  props: {
+  // props: {
-    info: playlist.info,
+  //   info: playlist.info,
-  },
+  // },
   size: 19 * 16,
 };
 
@@ -61,8 +61,8 @@ const scrollerItems = computed(() => {
         props: {
           track: track,
           index: track.index + 1,
-          isCurrent: queue.currentid === track.trackid,
+          isCurrent: queue.currentid === track.id,
-          isCurrentPlaying: queue.currentid === track.trackid && queue.playing,
+          isCurrentPlaying: queue.currentid === track.id && queue.playing,
         },
         size: 64,
       };
@@ -71,8 +71,8 @@ const scrollerItems = computed(() => {
 });
 
 function playFromPlaylistPage(index: number) {
-  const { name, playlistid } = playlist.info;
+  const { name, id } = playlist.info;
-  queue.playFromPlaylist(name, playlistid, playlist.allTracks);
+  queue.playFromPlaylist(name, id, playlist.allTracks);
   queue.play(index);
 }
 

src/views/QueueView.vue

@@ -16,9 +16,9 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currentid === item.track.trackid"
+        :isCurrent="queue.currentid === item.track.id"
         :isCurrentPlaying="
-          queue.currentid === item.track.trackid && queue.playing
+          queue.currentid === item.track.id && queue.playing
         "
         @playThis="playFromQueue(index)"
       />