Merge branch 'primetoxinz-dev-book-title'

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/router.ts

@@ -124,6 +124,9 @@ const router = new Router({
 })
 
 router.beforeEach((to, from, next) => {
+  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,6 +318,7 @@ import { checkWebpFeature } from '@/functions/check-webp'
 import { bookPageThumbnailUrl, bookPageUrl } from '@/functions/urls'
 import { ImageFit } from '@/types/common'
 import Vue from 'vue'
+import { getBookTitleCompact } from '@/functions/book-title'
 
 const cookieFit = 'webreader.fit'
 const cookieRtl = 'webreader.rtl'
@@ -322,6 +330,7 @@ export default Vue.extend({
     return {
       ImageFit,
       book: {} as BookDto,
+      series: {} as SeriesDto,
       siblingPrevious: {} as BookDto,
       siblingNext: {} as BookDto,
       jumpToNextBook: false,
@@ -388,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: {
@@ -424,6 +439,9 @@ export default Vue.extend({
     },
     pagesCount (): number {
       return this.pages.length
+    },
+    bookTitle (): string {
+      return getBookTitleCompact(this.book.name, this.series.name)
     }
   },
   methods: {
@@ -491,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() } })
           }

komga-webui/src/views/BrowseBook.vue

@@ -128,18 +128,28 @@ import ToolbarSticky from '@/components/ToolbarSticky.vue'
 import { getBookFormatFromMediaType } from '@/functions/book-format'
 import { bookFileUrl, bookThumbnailUrl } from '@/functions/urls'
 import Vue from 'vue'
+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)
   },
+  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: {
       type: Number,

komga-webui/src/views/BrowseSeries.vue

@@ -159,6 +159,11 @@ 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 () {
@@ -178,6 +183,7 @@ export default mixins(VisibleElements).extend({
     this.reloadData(Number(this.$route.params.seriesId), this.books.length)
 
     this.setWatches()
+    this.loadSeries()
   },
   async beforeRouteUpdate (to, from, next) {
     if (to.params.seriesId !== from.params.seriesId) {