@saooti/octopus-sdk 38.0.18 → 38.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "38.0.18",
+  "version": "38.0.20",
   "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>
@@ -54,7 +55,10 @@ export default defineComponent({
     this.audioPlayer = document.querySelector("#audio-player");
   },
   methods: {
-    ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
+    ...mapActions(usePlayerStore, [
+      "playerUpdateSeekTime",
+      "playerUpdateElapsed",
+    ]),
     closePopup(): void {
       this.$emit("close");
     },
@@ -65,8 +69,9 @@ export default defineComponent({
       const seekTime =
         this.playerTotal *
         (this.playerChapteringPercent[index].startPercent / 100);
-      if (this.playerPodcast || this.playerLive) {
-        this.playerUpdateSeekTime(seekTime);
+      this.playerUpdateSeekTime(seekTime);
+      if (0 === seekTime) {
+        this.playerUpdateElapsed(0);
       }
       this.audioPlayer.currentTime = seekTime;
     },

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

@@ -4,7 +4,9 @@
       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" />
@@ -27,6 +29,7 @@ export default defineComponent({
   data() {
     return {
       actualChapter: undefined as ChapterPercent | undefined,
+      actualIndex: 0 as number,
       showChaptering: false as boolean,
     };
   },
@@ -57,6 +60,7 @@ export default defineComponent({
             this.isInChapter(progressPercent, this.playerChapteringPercent[i])
           ) {
             this.actualChapter = this.playerChapteringPercent[i];
+            this.actualIndex = i;
             return;
           }
         }

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

@@ -24,7 +24,7 @@
         {{ podcastTitle }}
       </div>
     </div>
-    <PlayerChaptering class="w-100" />
+    <PlayerChaptering class="justify-content-center w-100" />
     <div class="player-grow-large-content">
       <PlayerProgressBar
         v-if="!radioUrl"

package/src/components/mixins/player/playerLogicProgress.ts

@@ -41,7 +41,7 @@ export const playerLogicProgress = defineComponent({
       );
     },
     playerSeekTime() {
-      if (!this.playerSeekTime) {
+      if (undefined===this.playerSeekTime) {
         return;
       }
       if (this.playerPodcast || this.playerLive) {

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++) {
@@ -192,9 +192,11 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerRadio.podcast = podcast;
     },
 
-    playerUpdateElapsed(elapsed: number, total: number) {
+    playerUpdateElapsed(elapsed: number, total?: number) {
       this.playerElapsed = elapsed;
-      this.playerTotal = total;
+      if(total){
+        this.playerTotal = total;
+      }
     },
 
     playerUpdateTranscript(transcript?: Transcript) {

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>;