add a blank settings view

- use for loop to render l-sidebar content
- add current track image on l-sidebar
- other minor changes

src/App.vue

@@ -9,7 +9,10 @@
         ></router-link>
       </div>
       <Navigation :collapsed="collapsed" />
-      <PinnedStuff :collapsed="collapsed" />
+      <!-- <PinnedStuff :collapsed="collapsed" /> -->
+      <div class="l-album-art">
+        <AlbumArt />
+      </div>
     </div>
     <div class="content">
       <div class="search-box"></div>
@@ -31,6 +34,7 @@ import BottomBar from "@/components/BottomBar/BottomBar.vue";
 
 import perks from "@/composables/perks.js";
 import Main from "./components/RightSideBar/Main.vue";
+import AlbumArt from "./components/LeftSidebar/AlbumArt.vue";
 
 export default {
   components: {
@@ -38,10 +42,11 @@ export default {
     PinnedStuff,
     BottomBar,
     RightSideBar: Main,
+    AlbumArt,
   },
 
   setup() {
-    const collapsed = ref(true);
+    const collapsed = ref(false);
 
     perks.readQueue();
 
@@ -58,6 +63,15 @@ export default {
 </script>
 
 <style lang="scss">
+.l-sidebar {
+  position: relative;
+
+  .l-album-art {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
 #logo-container {
   position: relative;
   height: 3.6rem;
@@ -69,8 +83,8 @@ export default {
     position: absolute;
     width: 3rem;
     height: 100%;
-    background-size: 2rem;
     background: url(./assets/icons/menu.svg) no-repeat center;
+    background-size: 2rem;
     cursor: pointer;
   }
 }
@@ -78,8 +92,8 @@ export default {
   height: 2rem;
   width: 9rem;
   margin-left: 3rem;
-  background-size: contain;
   background: url(./assets/logo.svg) no-repeat center;
+  background-size: contain;
 }
 
 .r-sidebar {

src/components/BottomBar/BottomBar.vue

@@ -7,9 +7,9 @@
           <HotKeys />
         </div>
         <div class="progress progress-bottom">
-          <span class="durationx">0:45</span>
+          <span class="durationx">{{formatSeconds(current_pos)}}</span>
           <Progress />
-          <span class="durationx">{{ state.current.value.length }}</span>
+          <span class="durationx">{{ formatSeconds(state.current.value.length) }}</span>
         </div>
         <div class="r-group">
           <div class="heart image"></div>
@@ -24,9 +24,15 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import "../../assets/css/BottomBar/BottomBar.scss";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
 import HotKeys from "../shared/HotKeys.vue";
 import state from "../../composables/state";
+import perks from "../../composables/perks";
+import playAudio from "../../composables/playAudio";
+
+const current_pos = ref(playAudio.current_time);
+const formatSeconds = perks.formatSeconds;
 </script>

src/components/LeftSidebar/AlbumArt.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="l_">
+    <div
+      class="l-image image border rounded"
+      :style="{
+        backgroundImage: `url(&quot;${current.image}&quot;)`,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import state from "../../composables/state";
+
+const current = ref(state.current);
+</script>
+<style lang="scss">
+.l_ {
+  padding: $small;
+  
+  .l-image {
+    height: 14rem;
+    width: 14rem;
+  }
+}
+</style>

src/components/LeftSidebar/Navigation.vue

@@ -1,75 +1,48 @@
 <template>
   <div class="side-nav-container" :class="{ collapsed: collapsed }">
-    <router-link :to="{ name: 'Home' }">
+    <router-link v-for="menu in menus" :key="menu.name" :to="{ name: menu.route_name, params: {path: 'home'} }" >
       <div class="nav-button" id="home-button">
         <div class="in">
-          <div class="nav-icon image" id="home-icon"></div>
-          <span>Home</span>
+          <div class="nav-icon image" :id="`${menu.name}-icon`"></div>
+          <span>{{ menu.name }}</span>
         </div>
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'AlbumsExplorer' }">
-      <div class="nav-button" id="album-button">
-        <div class="in">
-          <div class="nav-icon image" id="album-icon"></div>
-          <span>Albums</span>
-        </div>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'ArtistsExplorer' }">
-      <div class="nav-button" id="artists-button">
-        <div class="in">
-          <div class="nav-icon image" id="artists-icon"></div>
-          <span>Artists</span>
-        </div>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'PlaylistView' }">
-      <div class="nav-button" id="playlists-button">
-        <div class="in">
-          <div class="nav-icon image" id="playlists-icon"></div>
-          <span>Playlist</span>
-        </div>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'Home' }">
-      <div class="nav-button" id="mixes-button">
-        <div class="in">
-          <div class="nav-icon image" id="mixes-icon"></div>
-          <span>Mixes</span>
-        </div>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: 'home' } }">
-      <div class="nav-button" id="folders-button">
-        <div class="in">
-          <div class="nav-icon image" id="folders-icon"></div>
-          <span>Folders</span>
-        </div>
-      </div>
-    </router-link>
-    <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: 'home' } }">
-      <div class="nav-button" id="folders-button">
-        <div class="in">
-          <div class="nav-icon image" id="settings-icon"></div>
-          <span>Settings</span>
-        </div>
-      </div>
-    </router-link>
   </div>
 </template>
 
