Implement chapter time over full audiobook duration

src/layouts/default/PlayerOSD/PlayerFullscreen.vue

@@ -151,6 +151,14 @@
               {{ $t("off") }}
             </v-card-subtitle>
 
+            <!-- SUBTITLE: current (audiobook) chapter -->
+            <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

@@ -12,7 +12,7 @@
         "
         style="width: 100%"
         :min="0"
-        :max="store.curQueueItem?.duration"
+        :max="playerCurQueueItemDuration"
         hide-details
         :track-size="4"
         :thumb-size="isThumbHidden ? 0 : 10"
@@ -88,36 +88,63 @@ const isDragging = ref(false);
 const curTimeValue = ref(0);
 const tempTime = ref(0);
 
+const chapterTime = computed(() =>
+  localStorage.getItem("frontend.settings.audiobook_chapter_time") == "true"
+);
+
 // computed properties
+const playerCurQueueItemDuration = computed(() => {
+  if (
+    chapterTime.value &&
+    store.curQueueItem?.media_item?.media_type == MediaType.AUDIOBOOK
+  ) {
+    if (!store.curChapter?.end) return 0;
+    return store.curChapter?.end - store.curChapter?.start;
+  }
+  return store.curQueueItem?.duration;
+});
+
+const curQueueItemTime = computed(() => {
+  if (isDragging.value) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    tempTime.value = curTimeValue.value;
+    return curTimeValue.value;
+  }
+
+  if (store.activePlayerQueue) {
+    if (
+      chapterTime.value &&
+      store.curQueueItem?.media_item?.media_type == MediaType.AUDIOBOOK
+    ) {
+      if (!store.curChapter?.start) return 0;
+      return store.activePlayerQueue?.elapsed_time - store.curChapter?.start;
+    }
+    return store.activePlayerQueue.elapsed_time;
+  }
+  return 0;
+});
+
 const playerCurTimeStr = computed(() => {
-  if (!store.curQueueItem) return "0:00";
+  if (!playerCurQueueItemDuration.value || !curQueueItemTime.value) return "0:00";
   if (showRemainingTime.value) {
     return `-${formatDuration(
-      store.curQueueItem.duration - curQueueItemTime.value,
+      playerCurQueueItemDuration.value - curQueueItemTime.value,
     )}`;
   } else {
     return `${formatDuration(curQueueItemTime.value)}`;
   }
 });
+
 const playerTotalTimeStr = computed(() => {
-  if (!store.curQueueItem) return "";
-  if (!store.curQueueItem.duration) return "";
+  if (!playerCurQueueItemDuration.value || !store.curQueueItem) return "";
   if (store.curQueueItem.media_item?.media_type == MediaType.RADIO) return "";
-  const totalSecs = store.curQueueItem.duration;
+  const totalSecs = playerCurQueueItemDuration.value;
   return formatDuration(totalSecs);
 });
-const curQueueItemTime = computed(() => {
-  if (isDragging.value) {
-    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    tempTime.value = curTimeValue.value;
-    return curTimeValue.value;
-  }
-  if (store.activePlayerQueue) return store.activePlayerQueue.elapsed_time;
-  return 0;
-});
 
 const chapterTicks = computed(() => {
   const ticks: Record<number, string> = {};
+  if (chapterTime.value) return [];
   if (store.curQueueItem?.media_item?.metadata?.chapters) {
     store.curQueueItem.media_item.metadata.chapters.forEach((chapter) => {
       ticks[chapter.start] = chapter.name;
@@ -141,10 +168,9 @@ const startDragging = function () {
 const stopDragging = () => {
   isDragging.value = false;
   if (!isDragging.value && store.activePlayer) {
-    api.playerCommandSeek(
-      store.activePlayer.player_id,
-      Math.round(tempTime.value),
-    );
+    var seekTime = tempTime.value;
+    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";
@@ -43,6 +43,7 @@ interface Store {
   activePlayer?: Player;
   activePlayerQueue?: PlayerQueue;
   curQueueItem?: QueueItem;
+  curChapter?: MediaItemChapter;
   globalSearchTerm?: string;
   globalSearchType?: MediaType;
   prevState?: StoredState;
@@ -102,6 +103,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,

src/translations/en.json

@@ -536,6 +536,10 @@
                 "unmaintained": "Unmaintained",
                 "deprecated": "Deprecated"
             }
+        },
+        "audiobook_chapter_time": {
+            "label": "Audiobook Chapter Progress",
+            "description": "Show the progress of the current chapter instead of the full duration when playing audiobooks."
         }
     },
     "show_info": "Show info",

src/views/settings/FrontendConfig.vue

@@ -131,6 +131,18 @@ onMounted(() => {
         localStorage.getItem("frontend.settings.force_mobile_layout") !=
         "false",
     },
+    {
+      key: "audiobook_chapter_time",
+      type: ConfigEntryType.BOOLEAN,
+      label: "chapter_time",
+      default_value: false,
+      required: false,
+      multi_value: false,
+      category: "audiobooks_podcasts",
+      value:
+        localStorage.getItem("frontend.settings.audiobook_chapter_time") ==
+        "true",
+    },
   ];
 });