From 61e7ff71888b143aafcc79dc7f816ea4a0bc8ee7 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 30 Dec 2021 21:32:12 +0300
Subject: [PATCH] blacken search component

---
 server/app/api.py                      |  10 +--
 src/App.vue                            |  39 +++++++--
 src/assets/css/global.scss             |   1 -
 src/assets/icons/no-results.svg        |   1 +
 src/components/FolderView/SongList.vue |  41 +++++++--
 src/components/Search.vue              | 109 ++++++++++++++---------
 src/composables/perks.js               | 116 +++++++++++--------------
 src/composables/state.js               |  42 +++++++++
 src/views/FolderView.vue               |   2 +
 9 files changed, 233 insertions(+), 128 deletions(-)
 create mode 100644 src/assets/icons/no-results.svg
 create mode 100644 src/composables/state.js

diff --git a/server/app/api.py b/server/app/api.py
index 23d3a220..b9978af8 100644
--- a/server/app/api.py
+++ b/server/app/api.py
@@ -288,12 +288,12 @@ def getFolderTree(folder: str = None):
 
                 folders.append(dir)
 
-        if entry.is_file():
-            if isValidFile(entry.name) == True:
-                file = all_songs_instance.find_song_by_path(entry.path)
+        # if entry.is_file():
+        #     if isValidFile(entry.name) == True:
+        #         file = all_songs_instance.find_song_by_path(entry.path)
 
-                if not file:
-                    getTags(entry.path)
+        #         if not file:
+        #             getTags(entry.path)
 
     songs_array = all_songs_instance.find_songs_by_folder(
         req_dir)
diff --git a/src/App.vue b/src/App.vue
index f4b0d6b0..798d9498 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,12 +11,15 @@
       <Navigation :collapsed="collapsed" />
       <PinnedStuff :collapsed="collapsed" />
     </div>
-    <div class="content">
-      <Search
-        v-model:search="search"
-        @expandSearch="expandSearch"
-        @collapseSearch="collapseSearch"
-      />
+    <div class="content" :class="{ isMagicFlag: isMagicFlag }">
+      <div class="search-box">
+        <Search
+          v-model:search="search"
+          @expandSearch="expandSearch"
+          @collapseSearch="collapseSearch"
+        />
+      </div>
+
       <div class="separator" style="border: none"></div>
       <router-view />
     </div>
@@ -31,7 +34,7 @@
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
+import { computed, ref } from "@vue/reactivity";
 
 import Navigation from "./components/LeftSidebar/Navigation.vue";
 import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
@@ -41,6 +44,7 @@ import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
 import UpNext from "./components/RightSideBar/UpNext.vue";
 import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
 
+import state from "@/composables/state.js";
 import perks from "@/composables/perks.js";
 
 export default {
@@ -58,6 +62,10 @@ export default {
 
     perks.readQueue();
 
+    const isMagicFlag = computed(() => {
+      return state.magic_flag.value;
+    });
+
     function toggleNav() {
       collapsed.value = !collapsed.value;
     }
@@ -87,6 +95,7 @@ export default {
       expandSearch,
       collapseSearch,
       search,
+      isMagicFlag,
     };
   },
 };
@@ -130,4 +139,20 @@ export default {
     display: none;
   }
 }