-<script>
-export default {
-  props: ["collapsed"],
-  setup() {},
-};
+<script setup>
+import { ref } from "vue";
+
+const menus = [
+  {
+    name: "home",
+    route_name: "Home",
+  },
+  {
+    name: "albums",
+    route_name: "AlbumsView",
+  },
+  {
+    name: "artists",
+    route_name: "ArtistsView",
+  },
+  {
+    name: "playlists",
+    route_name: "PlaylistView",
+  },
+  {
+    name: "folders",
+    route_name: "FolderView",
+  },
+  {
+    name: "settings",
+    route_name: "SettingsView",
+  },
+];
+
+const collapsed = ref(false);
 </script>
 
 <style lang="scss">
@@ -94,6 +67,7 @@ export default {
   margin-bottom: 1rem;
   padding-top: 10px;
   margin-top: 1rem;
+  text-transform: capitalize;
 
   .nav-button {
     border-radius: $small;
@@ -108,7 +82,7 @@ export default {
         background-color: rgba(145, 58, 58, 0.555);
       }
 
-      #album-icon {
+      #albums-icon {
         background-color: rgba(113, 58, 145, 0.555);
       }
 
@@ -147,7 +121,7 @@ export default {
     }
 
     #home-icon,
-    #album-icon,
+    #albums-icon,
     #artists-icon,
     #playlists-icon,
     #mixes-icon,
@@ -155,12 +129,12 @@ export default {
     #settings-icon {
       background-size: 1.5rem;
     }
-  
+
     #home-icon {
       background-image: url(../../assets/icons/home.svg);
     }
 
-    #album-icon {
+    #albums-icon {
       background-image: url(../../assets/icons/album.svg);
     }
 
