slider improvements

NUXT/components/Player/index.vue

@@ -155,6 +155,7 @@
     <progressbar
       v-if="$refs.player"
       :video="$refs.player"
+      :seeking="seeking"
       :controls="controls"
       :fullscreen="isFullscreen"
       :current-time="$refs.player.currentTime"
@@ -172,6 +173,7 @@
     <sponsorblock
       v-if="$refs.player"
       :video="$refs.player"
+      :seeking="seeking"
       :videoid="videoid"
       :controls="controls"
       :fullscreen="isFullscreen"

NUXT/components/Player/progressbar.vue

@@ -1,17 +1,22 @@
 <template>
   <v-progress-linear
-    style="width: 100%; background: #ffffff22"
+    style="
+      z-index: 2;
+      position: absolute;
+      background: #ffffff22;
+      transform: translateY(50%);
+    "
     background-opacity="0.5"
-    background-color="primary"
+    background-color="white"
     :buffer-value="buffered"
     :value="(currentTime / video.duration) * 100"
     :class="!fullscreen || controls ? '' : 'invisible'"
     color="primary"
-    height="2"
+    :height="seeking ? 4 : 2"
     :style="
       fullscreen
-        ? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
+        ? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.25rem;'
-        : 'width: 100%'
+        : 'width: 100%; left: 0; bottom: 1px;'
     "
   />
 </template>
@@ -22,6 +27,10 @@ export default {
       type: Object,
       required: true,
     },
+    seeking: {
+      type: Boolean,
+      required: true,
+    },
     fullscreen: {
       type: Boolean,
       required: true,

NUXT/components/Player/seekbar.vue

@@ -13,12 +13,14 @@
       hide-details
       height="2"
       dense
+      color="transparent"
+      thumb-color="primary"
       track-color="transparent"
       :class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
-      style="position: absolute; z-index: 3"
+      style="position: absolute; z-index: 4"
       :style="
         fullscreen
-          ? 'width: calc(100% - 2rem); left: 1rem; bottom: 3rem;'
+          ? 'width: calc(100% - 2rem); left: 1rem; bottom: 51px;'
           : 'width: calc(100% - 0.8rem); left: 0.4rem; bottom: 0;'
       "
       :thumb-size="0"

NUXT/components/Player/sponsorblock.vue

@@ -6,20 +6,21 @@
       :buffer-value="(block.segment[1] / video.duration) * 100"
       :value="(block.segment[0] / video.duration) * 100"
       style="
-        z-index: 4;
+        z-index: 3;
-        width: 100%;
+        position: absolute;
-        background: transparent;
         pointer-events: none;
+        background: transparent;
+        transform: translateY(50%);
       "
       :class="!fullscreen || controls ? '' : 'invisible'"
       background-color="white"
       background-opacity="1"
       color="transparent"
-      height="2"
+      :height="seeking ? 4 : 2"
       :style="
         fullscreen
-          ? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
+          ? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.25rem;'
-          : 'width: 100%; left: 0; position: absolute; bottom: 0;'
+          : 'width: 100%; left: 0; bottom: 1px;'
       "
     />
   </div>
@@ -32,6 +33,10 @@ export default {
       type: Object,
       required: true,
     },
+    seeking: {
+      type: Boolean,
+      required: true,
+    },
     videoid: {
       type: String,
       required: true,
@@ -70,7 +75,7 @@ export default {
                   vidTime <= sponsor.segment[1]
                 ) {
                   console.log("Skipping the sponsor");
-                  this.$youtube.showToast("Skipped sponsor")
+                  this.$youtube.showToast("Skipped sponsor");
                   vid.currentTime = sponsor.segment[1] + 1;
                 }
               });

NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -8,6 +8,7 @@
 <style scoped>
 .description {
   white-space: pre-line;
+  font-size: 0.8rem;
 }
 </style>
 

NUXT/pages/watch.vue

@@ -22,7 +22,7 @@
       <v-card v-if="loaded" class="background rounded-0" flat>
         <div
           v-ripple
-          class="d-flex justify-space-between align-start px-3 pt-3"
+          class="d-flex justify-space-between align-start px-3 pt-4"
           @click="showMore = !showMore"
         >
           <div class="d-flex flex-column">
@@ -164,7 +164,7 @@
 
       <!-- Description -->
       <div v-if="showMore">
-        <div class="scroll-y ma-4">
+        <div class="scroll-y ma-4 pt-1">
           <slim-video-description-renderer
             :render="video.renderedData.description"
           />

NUXT/plugins/vuetube.js

@@ -141,31 +141,11 @@ const module = {
       Math.floor((((seconds % 31536000) % 86400) % 3600) % 60), //Seconds
     ];
     levels = levels.filter((level) => level !== null);
-
     for (let i = 1; i < levels.length; i++) {
       levels[i] = levels[i].toString().padStart(2, "0");
     }
-
     // join the array into a string with : as a separator
     let returntext = levels.join(":");
-
-    console.log("Human Time:", returntext);
-    // while (returntext.startsWith(":00")) {
-    //   returntext = returntext.substring(3);
-    // } // Remove Prepending 0s (eg. 00:00:00:01:00)
-    // if (returntext.startsWith(":0")) {
-    //   returntext = returntext.substring(2);
-    // } else {
-    //   returntext = returntext.substring(1);
-    // } // Prevent Time Starting With 0 (eg. 01:00)
-
-    // if (!returntext.includes(":")) {
-    //   if (returntext.length == 1) {
-    //     returntext = "0" + returntext; // Make tens digit in seconds always visible (eg. 0:09)
-    //   }
-    //   returntext = "0:" + returntext; // Make minutes visible as 0 when sub 60 seconds (eg. 0:51)
-    // }
-
     return returntext;
   },
   //---   End Convert Time To Human Readable String   ---//

android/.idea/deploymentTargetDropDown.xml

@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="deploymentTargetDropDown">
-    <targetSelectedWithDropDown>
+    <runningDeviceTargetSelectedWithDropDown>
       <Target>
-        <type value="QUICK_BOOT_TARGET" />
+        <type value="RUNNING_DEVICE_TARGET" />
         <deviceKey>
           <Key>
-            <type value="VIRTUAL_DEVICE_PATH" />
+            <type value="SERIAL_NUMBER" />
-            <value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
+            <value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
           </Key>
         </deviceKey>
       </Target>
-    </targetSelectedWithDropDown>
+    </runningDeviceTargetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-05-14T02:50:17.689302Z" />
+    <timeTargetWasSelectedWithDropDown value="2022-06-07T16:21:41.251850Z" />
   </component>
 </project>