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

@@ -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">

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: {

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>

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: {

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", {

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();
                     }
                 });
         },