move master flag into component

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+.yarn*
 
 
 # local env files

src/components/WelcomeModal.vue

@@ -18,7 +18,7 @@
       <div class="creator t-center">
         Designed and developed by
         <span class="name"
-          ><a href="https://github.com/geoffrey45">Geoffrey Mungai</a>
+          ><a href="https://github.com/geoffrey45">Mungai Njoroge</a>
         </span>
       </div>
     </div>

src/components/nav/Titles/APTitle.vue

@@ -4,6 +4,7 @@
     :class="{
       hide_play: header_shown,
     }"
+    v-if="album.info.albumhash"
   >
     <div class="first grid">
       <PlayBtn :source="things.source" :store="things.store" />
@@ -30,6 +31,9 @@ defineProps<{
   header_shown: boolean;
 }>();
 
+const album = useAlbumStore();
+const playlist = usePStore();
+
 const things = computed(() => {
   const route = useRoute();
   let thing = {

src/components/shared/MasterFlag.vue

@@ -0,0 +1,15 @@
+<template>
+  <span class="master-flag" title="Master audio file">M</span>
+</template>
+
+<style lang="scss">
+.master-flag {
+  font-size: 10px;
+  margin-left: $smaller;
+  background-color: rgba(184, 108, 21, 0.281);
+  color: rgb(255, 153, 0);
+  padding: 2px 5px;
+  border-radius: 5px;
+  opacity: 0.75;
+}
+</style>

src/components/shared/SongItem.vue

@@ -32,7 +32,7 @@
           <span class="title ellip" ref="artisttitle">
             {{ track.title }}
           </span>
-          <span v-if="track.bitrate > 1024" class="master-flag"><b>M</b> </span>
+          <MasterFlag v-if="track.bitrate > 1024" />
         </div>
         <div class="isSmallArtists" style="display: none">
           <ArtistName
@@ -86,6 +86,8 @@ import useQueueStore from "@/stores/queue";
 import { addFavorite, removeFavorite } from "@/composables/fetch/favorite";
 import { favType } from "@/composables/enums";
 
+import MasterFlag from "./MasterFlag.vue";
+
 const imguri = paths.images.thumb.small;
 const context_menu_showing = ref(false);
 const queue = useQueueStore();
@@ -156,16 +158,6 @@ async function addToFav(trackhash: string) {
       align-items: center;
     }
 
-    .master-flag {
-      font-size: 10px;
-      margin-left: $smaller;
-      background-color: rgba(184, 108, 21, 0.281);
-      color: rgb(255, 153, 0);
-      padding: 2px 5px;
-      border-radius: 5px;
-      opacity: 0.75;
-    }
-
     cursor: pointer;
 
     .title {

src/composables/fetch/album.ts

@@ -25,10 +25,6 @@ const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
 
   if (status == 204) {
     ToastStore().showNotification("Album not created yet!", NotifType.Error);
-    return {
-      info: {} as Album,
-      tracks: [],
-    };
   }
 
   return data as AlbumData;

src/composables/fetch/artists.ts

@@ -1,3 +1,4 @@
+import { NotifType, useNotifStore } from "@/stores/notification";
 import { paths } from "@/config";
 import useAxios from "./useAxios";
 import { Artist, Track, Album } from "@/interfaces";
@@ -8,11 +9,15 @@ const getArtistData = async (hash: string, limit: number = 5) => {
     tracks: Track[];
   }
 
-  const { data, error } = await useAxios({
+  const { data, error, status } = await useAxios({
     get: true,
     url: paths.api.artist + `/${hash}?limit=${limit}`,
   });
 
+  if (status == 404) {
+    useNotifStore().showNotification("Artist not found", NotifType.Error);
+  }
+
   if (error) {
     console.error(error);
   }

src/config.ts

@@ -7,7 +7,7 @@ export interface D<T = string> {
 
 const domains: D = {
   local: "http://localhost:",
-  remote: "http://10.10.219.196:",
+  remote: "http://192.168.100.25:",
 };
 
 const ports = {

src/stores/pages/album.ts

@@ -6,11 +6,10 @@ import { AlbumDisc } from "./../../interfaces";
 import { FuseTrackOptions } from "@/composables/enums";
 import { maxAbumCards } from "@/stores/content-width";
 
-import {
+import { getAlbum, getAlbumsFromArtist } from "../../composables/fetch/album";
-    getAlbum, getAlbumsFromArtist
-} from "../../composables/fetch/album";
 import { Album, FuseResult, Track } from "../../interfaces";
 import { useNotifStore } from "../notification";
+import router from "@/router";
 
 interface Disc {
   [key: string]: Track[];
@@ -62,6 +61,7 @@ export default defineStore("album", {
      */
     async fetchTracksAndArtists(hash: string) {
       const album = await getAlbum(hash, useNotifStore);
+
       this.rawTracks = album.tracks;
       this.info = album.info;
     },