From 07dfa21956e01e50d61db42e9dcdd8620f0595f9 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 6 Sep 2021 02:23:59 +0530
Subject: [PATCH] Fix strange vuejs event cycle when keep-alive limit is hit.

---
 src/components/Channel.vue       |  7 ++++++-
 src/components/Player.vue        | 28 +++++++++++++++++-----------
 src/components/SearchResults.vue |  7 ++++++-
 src/components/WatchVideo.vue    |  3 +++
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 25123781..780b7558 100644
--- a/src/components/Channel.vue
+++ b/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(
diff --git a/src/components/Player.vue b/src/components/Player.vue
index cfd5e020..4dba6063 100644
--- a/src/components/Player.vue
+++ b/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.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());
+        this.destroy();
+    },
+    unmounted() {
+        this.destroy();
     },
 };
 </script>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 43309357..9e910eae 100644
--- a/src/components/SearchResults.vue
+++ b/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", {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 59ec1b47..6c331648 100644
--- a/src/components/WatchVideo.vue
+++ b/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());