From f3f6dd88aa67a6e696aa9cfff7e292fd419414db Mon Sep 17 00:00:00 2001
From: dragongoose <dragonmail14@protonmail.com>
Date: Sun, 2 Jun 2024 11:42:35 -0400
Subject: [PATCH] Add dynamic titles #71

---
 src/components/ErrorMessage.vue |  3 +++
 src/components/VueTitle.vue     | 12 ++++++++++++
 src/views/ClipView.vue          |  6 +++++-
 src/views/FollowingView.vue     |  5 ++++-
 src/views/HomepageView.vue      |  5 ++++-
 src/views/PageNotFound.vue      |  9 ++++++++-
 src/views/SettingsView.vue      |  5 +++++
 src/views/UserView.vue          |  5 ++++-
 src/views/VodView.vue           |  5 ++++-
 9 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 src/components/VueTitle.vue

diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index 0a241e4..219f53a 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -1,8 +1,11 @@
 <script lang="ts">
+import VueTitle from './VueTitle.vue';
+
 export default {}
 </script>
 
 <template>
+  <VueTitle title="Error"></VueTitle>
   <div
     class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-crust rounded-lg text-contrast"
   >
diff --git a/src/components/VueTitle.vue b/src/components/VueTitle.vue
new file mode 100644
index 0000000..ffa44e1
--- /dev/null
+++ b/src/components/VueTitle.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const props = defineProps<{
+    title: string
+}>()
+
+onMounted(function () {
+    document.title = props.title
+})
+
+</script>
\ No newline at end of file
diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue
index 13f0cb4..d6d131b 100644
--- a/src/views/ClipView.vue
+++ b/src/views/ClipView.vue
@@ -8,10 +8,12 @@ import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
 import ShareModal from '@/components/popups/ShareButtonModal.vue'
+import VueTitle from '@/components/VueTitle.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
 
