Fix strange vuejs event cycle when keep-alive limit is hit.

src/components/Channel.vue

@@ -2,7 +2,9 @@
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
     <div v-if="channel" v-show="!channel.error">
-        <h1 class="uk-text-center"><img height="48" width="48" class="uk-border-circle" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
+        <h1 class="uk-text-center">
+            <img height="48" width="48" class="uk-border-circle" v-bind:src="channel.avatarUrl" />{{ channel.name }}
+        </h1>
         <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
         <p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
 
@@ -52,6 +54,9 @@ export default {
     deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
+    unmounted() {
+        window.removeEventListener("scroll", this.handleScroll);
+    },
     methods: {
         async fetchSubscribedStatus() {
             this.fetchJson(

src/components/Player.vue

@@ -280,6 +280,19 @@ export default {
                 videoEl.volume = this.getPreferenceNumber("volume", 1);
             });
         },
+        destroy() {
+            if (this.ui) {
+                this.ui.destroy();
+                this.ui = undefined;
+                this.player = undefined;
+            }
+            if (this.player) {
+                this.player.destroy();
+                this.player = undefined;
+            }
+            if (this.hotkeys) this.hotkeys.unbind();
+            if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
+        },
     },
     activated() {
         import("hotkeys-js")
@@ -334,17 +347,10 @@ export default {
             });
     },
     deactivated() {
-        if (this.ui) {
+        this.destroy();
-            this.ui.destroy();
+    },
-            this.ui = undefined;
+    unmounted() {
-            this.player = undefined;
+        this.destroy();
-        }
-        if (this.player) {
-            this.player.destroy();
-            this.player = undefined;
-        }
-        if (this.hotkeys) this.hotkeys.unbind();
-        if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
     },
 };
 </script>

src/components/SearchResults.vue

@@ -49,7 +49,9 @@
                 </router-link>
 
                 <a v-if="result.uploaderName" class="uk-text-muted">{{ result.uploaderName }}</a>
-                <b v-if="result.videos >= 0"><br v-if="result.uploaderName" />{{ result.videos }} {{ $t("video.videos") }}</b>
+                <b v-if="result.videos >= 0"
+                    ><br v-if="result.uploaderName" />{{ result.videos }} {{ $t("video.videos") }}</b
+                >
 
                 <br />
             </div>
@@ -86,6 +88,9 @@ export default {
     deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
+    unmounted() {
+        window.removeEventListener("scroll", this.handleScroll);
+    },
     methods: {
         async fetchResults() {
             return await await this.fetchJson(this.apiUrl() + "/search", {

src/components/WatchVideo.vue

@@ -179,6 +179,9 @@ export default {
         this.active = false;
         window.removeEventListener("scroll", this.handleScroll);
     },
+    beforeUnmount() {
+        window.removeEventListener("scroll", this.handleScroll);
+    },
     methods: {
         fetchVideo() {
             return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());