From 078d780552e1086a0b7843d3cf33552c69642c55 Mon Sep 17 00:00:00 2001
From: eirki <eirik.b.stavest@gmail.com>
Date: Sat, 30 Jul 2022 21:14:13 +0200
Subject: [PATCH] Add context menu

---
 backend/api.py                          |  9 +++
 backend/main.py                         | 59 ++++++++++++++-
 backend/version.py                      |  2 +-
 frontend/package-lock.json              | 28 +++++++-
 frontend/package.json                   |  4 +-
 frontend/src/components/Album.vue       | 96 ++++++++++++++++++++++---
 frontend/src/components/AlbumColumn.vue | 11 ++-
 frontend/src/components/AlbumGrid.vue   | 13 +++-
 frontend/src/components/Home.vue        | 70 ++++++++++++++++--
 frontend/src/components/Spinner.vue     | 52 ++++++++++++++
 frontend/src/main.ts                    | 18 ++++-
 frontend/src/types.ts                   |  6 ++
 12 files changed, 342 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/Spinner.vue

diff --git a/backend/api.py b/backend/api.py
index 93d9b0c..db30be9 100644
--- a/backend/api.py
+++ b/backend/api.py
@@ -15,6 +15,7 @@
 
 scope = [
     "user-library-read",
+    "user-library-modify",
     "user-read-playback-state",
     "user-modify-playback-state",
     "user-read-currently-playing",
@@ -115,6 +116,14 @@ def albums(spotify: Spotify) -> dict[str, list[dict]]:
     return data
 
 
+def add_album(spotify: Spotify, album_id: str) -> None:
+    spotify.current_user_saved_albums_add([album_id])
+
+
+def remove_album(spotify: Spotify, album_id: str) -> None:
+    spotify.current_user_saved_albums_delete([album_id])
+
+
 class AlbumResponse(TypedDict):
     added_at: str  # "2021-05-13T07:00:09Z"
     album: Album
diff --git a/backend/main.py b/backend/main.py
index 6051d92..563071e 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -2,7 +2,7 @@
 import sys
 from typing import Optional
 
-from fastapi import Cookie, FastAPI, Request
+from fastapi import Cookie, FastAPI, HTTPException, Request
 from fastapi.responses import JSONResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
@@ -49,7 +49,64 @@ async def root(request: Request, spotify_token: Optional[str] = Cookie(None)):
         "index.html",
         {"request": request, "data": albums},
     )
+    if cache:
+        set_token_cookie(response, cache)
+    return response
+
+
+@app.get("/albums")
+async def albums(spotify_token: Optional[str] = Cookie(None)):
+    spotify_token_j = json.loads(spotify_token) if spotify_token else None
+    authed, auth_manager, cache = api.check_auth(spotify_token_j)
+    if not authed:
+        return RedirectResponse(auth_manager.get_authorize_url())
+    spotify = Spotify(auth_manager=auth_manager)
+    albums = api.albums(spotify)
+    response = JSONResponse(content=albums)
+    if cache:
+        set_token_cookie(response, cache)
+        cache.delete_cached_token()
+    return response
+
+
+@app.get("/add_album/{album_id}")
+async def add_album(album_id: str, spotify_token: Optional[str] = Cookie(None)):
+    spotify_token_j = json.loads(spotify_token) if spotify_token else None
+    authed, auth_manager, cache = api.check_auth(spotify_token_j)
+    if not authed:
+        raise HTTPException(status_code=403, detail="Authentication failed")
+    spotify = Spotify(auth_manager=auth_manager)
+    api.add_album(spotify, album_id)
+    response = JSONResponse(content={"success": True})
     if cache:
         set_token_cookie(response, cache)
         cache.delete_cached_token()
     return response