@@ -188,4 +162,4 @@ export default {
 .side-nav-container hr {
   display: none;
 }
-</style>
+</style>

src/components/LeftSidebar/PinnedStuff.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="side-nav-container rounded"
+    class="side-nav-container rounded hidden"
     :class="{ hidden: collapsed }"
     id="pinned-container"
   >

src/components/RightSideBar/Main.vue

@@ -53,9 +53,9 @@ function changeTab(tab) {
     display: none;
   }
 
-  // @include tablet-landscape {
-  //   width: 3rem;
-  // }
+  @include tablet-landscape {
+    width: 3rem;
+  }
 
   .grid {
     height: 100%;
@@ -66,9 +66,9 @@ function changeTab(tab) {
       grid-area: content;
       width: 31rem;
 
-      // @include tablet-landscape {
-      //   display: none;
-      // }
+      @include tablet-landscape {
+        display: none;
+      }
 
       .r-search {
         height: 100%;

src/components/RightSideBar/NowPlaying.vue

@@ -59,7 +59,6 @@ export default {
   setup() {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
-    const pos = playAudio.pos;
 
     const {playNext} = playAudio;
     const {playPrev} = playAudio;
@@ -76,7 +75,6 @@ export default {
       playNext,
       playPrev,
       playPause,
-      pos,
       seek,
       isPlaying,
       formatSeconds: perks.formatSeconds,

src/components/SettingsView/Main.vue

@@ -0,0 +1,3 @@
+<template>
+<div class="settings">Hello, settings here 😁</div>
+</template>

src/components/shared/Progress.vue

@@ -1,5 +1,6 @@
 <template>
   <input
+    class="progress-bar"
     id="progress"
     type="range"
     :value="pos"

src/composables/playAudio.js

@@ -5,13 +5,18 @@ import media from "./mediaNotification.js";
 import state from "./state.js";
 
 const audio = ref(new Audio()).value;
+
 const pos = ref(0);
+const current_time = ref(0);
+
 const playing = ref(state.is_playing);
 
 const url = "http://0.0.0.0:8901/";
 
 const playAudio = (path) => {
-  const elem = document.getElementById('progress')
+  const elem = document.getElementsByClassName('progress-bar')[0];
+  const bottom_elem = document.getElementsByClassName('progress-bar')[1];
+
   const full_path = url + encodeURIComponent(path);
 
   new Promise((resolve, reject) => {
@@ -26,9 +31,12 @@ const playAudio = (path) => {
       state.is_playing.value = true;
 
       audio.ontimeupdate = () => {
+        current_time.value = audio.currentTime;
         pos.value = (audio.currentTime / audio.duration) * 1000;
         let bg_size = ((audio.currentTime / audio.duration)*100)
+
         elem.style.backgroundSize = `${bg_size}% 100%`;
+        bottom_elem.style.backgroundSize = `${bg_size}% 100%`;
       };
     })
     .catch((err) => console.log(err));
@@ -45,8 +53,8 @@ function playPrev() {
   perks.current.value = perks.prev.value;
 }
 
-function seek(pos) {
-  audio.currentTime = (pos / 1000) * audio.duration;
+function seek(position) {
+  audio.currentTime = (position / 1000) * audio.duration;
 }
 
 function playPause() {
@@ -73,7 +81,7 @@ audio.addEventListener("ended", () => {
   playNext();
 });
 
-export default { playAudio, playNext, playPrev, playPause, seek, pos, playing };
+export default { playAudio, playNext, playPrev, playPause, seek, pos, playing, current_time };
 
 
 // TODO

src/router/index.js

@@ -7,6 +7,7 @@ import AlbumsExplorer from "../views/AlbumsExplorer.vue";
 import AlbumView from "../views/AlbumView.vue";
 
 import ArtistsExplorer from "../views/ArtistsExplorer.vue";
+import SettingsView from "../views/SettingsView.vue";
 
 const routes = [
   {
@@ -30,7 +31,7 @@ const routes = [
   },
   {
     path: "/albums",
-    name: "AlbumsExplorer",
+    name: "AlbumsView",
     component: AlbumsExplorer,
   },
   {
@@ -40,9 +41,14 @@ const routes = [
   },
   {
     path: "/artists",
-    name: "ArtistsExplorer",
+    name: "ArtistsView",
     component: ArtistsExplorer,
-  }
+  },
+  {
+    path: "/settings",
+    name: "SettingsView",
+    component: SettingsView,
+  },
 ];
 
 const router = createRouter({

src/views/SettingsView.vue

@@ -0,0 +1,3 @@
+<template>
+<div class="settings">Hello, settings here 😁</div>
+</template>