+
 export default {
   inject: ['rootBackendUrl'],
   async setup() {
@@ -69,7 +71,8 @@ export default {
     FollowButton,
     LoadingScreen,
     AboutTab,
-    ShareModal
+    ShareModal,
+    VueTitle
   },
   methods: {
     truncate,
@@ -90,6 +93,7 @@ export default {
     v-else-if="data"
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
+    <VueTitle :title=" 'Clip - ' + data.title"></VueTitle>
     <div
       class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
     >
diff --git a/src/views/FollowingView.vue b/src/views/FollowingView.vue
index b4c284a..f4b4804 100644
--- a/src/views/FollowingView.vue
+++ b/src/views/FollowingView.vue
@@ -4,6 +4,7 @@ import { ref, inject } from 'vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
+import VueTitle from '@/components/VueTitle.vue'
 
 import { getFollows } from '@/settingsManager'
 import { postEndpoint, abbreviate, getParsedFollowing } from '@/mixins'
@@ -55,7 +56,8 @@ export default {
   components: {
     LoadingScreen,
     FollowButton,
-    ErrorMessage
+    ErrorMessage,
+    VueTitle
   }
 }
 </script>
@@ -66,6 +68,7 @@ export default {
     v-else-if="data"
     class="md:max-w-[50rem] w-full mx-auto text-contrast flex flex-col justify-center"
   >
+    <vue-title title="Following"></vue-title>
     <div v-if="data.length == 0" class="text-center">
       <h1 class="text-3xl font-bold">{{ $t('following.empty') }}</h1>
       <p>{{ $t('following.followAdvice') }}</p>
diff --git a/src/views/HomepageView.vue b/src/views/HomepageView.vue
index 3999021..9334171 100644
--- a/src/views/HomepageView.vue
+++ b/src/views/HomepageView.vue
@@ -9,6 +9,7 @@ import CategoryPreview from '@/components/CategoryPreview.vue'
 import { getEndpoint, followersStreaming } from '@/mixins'
 import type { CategoryPreview as CategoryPreviewInterface } from '@/types'
 import { getFollows } from '@/settingsManager'
+import VueTitle from '@/components/VueTitle.vue'
 
 export default {
   async setup() {
@@ -96,7 +97,8 @@ export default {
     StreamPreviewVue,
     ErrorMessage,
     LoadingScreen,
-    CategoryPreview
+    CategoryPreview,
+    VueTitle
   }
 }
 </script>
@@ -106,6 +108,7 @@ export default {
   <error-message v-show="status == 'error'"></error-message>
 
   <div v-show="data" class="max-w-5xl mx-auto">
+    <vue-title title="Discover"></vue-title>
     <div v-if="following && following.length > 0" class="p-2 text-contrast">
       <h1 class="font-bold text-5xl">{{ $t('home.following') }}</h1>
       <p class="text-xl">{{ $t('home.streamersYouFollow') }}</p>
diff --git a/src/views/PageNotFound.vue b/src/views/PageNotFound.vue
index 3e91cf0..975859d 100644
--- a/src/views/PageNotFound.vue
+++ b/src/views/PageNotFound.vue
@@ -1,8 +1,15 @@
 <script lang="ts">
-export default {}
+import VueTitle from '@/components/VueTitle.vue';
+
+export default {
+  components: {
+    VueTitle
+  }
+}
 </script>
 
 <template>
+  <vue-title title="Not Found"></vue-title>
   <div class="flex flex-col items-center pt-10 font-bold text-5xl text-contrast">
     <h1>{{ $t('error.oops') }}</h1>
     <h1>{{ $t('error.notfound') }}</h1>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index ad01a6d..6a13749 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -9,6 +9,7 @@ import {
   getFollows
 } from '@/settingsManager'
 import type { Settings } from '@/settingsManager'
+import VueTitle from '@/components/VueTitle.vue';
 
 export default {
   setup() {
@@ -79,11 +80,15 @@ export default {
       this.settings = settings
       this.save()
     }
+  },
+  components: {
+    VueTitle
   }
 }
 </script>
 
 <template>
+  <vue-title title="Settings"></vue-title>
   <div class="mx-auto w-[35rem] max-w-[95vw] p-5 py-3 bg-secondary rounded-md text-contrast">
     <h1 class="font-bold text-3xl">{{ $t('nav.settings') }}</h1>
     <hr class="my-2" />
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index 86cd225..8293dc4 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -11,6 +11,7 @@ import VideoTab from '@/components/user/VideoTab.vue'
 import AudioPlayer from '@/components/AudioPlayer.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
 import ShareModal from '@/components/popups/ShareButtonModal.vue'
+import VueTitle from '@/components/VueTitle.vue'
 
 import type { StreamerData } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -71,7 +72,8 @@ export default {
     VideoTab,
     AudioPlayer,
     AboutTab,
-    ShareModal
+    ShareModal,
+    VueTitle
   },
   methods: {
     truncate,
@@ -98,6 +100,7 @@ export default {
     v-else-if="data"
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
+    <vue-title :title="data.username"></vue-title>
     <div
       class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
     >
diff --git a/src/views/VodView.vue b/src/views/VodView.vue
index fb2fa30..4eaa002 100644
--- a/src/views/VodView.vue
+++ b/src/views/VodView.vue
@@ -13,6 +13,7 @@ import ShareModal from '@/components/popups/ShareButtonModal.vue'
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
 import { getSetting } from '@/settingsManager'
+import VueTitle from '@/components/VueTitle.vue'
 
 interface ChatComponent {
   updateVodComments: (time: number) => void
@@ -61,7 +62,8 @@ export default {
     FollowButton,
     LoadingScreen,
     AboutTab,
-    ShareModal
+    ShareModal,
+    VueTitle
   },
   methods: {
     truncate,
@@ -94,6 +96,7 @@ export default {
     v-else-if="data"
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
+    <vue-title :title="'VOD - ' + data.title"></vue-title>
     <div
       class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
     >