feat(webui): add the series and book title to page title

komga-webui/src/functions/meta-utilities.ts

@@ -0,0 +1,11 @@
+import KomgaSeriesService from '@/services/komga-series.service'
+
+export async function getBookTitle (komgaSeries: KomgaSeriesService, book: BookDto): Promise<string> {
+  return komgaSeries.getOneSeries(book.seriesId).then(series => {
+    if (book.name.toLowerCase().includes(series.name.toLowerCase())) {
+      return book.name
+    } else {
+      return `${series.name} - ${book.name}`
+    }
+  })
+}

komga-webui/src/router.ts

@@ -124,6 +124,7 @@ const router = new Router({
 })
 
 router.beforeEach((to, from, next) => {
+  document.title = 'Komga'
   if (to.name !== 'startup' && to.name !== 'login' && !lStore.getters.authenticated) next({ name: 'startup' })
   else next()
 })

komga-webui/src/views/BookReader.vue

@@ -311,6 +311,7 @@ import { checkWebpFeature } from '@/functions/check-webp'
 import { bookPageThumbnailUrl, bookPageUrl } from '@/functions/urls'
 import { ImageFit } from '@/types/common'
 import Vue from 'vue'
+import { getBookTitle } from '@/functions/meta-utilities'
 
 const cookieFit = 'webreader.fit'
 const cookieRtl = 'webreader.rtl'
@@ -457,6 +458,7 @@ export default Vue.extend({
     async setup (bookId: number, page: number) {
       this.book = await this.$komgaBooks.getBook(bookId)
       this.pages = await this.$komgaBooks.getBookPages(bookId)
+      this.updateTitle()
       if (page >= 1 && page <= this.pagesCount) {
         this.goTo(page)
       } else {
@@ -534,6 +536,10 @@ export default Vue.extend({
         }
       })
     },
+    async updateTitle () {
+      let title: string = await getBookTitle(this.$komgaSeries, this.book)
+      document.title = `Komga - ${title}`
+    },
     closeBook () {
       this.$router.push({ name: 'browse-book', params: { bookId: this.bookId.toString() } })
     },

komga-webui/src/views/BrowseBook.vue

@@ -128,6 +128,7 @@ import ToolbarSticky from '@/components/ToolbarSticky.vue'
 import { getBookFormatFromMediaType } from '@/functions/book-format'
 import { bookFileUrl, bookThumbnailUrl } from '@/functions/urls'
 import Vue from 'vue'
+import { getBookTitle } from '@/functions/meta-utilities'
 
 export default Vue.extend({
   name: 'BrowseBook',
@@ -139,6 +140,7 @@ export default Vue.extend({
   },
   async created () {
     this.book = await this.$komgaBooks.getBook(this.bookId)
+    this.updateTitle()
   },
   props: {
     bookId: {
@@ -170,6 +172,10 @@ export default Vue.extend({
   methods: {
     analyze () {
       this.$komgaBooks.analyzeBook(this.book)
+    },
+    async updateTitle () {
+      let title: string = await getBookTitle(this.$komgaSeries, this.book)
+      document.title = `Komga - ${title}`
     }
   }
 })

komga-webui/src/views/BrowseSeries.vue

@@ -164,7 +164,7 @@ export default mixins(VisibleElements).extend({
   async created () {
     this.loadSeries()
   },
-  mounted () {
+  async mounted () {
     // fill books skeletons if an index is provided, so scroll position can be restored
     if (this.$route.params.index) {
       this.books = Array(Number(this.$route.params.index)).fill(null)
@@ -178,6 +178,8 @@ export default mixins(VisibleElements).extend({
     this.reloadData(Number(this.$route.params.seriesId), this.books.length)
 
     this.setWatches()
+    await this.loadSeries()
+    document.title = `Komga - ${this.series.name}`
   },
   async beforeRouteUpdate (to, from, next) {
     if (to.params.seriesId !== from.params.seriesId) {