Add chapter subtitle for audiobooks

Author: tsipinakis

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

@@ -151,6 +151,14 @@
               {{ $t("off") }}
             </v-card-subtitle>
 
+            <!-- SUBTITLE: player powered off -->
+            <v-card-subtitle
+              v-if="store.curChapter"
+              class="text-h6 text-md-h5 text-lg-h4"
+            >
+              {{ store.curChapter.name }}
+            </v-card-subtitle>
+
             <!-- live (stream) metadata (artist + title) -->
             <v-card-subtitle
               v-if="

src/layouts/default/PlayerOSD/PlayerTimeline.vue

@@ -93,27 +93,13 @@ const chapterTime = computed(() =>
 );
 
 // computed properties
-const curChapter = computed(() => {
-  if (store.curQueueItem?.media_item?.metadata?.chapters) {
-    return store.curQueueItem.media_item.metadata.chapters.find((chapter) => {
-      if (!store.activePlayerQueue?.elapsed_time) return null;
-      if (!chapter.end) return null;
-      return (
-        chapter.start < store.activePlayerQueue?.elapsed_time &&
-        chapter.end > store.activePlayerQueue?.elapsed_time
-      );
-    });
-  }
-  return null;
-});
-
 const playerCurQueueItemDuration = computed(() => {
   if (
     chapterTime.value &&
     store.curQueueItem?.media_item?.media_type == MediaType.AUDIOBOOK
   ) {
-    if (!curChapter.value?.end) return 0;
-    return curChapter.value?.end - curChapter.value?.start;
+    if (!store.curChapter?.end) return 0;
+    return store.curChapter?.end - store.curChapter?.start;
   }
   return store.curQueueItem?.duration;
 });
@@ -130,8 +116,8 @@ const curQueueItemTime = computed(() => {
       chapterTime.value &&
       store.curQueueItem?.media_item?.media_type == MediaType.AUDIOBOOK
     ) {
-      if (!curChapter.value?.start) return 0;
-      return store.activePlayerQueue?.elapsed_time - curChapter.value?.start;
+      if (!store.curChapter?.start) return 0;
+      return store.activePlayerQueue?.elapsed_time - store.curChapter?.start;
     }
     return store.activePlayerQueue.elapsed_time;
   }
@@ -183,7 +169,7 @@ const stopDragging = () => {
   isDragging.value = false;
   if (!isDragging.value && store.activePlayer) {
     var seekTime = tempTime.value;
-    if (curChapter.value?.start && chapterTime.value) seekTime = curChapter.value?.start + seekTime;
+    if (store.curChapter?.start && chapterTime.value) seekTime = store.curChapter?.start + seekTime;
     api.playerCommandSeek(store.activePlayer.player_id, Math.round(seekTime));
   }
 };

src/layouts/default/PlayerOSD/PlayerTrackDetails.vue

@@ -164,6 +164,16 @@
           >
             {{ store.curQueueItem.media_item.podcast.name }}
           </div>
+          <!-- audiobook - current chapter as subtitle -->
+          <div
+            v-else-if="
+              store.curQueueItem?.media_item &&
+              store.curQueueItem.media_item?.media_type == MediaType.AUDIOBOOK &&
+              store.curChapter
+            "
+          >
+            {{ store.curChapter.name }}
+          </div>
           <!-- live (stream) metadata (artist + title) -->
           <div
             v-else-if="

src/plugins/store.ts

@@ -1,5 +1,5 @@
 import { computed, reactive } from "vue";
-import { MediaType, Player, PlayerQueue, QueueItem } from "./api/interfaces";
+import { MediaType, Player, PlayerQueue, QueueItem, MediaItemChapter } from "./api/interfaces";
 
 import api from "./api";
 import { StoredState } from "@/components/ItemsListing.vue";
@@ -42,6 +42,7 @@ interface Store {
   activePlayer?: Player;
   activePlayerQueue?: PlayerQueue;
   curQueueItem?: QueueItem;
+  curChapter?: MediaItemChapter;
   globalSearchTerm?: string;
   globalSearchType?: MediaType;
   prevState?: StoredState;
@@ -99,6 +100,19 @@ export const store: Store = reactive({
       return store.activePlayerQueue.current_item;
     return undefined;
   }),
+  curChapter: computed(() => {
+    if (store.curQueueItem?.media_item?.metadata?.chapters) {
+      return store.curQueueItem.media_item.metadata.chapters.find((chapter) => {
+        if (!store.activePlayerQueue?.elapsed_time) return undefined;
+        if (!chapter.end) return undefined;
+        return (
+          chapter.start < store.activePlayerQueue?.elapsed_time &&
+          chapter.end > store.activePlayerQueue?.elapsed_time
+        );
+      });
+    }
+    return undefined;
+  }),
   globalSearchTerm: undefined,
   globalSearchType: undefined,
   prevState: undefined,