fix 720p screens layout issue

~ add media queries
+ handle responsiveness on folder header

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@vueuse/core": "^8.5.0",
     "axios": "^0.26.1",
-    "pinia": "^2.0.11",
+    "pinia": "^2.0.17",
     "sass": "^1.49.0",
     "sass-loader": "^10",
     "vite-svg-loader": "^3.4.0",

src/assets/scss/Global/app-grid.scss

@@ -7,12 +7,11 @@
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content tabs";
-  align-content: center;
   max-width: 2720px;
   height: calc(100vh - 1rem);
   margin: 0 auto;
   gap: 1rem;
-  margin: $small;
+  margin: $small auto;
 }
 
 #acontent {

src/assets/scss/Global/index.scss

@@ -11,13 +11,20 @@
 }
 
 body {
-  margin: 0;
   background-color: $body;
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-family: "SF Compact Display" !important;
   font-size: 1rem;
-  overflow: hidden;
   image-rendering: -webkit-optimize-contrast;
+  width: calc(100vw - 1rem);
+  overflow: hidden;
+  height: calc(100vh - 1rem);
+
+  #app {
+    width: 100%;
+    overflow: hidden;
+    margin: 0 auto;
+  }
 }

src/assets/scss/_variables.scss

@@ -67,8 +67,8 @@ $side-nav-svg: $red;
     @content;
   }
 }
