use album hash to resolve album page

server/app/api/album.py

@@ -40,8 +40,7 @@ def get_albums():
 def get_album():
     """Returns all the tracks in the given album."""
     data = request.get_json()
-    album, artist = data["album"], data["artist"]
-    albumhash = helpers.create_album_hash(album, artist)
+    albumhash = data["hash"]
 
     tracks = instances.tracks_instance.find_tracks_by_hash(albumhash)
     tracks = [models.Track(t) for t in tracks]
@@ -72,8 +71,10 @@ def get_album():
 def get_album_bio():
     """Returns the album bio for the given album."""
     data = request.get_json()
-    fetch_bio = FetchAlbumBio(data["album"], data["albumartist"])
-    bio = fetch_bio()
+    album_hash = data["hash"]
+
+    album = instances.album_instance.find_album_by_hash(album_hash)
+    bio = FetchAlbumBio(album["title"], album["artist"])()
 
     if bio is None:
         return {"bio": "No bio found."}, 404
@@ -86,8 +87,7 @@ def get_albumartists():
     """Returns a list of artists featured in a given album."""
     data = request.get_json()
 
-    album, artist = data["album"], data["artist"]
-    albumhash = helpers.create_album_hash(album, artist)
+    albumhash = data["hash"]
 
     tracks = instances.tracks_instance.find_tracks_by_hash(albumhash)
     tracks = [models.Track(t) for t in tracks]

src/components/contextMenu.vue

@@ -23,7 +23,7 @@
       v-for="option in context.options"
       :key="option.label"
       :class="[{ critical: option.critical }, option.type]"
-      @click="option.action"
+      @click="option.action()"
     >
       <div class="icon image" :class="option.icon"></div>
       <div class="label ellip">{{ option.label }}</div>
@@ -32,7 +32,7 @@
         <div
           class="context-item"
           v-for="child in option.children"
-          :key="child"
+          :key="child.label"
           :class="[{ critical: child.critical }, child.type]"
           @click="child.action()"
         >
@@ -177,7 +177,7 @@ const context = useContextStore();
 .context-normalizedY {
   .context-item > .children {
     transform-origin: bottom right;
-      top: -.5rem;
+    top: -0.5rem;
   }
 }
 

src/components/shared/SongItem.vue

@@ -42,8 +42,7 @@
       :to="{
         name: 'AlbumView',
         params: {
-          album: props.song.album,
-          artist: props.song.albumartist,
+          hash: props.song.albumhash,
         },
       }"
     >

src/composables/pages/album.ts

@@ -3,11 +3,7 @@ import { AlbumInfo, Track } from "../../interfaces";
 import useAxios from "../useAxios";
 import { NotifType, useNotifStore } from "@/stores/notification";
 
