From 83d4690cd436fd581c2df1aba978e556125b4eb5 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 11 Aug 2022 15:14:40 +0300
Subject: [PATCH] fix nav and folder banner text responsiveness

---
 src/assets/scss/Global/index.scss             |  1 -
 src/components/RightSideBar/Main.vue          |  4 +-
 .../RightSideBar/Queue/QueueActions.vue       |  8 ++--
 src/components/RightSideBar/Search/Main.vue   |  1 -
 src/components/nav/NavBar.vue                 | 15 +++++---
 src/components/nav/Titles/Folder.vue          |  8 ++--
 src/stores/queue.ts                           | 38 ++++++++++++++++---
 src/views/FolderView.vue                      | 10 ++++-
 8 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/assets/scss/Global/index.scss b/src/assets/scss/Global/index.scss
index 17d167f6..f69b561c 100644
--- a/src/assets/scss/Global/index.scss
+++ b/src/assets/scss/Global/index.scss
@@ -24,7 +24,6 @@ body {
 
   #app {
     width: 100%;
-    overflow: hidden;
     margin: 0 auto;
   }
 }
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index 176d883d..ec1310cb 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -44,8 +44,8 @@ const tabs = useTabStore();
 
     .r-content {
       grid-area: content;
-      // width: 29rem;
-      width: 100%;
+      width: 29rem;
+      // width: 100%;
 
       // @include tablet-landscape {
       //   display: none;
diff --git a/src/components/RightSideBar/Queue/QueueActions.vue b/src/components/RightSideBar/Queue/QueueActions.vue
index 9fb7c585..0836e11f 100644
--- a/src/components/RightSideBar/Queue/QueueActions.vue
+++ b/src/components/RightSideBar/Queue/QueueActions.vue
@@ -5,9 +5,9 @@
         <ClearSvg />
         <span>Clear</span>
       </button>
-      <button class="shuffle-queue action">
-        <SaveAsPlaylistSvg />
-        <span> Save as Playlist </span>
+      <button class="shuffle-queue action" @click="queue.shuffleQueue">
+        <ShuffleSvg />
+        <span>Shuffle</span>
       </button>
     </div>
     <div class="right">
@@ -22,7 +22,7 @@
 import useQueueStore from "../../../stores/queue";
 
 import ClearSvg from "@/assets/icons/delete.svg";
-import SaveAsPlaylistSvg from "@/assets/icons/sdcard.svg";
+import ShuffleSvg from "@/assets/icons/shuffle.svg";
 import MoreSvg from "@/assets/icons/more.svg";
 
 const queue = useQueueStore();
diff --git a/src/components/RightSideBar/Search/Main.vue b/src/components/RightSideBar/Search/Main.vue
index 4ceae89a..9bbf6ae5 100644
--- a/src/components/RightSideBar/Search/Main.vue
+++ b/src/components/RightSideBar/Search/Main.vue
@@ -26,7 +26,6 @@ import TracksGrid from "./TracksGrid.vue";
 .right-search {
   position: relative;
   overflow: hidden;
-  width: auto;
   height: 100%;
 
   .heading {
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index ab463e9f..2a3a00dc 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -15,16 +15,16 @@
     <div class="center rounded">
       <Loader />
     </div>
-    <div class="right">
+    <!-- <div class="right">
       <Search />
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
-import Search from "./Search.vue";
+// import Search from "./Search.vue";
 import { useRoute } from "vue-router";
 import { ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
@@ -80,16 +80,19 @@ watch(
 <style lang="scss">
 .topnav {
   display: grid;
-  grid-template-columns: 1fr min-content max-content;
+  grid-template-columns: 1fr min-content;
   width: 100%;
+  gap: 1rem;
+  overflow: hidden;
 
   .left {
     display: grid;
     grid-template-columns: max-content 1fr;
-    width: min-content;
-    overflow: scroll;
+    overflow: hidden;
 
     .info {
+      overflow: hidden;
+
       .title {
         font-size: 1.5rem;
         font-weight: bold;
diff --git a/src/components/nav/Titles/Folder.vue b/src/components/nav/Titles/Folder.vue
index 23e6537f..c068ee2e 100644
--- a/src/components/nav/Titles/Folder.vue
+++ b/src/components/nav/Titles/Folder.vue
@@ -37,6 +37,8 @@ onUpdated(() => {
 
 <style lang="scss">
 #folder-nav-title {
+  width: 100%;
+
   .folder {
     display: flex;
     gap: $small;
@@ -64,9 +66,9 @@ onUpdated(() => {
       overflow: auto;
       padding-right: $smaller;
 
-      @include for-desktop-down {
-        max-width: 9rem;
-      }
+      // @include for-desktop-down {
+      //   max-width: 9rem;
+      // }
 
       .icon {
         height: 2rem;
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index 519cc9cd..c52536c7 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -12,10 +12,7 @@ import {
   Track,
 } from "../interfaces";
 
-function writeQueue(
-  from: fromFolder | fromAlbum | fromPlaylist,
-  tracks: Track[]
-) {
+function writeQueue(from: From, tracks: Track[]) {
   localStorage.setItem(
     "queue",
     JSON.stringify({
@@ -46,6 +43,15 @@ const defaultTrack = <Track>{
   image: "meh",
 };
 
+function shuffle(tracks: Track[]) {
+  const shuffled = tracks.slice();
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+}
+
 type From = fromFolder | fromAlbum | fromPlaylist | fromSearch;
 
 export default defineStore("Queue", {
@@ -76,7 +82,7 @@ export default defineStore("Queue", {
       const track = this.tracklist[index];
       this.currentid = track.trackid;
       const uri = state.settings.uri + "/file/" + track.trackid;
-      const elem = document.getElementById("progress");
+      const elem = document.getElementById("progress") as HTMLElement;
       this.updateCurrent(index);
 
       new Promise((resolve, reject) => {
@@ -173,7 +179,7 @@ export default defineStore("Queue", {
       this.currenttrack = track;
       this.current = index;
       this.currentid = track.trackid;
-      this.duration.full = track.length;
+      this.duration.full = track.length || 0;
     },
     setNewQueue(tracklist: Track[]) {
       if (this.tracklist !== tracklist) {
@@ -260,5 +266,25 @@ export default defineStore("Queue", {
       writeQueue(this.from, [defaultTrack] as Track[]);
       writeCurrent(0);
     },
+    shuffleQueue() {
+      const Toast = useNotifStore();
+      if (this.tracklist.length < 2) {
+        Toast.showNotification("Queue is too short", NotifType.Info);
+        return;
+      }
+
+      const shuffled = shuffle(this.tracklist);
+      this.tracklist = shuffled;
+
+      this.current = 0;
+      this.play(this.current);
+
+      this.currentid = shuffled[0].trackid;
+      this.next = 1;
+      this.prev = this.tracklist.length - 1;
+
+      writeQueue(this.from, shuffled);
+      writeCurrent(0);
+    },
   },
 });
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 9d3d3383..565486aa 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -80,19 +80,27 @@ onBeforeRouteUpdate((to, from) => {
     pointer-events: none;
     user-select: none;
     width: 100%;
+    // display: table-cell;
+    // vertical-align: bottom;
 
     .text {
       bottom: 1rem;
+      // height: 100%;
       left: 1rem;
+      // right: 1rem;
+      // width: min-content;
+      max-width: calc(100% - 2rem);
       background-color: $black;
 
       @include for-desktop-down {
         max-width: 31rem;
+        right: 1rem;
       }
 
       h3 {
         margin: $small;
-        display: flex;
+        display: grid;
+        grid-template-columns: max-content 1fr;
         align-items: center;
         justify-content: center;
         gap: $small;