-@mixin for-desktop-up {
+@mixin for-desktop-down {
-  @media (min-width: 1200px) {
+  @media (max-width: 1280px) {
     @content;
   }
 }

src/components/LeftSidebar/nowPlaying.vue

@@ -47,7 +47,7 @@ const showContextMenu = (e: Event) => {
   e.stopPropagation();
 
   const menus = trackContext(
-    queue.tracks[queue.current],
+    queue.tracklist[queue.current],
     useModalStore,
     useQueueStore
   );

src/components/RightSideBar/Home/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="r-home">
-    <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
+    <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
     <Recommendations />
   </div>
 </template>

src/components/RightSideBar/Main.vue

@@ -27,7 +27,7 @@ const tabs = useTabStore();
 
 <style lang="scss">
 .r-sidebar {
-
+  width: 100%;
 
   @include phone-only {
     display: none;
@@ -38,13 +38,14 @@ const tabs = useTabStore();
   }
 
   .grid {
-    height: 100%;
     display: flex;
     position: relative;
+    height: 100%;
 
     .r-content {
       grid-area: content;
-      width: 29rem;
+      // width: 29rem;
+      width: 100%;
 
       // @include tablet-landscape {
       //   display: none;

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
+      <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
       <div class="scrollable-r bg-black rounded">
         <QueueActions />
         <div
@@ -10,7 +10,7 @@
           @mouseleave="setMouseOver(false)"
         >
           <TrackItem
-            v-for="(t, index) in queue.tracks"
+            v-for="(t, index) in queue.tracklist"
             :key="t.trackid"
             :track="t"
             @playThis="queue.play(index)"

src/components/nav/NavBar.vue

@@ -81,14 +81,15 @@ watch(
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
+  width: 100%;
 
   .left {
     display: grid;
     grid-template-columns: max-content 1fr;
+    width: min-content;
+    overflow: scroll;
 
     .info {
-      min-width: 15rem;
-
       .title {
         font-size: 1.5rem;
         font-weight: bold;

src/components/nav/Titles/Folder.vue

@@ -63,7 +63,10 @@ onUpdated(() => {
       margin-left: $smaller;
       overflow: auto;
       padding-right: $smaller;
-      color: rgba(255, 255, 255, 0.678);
+
+      @include for-desktop-down {
+        max-width: 9rem;
+      }
 
       .icon {
         height: 2rem;

src/stores/queue.ts

@@ -56,6 +56,11 @@ export default defineStore("Queue", {
       current: 0,
       full: 0,
     },
+    indexes: {
+      current: 0,
+      next: 0,
+      previous: 0,
+    },
     current: 0,
     next: 0,
     prev: 0,
@@ -63,12 +68,12 @@ export default defineStore("Queue", {
     playing: false,
     from: {} as From,
     currenttrack: {} as Track,
-    tracks: [defaultTrack] as Track[],
+    tracklist: [defaultTrack] as Track[],
   }),
   actions: {
     play(index: number = 0) {
       this.current = index;
-      const track = this.tracks[index];
+      const track = this.tracklist[index];
       this.currentid = track.trackid;
       const uri = state.settings.uri + "/file/" + track.trackid;
       const elem = document.getElementById("progress");
@@ -134,7 +139,7 @@ export default defineStore("Queue", {
       if (queue) {
         const parsed = JSON.parse(queue);
         this.from = parsed.from;
-        this.tracks = parsed.tracks;
+        this.tracklist = parsed.tracks;
       }
 
       this.updateCurrent(readCurrent());
@@ -147,7 +152,7 @@ export default defineStore("Queue", {
       writeCurrent(index);
     },
     updateNext(index: number) {
-      if (index == this.tracks.length - 1) {
+      if (index == this.tracklist.length - 1) {
         this.next = 0;
         return;
       }
@@ -156,14 +161,14 @@ export default defineStore("Queue", {
     },
     updatePrev(index: number) {
       if (index === 0) {
-        this.prev = this.tracks.length - 1;
+        this.prev = this.tracklist.length - 1;
         return;
       }
 
       this.prev = index - 1;
     },
     setCurrent(index: number) {
-      const track = this.tracks[index];
+      const track = this.tracklist[index];
 
       this.currenttrack = track;
       this.current = index;
@@ -171,10 +176,10 @@ export default defineStore("Queue", {
       this.duration.full = track.length;
     },
     setNewQueue(tracklist: Track[]) {
-      if (this.tracks !== tracklist) {
+      if (this.tracklist !== tracklist) {
-        this.tracks = [];
+        this.tracklist = [];
-        this.tracks.push(...tracklist);
+        this.tracklist.push(...tracklist);
-        writeQueue(this.from, this.tracks);
+        writeQueue(this.from, this.tracklist);
       }
     },
     playFromFolder(fpath: string, tracks: Track[]) {
@@ -218,17 +223,17 @@ export default defineStore("Queue", {
       this.setNewQueue(tracks);
     },
     addTrackToQueue(track: Track) {
-      this.tracks.push(track);
+      this.tracklist.push(track);
-      writeQueue(this.from, this.tracks);
+      writeQueue(this.from, this.tracklist);
       this.updateNext(this.current);
     },
     playTrackNext(track: Track) {
       const Toast = useNotifStore();
-      if (this.current == this.tracks.length - 1) {
+      if (this.current == this.tracklist.length - 1) {
-        this.tracks.push(track);
+        this.tracklist.push(track);
       } else {
         const nextindex = this.current + 1;
-        const next: Track = this.tracks[nextindex];
+        const next: Track = this.tracklist[nextindex];
 
         if (next.trackid === track.trackid) {
           Toast.showNotification("Track is already queued", NotifType.Info);
@@ -236,16 +241,16 @@ export default defineStore("Queue", {
         }
       }
 
-      this.tracks.splice(this.current + 1, 0, track);
+      this.tracklist.splice(this.current + 1, 0, track);
       this.updateNext(this.current);
       Toast.showNotification(
         `Added ${track.title} to queue`,
         NotifType.Success
       );
-      writeQueue(this.from, this.tracks);
+      writeQueue(this.from, this.tracklist);
     },
     clearQueue() {
-      this.tracks = [defaultTrack] as Track[];
+      this.tracklist = [defaultTrack] as Track[];
       this.current = 0;
       this.currentid = "";
       this.next = 0;

src/stores/queue/actions.ts

@@ -0,0 +1,16 @@
+export function handlePlayPause(
+  currentIndex: number,
+  audio: HTMLAudioElement,
+  state: boolean,
+  play: (index: number) => void
+) {
+  if (audio.src === "") {
+    play(currentIndex);
+  } else if (audio.paused) {
+    audio.play();
+    state = true;
+  } else {
+    audio.pause();
+    state = false;
+  }
+}

src/views/FolderView.vue

@@ -79,12 +79,17 @@ onBeforeRouteUpdate((to, from) => {
     height: $banner-height;
     pointer-events: none;
     user-select: none;
+    width: 100%;
 
     .text {
       bottom: 1rem;
       left: 1rem;
       background-color: $black;
 
+      @include for-desktop-down {
+        max-width: 31rem;
+      }
+
       h3 {
         margin: $small;
         display: flex;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "strict": true,
     "jsx": "preserve",
     "paths": {
       "baseUrl": ["./"],

yarn.lock

@@ -129,12 +129,7 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/devtools-api@^6.0.0-beta.21":
+"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
-  version "6.0.12"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
-  integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
-
-"@vue/devtools-api@^6.1.4":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
   integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
@@ -1727,12 +1722,12 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pinia@^2.0.11:
+pinia@^2.0.17:
-  version "2.0.11"
+  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.17.tgz#f925e5e4f73c15e16dfb4838176a9ca50752f26b"
-  integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==
+  integrity sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.21"
+    "@vue/devtools-api" "^6.2.1"
     vue-demi "*"
 
 postcss@^8.1.10: