Add dynamic titles #71

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

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>

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

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>

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>

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>

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

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

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