From a99ea78118fc1d440259e468c71dcd6ae1d2b690 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 25 May 2022 16:36:04 +0300
Subject: [PATCH] animate navigation list and logo

- move search main into right-sidebar > search
-
---
 src/assets/css/global.scss                    |  2 +-
 src/components/FolderView/SongList.vue        |  6 ++-
 src/components/LeftSidebar/NP/Progress.vue    |  2 +-
 src/components/LeftSidebar/Navigation.vue     |  9 ++--
 src/components/Logo.vue                       |  4 +-
 src/components/PlaylistView/Header.vue        | 10 ++---
 src/components/RightSideBar/Main.vue          |  2 +-
 .../{Search.vue => Search/Main.vue}           | 12 ++++--
 .../RightSideBar/{ => Search}/Tab.vue         |  4 +-
 .../RightSideBar/{ => Search}/TabsWrapper.vue |  9 +++-
 src/components/nav/NavBar.vue                 | 41 +++++++++++++++++--
 src/components/shared/SongItem.vue            |  1 -
 src/composables/perks.ts                      |  4 +-
 src/stores/queue.ts                           |  8 ++--
 14 files changed, 82 insertions(+), 32 deletions(-)
 rename src/components/RightSideBar/{Search.vue => Search/Main.vue} (81%)
 rename src/components/RightSideBar/{ => Search}/Tab.vue (56%)
 rename src/components/RightSideBar/{ => Search}/TabsWrapper.vue (81%)

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 543e43f0..54713d24 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -99,7 +99,7 @@ a {
 .l-sidebar {
   width: 17rem;
   grid-area: l-sidebar;
-  background-color: $black;
+  background-color: $gray;
   margin: $small;
   padding: 1rem;
 }
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 56cf2540..0c75f344 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -84,7 +84,7 @@ function updateQueue(track: Track) {
 .table {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
+  overflow-y: hidden;
 
   .current {
     a {
@@ -141,6 +141,10 @@ function updateQueue(track: Track) {
   }
 
   .songlist {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
     .context-on {
       background-color: $gray4;
       color: $white !important;
diff --git a/src/components/LeftSidebar/NP/Progress.vue b/src/components/LeftSidebar/NP/Progress.vue
index d216839c..2abfbbdb 100644
--- a/src/components/LeftSidebar/NP/Progress.vue
+++ b/src/components/LeftSidebar/NP/Progress.vue
@@ -4,7 +4,7 @@
     type="range"
     :value="q.track.current_time"
     min="0"
-    :max="q.track.duration"
+    max="100"
     step="0.1"
     @change="seek()"
   />
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 2c1e378e..210167cb 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -5,7 +5,12 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu.params }"
     >
-      <div class="nav-button" id="home-button">
+      <div
+        class="nav-button"
+        id="home-button"
+        v-motion-slide-from-left-100
+        
+      >
         <div class="in">
           <div class="nav-icon image" :id="`${menu.name}-icon`"></div>
           <span>{{ menu.name }}</span>
@@ -46,11 +51,9 @@ const menus = [
     route_name: "SettingsView",
   },
 ];
-
 </script>
 
 <style lang="scss">
-
 .side-nav-container {
   color: #fff;
   margin: 1rem 0;
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 87474ff3..25110d8d 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,5 +1,7 @@
 <template>
-  <div id="logo-container">
+  <div id="logo-container"
+    v-motion-slide-from-top
+  >
     <router-link :to="{ name: 'Home' }">
       <div id="logo" class="rounded"></div
     ></router-link>
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 0be4c4c7..ab746ee2 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="p-header image"
-    
     :style="[
       {
         backgroundImage: `url(${imguri + props.info.image})`,
@@ -12,7 +11,7 @@
     <div class="carddd">
       <div class="info">
         <div class="btns">
-          <PlayBtnRect :source="playSources.playlist" v-motion-slide-visible-once-bottom/>
+          <PlayBtnRect :source="playSources.playlist" />
           <Option @showDropdown="showDropdown" :src="context.src" />
         </div>
         <div class="duration">
@@ -26,10 +25,10 @@
           {{ props.info.description }}
         </div>
         <div class="title ellip">{{ props.info.name }}</div>
-        <div class="type" >Playlist</div>
+        <div class="type">Playlist</div>
       </div>
     </div>
-    <div class="last-updated">
+    <div class="last-updated" v-motion-slide-from-right>
       <span class="status"
         >Last updated {{ props.info.lastUpdated }} &#160;|&#160;&#160;</span
       >
@@ -47,8 +46,9 @@ import Option from "../shared/Option.vue";
 import pContext from "../../contexts/playlist";
 import useContextStore from "../../stores/context";
 import { paths } from "../../config";
+import { onBeforeUnmount } from "vue";
 
-const imguri = paths.images.playlist
+const imguri = paths.images.playlist;
 const context = useContextStore();
 const modal = useModalStore();
 
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index 6722f564..dd431a42 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import Search from "./Search.vue";
+import Search from "./Search/Main.vue";
 import UpNext from "./Queue.vue";
 import Main from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search/Main.vue
similarity index 81%
rename from src/components/RightSideBar/Search.vue
rename to src/components/RightSideBar/Search/Main.vue
index 947dbe80..139a7b8f 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/src/components/RightSideBar/Search/Main.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
-      <Tab name="tracks" v-motion-slide-visible-left>
+      <Tab name="tracks">
         <TracksGrid />
       </Tab>
       <Tab name="albums">
@@ -11,16 +11,20 @@
         <ArtistGrid />
       </Tab>
     </TabsWrapper>
+    <component :is="s.currentTab" />
   </div>
 </template>
 
 <script setup lang="ts">
 import TabsWrapper from "./TabsWrapper.vue";
 import Tab from "./Tab.vue";
-import TracksGrid from "./Search/TracksGrid.vue";
-import AlbumGrid from "./Search/AlbumGrid.vue";
+import TracksGrid from "./TracksGrid.vue";
+import AlbumGrid from "./AlbumGrid.vue";
+import ArtistGrid from "./ArtistGrid.vue";
 import "@/assets/css/Search/Search.scss";
-import ArtistGrid from "./Search/ArtistGrid.vue";
+import useSearchStore from "@/stores/search";
+const s = useSearchStore();
+
 </script>
 
 <style lang="scss">
diff --git a/src/components/RightSideBar/Tab.vue b/src/components/RightSideBar/Search/Tab.vue
similarity index 56%
rename from src/components/RightSideBar/Tab.vue
rename to src/components/RightSideBar/Search/Tab.vue
index 3fd0781e..a20172ea 100644
--- a/src/components/RightSideBar/Tab.vue
+++ b/src/components/RightSideBar/Search/Tab.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-show="name == s.currentTab">
+  <div v-show="name == s.currentTab"  v-motion-slide-visible-top>
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import useSearchStore from "../../stores/search";
+import useSearchStore from "@/stores/search";
 const s = useSearchStore();
 defineProps<{
   name: string;
diff --git a/src/components/RightSideBar/TabsWrapper.vue b/src/components/RightSideBar/Search/TabsWrapper.vue
similarity index 81%
rename from src/components/RightSideBar/TabsWrapper.vue
rename to src/components/RightSideBar/Search/TabsWrapper.vue
index e25c3f01..b5338c8c 100644
--- a/src/components/RightSideBar/TabsWrapper.vue
+++ b/src/components/RightSideBar/Search/TabsWrapper.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import useSearchStore from "../../stores/search";
+import useSearchStore from "@/stores/search";
 
 const s = useSearchStore();
 </script>
@@ -40,16 +40,23 @@ const s = useSearchStore();
       padding: $small;
       text-transform: capitalize;
       cursor: pointer;
+      display: flex;
+      justify-content: center;
+      transition: all 0.3s ease;
+      width: 4rem;
     }
 
     .activetab {
       background-color: $accent;
+      width: 6rem;
+      transition: all 0.3s ease;
     }
   }
 
   #tab-content {
     height: 100%;
     overflow: auto;
+    overflow-x: hidden;
     border-radius: $small;
     background-color: $gray;
     // overflow: hidden;
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 730fd22f..56c749b8 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -6,12 +6,45 @@
       </div>
 
       <div class="info">
-        <div class="title" v-if="$route.name == 'Playlists'">Playlists</div>
-        <div class="folder" v-else-if="$route.name == 'FolderView'" >
+        <div
+          class="title"
+          v-show="$route.name == 'Playlists'"
+          v-motion
+          :initial="{
+            opacity: 0,
+            x: -20,
+          }"
+          :visible="{
+            opacity: 1,
+            x: 0,
+            transition: {
+              delay: 100,
+            },
+          }"
+        >
+          Playlists
+        </div>
+        <div
+          class="folder"
+          v-show="$route.name == 'FolderView'"
+          v-motion
+          :initial="{
+            opacity: 0,
+            x: -20,
+          }"
+          :visible="{
+            opacity: 1,
+            x: 0,
+            transition: {
+              delay: 100,
+            },
+          }"
+        >
           <div class="fname">
             <div class="icon image"></div>
             <div class="ellip">
-              {{ $route.params.path.split("/").splice(-1)[0] }}
+              <!-- {{ $route.params.path.split("/").splice(-1)[0] }} -->
+              {{ $route.params.path }}
             </div>
           </div>
         </div>
@@ -28,7 +61,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
 import Search from "./Search.vue";
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 6f8201a7..4cf7391d 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -4,7 +4,6 @@
     :class="[{ current: props.isCurrent }, { 'context-on': context_on }]"
     @dblclick="emitUpdate(props.song)"
     @contextmenu="showContextMenu"
-    v-motion-slide-visible-once-right
   >
     <div class="index">{{ props.index }}</div>
     <div class="flex">
diff --git a/src/composables/perks.ts b/src/composables/perks.ts
index 94cbf189..21ac71f9 100644
--- a/src/composables/perks.ts
+++ b/src/composables/perks.ts
@@ -35,7 +35,7 @@ function getElem(id: string, type: string) {
   }
 }
 
-function formatSeconds(seconds: number) {
+function formatSeconds(seconds: number, long?: boolean) {
   // check if there are arguments
 
   const date = new Date(seconds * 1000);
@@ -48,7 +48,7 @@ function formatSeconds(seconds: number) {
   let _mm = mm < 10 ? `0${mm}` : mm;
   let _ss = ss < 10 ? `0${ss}` : ss;
 
-  if (arguments[1]) {
+  if (long == true) {
     if (hh === 1) {
       _hh = hh + " Hour";
     } else {
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index e51b5382..061b9c81 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -53,7 +53,6 @@ export default defineStore("Queue", {
       duration: 0,
     },
     current: <Track>{},
-    length: 0,
     next: <Track>{},
     prev: <Track>{},
     playing: false,
@@ -72,17 +71,16 @@ export default defineStore("Queue", {
         this.audio.onerror = reject;
       })
         .then(() => {
-          this.length = this.audio.duration;
+          this.track.duration = this.audio.duration;
 
           this.audio.play().then(() => {
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);
 
             this.audio.ontimeupdate = () => {
-              this.track.current_time = this.audio.currentTime;
-              const current_time =
+              this.track.current_time =
                 (this.audio.currentTime / this.audio.duration) * 100;
-              elem.style.backgroundSize = `${this.current_time}% 100%`;
+              elem.style.backgroundSize = `${this.track.current_time}% 100%`;
             };
 
             this.audio.onended = () => {