From 48431b1c35310f8cb139df86318904c8f7c211d6 Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Wed, 22 Jun 2022 18:58:57 -0700
Subject: [PATCH] add support for showing chapter duration in chapters modal

---
 client/components/modals/ChaptersModal.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/components/modals/ChaptersModal.vue b/client/components/modals/ChaptersModal.vue
index 7ee72e55..af94c8db 100644
--- a/client/components/modals/ChaptersModal.vue
+++ b/client/components/modals/ChaptersModal.vue
@@ -1,11 +1,11 @@
 <template>
   <modals-modal v-model="show" name="chapters" :width="500" :height="'unset'">
     <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
-      <template v-for="chap in chapters">
+      <template v-for="(chap, index) in chapters">
         <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
           {{ chap.title }}
           <span class="flex-grow" />
-          <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
+          <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }} ({{$secondsToTimestamp(timeToNextChapter(index, chapters))}})</span>
 
           <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
         </div>
@@ -55,6 +55,12 @@ export default {
     clickChapter(chap) {
       this.$emit('select', chap)
     },
+    timeToNextChapter(index,chapters) {
+      if (index + 1 == chapters.length) {
+        return chapters[index].end - chapters[index].start
+      }
+      return chapters[index+1].start - chapters[index].start
+    },
     scrollToChapter() {
       if (!this.currentChapterId) return