+
+
+@app.get("/remove_album/{album_id}")
+async def remove_album(album_id: str, spotify_token: Optional[str] = Cookie(None)):
+    spotify_token_j = json.loads(spotify_token) if spotify_token else None
+    authed, auth_manager, cache = api.check_auth(spotify_token_j)
+    if not authed:
+        raise HTTPException(status_code=403, detail="Authentication failed")
+    spotify = Spotify(auth_manager=auth_manager)
+    api.remove_album(spotify, album_id)
+    response = JSONResponse(content={"success": True})
+    if cache:
+        set_token_cookie(response, cache)
+        cache.delete_cached_token()
+    return response
+
+
+@app.get("/authed")
+async def authed(spotify_token: Optional[str] = Cookie(None)):
+    spotify_token_j = json.loads(spotify_token) if spotify_token else None
+    authed, auth_manager, cache = api.check_auth(spotify_token_j)
+    success = authed is not None
+    res = {"success": success}
+    response = JSONResponse(content=res)
+    if cache:
+        set_token_cookie(response, cache)
+        cache.delete_cached_token()
+    return res
diff --git a/backend/version.py b/backend/version.py
index 22385e8..ef159bc 100644
--- a/backend/version.py
+++ b/backend/version.py
@@ -1 +1 @@
-version = "22.07.29.0"
+version = "22.07.30.0"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3c20042..290e117 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,9 @@
       "name": "frontend2",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.2.37"
+        "@imengyu/vue3-context-menu": "^1.0.9",
+        "vue": "^3.2.37",
+        "vue-toastification": "^2.0.0-rc.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.0.0",
@@ -28,6 +30,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@imengyu/vue3-context-menu": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.0.9.tgz",
+      "integrity": "sha512-ayK8Tmmg0Pgwc3l1UbMP7c23XQ9YzfKiCBFRUtJbIuDqLj6WtYowTTWSLj+NNc9bushs9KWkyAyuBKGiQBEHeQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz",
@@ -777,6 +784,14 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.38.8",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.8.tgz",
@@ -799,6 +814,11 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
       "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
     },
+    "@imengyu/vue3-context-menu": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.0.9.tgz",
+      "integrity": "sha512-ayK8Tmmg0Pgwc3l1UbMP7c23XQ9YzfKiCBFRUtJbIuDqLj6WtYowTTWSLj+NNc9bushs9KWkyAyuBKGiQBEHeQ=="
+    },
     "@vitejs/plugin-vue": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz",
@@ -1261,6 +1281,12 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "requires": {}
+    },
     "vue-tsc": {
       "version": "0.38.8",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.38.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 262beee..2208cc3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "@imengyu/vue3-context-menu": "^1.0.9",
+    "vue": "^3.2.37",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.0",
diff --git a/frontend/src/components/Album.vue b/frontend/src/components/Album.vue
index 7f6d4e9..1424b3b 100644
--- a/frontend/src/components/Album.vue
+++ b/frontend/src/components/Album.vue
@@ -3,21 +3,18 @@
     padding: `${padding}px`
   }" @click="play">
     <img class="album-art" :src="artUrl" :alt="album.name" :width=cellSize :height=cellSize @mouseover="hover"
-      @mouseleave="clearHover" />
+      @mouseleave="clearHover" @contextmenu="onContextMenu($event)" />
 
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import ContextMenu from '@imengyu/vue3-context-menu'
+import { useToast } from "vue-toastification";
+
+import Spinner from "./Spinner.vue";
 import type { AlbumT, OverlayT } from '../types.js'
-// import Toasted from "vue-toasted";
-// import Vue from "vue";
-// Vue.use(Toasted, {
-//   theme: "toasted-primary",
-//   position: "bottom-center",
-//   duration: 5000,
-// });
 
 
 const props = defineProps<{
@@ -29,14 +26,22 @@ const props = defineProps<{
   nRows?: number
   nCols?: number
   nColsAll?: number
+  isInLibrary: boolean
 }>()
 
 const emit = defineEmits<{
   (e: "play", arg: AlbumT): void
   (e: "hover", arg: OverlayT): void
   (e: "clearHover"): void
+  (e: "refreshAlbums", cb: (() => void)): void
 }>()
 
+let albumDesc = computed(
+  () =>
+    (props.album.artists.length === 1
+      ? props.album.artists[0].name + " - "
+      : "")
+    + `${props.album.name}`)
 
 const colPosition = computed(() => (props.index === undefined || props.nCols === undefined ? 1 : props.index % props.nCols))
 const rowPosition = computed(() => (props.index === undefined || props.nCols === undefined ? 1 : Math.floor(props.index / props.nCols)))
@@ -62,6 +67,9 @@ const artUrl = computed(() => {
   }
 })
 
