From b0d9145e754ec5e3b88c5587a8acb238e95d8884 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 7 Jul 2021 19:48:09 +0530
Subject: [PATCH] Add router caching. (#248)

* Add router caching.

* Avoid memory leak by limiting cache size.

* Fix search result caching.

* Remove remains of previous player.

Fixes an issue where the spinner/loading from a previous player can show up in a cached page.
---
 src/App.vue                      |  6 +++++-
 src/components/Channel.vue       |  4 +++-
 src/components/Player.vue        | 16 +++++++++++++---
 src/components/Playlist.vue      |  4 +++-
 src/components/SearchResults.vue |  9 +++------
 src/components/WatchVideo.vue    | 18 +++++++++---------
 6 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bc9548ee..7ff0d9da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,11 @@
         :class="{ 'uk-light': darkMode }"
     >
         <Navigation />
-        <router-view />
+        <router-view v-slot="{ Component }">
+            <keep-alive :max="5">
+                <component :key="$route.fullPath" :is="Component" />
+            </keep-alive>
+        </router-view>
 
         <div style="text-align: center">
             <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index f12d187c..fc30cd1e 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -32,9 +32,11 @@ export default {
     },
     mounted() {
         this.getChannelData();
+    },
+    activated() {
         window.addEventListener("scroll", this.handleScroll);
     },
-    unmounted() {
+    deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
     methods: {
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 3d9b2323..2f007236 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -29,6 +29,11 @@ export default {
         selectedAutoPlay: Boolean,
         selectedAutoLoop: Boolean,
     },
+    data() {
+        return {
+            player: null,
+        };
+    },
     computed: {
         shouldAutoPlay: _this => {
             return _this.getPreferenceBoolean("playerAutoPlay", true);
@@ -196,7 +201,7 @@ export default {
             });
         },
     },
-    mounted() {
+    activated() {
         import("hotkeys-js")
             .then(mod => mod.default)
             .then(hotkeys => {
@@ -239,13 +244,18 @@ export default {
                 });
             });
     },
-    beforeUnmount() {
+    deactivated() {
+        if (this.ui) {
+            this.ui.destroy();
+            this.ui = undefined;
+            this.player = undefined;
+        }
         if (this.player) {
             this.player.destroy();
             this.player = undefined;
-            this.ui = undefined;
         }
         if (this.hotkeys) this.hotkeys.unbind();
+        this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
     },
 };
 </script>
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index d12725b8..de3975f9 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -46,9 +46,11 @@ export default {
     },
     mounted() {
         this.getPlaylistData();
+    },
+    activated() {
         window.addEventListener("scroll", this.handleScroll);
     },
-    unmounted() {
+    deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
     computed: {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 8a982ad3..c7ab748e 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -86,16 +86,13 @@ export default {
     },
     mounted() {
         this.updateResults();
+    },
+    activated() {
         window.addEventListener("scroll", this.handleScroll);
     },
-    unmounted() {
+    deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
-    watch: {
-        "$route.query.search_query": function(q) {
-            if (q) this.updateResults();
-        },
-    },
     methods: {
         async fetchResults() {
             return await await this.fetchJson(this.apiUrl() + "/search", {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index cd7dcfad..eea5d81c 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -134,21 +134,23 @@ export default {
         };
     },
     mounted() {
-        this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
-        this.getVideoData();
+        this.getVideoData().then(() => {
+            this.$refs.videoPlayer.loadVideo();
+        });
         this.getSponsors();
         this.getComments();
+    },
+    activated() {
+        this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
+        if (this.video.duration) this.$refs.videoPlayer.loadVideo();
         window.addEventListener("scroll", this.handleScroll);
     },
-    unmounted() {
+    deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
     watch: {
         "$route.query.v": function(v) {
             if (v) {
-                this.getVideoData();
-                this.getSponsors();
-                this.getComments();
                 window.scrollTo(0, 0);
             }
         },
@@ -175,7 +177,7 @@ export default {
             this.setPreference("autoplay", this.selectedAutoPlay);
         },
         async getVideoData() {
-            this.fetchVideo()
+            await this.fetchVideo()
                 .then(data => {
                     this.video = data;
                 })
@@ -189,8 +191,6 @@ export default {
                                 .replaceAll("https://www.youtube.com", "")
                                 .replaceAll("\n", "<br>"),
                         );
-
-                        this.$refs.videoPlayer.loadVideo();
                     }
                 });
         },