@saooti/octopus-sdk 38.0.19 → 38.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "38.0.19",
+  "version": "38.0.21",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/misc/player/ChapteringModal.vue

@@ -6,14 +6,15 @@
   >
     <template #body>
       <div class="d-flex flex-column">
-        <a
+        <button
           v-for="(chapter, index) in playerChapteringPercent"
           :key="chapter"
-          class="c-hand text-truncate mb-1"
+          class="btn d-flex flex-nowrap align-items-center p-2 mt-1 c-hand text-truncate mb-1 border"
           @click="goToChapter(index)"
         >
-          {{ chapter.startTime + " - " + chapter.title }}
-        </a>
+          <div class="me-auto">{{ index + 1 + " - " + chapter.title }}</div>
+          <div>{{ chapter.startDisplay }}</div>
+        </button>
       </div>
     </template>
     <template #footer>

package/src/components/misc/player/PlayerChaptering.vue

@@ -4,11 +4,14 @@
       class="btn-transparent d-flex align-items-center text-truncate medium-text text-light"
       @click="showChaptering = !showChaptering"
     >
-      <div class="text-truncate">{{ "• " + actualChapter.title }}</div>
+      <div class="text-truncate">
+        {{ actualIndex + 1 + " - " + actualChapter.title }}
+      </div>
       <span class="saooti-right small-text" />
     </button>
     <ChapteringModal v-if="showChaptering" @close="showChaptering = false" />
   </div>
+  <div v-else class="margin-chaptering"></div>
 </template>
 <script lang="ts">
 import { ChapterPercent } from "@/stores/class/chaptering/chaptering";
@@ -27,6 +30,7 @@ export default defineComponent({
   data() {
     return {
       actualChapter: undefined as ChapterPercent | undefined,
+      actualIndex: 0 as number,
       showChaptering: false as boolean,
     };
   },
@@ -57,9 +61,12 @@ export default defineComponent({
             this.isInChapter(progressPercent, this.playerChapteringPercent[i])
           ) {
             this.actualChapter = this.playerChapteringPercent[i];
+            this.actualIndex = i;
             return;
           }
         }
+        this.actualChapter = undefined;
+        this.actualIndex = 0;
       },
     },
   },
@@ -70,3 +77,10 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="scss">
+.octopus-app {
+ .margin-chaptering{
+  height: 23px;
+ }
+}
+</style>

package/src/components/misc/player/PlayerComponent.vue

@@ -153,10 +153,10 @@ export default defineComponent({
     background: #282828 !important;
     font-size: 1rem;
     .medium-text {
-      font-size: 0.75rem;
+      font-size: 0.65rem;
     }
     .small-text {
-      font-size: 0.6rem;
+      font-size: 0.5rem;
     }
 
     @media (max-width: 960px) {

package/src/helper/duration.ts

@@ -13,6 +13,6 @@ export default {
     const hours = Math.floor(totalSeconds / 3600);
     const minutes = Math.floor((totalSeconds - hours * 3600) / 60);
     const seconds = totalSeconds - hours * 3600 - minutes * 60;
-    return (hours > 0? this.formatToString(hours)+separator:"") + this.formatToString(minutes) +separator+ this.formatToString(seconds) + (isLast?separator:separator );
+    return (hours > 0? this.formatToString(hours)+separator:"") + this.formatToString(minutes) +separator+ this.formatToString(seconds) + (isLast?separator:'' );
   },
 };

package/src/stores/PlayerStore.ts

@@ -46,14 +46,14 @@ export const usePlayerStore = defineStore("PlayerStore", {
       if(!this.playerChaptering || 0===this.playerTotal){
         return;
       }
-      const chapteringKeys = Object.keys(this.playerChaptering);
       let chapteringPercent: ChapteringPercent = [];
-      for (let i = 0, len = chapteringKeys.length; i < len; i++) {
+      for (let i = 0, len = this.playerChaptering.chapters.length; i < len; i++) {
         chapteringPercent.push({
-          startTime : chapteringKeys[i],
-          startPercent: (DurationHelper.convertTimestamptoSeconds(chapteringKeys[i]) * 100 ) / (Math.round(this.playerTotal)),
+          startTime : this.playerChaptering.chapters[i].startTime,
+          startDisplay: DurationHelper.formatDuration(this.playerChaptering.chapters[i].startTime, ':', false),
+          startPercent: (this.playerChaptering.chapters[i].startTime * 100 ) / (Math.round(this.playerTotal)),
           endPercent:100,
-          title: this.playerChaptering[chapteringKeys[i]]
+          title: this.playerChaptering.chapters[i].title
         });
       }
       for (let i = 0, len = chapteringPercent.length; i < len; i++) {

package/src/stores/class/chaptering/chaptering.ts

@@ -1,12 +1,23 @@
+//https://github.com/Podcastindex-org/podcast-namespace/blob/main/chapters/jsonChapters.md
 export interface Chaptering {
-  [startTime: string] : string;
+  version: string;
+  chapters: Array<Chapter>;
+}
+
+export interface Chapter{
+  startTime: number;
+  title: string;
+  img?: string;
+  url?:string
 }
 
 export interface ChapterPercent {
-  startTime: string;
+  startTime: number;
+  startDisplay: string;
   startPercent: number;
   endPercent: number;
   title: string;
 }
 
+
 export type ChapteringPercent = Array<ChapterPercent>;