separate playFolder and playAlbum

server/app/api.py

@@ -13,7 +13,7 @@ all_the_f_music = helpers.getAllSongs()
 
 def initialize() -> None:
     helpers.create_config_dir()
-    helpers.check_for_new_songs()
+    # helpers.check_for_new_songs()
 
 initialize()
 
@@ -208,7 +208,6 @@ def getFolderTree(folder: str = None):
 
     return {"files": helpers.remove_duplicates(songs), "folders": sorted(folders, key=lambda i: i['name'])}
 
-
 @bp.route('/qwerty')
 def populateArtists():
     all_songs = instances.songs_instance.get_all_songs()
@@ -230,7 +229,6 @@ def populateArtists():
 
     return {'songs': artists}
 
-
 @bp.route('/albums')
 def getAlbums():
     s = instances.songs_instance.get_all_songs()
@@ -248,16 +246,14 @@ def getAlbums():
 
     return {'albums': albums}
 
-
 @bp.route('/albums/<query>')
+@cache.cached()
 def getAlbumSongs(query: str):
     album = query.split('::')[0].replace('|', '/')
     artist = query.split('::')[1].replace('|', '/')
 
     songs = instances.songs_instance.find_songs_by_album(album, artist)
 
-    print(artist)
-
     for song in songs:
         song['artists'] = song['artists'].split(', ')
         song['image'] = "http://127.0.0.1:8900/images/thumbnails/" + song['image']
@@ -269,4 +265,5 @@ def getAlbumSongs(query: str):
         "image": songs[0]['image'],
         "artist": songs[0]['album_artist']
     }
-    return {'songs': songs, 'info': album_obj}
+
+    return {'songs': helpers.remove_duplicates(songs), 'info': album_obj}

server/app/functions.py