+const toast = useToast();
+
+
 function hover() {
   let arg: OverlayT = {
     leftHalf: leftHalf.value,
@@ -80,10 +88,78 @@ function clearHover() {
 function play() {
   emit("play", props.album);
   emit("clearHover");
-  // Vue.toasted.clear();
-  // Vue.toasted.show(this.playingMessage);
+  toast(albumDesc.value)
 }
 
+interface arg { remove: boolean }
+function toggleLibrary({ remove }: arg) {
+  let spinnerToastId = toast(Spinner, { timeout: false })
+  let doneCallback = () => {
+    toast.dismiss(spinnerToastId)
+    toast(`${remove ? "Remov" : "Add"}ed ${albumDesc.value}`)
+  }
+  fetch(`/${remove ? "remove" : "add"}_album/${props.album.id}`)
+    .then(res => res.json())
+    .then(data => {
+      if (!data.success) {
+        throw new Error('failed')
+      }
+    })
+    .then(() => emit("refreshAlbums", doneCallback))
+    .catch(error => {
+      console.log(error)
+      toast.dismiss(spinnerToastId)
+      toast.error("Server error")
+    })
+}
+function onContextMenu(e: MouseEvent) {
+  e.preventDefault();
+  ContextMenu.showContextMenu({
+    customClass: "context-menu",
+    iconFontClass: "context-menu__icon",
+    x: e.x,
+    y: e.y,
+    items: [
+      {
+        label: albumDesc.value,
+        disabled: true,
+      },
+      {
+        label: "Go to album",
+        onClick: () => {
+          let url = `https://open.spotify.com/album/${props.album.id}`
+          window.open(url, "_blank")
+        }
+      },
+      props.album.artists.length === 1 ?
+        {
+          label: "Go to artist",
+          onClick: () => {
+            let url = `https://open.spotify.com/artist/${props.album.artists[0].id}`
+            window.open(url, "_blank")
+          }
+        }
+        :
+        {
+          label: "Go to artist",
+          children: props.album.artists.map(artist => ({
+            label: artist.name,
+            onClick: () => {
+              let url = `https://open.spotify.com/artist/${artist.id}`
+              window.open(url, "_blank")
+            }
+          })),
+
+        },
+
+      {
+        label: `${props.isInLibrary ? "Remove from" : "Add to"} library`,
+        onClick: () => toggleLibrary({ remove: props.isInLibrary })
+      }
+
+    ]
+  })
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/AlbumColumn.vue b/frontend/src/components/AlbumColumn.vue
index 6b5bd5f..ce46849 100644
--- a/frontend/src/components/AlbumColumn.vue
+++ b/frontend/src/components/AlbumColumn.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="albumColumn">
     <Album v-for="(album, i) in albums" class="album" :key="i" :album="album" :cellSize="cellSize" :padding="padding"
-      :overlayMultiplier=overlayMultiplier v-on:play="propagatePlay($event)" v-on:hover="propagateHover($event)"
-      v-on:clearHover=propagateClearHover />
+      :overlayMultiplier=overlayMultiplier :isInLibrary=areInLibrary v-on:play="propagatePlay($event)"
+      v-on:hover="propagateHover($event)" v-on:clearHover=propagateClearHover
+      v-on:refreshAlbums="propagateRefreshAlbums" />
   </div>
 </template>
 
@@ -18,12 +19,14 @@ const props = defineProps<{
   padding: number
   albums: AlbumT[]
   nRows: number
+  areInLibrary: boolean
 }>()
 
 const emit = defineEmits<{
   (e: "play", arg: AlbumT): void
   (e: "hover", arg: OverlayT): void
   (e: "clearHover"): void
+  (e: "refreshAlbums", cb: (() => void)): void
 }>()
 
 const cellSizeStr = computed(() => `${props.cellSize}px`)
@@ -42,6 +45,10 @@ function propagateClearHover() {
   emit("clearHover");
 }
 
+function propagateRefreshAlbums(cb: (() => void)) {
+  emit("refreshAlbums", cb);
+}
+
 
 </script>
 
diff --git a/frontend/src/components/AlbumGrid.vue b/frontend/src/components/AlbumGrid.vue
index d705f55..1804b84 100644
--- a/frontend/src/components/AlbumGrid.vue
+++ b/frontend/src/components/AlbumGrid.vue
@@ -5,9 +5,10 @@
         :alt="overlayAlbum.data.name" :width="overlaySize" :height="overlaySize" />
     </div>
     <div class="album-grid">
-      <Album v-for="(album, i) in albums" :key="i" :album="album" :cellSize="cellSize" :padding="padding"
-        :overlayMultiplier=overlayMultiplier :nCols=nCols :nRows=nRows :index=i :nColsAll=nColsAll
-        v-on:play="propagatePlay($event)" v-on:hover="hover($event)" v-on:clearHover="clearHover" />
+      <Album v-for="(album, i) in albums" :key="`${i}-${album.id}`" :album="album" :cellSize="cellSize"
+        :padding="padding" :overlayMultiplier=overlayMultiplier :nCols=nCols :nRows=nRows :index=i :nColsAll=nColsAll
+        :isInLibrary=true v-on:play="propagatePlay($event)" v-on:hover="hover($event)" v-on:clearHover="clearHover"
+        v-on:refreshAlbums="propagateRefreshAlbums" />
     </div>
   </div>
 </template>
@@ -32,6 +33,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: "play", arg: AlbumT): void
+  (e: "refreshAlbums", arg: (() => void)): void
 }>()
 
 const overlayAlbum: Ref<OverlayT | null> = ref(null);
@@ -69,6 +71,11 @@ function hover(arg: OverlayT) {
 function clearHover() {
   overlayAlbum.value = null
 }
+
+function propagateRefreshAlbums(cb: (() => void)) {
+  emit("refreshAlbums", cb);
+}
+
 </script>
 
 
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 859604b..f4b500c 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -5,13 +5,14 @@
         :height="playerHeight" frameborder="0" allowtransparency="true" allow="encrypted-media" />
       <AlbumColumn :padding="padding" :cellSize=cellSize :overlayMultiplier=overlayMultiplier :nRows="nRows - nLeftCols"
         v-on:play="handlePlay($event)" v-on:clearHover="clearHover" v-on:hover="hover($event)"
-        class="albumColumn recentAlbums" :albums="recent_albums" />
+        v-on:refreshAlbums=refreshAlbums :areInLibrary=true class="albumColumn recentAlbums" :albums="recent_albums" />
       <AlbumColumn :padding="padding" :cellSize=cellSize :overlayMultiplier=overlayMultiplier :nRows="nRows - nLeftCols"
         v-on:play="handlePlay($event)" v-on:clearHover="clearHover" v-on:hover="hover($event)"
-        class="albumColumn recommendedAlbums" :albums="recommended_albums" />
+        v-on:refreshAlbums=refreshAlbums :areInLibrary=false class="albumColumn recommendedAlbums"
+        :albums="recommended_albums" />
 
       <img class="albumArt" :src="selected_album.images[0].url" :alt="selected_album.name" :width=albumArtSize
-        :height=albumArtSize />
+        :height=albumArtSize @contextmenu="onAlbumArtContextMenu($event)" />
     </div>
     <div class="overlayGrid">
       <img v-if="overlayAlbum" class="album-overlay" :src="overlayAlbum.images[0].url" :alt="overlayAlbum.name"
@@ -27,6 +28,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import type { Ref } from 'vue';
+import ContextMenu from '@imengyu/vue3-context-menu'
 
 import AlbumColumn from "./AlbumColumn.vue";
 import AlbumGrid from "./AlbumGrid.vue";
@@ -41,7 +43,14 @@ const props = defineProps<{
   recommended_albums: AlbumT[]
 }>()
 
-const selected_album = ref(props.all_albums[Math.floor(Math.random() * props.all_albums.length)])
+const all_albums = ref(props.all_albums)
+const recent_albums = ref(props.recent_albums)
+const recommended_albums = ref(props.recommended_albums)
+
+function randomAlbum() {
+  return all_albums.value[Math.floor(Math.random() * all_albums.value.length)]
+}
+const selected_album = ref(randomAlbum())
 const playerMaxWidth = ref(400);
 const padding = ref(2);
 const cellSize = ref(0);
@@ -63,7 +72,7 @@ const homeOverlaySize = ref(0);
 function checkSize() {
   let y = window.innerHeight - (8 * 2)
   let x = window.innerWidth - (8 * 2)
-  let n = props.all_albums.length
+  let n = all_albums.value.length
   let nAdded = 1
   let res
   let colsToAdd
@@ -72,7 +81,6 @@ function checkSize() {
     colsToAdd = Math.floor(playerMaxWidth.value / res.cellSize) + 2
     if (nAdded < res.nRows * colsToAdd) {
       nAdded++
-      console.log("nAdded", nAdded)
       continue
     } else {
       break
@@ -104,6 +112,21 @@ function checkSize() {
   homeOverlaySize.value = cellSize.value * overlayMultiplier.value - padding.value * 2
 }
 
+function onAlbumArtContextMenu(e: MouseEvent) {
+  e.preventDefault();
+  ContextMenu.showContextMenu({
+    customClass: "context-menu",
+    iconFontClass: "context-menu__icon",
+    x: e.x,
+    y: e.y,
+    items: [
+      {
+        label: "Shuffle album",
+        onClick: () => selected_album.value = randomAlbum(),
+      }
+    ]
+  })
+}
 function handlePlay(album_data: AlbumT) {
   selected_album.value = album_data;
 }
@@ -116,6 +139,16 @@ function clearHover() {
   overlayAlbum.value = null
 }
 
+function refreshAlbums(callback: (() => void)) {
+  fetch(`/albums`).then(res => res.json()).then(data => {
+    all_albums.value = data.all_albums
+    recent_albums.value = data.recent_albums
+    recommended_albums.value = data.recommended_albums
+    checkSize()
+    callback()
+  })
+}
+
 checkSize()
 window.addEventListener("resize", checkSize);
 
@@ -126,6 +159,31 @@ body {
   overflow: hidden;
   background-color: #333;
 }
+
+
+.Vue-Toastification__toast--default.custom-toast {
+  background-color: #333;
+  color: white;
+  border-radius: 0px;
+}
+
+.Vue-Toastification__toast--error.custom-toast {
+  background-color: #333;
+  color: white;
+  border-radius: 0px;
+}
+
+.context-menu {
+  border-radius: 0px;
+}
+
+.context-menu__icon {
+  max-width: 0px;
+}
+
+.mx-context-menu-item.disabled {
+  cursor: default;
+}
 </style>
 <style scoped>
 .main-grid {
diff --git a/frontend/src/components/Spinner.vue b/frontend/src/components/Spinner.vue
new file mode 100644
index 0000000..aa1ebb0
--- /dev/null
+++ b/frontend/src/components/Spinner.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="loader" />
+</template>
+
+<style scoped>
+.loader,
+.loader:after {
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+}
+
+.loader {
+    margin: 0px auto;
+    font-size: 10px;
+    position: relative;
+    text-indent: -9999em;
+    border-top: 0.22em solid rgba(255, 255, 255, 0.2);
+    border-right: 0.22em solid rgba(255, 255, 255, 0.2);
+    border-bottom: 0.22em solid rgba(255, 255, 255, 0.2);
+    border-left: 0.22em solid #ffffff;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 1.1s infinite linear;
+    animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 01433bc..66f9ac1 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,4 +1,20 @@
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+
+import Toast, { PluginOptions, POSITION } from "vue-toastification";
+import "vue-toastification/dist/index.css";
+
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const ToastOptions: PluginOptions = {
+    position: POSITION.BOTTOM_LEFT,
+    icon: false,
+    showCloseButtonOnHover: true,
+    hideProgressBar: true,
+    toastClassName: "custom-toast",
+    transition: "",
+    timeout: 1000,
+    maxToasts: 1,
+};
+createApp(App).use(ContextMenu).use(Toast, ToastOptions).mount('#app')
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index eb4913c..f9b209b 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,10 +1,16 @@
 export type ImageT = { url: string }
 
+interface ArtistT {
+    name: string
+    id: string
+}
+
 export interface AlbumT {
     name: string
     id: string
     uri: string
     images: [ImageT, ImageT, ImageT]
+    artists: ArtistT[]
 }
 
 export interface OverlayT {