From c03a9bf2d60ae36bb696d3829db81819f30f2cdf Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 7 Jul 2021 02:42:51 +0530
Subject: [PATCH] Add router caching.

---
 src/App.vue                      |  6 +++++-
 src/components/Channel.vue       |  4 +++-
 src/components/Player.vue        | 15 ++++++++++++---
 src/components/Playlist.vue      |  4 +++-
 src/components/SearchResults.vue |  4 +++-
 src/components/WatchVideo.vue    | 19 ++++++++++---------
 6 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bc9548ee..5628ef51 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>
+                <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..25691f40 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,11 +244,15 @@ 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();
     },
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..67173864 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -86,9 +86,11 @@ export default {
     },
     mounted() {
         this.updateResults();
+    },
+    activated() {
         window.addEventListener("scroll", this.handleScroll);
     },
-    unmounted() {
+    deactivated() {
         window.removeEventListener("scroll", this.handleScroll);
     },
     watch: {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index cd7dcfad..2867ddec 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -134,21 +134,24 @@ export default {
         };
     },
     mounted() {
-        this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
-        this.getVideoData();
+        this.getVideoData().then(() => {
+            console.log(this.video.title);
+            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 +178,7 @@ export default {
             this.setPreference("autoplay", this.selectedAutoPlay);
         },
         async getVideoData() {
-            this.fetchVideo()
+            await this.fetchVideo()
                 .then(data => {
                     this.video = data;
                 })
@@ -189,8 +192,6 @@ export default {
                                 .replaceAll("https://www.youtube.com", "")
                                 .replaceAll("\n", "<br>"),
                         );
-
-                        this.$refs.videoPlayer.loadVideo();
                     }
                 });
         },