move loader to search bar

server/app/api.py

@@ -7,11 +7,11 @@ from app.helpers import (
     convert_to_json,
     remove_duplicates,
     save_image,
-    isValidFile,
+    # isValidFile,
     create_config_dir,
     extract_thumb,
+    run_fast_scandir,
     home_dir, app_dir,
-    run_fast_scandir
 )
 
 from app import cache
@@ -358,7 +358,7 @@ def getAlbumSongs(query: str):
     artist = query.split('::')[1].replace('|', '/')
 
     songs = all_songs_instance.find_songs_by_album(album, artist)
-    songs_array = convert_to_json(songs)
+    songs_array = remove_duplicates(convert_to_json(songs))
 
     print(artist)
 
@@ -372,6 +372,5 @@ def getAlbumSongs(query: str):
         "duration": sum(song['length'] for song in songs_array),
         "image": songs_array[0]['image'],
         "artist": songs_array[0]['album_artist']
-        # "date": songs_array[0]['date']
     }
     return {'songs': songs_array, 'info': album_obj}

server/app/helpers.py

@@ -127,7 +127,7 @@ def getTags(full_path):
         try:
             title = audio['TIT2'][0]
         except:
-            title = 'Unknown'
+            title = full_path.split('/')[-1]
     except:
         title = full_path.split('/')[-1]
 

src/App.vue

