update interfaces to use the updated property names

+ misc changes related to moving to sqlite
2026-06-04 12:33:03 +00:00 · 2022-11-21 20:03:56 +03:00
parent 881adc0f88
commit f3c4f0310a
30 changed files with 166 additions and 137 deletions
@@ -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 }">
-      <img :src="imguri.thumb.large + album.image" class="rounded" />
+    <div
+      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;
@@ -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>
@@ -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>
@@ -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 useSettingsStore from "../stores/settings";
+import useContextStore from "@/stores/context";
+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) => {
-  if (!context.visible) {
-    clickCount = 0;
+// onClickOutside(
+//   contextMenuRef,
+//   (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) {
-    context.hideContextMenu();
-    e.stopImmediatePropagation();
-    clickCount = 0;
+  if (watcher !== null) {
+    watcher();
  }
-}, {
-  capture: false
+
+  // wat();
 });
 </script>

@@ -98,7 +98,6 @@ function hideContextMenu() {
 function runAction() {
  if (props.option.children) {
    if (childrenShown.value) {
-      console.log("what");
      hideChildren();
      return;
    }
@@ -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;
@@ -7,7 +7,7 @@
          :to="{
            name: 'PlaylistView',
            params: {
-              pid: p.playlistid,
+              pid: p.id,
            },
          }"
        >
@@ -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>

@@ -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
@@ -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>
@@ -3,10 +3,10 @@
    <div v-if="search.tracks.value.length">
      <TrackComponent
        v-for="(track, index) in search.tracks.value"
-        :key="track.trackid"
-        :isCurrent="queue.currentid === track.trackid"
+        :key="track.id"
+        :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"
@@ -55,7 +55,9 @@
    </div>
  </div>
 </template>
+
 <script setup lang="ts"></script>
+
 <style lang="scss">
 .welcome-to-alice {
  p {
@@ -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");
    });
  }
@@ -64,7 +64,7 @@ function getSource() {
        location: {
          name: Routes.playlist,
          params: {
-            pid: source.playlistid,
+            pid: source.id,
          },
        },
      };
@@ -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<{
@@ -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;
-}
-
-.playbtnrectdark {
-  color: $black !important;
-
-  svg > path {
-    fill: $accent !important;
-  }
+  background: $darkestblue !important;
 }
 </style>