From 24e58722c95362b0594ee88d725bf621f47059cf Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 21 Jul 2021 16:29:53 +0530
Subject: [PATCH] Handle title on component activation.

Closes #294
---
 src/components/Channel.vue      |  1 +
 src/components/FeedPage.vue     | 12 +++++++-----
 src/components/ImportPage.vue   |  1 +
 src/components/LoginPage.vue    |  3 +++
 src/components/Preferences.vue  |  7 ++++++-
 src/components/RegisterPage.vue |  3 +++
 src/components/TrendingPage.vue |  5 +++--
 src/components/WatchVideo.vue   |  7 +++++--
 8 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 8ba6dd19..83862448 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -45,6 +45,7 @@ export default {
         this.getChannelData();
     },
     activated() {
+        if (this.channel && !this.channel.error) document.title = this.channel.name + " - Piped";
         window.addEventListener("scroll", this.handleScroll);
     },
     deactivated() {
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 2ce13ffd..8760c7f6 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -20,11 +20,12 @@
                 <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
                     <div class="uk-position-relative">
                         <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
-                        <span 
+                        <span
                             v-if="video.duration"
-                            class="uk-label uk-border-rounded uk-position-absolute video-duration" 
+                            class="uk-label uk-border-rounded uk-position-absolute video-duration"
                             style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
-                            >{{ timeFormat(video.duration) }}</span>
+                            >{{ timeFormat(video.duration) }}</span
+                        >
                     </div>
                     <p>{{ video.title }}</p>
                 </router-link>
@@ -66,10 +67,11 @@ export default {
         };
     },
     mounted() {
-        document.title = "Feed - Piped";
-
         this.fetchFeed().then(videos => (this.videos = videos));
     },
+    activated() {
+        document.title = "Feed - Piped";
+    },
     methods: {
         async fetchFeed() {
             return await this.fetchJson(this.apiUrl() + "/feed", {
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index f898cd70..16fefa52 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -71,6 +71,7 @@ export default {
     },
     activated() {
         if (!this.authenticated) this.$router.push("/login");
+        document.title = "Import - Piped";
     },
     methods: {
         fileChange() {
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 3be179e8..60f967cf 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -45,6 +45,9 @@ export default {
             this.$router.push("/");
         }
     },
+    activated() {
+        document.title = "Login - Piped";
+    },
     methods: {
         login() {
             console.log("authToken" + this.hashCode(this.apiUrl()));
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 5765c5b8..3fb2a477 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="uk-flex uk-flex-between uk-flex-middle">
-        <router-link class="uk-button uk-button-text" to="/"><font-awesome-icon icon="chevron-left" /> &nbsp;Back</router-link>
+        <router-link class="uk-button uk-button-text" to="/"
+            ><font-awesome-icon icon="chevron-left" /> &nbsp;Back</router-link
+        >
         <span><h1 class="uk-text-bold uk-text-center">Preferences</h1></span>
         <span />
     </div>
@@ -142,6 +144,9 @@ export default {
             showComments: true,
         };
     },
+    activated() {
+        document.title = "Preferences - Piped";
+    },
     mounted() {
         if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
 
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index afb4bc60..565f584b 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -45,6 +45,9 @@ export default {
             this.$router.push("/");
         }
     },
+    activated() {
+        document.title = "Register - Piped";
+    },
     methods: {
         register() {
             console.log("authToken" + this.hashCode(this.apiUrl()));
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 42b9b9de..1c537ff2 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -25,12 +25,13 @@ export default {
         };
     },
     mounted() {
-        document.title = "Trending - Piped";
-
         let region = this.getPreferenceString("region", "US");
 
         this.fetchTrending(region).then(videos => (this.videos = videos));
     },
+    activated() {
+        document.title = "Trending - Piped";
+    },
     methods: {
         async fetchTrending(region) {
             return await this.fetchJson(this.apiUrl() + "/trending", {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 70a1153e..cf385017 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -131,7 +131,10 @@ export default {
     activated() {
         this.active = true;
         this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
-        if (this.video.duration) this.$refs.videoPlayer.loadVideo();
+        if (this.video.duration) {
+            document.title = this.video.title + " - Piped";
+            this.$refs.videoPlayer.loadVideo();
+        }
         window.addEventListener("scroll", this.handleScroll);
     },
     deactivated() {
@@ -244,7 +247,7 @@ export default {
         Player,
         VideoItem,
         ErrorHandler,
-        Comment
+        Comment,
     },
 };
 </script>