force 1x speed for music(sb-tagged music_offtopic), pre-buffering set to lower res quality preset by default, event listeners cleanup on route change and exit, colored sponsorblock segments

NUXT/components/Player/index.vue

@@ -400,29 +400,47 @@ export default {
       blocks: [],
       vidSrc: "",
       audSrc: "",
-      isVerticalVideo: false,
+      isVerticalVideo: false, // maybe rename(refactor everywhere used) to isShort
       bufferingDetected: false,
+      isMusic: false,
     };
   },
+  watch: {
+    $route: {
+      deep: true,
+      handler() {
+        this.cleanup();
+      },
+    },
+  },
   mounted() {
     console.log("sources", this.sources);
     console.log("recommends", this.recommends);
     let vid = this.$refs.player;
 
     // TODO: this.$store.state.player.quality, check if exists and select the closest one
-    if (this.$store.state.player.preload) this.prebuffer(this.sources[0].url);
+    if (this.$store.state.player.preload) this.prebuffer(this.sources[5].url);
     else {
       this.audSrc = this.sources[this.sources.length - 1].url;
-      this.vidSrc = this.sources[3].url;
+      this.vidSrc = this.sources[5].url;
     }
 
     this.$youtube.getSponsorBlock(this.video.id, (data) => {
-      console.log("sbreturn", data);
+      // console.warn("sbreturn", data);
       if (Array.isArray(data)) {
         this.blocks = data;
+        data.find((block) => {
+          if (block.category === "music_offtopic") {
+            this.isMusic = true;
+            this.$refs.audio.playbackRate = 1;
+            this.$refs.player.playbackRate = 1;
+          }
+        });
       }
     });
 
+    // TODO: detect this.isMusic from the video or channel metadata instead of just SB segments
+
     vid.addEventListener("loadeddata", (e) => {
       // console.log(e);
       // if (vid.networkState === vid.NETWORK_LOADING) {
@@ -436,8 +454,15 @@ export default {
         this.$refs.audio.play();
         this.bufferingDetected = false;
         this.$refs.audio.currentTime = vid.currentTime;
-        this.$refs.audio.playbackRate = this.$store.state.player.speed;
-        this.$refs.player.playbackRate = this.$store.state.player.speed;
+
+        if (!this.isMusic) {
+          this.$refs.audio.playbackRate = this.$store.state.player.speed;
+          this.$refs.player.playbackRate = this.$store.state.player.speed;
+        } else {
+          this.$refs.audio.playbackRate = 1;
+          this.$refs.player.playbackRate = 1;
+        }
+
         this.$refs.player.loop = this.$store.state.player.loop;
         this.$refs.audio.loop = this.$store.state.player.loop;
         vid.addEventListener("timeupdate", () => {
@@ -474,7 +499,7 @@ export default {
         });
 
         // buffering detection & sync
-        let threshold = 100; //ms after which user perceives buffering
+        let threshold = 250; //ms after which user perceives buffering
 
         vid.addEventListener("waiting", () => {
           if (!vid.paused) {
@@ -502,11 +527,19 @@ export default {
     );
   },
   beforeDestroy() {
-    this.xhr.abort();
-    if (this.isFullscreen) this.exitFullscreen();
-    screen.orientation.removeEventListener("change");
+    this.cleanup();
   },
   methods: {
+    cleanup() {
+      this.xhr.abort();
+      if (this.isFullscreen) this.exitFullscreen();
+      screen.orientation.removeEventListener("change");
+      this.$refs.player.removeEventListener("loadeddata");
+      this.$refs.player.removeEventListener("timeupdate");
+      this.$refs.player.removeEventListener("progress");
+      this.$refs.player.removeEventListener("waiting");
+      this.$refs.player.removeEventListener("playing");
+    },
     prebuffer(url) {
       this.xhr = new XMLHttpRequest();
       this.xhr.open("GET", url, true);
@@ -537,7 +570,7 @@ export default {
           if (pc != prev_pc) {
             prev_pc = pc; // ##%
             if (pc < 100) this.buffered = pc;
-            console.warn(this.xhr);
+            // console.warn(this.xhr);
           }
         }
       });

NUXT/components/Player/sponsorblock.vue

@@ -10,9 +10,10 @@
         pointer-events: none;
         background: transparent;
         transform: translateY(50%);
+        box-shadow: 0 0 1rem 1rem red;
       "
       :class="!fullscreen || controls ? '' : 'invisible'"
-      background-color="white"
+      :background-color="colors[block.category]"
       background-opacity="1"
       color="transparent"
       :height="seeking ? 4 : 2"
@@ -22,7 +23,6 @@
           : 'width: 100%; left: 0; bottom: 1px;'
       "
     />
-    <!-- // TODO:background-color="colors[block.category]" -->
   </div>
 </template>
 

NUXT/pages/watch.vue

@@ -317,6 +317,7 @@ export default {
     $route: {
       deep: true,
       handler(newRt, oldRt) {
+        this.$refs.player.cleanup();
         if (newRt.query.v && newRt.query.v != oldRt.query.v) {
           // Exit fullscreen if currently in fullscreen
           // if (this.$refs.player) this.$refs.player.webkitExitFullscreen();

NUXT/store/channel/index.js

@@ -31,7 +31,7 @@ export const actions = {
     this.$youtube
       .getChannel(channelRequest)
       .then((channel) => {
-        // console.log(channel);
+        // console.warn(channel);
         state.loading = false;
         state.banner =
           channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner?.image.sources[0].url;

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" />
-            <value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
+            <type value="SERIAL_NUMBER" />
+            <value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
           </Key>
         </deviceKey>
       </Target>
-    </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-07-06T20:31:28.319907Z" />
+    </runningDeviceTargetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2022-08-01T02:55:54.306038Z" />
   </component>
 </project>