Handle title on component activation.

Closes #294

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() {

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

src/components/ImportPage.vue

@@ -71,6 +71,7 @@ export default {
     },
     activated() {
         if (!this.authenticated) this.$router.push("/login");
+        document.title = "Import - Piped";
     },
     methods: {
         fileChange() {

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

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: {} });
 

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

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

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>