remove unused elements from components

src/components/LeftSidebar/NP/Progress.vue

@@ -2,14 +2,14 @@
   <input
     id="progress"
     type="range"
-    :value="q.duration.current"
+    :value="time.current"
     min="0"
-    :max="q.duration.full"
+    :max="time.full"
     step="0.1"
     @change="seek()"
     :style="{
       backgroundSize: `${
-        (q.duration.current / (q.currenttrack.length || 0)) * 100
+        (time.current / (q.currenttrack?.length || 0)) * 100
       }% 100%`,
     }"
   />
@@ -19,6 +19,8 @@
 import useQStore from "../../../stores/queue";
 
 const q = useQStore();
+
+const { duration: time } = q;
 const seek = () => {
   const elem = document.getElementById("progress") as HTMLInputElement;
   const value = elem.value;

src/components/PlaylistView/Header.vue

@@ -4,7 +4,7 @@
     ref="playlistheader"
     :style="[
       {
-        backgroundImage: `url(${imguri + props.info.image})`,
+        backgroundImage: `url(${imguri + info.image})`,
       },
     ]"
   >
@@ -13,26 +13,20 @@
       <div class="info">
         <div class="btns">
           <PlayBtnRect :source="playSources.playlist" :store="usePStore" />
-          <Option
-            @showDropdown="showDropdown"
-            :src="context?.src || undefined"
-          />
         </div>
         <div class="duration">
-          <span v-if="props.info.count == 0">No Tracks</span>
+          <span v-if="info.count == 0">No Tracks</span>
-          <span v-else-if="props.info.count == 1"
+          <span v-else-if="info.count == 1">{{ info.count }} Track</span>
-            >{{ props.info.count }} Track</span
+          <span v-else>{{ info.count }} Tracks</span> •
-          >
+          {{ formatSeconds(info.duration, true) }}
-          <span v-else>{{ props.info.count }} Tracks</span> •
-          {{ formatSeconds(props.info.duration, true) }}
         </div>
-        <div class="title ellip">{{ props.info.name }}</div>
+        <div class="title ellip">{{ info.name }}</div>
         <div class="type">Playlist</div>
       </div>
     </div>
     <div class="last-updated">
       <span class="status"
-        >Last updated {{ props.info.lastUpdated }} &#160;|&#160;&#160;</span
+        >Last updated {{ info.lastUpdated }} &#160;|&#160;&#160;</span
       >
       <span class="edit" @click="editPlaylist">Edit</span>
     </div>
@@ -53,7 +47,6 @@ import { Playlist } from "../../interfaces";
 import { useVisibility, formatSeconds } from "@/utils";
 import { ContextSrc, playSources } from "@/composables/enums";
 
-import Option from "../shared/Option.vue";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const imguri = paths.images.playlist;

src/components/RightSideBar/Queue/QueueActions.vue

@@ -10,9 +10,7 @@
         <span>Shuffle</span>
       </button>
     </div>
-    <div class="right">
+    <div class="right"></div>
-      <Option />
-    </div>
   </div>
 </template>
 
@@ -21,7 +19,6 @@ import useQueueStore from "../../../stores/queue";
 
 import ClearSvg from "@/assets/icons/delete.svg";
 import ShuffleSvg from "@/assets/icons/shuffle.svg";
-import Option from "@/components/shared/Option.vue";
 
 const queue = useQueueStore();
 </script>