Adds a player setting to use chapter duration in the player Chapter modal.

Allows users to view chapter duration instead of start time in the player chapter list.

components/app/AudioPlayer.vue

@@ -99,7 +99,7 @@
       </div>
     </div>
 
-    <modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" :playback-rate="currentPlaybackRate" @select="selectChapter" />
+    <modals-chapters-modal v-model="showChapterModal" :current-chapter="currentChapter" :chapters="chapters" :playback-rate="currentPlaybackRate" :use-chapter-duration="playerSettings.useChapterDuration" @select="selectChapter" />
     <modals-dialog v-model="showMoreMenuDialog" :items="menuItems" width="80vw" @action="clickMenuAction" />
   </div>
 </template>
@@ -146,6 +146,7 @@ export default {
         useChapterTrack: false,
         useTotalTrack: true,
         scaleElapsedTimeBySpeed: true,
+        useChapterDuration: false,
         lockUi: false
       },
       isLoading: false,
@@ -206,6 +207,11 @@ export default {
             value: 'scale_elapsed_time',
             icon: this.playerSettings.scaleElapsedTimeBySpeed ? 'check_box' : 'check_box_outline_blank'
           },
+          {
+            text: this.$strings.LabelUseChapterDuration,
+            value: 'use_chapter_duration',
+            icon: this.playerSettings.useChapterDuration ? 'check_box' : 'check_box_outline_blank'
+          },
           {
             text: this.playerSettings.lockUi ? this.$strings.LabelUnlockPlayer : this.$strings.LabelLockPlayer,
             value: 'lock',
@@ -732,6 +738,9 @@ export default {
           this.playerSettings.scaleElapsedTimeBySpeed = !this.playerSettings.scaleElapsedTimeBySpeed
           this.updateTimestamp()
           this.savePlayerSettings()
+        }  else if (action === 'use_chapter_duration') {
+          this.playerSettings.useChapterDuration = !this.playerSettings.useChapterDuration
+          this.savePlayerSettings()
         } else if (action === 'lock') {
           this.playerSettings.lockUi = !this.playerSettings.lockUi
           this.savePlayerSettings()
@@ -799,6 +808,7 @@ export default {
         this.playerSettings.useTotalTrack = !!savedPlayerSettings.useTotalTrack
         this.playerSettings.lockUi = !!savedPlayerSettings.lockUi
         this.playerSettings.scaleElapsedTimeBySpeed = !!savedPlayerSettings.scaleElapsedTimeBySpeed
+        this.playerSettings.useChapterDuration = !!savedPlayerSettings.useChapterDuration
       }
     },
     savePlayerSettings() {

components/modals/ChaptersModal.vue

@@ -14,7 +14,7 @@
               <div class="relative flex items-center pl-3 pr-20">
                 <p class="font-normal block truncate text-sm text-fg/80">{{ chapter.title }}</p>
                 <div class="absolute top-0 right-3 -mt-0.5">
-                  <span class="font-mono text-fg-muted leading-3 text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start / _playbackRate) }}</span>
+                  <span class="font-mono text-fg-muted leading-3 text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(((useChapterDuration ? Math.max(0, chapter.end - chapter.start) : chapter.start) / _playbackRate)) }}</span>
                 </div>
               </div>
 
@@ -39,7 +39,8 @@ export default {
       type: Object,
       default: () => null
     },
-    playbackRate: Number
+    playbackRate: Number,
+    useChapterDuration: Boolean
   },
   data() {
     return {}

strings/en-us.json

@@ -272,6 +272,7 @@
   "LabelUnknown": "Unknown",
   "LabelUnlockPlayer": "Unlock Player",
   "LabelUseBookshelfView": "Use bookshelf view",
+  "LabelUseChapterDuration": "Use chapter duration",
   "LabelUser": "User",
   "LabelUsername": "Username",
   "LabelVeryHigh": "Very High",