@@ -143,7 +143,7 @@ export default {
 .content {
   position: relative;
   padding: 0.5rem;
-  padding-top: 4.5rem;
+  padding-top: 3.75rem;
 
   .search-box {
     width: calc(100% - 1rem);

src/components/AlbumView/Header.vue

@@ -24,7 +24,7 @@
       </div>
     </div>
     <div class="most-played">
-      <div class="image rounded"></div>
+      <div class="art image rounded"></div>
       <div>
         <div class="title">Girl Of My Dreams</div>
         <div class="artist">Juice Wrld, Suga [BTS]</div>
@@ -76,7 +76,7 @@ export default {
     width: 25rem;
     height: 5rem;
 
-    .image {
+    .art {
       width: 4rem;
       height: 4rem;
       background-image: url(../../assets/images/jw.jpeg);
@@ -96,7 +96,7 @@ export default {
   .art {
     width: 12rem;
     height: 12rem;
-    background: no-repeat center/cover url(../../assets/images/null.webp);
+    background: no-repeat center/cover;
     margin-right: 1rem;
   }
 
@@ -116,6 +116,7 @@ export default {
 
       .artist {
         margin-top: $small;
+
         color: rgba(255, 255, 255, 0.856);
       }
     }

src/components/FolderView/SearchBox.vue

@@ -9,14 +9,13 @@
       <div>
         <input type="search" placeholder="Search this directory" />
       </div>
-      <div v-if="loading" class="loader"></div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["path", "loading"],
+  props: ["path"],
 };
 </script>
 
@@ -39,28 +38,6 @@ export default {
   position: relative;
   width: 50%;
   padding-right: 3rem;
-
-  .loader {
-    position: absolute;
-    top: $small;
-    right: 0;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    border: solid;
-    border-top: solid rgb(255, 174, 0);
-    border-left: solid rgb(255, 174, 0);
-    animation: spin .2s linear infinite;
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
 }
 
 .folder-top .fsearch div {

src/components/RightSideBar/NowPlaying.vue

@@ -67,8 +67,6 @@ export default {
       return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
     }
 
-    // const duration = ref()
-
     const { playNext } = playAudio;
     const { playPrev } = playAudio;
     const { playPause } = playAudio;
@@ -97,7 +95,7 @@ export default {
 .now-playing {
   border-radius: 0.5rem;
   height: 14rem;
-  margin-top: 1rem;
+  margin-top: .5rem;
   padding: 0.5rem;
   background: rgb(14, 14, 14);
   background: linear-gradient(

src/components/RightSideBar/UpNext.vue

@@ -116,7 +116,7 @@ export default {
 }
 
 .up-next .v1 {
-  max-height: 20em;
+  max-height: 21em;
   transition: max-height 0.5s ease;
   padding: $small;
 
@@ -189,7 +189,6 @@ export default {
 }
 
 .up-next .all-items .scrollable {
-  height: 20rem;
   overflow-y: auto;
   background-color: rgba(2, 6, 14, 0.425);
   border-radius: 0.5rem;

src/components/Search.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="right-search" ref="searchComponent">
-    class="right-search"
-    ref="searchComponent"
-  >
     <div class="input">
       <div class="search-icon image"></div>
       <div class="filter">
@@ -24,6 +21,7 @@
         placeholder="find your music"
         v-model="query"
       />
+      <div class="loader" v-if="loading"></div>
       <div
         class="suggestions v00"
         :class="{
@@ -90,7 +88,6 @@ import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
 export default {
-
   emits: ["expandSearch", "collapseSearch"],
   props: ["search"],
   setup(props, { emit }) {
@@ -126,10 +123,11 @@ export default {
         icon: "📁",
       },
       {
-        title: "🈁 Here",
+        title: "🈁 This folder",
         icon: "🈁",
-      }
+      },
     ];
+    const loading = ref(state.loading)
     const searchComponent = ref(null);
     const filters = ref(state.filters);
     const albums = [
@@ -139,7 +137,7 @@ export default {
     ];
 
     const artists = ["Michael Jackson waihenya", "Jackson 5"];
-    const query = ref(state.searh_query);
+    const query = ref(state.search_query);
     const magic_flag = ref(state.magic_flag);
     const is_hidden = toRefs(props).search;
 
@@ -177,24 +175,25 @@ export default {
           (!filters.value.length && query.value == null) ||
           query.value == ""
         ) {
-          console.log(query.value);
           state.magic_flag.value = false;
         }
-      }, 300);
+      }, 3000);
     }
 
     watch(query, (new_query) => {
       state.search_query.value = new_query;
       if (new_query !== "") {
         counter = 0;
-        emit("expandSearch");
+        if (!filters.value.includes("🈁")) {
+          emit("expandSearch");
+        }
       } else {
         emit("collapseSearch");
       }
     });
 
     onMounted(() => {
-      const dom = document.getElementsByClassName("right-search")[0]
+      const dom = document.getElementsByClassName("right-search")[0];
 
       document.addEventListener("click", (e) => {
         var isClickedInside = dom.contains(e.target);
@@ -204,7 +203,7 @@ export default {
         }
       });
     });
-    
+
     return {
       addFilter,
       activateMagicFlag,
@@ -220,12 +219,33 @@ export default {
       options,
       filters,
       searchComponent,
+      loading
     };
   },
 };
 </script>
 
 <style lang="scss">
+.loader {
+  position: absolute;
+  right: 0;
+  width: 2rem;
+  height: 2rem;
+  border: solid #fff;
+  border-radius: 50%;
+  border-bottom: solid  rgb(255, 174, 0);
+  border-top: solid  rgb(255, 174, 0);
+  animation: spin .3s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 .right-search .v0 {
   max-height: 0em;
   transition: max-height 0.5s ease;
@@ -238,21 +258,23 @@ export default {
 
 .right-search {
   position: relative;
-  border-radius: 1rem;
+  border-radius: $small;
   margin: 0.5rem 0 0 0;
-  padding: $small $small 0 0;
+  padding: 1rem $small 0 0;
   background-color: #000000;
   overflow: hidden;
 
   .item {
     position: relative;
-    background-color: rgb(39, 37, 37);
+    background-color: rgba(39, 37, 37, 0.555);
     padding: 0.5rem;
     border-radius: 0.5rem;
     cursor: pointer;
     margin: 0 $small 0 0;
     display: flex;
     align-items: center;
+    font-size: .9rem;
+    color: rgb(151, 150, 150);
 
     &:hover {
       background-color: rgb(170, 50, 50);
@@ -309,7 +331,7 @@ export default {
     gap: 0.5rem;
     margin-left: 1rem;
     position: absolute;
-    right: 0;
+    right: 2.5rem;
 
     .item::before {
       content: "#";
@@ -355,14 +377,12 @@ export default {
 }
 
 .right-search input {
-  width: 100%;
+  width: calc(100% - 6rem);
-  height: 2.5rem;
   border: none;
   border-radius: 0.5rem;
   background-color: transparent;
   color: rgba(255, 255, 255, 0.479);
   font-size: 1rem;
-  line-height: 3rem;
   outline: none;
   transition: all 0.5s ease;
 }

src/composables/perks.js

@@ -107,6 +107,12 @@ setTimeout(() => {
   });
 }, 1000);
 
+window.addEventListener('keyup', (e) => {
+  if (e.code) {
+      console.log(e.code);
+  }
+});
+
 export default {
   putCommas,
   readQueue,

src/composables/state.js

@@ -30,6 +30,7 @@ const prev = ref({
 
 const filters = ref([]);
 const magic_flag = ref(false);
+const loading = ref(false);
 
 
 export default {
@@ -39,4 +40,5 @@ export default {
   prev,
   filters,
   magic_flag,
+  loading,
 };

src/views/AlbumView.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="al-view rounded">
     <div class="header">
-      <Header :album_info="album_info"/>
+      <Header :album_info="album_info" />
     </div>
     <div class="separator" id="av-sep"></div>
     <div>
-      <SongList :songs="album_songs"/>
+      <SongList :songs="album_songs" />
     </div>
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists />
@@ -28,6 +28,7 @@ import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 import getAlbum from "../composables/getAlbum.js";
+import state from "@/composables/state.js";
 
 export default {
   components: {
@@ -45,9 +46,11 @@ export default {
     const album_info = ref({});
 
     onMounted(() => {
+      state.loading.value = true;
       getAlbum(album_name, album_artists).then((data) => {
         album_songs.value = data.songs;
         album_info.value = data.info;
+        state.loading.value = false;
       });
     });
 

src/views/FolderView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <SearchBox :path="path" :loading="loading" />
+      <SearchBox :path="path"/>
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -20,7 +20,7 @@ import SearchBox from "@/components/FolderView/SearchBox.vue";
 
 import getData from "../composables/getFiles.js";
 import { onMounted, watch } from "@vue/runtime-core";
-import perks from "@/composables/perks.js";
+import state from "@/composables/state.js";
 
 export default {
   components: {
@@ -36,36 +36,39 @@ export default {
     const folders = ref([]);
 
     const scrollable = ref(null);
-    const loading = ref(false);
+
+    function focusSearch() {
+      console.log("focusSearch");
+    }
 
     onMounted(() => {
       const getPathFolders = (path, last_id) => {
-        loading.value = true;
+        state.loading.value = true;
         getData(path, last_id).then((data) => {
           scrollable.value.scrollTop = 0;
 
           songs.value = data.songs;
           folders.value = data.folders;
-          
+
-          loading.value = false;
+          state.loading.value = false;
         });
       };
 
       getPathFolders(path.value);
 
       watch(route, (new_route) => {
-        perks.search.value = "";
+        state.search_query.value = "";
         path.value = new_route.params.path;
         getPathFolders(path.value);
       });
     });
 
     return {
+      focusSearch,
       songs,
       folders,
       path,
       scrollable,
-      loading,
     };
   },
 };