-const getAlbumData = async (
-  album: string,
-  artist: string,
-  ToastStore: typeof useNotifStore
-) => {
+const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
   const url = state.settings.uri + "/album";
 
   interface AlbumData {
@@ -18,8 +14,7 @@ const getAlbumData = async (
   const { data, status } = await useAxios({
     url,
     props: {
-      album: album,
-      artist: artist,
+      hash: hash,
     },
   });
 
@@ -27,8 +22,8 @@ const getAlbumData = async (
     ToastStore().showNotification("Album not created yet!", NotifType.Error);
     return {
       info: {
-        album: album,
-        artist: artist,
+        album: "",
+        artist: "",
       },
       tracks: [],
     };
@@ -37,12 +32,11 @@ const getAlbumData = async (
   return data as AlbumData;
 };
 
-const getAlbumArtists = async (album: string, artist: string) => {
+const getAlbumArtists = async (hash: string) => {
   const { data, error } = await useAxios({
     url: state.settings.uri + "/album/artists",
     props: {
-      album: album,
-      artist: artist,
+      hash: hash,
     },
   });
 
@@ -53,12 +47,11 @@ const getAlbumArtists = async (album: string, artist: string) => {
   return data.artists;
 };
 
-const getAlbumBio = async (album: string, albumartist: string) => {
+const getAlbumBio = async (hash: string) => {
   const { data, status } = await useAxios({
     url: state.settings.uri + "/album/bio",
     props: {
-      album: album,
-      albumartist: albumartist,
+      hash: hash,
     },
   });
 

src/contexts/track_context.ts

@@ -1,7 +1,10 @@
 import { Playlist, Track } from "../interfaces";
 import Router from "../router";
 import { Option } from "../interfaces";
-import { getAllPlaylists, addTrackToPlaylist } from "../composables/pages/playlists";
+import {
+  getAllPlaylists,
+  addTrackToPlaylist,
+} from "../composables/pages/playlists";
 
 import useQueueStore from "../stores/queue";
 import useModalStore from "../stores/modal";
@@ -15,7 +18,7 @@ import useModalStore from "../stores/modal";
 export default async (
   track: Track,
   modalStore: typeof useModalStore,
-  QueueStore: typeof useQueueStore,
+  QueueStore: typeof useQueueStore
 ): Promise<Option[]> => {
   const separator: Option = {
     type: "separator",
@@ -79,7 +82,7 @@ export default async (
       QueueStore().playTrackNext(track);
     },
     icon: "add_to_queue",
-  }
+  };
 
   const go_to_folder: Option = {
     label: "Go to Folder",
@@ -114,7 +117,7 @@ export default async (
     action: () => {
       Router.push({
         name: "AlbumView",
-        params: { album: track.album, artist: track.albumartist },
+        params: { hash: track.albumhash },
       });
     },
     icon: "album",

src/interfaces.ts

@@ -45,7 +45,7 @@ export interface Artist {
 export interface Option {
   type?: string;
   label?: string;
-  action?: Function;
+  action?: () => void;
   children?: Option[] | false;
   icon?: string;
   critical?: Boolean;

src/router/index.js

@@ -62,17 +62,14 @@ const routes = [
     component: AlbumsExplorer,
   },
   {
-    path: "/albums/:album/:artist",
+    path: "/albums/:hash",
     name: "AlbumView",
     component: AlbumView,
     beforeEnter: async (to) => {
       state.loading.value = true;
-      await useAStore().fetchTracksAndArtists(
-        to.params.album,
-        to.params.artist
-      );
+      await useAStore().fetchTracksAndArtists(to.params.hash);
       state.loading.value = false;
-      useAStore().fetchBio(to.params.album, to.params.artist);
+      useAStore().fetchBio(to.params.hash);
     },
   },
   {

src/stores/pages/album.ts

@@ -21,9 +21,9 @@ export default defineStore("album", {
      * @param title title of the album
      * @param albumartist artist of the album
      */
-    async fetchTracksAndArtists(title: string, albumartist: string) {
-      const tracks = await getAlbumTracks(title, albumartist, useNotifStore);
-      const artists = await getAlbumArtists(title, albumartist);
+    async fetchTracksAndArtists(hash: string) {
+      const tracks = await getAlbumTracks(hash, useNotifStore);
+      const artists = await getAlbumArtists(hash);
 
       this.tracks = tracks.tracks;
       this.info = tracks.info;
@@ -31,12 +31,11 @@ export default defineStore("album", {
     },
     /**
      * Fetches the album bio from the server
-     * @param title title of the album
-     * @param albumartist artist of the album
+     * @param {string} hash title of the album
      */
-    fetchBio(title: string, albumartist: string) {
+    fetchBio(hash: string) {
       this.bio = null;
-      getAlbumBio(title, albumartist).then((bio) => {
+      getAlbumBio(hash).then((bio) => {
         this.bio = bio;
       });
     },

src/views/AlbumView.vue

@@ -29,10 +29,7 @@ import { onBeforeRouteUpdate } from "vue-router";
 const album = useAStore();
 
 onBeforeRouteUpdate(async (to) => {
-  await album.fetchTracksAndArtists(
-    to.params.album.toString(),
-    to.params.artist.toString()
-  );
+  await album.fetchTracksAndArtists(to.params.hash.toString());
   album.fetchBio(to.params.album.toString(), to.params.artist.toString());
 });
 </script>