feat(webui): add series and book title in page title and reader overlay

komga-webui/src/functions/book-title.ts

@@ -0,0 +1,7 @@
+export function getBookTitleCompact (bookTitle: string, seriesTitle: string): string {
+  if (bookTitle?.toLowerCase().includes(seriesTitle?.toLowerCase())) {
+    return bookTitle
+  } else {
+    return `${seriesTitle} - ${bookTitle}`
+  }
+}

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

@@ -1,11 +0,0 @@
-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,7 +124,9 @@ const router = new Router({
 })
 
 router.beforeEach((to, from, next) => {
-  document.title = 'Komga'
+  if (!['read-book', 'browse-book', 'browse-series'].includes(<string>to.name)) {
+    document.title = 'Komga'
+  }
   if (to.name !== 'startup' && to.name !== 'login' && !lStore.getters.authenticated) next({ name: 'startup' })
   else next()
 })

komga-webui/src/views/BookReader.vue

@@ -92,6 +92,13 @@
                      class="pa-6 pt-12"
                      style="border-bottom: 4px dashed"
         >
+          <!--  Menu: book title  -->
+          <v-row>
+            <v-col class="text-center title">
+              {{ bookTitle }}
+            </v-col>
+          </v-row>
+
           <!--  Menu: number of pages  -->
           <v-row>
             <v-col class="text-center title">
@@ -311,7 +318,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'
+import { getBookTitleCompact } from '@/functions/book-title'
 
 const cookieFit = 'webreader.fit'
 const cookieRtl = 'webreader.rtl'
@@ -323,6 +330,7 @@ export default Vue.extend({
     return {
       ImageFit,
       book: {} as BookDto,
+      series: {} as SeriesDto,
       siblingPrevious: {} as BookDto,
       siblingNext: {} as BookDto,
       jumpToNextBook: false,
@@ -389,6 +397,12 @@ export default Vue.extend({
     currentPage (val) {
       this.updateRoute()
       this.goToPage = val
+    },
+    async book (val) {
+      if (this.$_.has(val, 'name')) {
+        this.series = await this.$komgaSeries.getOneSeries(val.seriesId)
+        document.title = `Komga - ${getBookTitleCompact(val.name, this.series.name)}`
+      }
     }
   },
   computed: {
@@ -425,6 +439,9 @@ export default Vue.extend({
     },
     pagesCount (): number {
       return this.pages.length
+    },
+    bookTitle (): string {
+      return getBookTitleCompact(this.book.name, this.series.name)
     }
   },
   methods: {
@@ -458,7 +475,6 @@ 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 {
@@ -493,6 +509,7 @@ export default Vue.extend({
       } else {
         if (this.jumpToPreviousBook) {
           if (!this.$_.isEmpty(this.siblingPrevious)) {
+            console.log(this.siblingPrevious)
             this.jumpToPreviousBook = false
             this.$router.push({ name: 'read-book', params: { bookId: this.siblingPrevious.id.toString() } })
           }
@@ -536,10 +553,6 @@ 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,19 +128,27 @@ 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'
+import { getBookTitleCompact } from '@/functions/book-title'
 
 export default Vue.extend({
   name: 'BrowseBook',
   components: { ToolbarSticky },
   data: () => {
     return {
-      book: {} as BookDto
+      book: {} as BookDto,
+      series: {} as SeriesDto
     }
   },
   async created () {
     this.book = await this.$komgaBooks.getBook(this.bookId)
-    this.updateTitle()
+  },
+  watch: {
+    async book (val) {
+      if (this.$_.has(val, 'name')) {
+        this.series = await this.$komgaSeries.getOneSeries(val.seriesId)
+        document.title = `Komga - ${getBookTitleCompact(val.name, this.series.name)}`
+      }
+    }
   },
   props: {
     bookId: {
@@ -172,10 +180,6 @@ 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

@@ -159,12 +159,17 @@ export default mixins(VisibleElements).extend({
       if (this.$route.params.index !== index) {
         this.updateRoute(index)
       }
+    },
+    series (val) {
+      if (this.$_.has(val, 'name')) {
+        document.title = `Komga - ${val.name}`
+      }
     }
   },
   async created () {
     this.loadSeries()
   },
-  async mounted () {
+  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,8 +183,7 @@ 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}`
+    this.loadSeries()
   },
   async beforeRouteUpdate (to, from, next) {
     if (to.params.seriesId !== from.params.seriesId) {