Implement chapter time over full audiobook duration

Author: tsipinakis

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,77 @@ 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 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;
+  }
+  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 (!curChapter.value?.start) return 0;
+      return store.activePlayerQueue?.elapsed_time - curChapter.value?.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 +182,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 (curChapter.value?.start && chapterTime.value) seekTime = curChapter.value?.start + seekTime;
+    api.playerCommandSeek(store.activePlayer.player_id, Math.round(seekTime));
   }
 };
 

src/translations/en.json

@@ -512,6 +512,10 @@
         "enable_builtin_player": {
             "label": "Allow playback to this device\/browser",
             "description": "Enable the (experimental) built-in player for this device\/browser, which allows you to stream all Music Assistant content directly to this device."
+        },
+        "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

@@ -129,6 +129,30 @@ onMounted(() => {
         localStorage.getItem("frontend.settings.enable_builtin_player") !=
         "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",
+    },
+    {
+      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",
+    },
   ];
 });