+
+.content {
+  position: relative;
+  padding: 0.5rem;
+  padding-top: 4.5rem;
+
+  .search-box {
+    width: calc(100% - 1rem);
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+}
+.isMagicFlag {
+  padding-top: 7.5rem;
+}
 </style>
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 7065d9ce..b575a662 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -116,7 +116,6 @@ a {
 .content {
   grid-area: content;
   border-radius: 0.25rem;
-  padding: 0.5rem;
   overflow: hidden;
 }
 
diff --git a/src/assets/icons/no-results.svg b/src/assets/icons/no-results.svg
new file mode 100644
index 00000000..e7d4e406
--- /dev/null
+++ b/src/assets/icons/no-results.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#199be2" d="M35.983,32.448l-3.536,3.536l7.87,7.87c0.195,0.195,0.512,0.195,0.707,0l2.828-2.828	c0.195-0.195,0.195-0.512,0-0.707L35.983,32.448z"></path><radialGradient id="eRNmcsAyqJzyQtK0oJ_Tda" cx="20.024" cy="233.904" r="19.604" gradientTransform="matrix(1 0 0 -1 0 254)" gradientUnits="userSpaceOnUse"><stop offset=".693" stop-color="#006185"></stop><stop offset=".921" stop-color="#35c1f1"></stop></radialGradient><polygon fill="url(#eRNmcsAyqJzyQtK0oJ_Tda)" points="31.601,28.065 28.065,31.601 32.448,35.983 35.983,32.448"></polygon><linearGradient id="eRNmcsAyqJzyQtK0oJ_Tdb" x1="8.911" x2="31.339" y1="245.089" y2="222.661" gradientTransform="matrix(1 0 0 -1 0 254)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a3ffff"></stop><stop offset=".223" stop-color="#9dfbff"></stop><stop offset=".53" stop-color="#8bf1ff"></stop><stop offset=".885" stop-color="#6ee0ff"></stop><stop offset="1" stop-color="#63daff"></stop></linearGradient><circle cx="20" cy="20" r="16" fill="url(#eRNmcsAyqJzyQtK0oJ_Tdb)"></circle><path fill="#1b9de2" d="M12.5,26.75c0-0.414,3-3.75,7.5-3.75s7.5,3.336,7.5,3.75s-0.336,0.75-0.75,0.75	c-0.067,0-3.408-1.75-6.75-1.75c-3.338,0-6.677,1.75-6.75,1.75C12.836,27.5,12.5,27.164,12.5,26.75z M24.858,18.642	c1.144,1.144,2.998,1.144,4.142,0L24.858,14.5C23.714,15.644,23.714,17.498,24.858,18.642z M15.142,18.642	c1.144-1.144,1.144-2.998,0-4.142L11,18.642C12.144,19.786,13.998,19.786,15.142,18.642z"></path></svg>
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 0b741231..880521d1 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <div class="table rounded" ref="songtitle" v-if="songs.length">
+    <div class="table rounded" ref="songtitle" v-if="searchSongs.length">
       <table>
         <thead>
           <tr>
@@ -12,7 +12,7 @@
         </thead>
         <tbody>
           <tr
-            v-for="song in songs"
+            v-for="song in searchSongs"
             :key="song"
             :class="{ current: current._id.$oid == song._id.$oid }"
           >
@@ -64,16 +64,23 @@
         </tbody>
       </table>
     </div>
+    <div ref="songtitle" v-else-if="searchSongs.length === 0 && search_query">
+      <div class="no-results">
+        <div class="icon"></div>
+        <div class="text">❗ Track not found!</div>
+      </div>
+    </div>
     <div v-else ref="songtitle"></div>
   </div>
 </template>
 
 <script>
-import { ref, toRefs } from "@vue/reactivity";
+import { computed, ref, toRefs } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
 import audio from "@/composables/playAudio.js";
 import perks from "@/composables/perks.js";
+import state from "@/composables/state.js";
 
 export default {
   props: ["songs"],
@@ -86,13 +93,13 @@ export default {
     const putCommas = perks.putCommas;
 
     const updateQueue = async (song) => {
-      if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
-        const queue = song_list.value;
-        localStorage.setItem("queue", JSON.stringify(queue));
-        perks.queue.value = queue;
+      if (state.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
+        const new_queue = song_list.value;
+        localStorage.setItem("queue", JSON.stringify(new_queue));
+        state.queue.value = new_queue;
       }
 
-      perks.current.value = song;
+      state.current.value = song;
       localStorage.setItem("current", JSON.stringify(song));
     };
 
@@ -122,8 +129,18 @@ export default {
 
     const playAudio = audio.playAudio;
     const current = ref(perks.current);
+    const search_query = ref(state.search_query)
+
+    const searchSongs = computed(() => {
+      return song_list.value.filter((song) => {
+        return song.title
+          .toLowerCase()
+          .includes(state.search_query.value.toLowerCase());
+      });
+    });
 
     return {
+      searchSongs,
       songtitle,
       songTitleWidth,
       minWidth,
@@ -131,12 +148,20 @@ export default {
       updateQueue,
       putCommas,
       current,
+      search_query,
     };
   },
 };
 </script>
 
 <style lang="scss">
+.no-results {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
 .table {
   width: 100%;
   height: 100%;
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 9c747da2..ea983f6c 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="right-search" ref="searchComponent">
+  <div
+    class="right-search"
+    ref="searchComponent"
+  >
     <div class="input">
       <div class="search-icon image"></div>
       <div class="filter">
@@ -15,28 +18,25 @@
       <input
         type="search"
         id="search"
-        @focus="toggleMagicFlag"
-        @blur="toggleMagicFlag"
+        @focus="activateMagicFlag"
+        @blur="removeMagicFlag"
         @keyup.backspace="removeLastFilter"
         placeholder="find your music"
         v-model="query"
       />
       <div
-        class="suggestions"
+        class="suggestions v00"
         :class="{
           v00: !filters.length && !query,
           v11: filters.length || query,
         }"
       >
         <div class="item">Kenny Rogers</div>
-        <div class="item">Jim Reeves</div>
-        <div class="item">Juice Wrld</div>
-        <div class="item">Dolly Parton</div>
       </div>
     </div>
     <div class="separator no-border"></div>
-    <div class="options" v-if="magic_flag || query || filters.length">
-      <div class="item info">I'm looking for:</div>
+    <div class="options" v-if="magic_flag">
+      <div class="item info">Filter by:</div>
       <div
         class="item"
         v-for="option in options"
@@ -85,9 +85,13 @@
 
 <script>
 import { ref, toRefs } from "@vue/reactivity";
+
 import { watch } from "@vue/runtime-core";
+import state from "@/composables/state.js";
 
 export default {
+
+  emits: ["expandSearch", "collapseSearch"],
   props: ["search"],
   setup(props, { emit }) {
     const songs = [
@@ -121,13 +125,9 @@ export default {
         title: "📁 Folder",
         icon: "📁",
       },
-      {
-        title: "🈁 ここ",
-        icon: "🈁",
-      },
     ];
     const searchComponent = ref(null);
-    const filters = ref([]);
+    const filters = ref(state.filters);
     const albums = [
       "Smooth Criminal like wtf ... and im serious",
       "Xscape",
@@ -135,40 +135,52 @@ export default {
     ];
 
     const artists = ["Michael Jackson waihenya", "Jackson 5"];
-    const query = ref(null);
-    const magic_flag = ref(false);
+    const query = ref(state.searh_query);
+    const magic_flag = ref(state.magic_flag);
     const is_hidden = toRefs(props).search;
 
     function addFilter(filter) {
       if (!filters.value.includes(filter)) {
-        filters.value.push(filter);
+        state.filters.value.push(filter);
       }
     }
 
     function removeFilter(filter) {
-      filters.value = filters.value.filter((f) => f !== filter);
+      state.filters.value = filters.value.filter((f) => f !== filter);
     }
 
     let counter = 0;
 
     function removeLastFilter() {
-      console.log("removeLastFilter");
       if (query.value === "" || query.value === null) {
-        counter ++;
+        counter++;
 
-        if (counter > 1 || query.value === null){
-          filters.value.pop();
+        if (counter > 1 || query.value === null) {
+          state.filters.value.pop();
         }
       }
     }
 
-    function toggleMagicFlag() {
+    function activateMagicFlag() {
       setTimeout(() => {
-        magic_flag.value = !magic_flag.value;
+        state.magic_flag.value = true;
+      }, 300);
+    }
+
+    function removeMagicFlag() {
+      setTimeout(() => {
+        if (
+          (!filters.value.length && query.value == null) ||
+          query.value == ""
+        ) {
+          console.log(query.value);
+          state.magic_flag.value = false;
+        }
       }, 300);
     }
 
     watch(query, (new_query) => {
+      state.search_query.value = new_query;
       if (new_query !== "") {
         counter = 0;
         emit("expandSearch");
@@ -177,11 +189,18 @@ export default {
       }
     });
 
+    function hideScrollable() {
+      document.querySelector(".scrollable").classList.remove("v1");
+      document.querySelector(".scrollable").classList.add("v0");
+    }
+
     return {
       addFilter,
-      toggleMagicFlag,
+      activateMagicFlag,
+      removeMagicFlag,
       removeFilter,
       removeLastFilter,
+      hideScrollable,
       songs,
       albums,
       artists,
@@ -212,7 +231,7 @@ export default {
   border-radius: 1rem;
   margin: 0.5rem 0 0 0;
   padding: $small $small 0 0;
-  background-color: #131313b2;
+  background-color: #000000;
   overflow: hidden;
 
   .item {
@@ -299,9 +318,10 @@ export default {
 
 .right-search .scrollable {
   height: 26rem;
-  overflow-y: scroll;
+  overflow-y: auto;
   scroll-behavior: smooth;
   padding: 0 $small 0 0;
+  margin-bottom: 0.5rem;
 }
 
 .right-search .heading {
@@ -310,20 +330,20 @@ export default {
   padding: 1rem;
   display: flex;
   align-items: center;
+  .more {
+    position: absolute;
+    right: 1rem;
+    padding: 0.5rem;
+    user-select: none;
+  }
+
+  .more:hover {
+    background: $blue;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
 }
 
-.right-search .heading .more {
-  position: absolute;
-  right: 1rem;
-  padding: 0.5rem;
-  user-select: none;
-}
-
-.right-search .heading .more:hover {
-  background: $blue;
-  border-radius: 0.5rem;
-  cursor: pointer;
-}
 .right-search input {
   width: 100%;
   height: 2.5rem;
@@ -350,7 +370,8 @@ export default {
 
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  background-color: rgba(8, 3, 1, 0.274);
+  background-color: rgb(27, 26, 26);
+  margin-left: $small;
   padding: $small;
 
   .result-item {
@@ -394,8 +415,9 @@ export default {
 
 .right-search .albums-results {
   border-radius: 0.5rem;
-  background-color: rgba(8, 3, 1, 0.274);
-  margin-top: 1rem;
+  background-color: rgb(27, 26, 26);
+  margin-left: $small;
+  margin-top: $small;
 
   .grid {
     display: flex;
@@ -435,7 +457,8 @@ export default {
 
 .right-search .artists-results {
   border-radius: 0.5rem;
-  background-color: rgba(8, 3, 1, 0.274);
+  background-color: rgb(27, 26, 26);
+  margin: 0 0 0 $small;
 
   .grid {
     padding: 0 0 0 $small;
diff --git a/src/composables/perks.js b/src/composables/perks.js
index d76d6dc2..b83e0f83 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.js
@@ -2,14 +2,9 @@ import { ref } from "@vue/reactivity";
 import { watch } from "@vue/runtime-core";
 
 import media from "./mediaNotification.js";
+import state from "./state.js";
 
-const current = ref({
-  title: "Nothing played yet",
-  artists: ["... blah blah blah"],
-  _id: {
-    $oid: "",
-  },
-});
+const current = ref(state.current);
 
 const next = ref({
   title: "The next song",
@@ -19,23 +14,11 @@ const next = ref({
   },
 });
 
-const prev = ref({
-  title: "The previous song",
-  artists: ["... blah blah blah"],
-  _id: {
-    $oid: "",
-  },
-});
+const prev = ref(state.prev);
 
-const queue = ref([
-  {
-    title: "Nothing played yet",
-    artists: ["... blah blah blah"],
-    _id: {
-      $oid: "",
-    },
-  },
-]);
+const queue = ref(state.queue);
+
+const search = ref("");
 
 const putCommas = (artists) => {
   let result = [];
@@ -51,33 +34,48 @@ const putCommas = (artists) => {
   return result;
 };
 
-const doThat = (songs, current) => {
-  queue.value = songs;
-  current.value = current;
+function updateNext(song_) {
+  const index = state.queue.value.findIndex(
+    (item) => item._id.$oid === song_._id.$oid
+  );
 
-  console.log(queue.value);
-};
+  if (index == queue.value.length - 1) {
+    next.value = queue.value[0];
+    state.prev.value = queue.value[queue.value.length - 2];
+  } else if (index == 0) {
+    next.value = queue.value[1];
+  } else {
+    next.value = queue.value[index + 1];
+  }
+}
+
+function updatePrev(song) {
+  const index = state.queue.value.findIndex(
+    (item) => item._id.$oid === song._id.$oid
+  );
+
+  if (index == 0) {
+    prev.value = queue.value[queue.value.length - 1];
+  } else if (index == queue.value.length - 1) {
+    prev.value = queue.value[index - 1];
+  } else {
+    prev.value = queue.value[index - 1];
+  }
+}
 
 const readQueue = () => {
   const prev_queue = JSON.parse(localStorage.getItem("queue"));
   const last_played = JSON.parse(localStorage.getItem("current"));
-  const next_ = JSON.parse(localStorage.getItem("next"));
-  const prev_ = JSON.parse(localStorage.getItem("prev"));
 
   if (last_played) {
-    current.value = last_played;
+    state.current.value = last_played;
   }
 
   if (prev_queue) {
-    queue.value = prev_queue;
-  }
-
-  if (next_) {
-    next.value = next_;
-  }
-
-  if (prev_) {
-    prev.value = prev_;
+    state.queue.value = prev_queue;
+    
+    updateNext(state.current.value);
+    updatePrev(state.current.value);
   }
 };
 
@@ -93,40 +91,30 @@ function focusCurrent() {
   }
 }
 
-watch(current, (new_current, old_current) => {
-  media.showMediaNotif();
+setTimeout(() => {
+  watch(current, (new_current) => {
+    media.showMediaNotif();
 
-  new Promise((resolve) => {
-    const index = queue.value.findIndex(
-      (item) => item._id.$oid === new_current._id.$oid
-    );
+    new Promise((resolve) => {
+      updateNext(new_current);
+      updatePrev(new_current);
+      resolve();
+    }).then(() => {
+      focusCurrent();
+    });
 
-    if (index == queue.value.length - 1) {
-      next.value = queue.value[0];
-      prev.value = queue.value[queue.value.length - 2];
-    } else if (index == 0) {
-      next.value = queue.value[1];
-    } else {
-      next.value = queue.value[index + 1];
-    }
-
-    prev.value = old_current;
-    resolve();
-  }).then(() => {
-    focusCurrent();
+    localStorage.setItem("current", JSON.stringify(new_current));
+    // localStorage.setItem("prev", JSON.stringify(old_current));
   });
-
-  localStorage.setItem("current", JSON.stringify(new_current));
-  localStorage.setItem("prev", JSON.stringify(prev.value));
-});
+}, 1000);
 
 export default {
   putCommas,
-  doThat,
   readQueue,
   focusCurrent,
   current,
   queue,
   next,
   prev,
+  search,
 };
diff --git a/src/composables/state.js b/src/composables/state.js
new file mode 100644
index 00000000..20fbf848
--- /dev/null
+++ b/src/composables/state.js
@@ -0,0 +1,42 @@
+import { ref } from "@vue/reactivity";
+
+const search_query = ref("");
+
+const queue = ref([
+  {
+    title: "Nothing played yet",
+    artists: ["... blah blah blah"],
+    _id: {
+      $oid: "",
+    },
+  },
+]);
+
+const current = ref({
+  title: "Nothing played yet",
+  artists: ["... blah blah blah"],
+  _id: {
+    $oid: "",
+  },
+});
+
+const prev = ref({
+  title: "The previous song",
+  artists: ["... blah blah blah"],
+  _id: {
+    $oid: "",
+  },
+});
+
+const filters = ref([]);
+const magic_flag = ref(false);
+
+
+export default {
+  search_query,
+  queue,
+  current,
+  prev,
+  filters,
+  magic_flag,
+};
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 310cb5cc..484bd736 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -20,6 +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";
 
 export default {
   components: {
@@ -53,6 +54,7 @@ export default {
       getPathFolders(path.value);
 
       watch(route, (new_route) => {
+        perks.search.value = "";
         path.value = new_route.params.path;
         getPathFolders(path.value);
       });