@@ -20,8 +20,6 @@ def populate():
     '''
     files = helpers.run_fast_scandir(helpers.home_dir, [".flac", ".mp3"])[1]
 
-    bar = Bar('Indexing files', max=len(files))
-
     for file in files:
         file_in_db_obj = instances.songs_instance.find_song_by_path(file)
 
@@ -39,10 +37,6 @@ def populate():
             except MutagenError:
                 pass
 
-        bar.next()
-
-    bar.finish()
-
     return {'msg': 'updated everything'}
 
 

server/app/instances.py

@@ -3,5 +3,3 @@ from app.models import Artists
 
 songs_instance = AllSongs()
 artist_instance = Artists()
-
-""

src/components/AlbumView/Header.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="a-header rounded">
-    <div id="header-blur"></div>
     <div
       class="art rounded"
       :style="{
@@ -17,45 +16,44 @@
         <div class="stats">
           {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
         </div>
-        <div class="play rounded">
+        <button class="play rounded" @click="playAlbum">
           <div class="icon"></div>
           <div>Play</div>
+        </button>
       </div>
     </div>
-    </div>
+    <!-- <div class="most-played">
-    <div class="most-played">
       <div class="art image rounded"></div>
       <div>
         <div class="title">Girl Of My Dreams</div>
         <div class="artist">Juice Wrld, Suga [BTS]</div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import state from "@/composables/state.js"
+import perks from "@/composables/perks.js"
+
 export default {
   props: ["album_info"],
-  setup() {},
+  setup() {
+    function playAlbum() {
+      perks.updateQueue(state.album_song_list.value[0], "album")
+    }
+    return {
+      playAlbum
+    }
+  },
 };
 </script>
 
 <style lang="scss">
-#header-blur {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  backdrop-filter: blur(40px);
-}
-
 .a-header {
   position: relative;
   height: 14rem;
-  background: #232526;
+  background: $card-dark;
-  background: -webkit-linear-gradient(to right, #414345, #232526);
-  background: linear-gradient(to right, #050107, #00090e);
 
   backdrop-filter: blur(40px);
   overflow: hidden;

src/components/FolderView/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <button class="play image" @click="playThis(first_song)">
+      <button class="play image" @click="playFolder(first_song)">
         <div class="icon"></div>
         Play
       </button>
@@ -25,12 +25,17 @@
 
 <script>
 import perks from "@/composables/perks.js";
+import state from "@/composables/state.js"
 
 export default {
   props: ["path", "first_song"],
   setup() {
+    function playFolder(song) {
+      perks.updateQueue(song, "folder")
+    }
     return {
-      playThis: perks.updateQueue,
+      playFolder,
+      search_query: state.search_query
     };
   },
 };

src/components/FolderView/SongList.vue

@@ -19,6 +19,7 @@
             :song="song"
             :current="current"
             @updateQueue="updateQueue"
+            @loadAlbum="loadAlbum"
           />
         </tbody>
       </table>
@@ -38,8 +39,10 @@ import { ref } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
 import SongItem from "../SongItem.vue";
+import getAlbum from "@/composables/getAlbum.js";
 import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
+import { useRouter, useRoute } from "vue-router";
 
 export default {
   props: ["songs"],
@@ -51,6 +54,11 @@ export default {
     const songTitleWidth = ref(null);
 
     const minWidth = ref(300);
+    let routex;
+
+    const current = ref(perks.current);
+    const search_query = ref(state.search_query);
+    const route = useRouter();
 
     const resizeSongTitleWidth = () => {
       try {
@@ -63,6 +71,8 @@ export default {
     };
 
     onMounted(() => {
+      routex = useRoute().name;
+
       resizeSongTitleWidth();
 
       window.addEventListener("resize", () => {
@@ -76,15 +86,42 @@ export default {
       });
     });
 
-    const current = ref(perks.current);
-    const search_query = ref(state.search_query);
-
     function updateQueue(song) {
-      perks.updateQueue(song)
+      let type;
+
+      switch (routex) {
+        case "FolderView":
+            type = "folder";
+          break;
+        case "AlbumView":
+            type = "album";
+          break;
+      }
+
+      perks.updateQueue(song, type);
+    }
+
+    function loadAlbum(title, album_artist) {
+      state.loading.value = true;
+
+      getAlbum(title, album_artist).then((data) => {
+        state.album_song_list.value = data.songs;
+        state.album_info.value = data.info;
+
+        route.push({
+          name: "AlbumView",
+          params: {
+            album: title,
+            artist: album_artist,
+          },
+        });
+        state.loading.value = false;
+      });
     }
 
     return {
       updateQueue,
+      loadAlbum,
       songtitle,
       songTitleWidth,
       minWidth,
@@ -107,6 +144,7 @@ export default {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  background-color: $card-dark;
 
   &::-webkit-scrollbar {
     display: none;

src/components/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr :class="{ current: current._id == song._id }">
+  <tr :class="{ current: current._id.$oid == song._id.$oid }">
     <td
       :style="{ width: songTitleWidth + 'px' }"
       class="flex"
@@ -13,7 +13,7 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current._id == song._id"
+          v-if="current._id.$oid == song._id.$oid"
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>
@@ -35,13 +35,10 @@
       </div>
     </td>
     <td :style="{ width: songTitleWidth + 'px' }">
-      <router-link
+      <div
         class="ellip"
-        :to="{
+       @click="emitLoadAlbum(song.album, song.album_artist)"
-          name: 'AlbumView',
+        >{{ song.album }}</div
-          params: { album: song.album, artist: song.album_artist },
-        }"
-        >{{ song.album }}</router-link
       >
     </td>
     <td
@@ -58,16 +55,23 @@ import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
 
 export default {
-  props: ["song", "current", "songTitleWidth", "minWidth"],
+  props: ["song", "songTitleWidth", "minWidth"],
   setup(props, { emit }) {
     function emitUpdate(song) {
       emit("updateQueue", song);
     }
 
+    function emitLoadAlbum(title, artist){
+      console.log(title, artist)
+      emit("loadAlbum", title, artist)
+    }
+
     return {
       putCommas: perks.putCommas,
       emitUpdate,
+      emitLoadAlbum,
       is_playing: state.is_playing,
+      current: state.current
     };
   },
 };

src/composables/getAlbum.js

@@ -1,7 +1,7 @@
 let base_uri = "http://127.0.0.1:9876";
 
 const getAlbum = async (name, artist) => {
-  const res = await fetch(base_uri + "/albums/" + name.replaceAll("/", "|") + "::" + artist.replaceAll("/", "|"));
+  const res = await fetch(base_uri + "/albums/" + encodeURIComponent(name.replaceAll("/", "|")) + "::" + encodeURIComponent(artist.replaceAll("/", "|")));
 
   if (!res.ok) {
     const message = `An error has occured: ${res.status}`;

src/composables/perks.js

@@ -80,11 +80,21 @@ const readQueue = () => {
   }
 };
 
-const updateQueue = async (song) => {
+const updateQueue = async (song, type) => {
   playAudio.playAudio(song.filepath)
+  let list;
 
-  if (state.queue.value[0]._id.$oid !== state.song_list.value[0]._id.$oid) {
+  switch (type) {
-    const new_queue = state.song_list.value;
+    case "folder":
+      list = state.folder_song_list.value;
+      break;
+    case "album":
+      list = state.album_song_list.value;
+      break;
+  }
+  
+  if (state.queue.value[0]._id.$oid !==list[0]._id.$oid) {
+    const new_queue =list;
     localStorage.setItem("queue", JSON.stringify(new_queue));
     state.queue.value = new_queue;
   }

src/composables/searchMusic.js

@@ -3,7 +3,7 @@ import state from "./state.js";
 const base_url = "http://127.0.0.1:9876/search?q=";
 
 async function search(query) {
-  const url = base_url + query;
+  const url = base_url + encodeURIComponent(query);
 
   const res = await fetch(url);
     const json = await res.json();

src/composables/state.js

@@ -12,7 +12,7 @@ const queue = ref([
   },
 ]);
 
-const song_list = ref([])
+const folder_song_list = ref([])
 const folder_list = ref([])
 
 const current = ref({
@@ -31,6 +31,9 @@ const prev = ref({
   },
 });
 
+const album_song_list = ref([])
+const album_info = ref([])
+
 const filters = ref([]);
 const magic_flag = ref(false);
 const loading = ref(false);
@@ -44,7 +47,7 @@ const search_artists = ref([]);
 export default {
   search_query,
   queue,
-  song_list,
+  folder_song_list,
   folder_list,
   current,
   prev,
@@ -55,4 +58,6 @@ export default {
   search_tracks,
   search_albums,
   search_artists,
+  album_song_list,
+  album_info
 };

src/views/AlbumView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="al-view rounded">
-    <div class="header">
+    <div>
       <Header :album_info="album_info" />
     </div>
     <div class="separator" id="av-sep"></div>
-    <div>
+    <div class="songs rounded">
       <SongList :songs="album_songs" />
     </div>
     <div class="separator" id="av-sep"></div>
@@ -18,7 +18,7 @@
 
 <script>
 import { useRoute } from "vue-router";
-import { onMounted, ref } from "@vue/runtime-core";
+import { onMounted } from "@vue/runtime-core";
 
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
@@ -29,6 +29,7 @@ import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 import getAlbum from "../composables/getAlbum.js";
 import state from "@/composables/state.js";
+import { onUnmounted } from "@vue/runtime-core";
 
 export default {
   components: {
@@ -40,23 +41,28 @@ export default {
   },
   setup() {
     const route = useRoute();
-    const album_name = route.params.album;
+    const title = route.params.album;
     const album_artists = route.params.artist;
-    const album_songs = ref([]);
-    const album_info = ref({});
 
     onMounted(() => {
-      state.loading.value = true;
+      if (!state.album_song_list.value.length) {
-      getAlbum(album_name, album_artists).then((data) => {
+        getAlbum(title, album_artists).then((data) => {
-        album_songs.value = data.songs;
+          state.album_song_list.value = data.songs;
-        album_info.value = data.info;
+          state.album_info.value = data.info;
+
           state.loading.value = false;
         });
+      }
+    });
+
+    onUnmounted(() => {
+      state.album_song_list.value = [];
+      state.album_info.value = {};
     });
 
     return {
-      album_songs,
+      album_songs: state.album_song_list,
-      album_info,
+      album_info: state.album_info,
     };
   },
 };
@@ -64,8 +70,14 @@ export default {
 
 <style lang="scss">
 .al-view {
-  height: 100%;
+  height: calc(100% - 1rem);
   overflow: auto;
+  margin-top: $small;
+
+  .songs {
+    padding: $small;
+    background-color: $card-dark;
+  }
 
   &::-webkit-scrollbar {
     display: none;

src/views/FolderView.vue

@@ -4,9 +4,9 @@
       <Header :path="path" :first_song="songs[0]" />
     </div>
     <div id="scrollable" ref="scrollable">
-      <SongList :songs="songs" />
-      <div class="separator" v-if="folders.length && songs.length"></div>
       <FolderList :folders="folders" />
+      <div class="separator" v-if="folders.length && songs.length"></div>
+      <SongList :songs="songs" />
     </div>
   </div>
 </template>
@@ -33,7 +33,7 @@ export default {
     const route = useRoute();
     const path = ref(route.params.path);
 
-    const song_list = ref(state.song_list);
+    const song_list = ref(state.folder_song_list);
     const folders = ref(state.folder_list);
 
     const scrollable = ref(null);
@@ -80,7 +80,7 @@ export default {
         getData(path, last_id).then((data) => {
           scrollable.value.scrollTop = 0;
 
-          state.song_list.value = data.songs;
+          state.folder_song_list.value = data.songs;
           state.folder_list.value = data.folders;
 
           state.loading.value = false;
@@ -92,6 +92,9 @@ export default {
       watch(route, (new_route) => {
         state.search_query.value = "";
         path.value = new_route.params.path;
+
+        if (!path.value) return;
+
         getPathFolders(path.value);
       });
     });