@saooti/octopus-sdk 38.0.32 → 38.0.34

package/package.json

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

package/src/assets/general.scss

@@ -111,6 +111,7 @@ body{
       margin: 1rem 0;
     }
   }
+
   .flex-super-grow{
     flex-grow: 2;
   }

package/src/assets/progressbar.scss

@@ -20,6 +20,19 @@
       background-color: $octopus-primary-color;
       transition: width 0.6s ease;
     }
+    .octopus-chapter{
+      position: absolute;
+      background: transparent;
+      background-clip: content-box;
+      padding: 0 5px;
+      box-shadow: inset -2px 1px 0px 0px rgb(0 0 0),
+                  inset 2px 1px 0px 0px rgb(0 0 0);
+
+      &:hover{
+        background: rgba(255, 255, 255, 0.4);
+        box-shadow: -4px 1px 0px 0px rgb(0 0 0);
+      }
+    }
     &,.octopus-progress-bar{
       height: 4px;
       @media (max-width: 960px) {

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -15,6 +15,7 @@
     :no-rubriquage-id="noRubriquageId"
     :query="query"
     :podcast-id="podcastId"
+    :last-three-months="lastThreeMonths"
     @update:is-arrow="$emit('update:isArrow', $event)"
   />
   <PodcastSwiperList
@@ -32,6 +33,7 @@
     :rubriquage-id="rubriquageId"
     :no-rubriquage-id="noRubriquageId"
     :query="query"
+    :last-three-months="lastThreeMonths"
     @update:is-arrow="$emit('update:isArrow', $event)"
   />
 </template>
@@ -67,6 +69,7 @@ export default defineComponent({
     noRubriquageId: { default: () => [], type: Array as () => Array<number> },
     query: { default: undefined, type: String },
     podcastId: { default: undefined, type: Number },
+    lastThreeMonths: { default: false, type: Boolean },
   },
   emits: ["update:isArrow"],
   computed: {

package/src/components/display/podcasts/PodcastInlineListClassic.vue

@@ -47,6 +47,7 @@
 </template>
 
 <script lang="ts">
+import dayjs from "dayjs";
 import PodcastInlineListTemplate from "./PodcastInlineListTemplate.vue";
 import octopusApi from "@saooti/octopus-api";
 import domHelper from "../../../helper/dom";
@@ -84,6 +85,7 @@ export default defineComponent({
     noRubriquageId: { default: () => [], type: Array as () => Array<number> },
     query: { default: undefined, type: String },
     podcastId: { default: undefined, type: Number },
+    lastThreeMonths: { default: false, type: Boolean },
   },
   emits: ["update:isArrow"],
 
@@ -225,6 +227,7 @@ export default defineComponent({
           sort: this.popularSort ? "POPULARITY" : "DATE",
           query: this.query,
           includeStatus: ["READY", "PROCESSING"],
+          after: this.popularSort && this.lastThreeMonths ? dayjs().subtract(3, 'months').toISOString(): undefined
         },
         true,
       );

package/src/components/display/podcasts/PodcastSwiperList.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script lang="ts">
+import dayjs from "dayjs";
 import PodcastInlineListTemplate from "./PodcastInlineListTemplate.vue";
 import octopusApi from "@saooti/octopus-api";
 import PodcastItem from "./PodcastItem.vue";
@@ -64,6 +65,7 @@ export default defineComponent({
     rubriquageId: { default: () => [], type: Array as () => Array<number> },
     noRubriquageId: { default: () => [], type: Array as () => Array<number> },
     query: { default: undefined, type: String },
+    lastThreeMonths: { default: false, type: Boolean },
   },
   emits: ["update:isArrow"],
 
@@ -129,6 +131,7 @@ export default defineComponent({
           sort: this.popularSort ? "POPULARITY" : "DATE",
           query: this.query,
           includeStatus: ["READY", "PROCESSING"],
+          after: this.popularSort && this.lastThreeMonths ? dayjs().subtract(3, 'months').toISOString(): undefined
         },
         true,
       );

package/src/components/display/sharing/ShareButtons.vue

@@ -3,7 +3,7 @@
     <div class="d-flex align-items-center justify-content-between">
       <div v-if="!isGarStudent && !noSharing" class="d-flex flex-column me-2">
         <div class="h4 mb-2">
-          {{ $t("SShare in one click") }}
+          {{ $t("Share in one click") }}
         </div>
         <div class="d-flex align-items-center">
           <template v-for="button in arrayShareButtons" :key="button.title">

package/src/components/misc/ClassicPopover.vue

@@ -5,7 +5,7 @@
     ref="popover"
     tabindex="0"
     class="octopus-popover"
-    :class="onlyClick ? 'octopus-dropdown' : ''"
+    :class="[onlyClick ? 'octopus-dropdown' : '', popoverClass]"
     :style="positionInlineStyle"
     @blur="clearDataBlur"
     @mouseenter="overPopover=true"
@@ -30,10 +30,12 @@ export default defineComponent({
     target: { type: String, required: true },
     disable: { type: Boolean, default: false },
     onlyClick: { type: Boolean, default: false },
+    onlyMouse: { type: Boolean, default: false },
     isFixed: { type: Boolean, default: false },
     relativeClass: { type: String, default: undefined },
     leftPos: { type: Boolean, default: false },
     topPos: { type: Boolean, default: false },
+    popoverClass: { type: String, default: undefined },
   },
   data() {
     return {
@@ -70,7 +72,9 @@ export default defineComponent({
           );
           this.targetElement.addEventListener("mouseleave", this.clearDataTimeout);
         }
-        this.targetElement.addEventListener("click", this.setPopoverData);
+        if (!this.onlyMouse) {
+          this.targetElement.addEventListener("click", this.setPopoverData);
+        }
         this.targetElement.addEventListener("blur", this.clearDataBlur);
       }
     },
@@ -83,7 +87,9 @@ export default defineComponent({
           );
           this.targetElement.removeEventListener("mouseleave", this.clearDataTimeout);
         }
-        this.targetElement.removeEventListener("click", this.setPopoverData);
+        if (!this.onlyMouse) {
+          this.targetElement.removeEventListener("click", this.setPopoverData);
+        }
         this.targetElement.addEventListener("blur", this.clearDataBlur);
       }
     },

package/src/components/misc/HomeDropdown.vue

@@ -60,7 +60,7 @@
           </template>
         </template>
         <hr />
-        <a class="octopus-dropdown-item" href="/sso/logout" realLink="true">
+        <a class="octopus-dropdown-item c-hand" @click="logoutFunction" >
           {{ $t("Logout") }}
         </a>
       </template>
@@ -72,6 +72,7 @@
 </template>
 
 <script lang="ts">
+import crudApi from "@/api/classicCrud";
 import { state } from "../../stores/ParamSdkStore";
 import ClassicPopover from "../misc/ClassicPopover.vue";
 import { useAuthStore } from "@/stores/AuthStore";
@@ -148,8 +149,17 @@ export default defineComponent({
     },
   },
   methods:{
+    async logoutFunction(){
+      try {
+        await crudApi.postData(4, '/logout', undefined);
+        await this.$router.push({ path: '/' });
+        location.reload();
+      } catch (error) {
+        //Do nothing
+      }
+    },
     goToAdministration(){
-      if("homePriv" !== this.$route.name){
+      if("backoffice" !== this.$route.name){
         this.$router.push("/main/priv/backoffice");
       }else if (window.history.length > 1) {
         this.$router.go(-1);

package/src/components/misc/ProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="octopus-progress">
+  <div v-if="!inPlayer || display" id="test-menu-dropdown" class="octopus-progress">
     <div
       v-if="secondaryProgress"
       class="octopus-progress-bar bg-light"
@@ -48,23 +48,56 @@
     />
     <div
       v-if="isProgressCursor"
-      class="progress-bar-cursor"
+      class="octopus-progress-bar-cursor"
       :style="'left:' + mainProgress + '%'"
     />
+    <template v-if="playerChapteringPercent">
+      <template v-for="chapter in playerChapteringPercent" :key="chapter">
+        <div
+          :id="'chapter-' + chapter.startPercent"
+          class="octopus-progress-bar octopus-chapter"
+          role="progressbar"
+          aria-valuenow="0"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :style="{
+            left: chapter.startPercent + '%',
+            right: 100 - chapter.endPercent + '%',
+          }"
+        />
+        <Teleport to="#octopus-player-component">
+          <ClassicPopover
+            :target="'chapter-' + chapter.startPercent"
+            :is-fixed="true"
+            relative-class="player-container"
+            :only-mouse="true"
+            popover-class="octopus-small-popover"
+            :content="chapter.title"
+          />
+        </Teleport>
+      </template>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 export default defineComponent({
   name: "ProgressBar",
+  components: {
+    ClassicPopover,
+  },
   props: {
     alertBar: { default: undefined, type: Number },
     mainProgress: { default: 0, type: Number },
     secondaryProgress: { default: 0, type: Number },
     isProgressCursor: { default: false, type: Boolean },
+    inPlayer: { default: false, type: Boolean },
   },
   data() {
     return {
@@ -73,7 +106,14 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ["playerMedia"]),
+    ...mapState(usePlayerStore, [
+      "playerMedia",
+      "playerChapteringPercent",
+      "playerStatus",
+    ]),
+    display() {
+      return "STOPPED" !== this.playerStatus;
+    },
   },
   watch: {
     playerMedia: {
@@ -104,4 +144,15 @@ export default defineComponent({
 
 <style lang="scss">
 @import "../../assets/progressbar.scss";
+.octopus-app .player-container {
+  .octopus-small-popover {
+    font-size: 0.7rem;
+    background: #282828;
+    color: white;
+    border: 0;
+    .p-2 {
+      padding: 0.2rem !important;
+    }
+  }
+}
 </style>

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

@@ -0,0 +1,95 @@
+<template>
+  <ClassicModal
+    id-modal="chaptering-modal"
+    :title-modal="$t('Chaptering')"
+    @close="closePopup"
+  >
+    <template #body>
+      <div class="d-flex flex-column">
+        <button
+          v-for="(chapter, index) in playerChapteringPercent"
+          :key="chapter"
+          class="btn d-flex flex-nowrap align-items-center p-2 mt-1 c-hand text-truncate mb-1"
+          :class="actualChapter === index ? 'chapter-selected':'border'"
+          @click="goToChapter(index)"
+        >
+          <div class="d-flex align-items-center me-auto">
+            <svg v-if="actualChapter === index" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-soundwave" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5"/>
+            </svg>
+            <div v-else>{{ index + 1 }}</div>
+            <div class="ms-2">{{ "- " + chapter.title }}</div>
+          </div>
+          <div>{{ chapter.startDisplay }}</div>
+        </button>
+      </div>
+    </template>
+    <template #footer>
+      <button class="btn m-1" @click="closePopup">
+        {{ $t("Close") }}
+      </button>
+    </template>
+  </ClassicModal>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import ClassicModal from "../modal/ClassicModal.vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ChapteringModal",
+  components: {
+    ClassicModal,
+  },
+  props: {actualChapter: {default: -1, type: Number}},
+  emits: ["close"],
+  data() {
+    return {
+      audioPlayer: null as HTMLAudioElement | null,
+    };
+  },
+  computed: {
+    ...mapState(usePlayerStore, [
+      "playerPodcast",
+      "playerLive",
+      "playerChapteringPercent",
+      "playerTotal",
+      "playerElapsed",
+    ]),
+  },
+  created() {
+    this.audioPlayer = document.querySelector("#audio-player");
+  },
+  methods: {
+    ...mapActions(usePlayerStore, [
+      "playerUpdateSeekTime",
+      "playerUpdateElapsed",
+    ]),
+    closePopup(): void {
+      this.$emit("close");
+    },
+    goToChapter(index: number) {
+      if (!this.playerChapteringPercent || !this.audioPlayer) {
+        return;
+      }
+      const seekTime =
+        this.playerTotal *
+        (this.playerChapteringPercent[index].startPercent / 100);
+      this.playerUpdateSeekTime(seekTime);
+      if (0 === seekTime) {
+        this.playerUpdateElapsed(0);
+      }
+      this.audioPlayer.currentTime = seekTime;
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-app {
+ .chapter-selected{
+    border: $octopus-primary-color 3px solid;
+ }
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+  <div v-if="actualChapter" class="d-flex mb-1">
+    <button
+      class="btn-transparent d-flex align-items-center text-truncate medium-text text-light"
+      @click="showChaptering = !showChaptering"
+    >
+      <div class="text-truncate">
+        {{ actualIndex + 1 + " - " + actualChapter.title }}
+      </div>
+      <span class="saooti-right small-text" />
+    </button>
+    <ChapteringModal v-if="showChaptering" @close="showChaptering = false" :actual-chapter="actualIndex" />
+  </div>
+  <div v-else-if="playerChapteringPercent" class="margin-chaptering"></div>
+</template>
+<script lang="ts">
+import { ChapterPercent } from "@/stores/class/chaptering/chaptering";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ChapteringModal = defineAsyncComponent(
+  () => import("./ChapteringModal.vue"),
+);
+export default defineComponent({
+  name: "PlayerChaptering",
+
+  components: {
+    ChapteringModal,
+  },
+  data() {
+    return {
+      actualChapter: undefined as ChapterPercent | undefined,
+      actualIndex: -1 as number,
+      showChaptering: false as boolean,
+    };
+  },
+  computed: {
+    ...mapState(usePlayerStore, ["playerChapteringPercent", "playerElapsed"]),
+  },
+  watch: {
+    playerElapsed: {
+      immediate: true,
+      handler() {
+        if (!this.playerChapteringPercent) {
+          this.actualChapter = undefined;
+          return;
+        }
+        const progressPercent = (this.playerElapsed ?? 0) * 100;
+        if (
+          this.actualChapter &&
+          this.isInChapter(progressPercent, this.actualChapter)
+        ) {
+          return;
+        }
+        for (
+          let i = 0, len = this.playerChapteringPercent.length;
+          i < len;
+          i++
+        ) {
+          if (
+            this.isInChapter(progressPercent, this.playerChapteringPercent[i])
+          ) {
+            this.actualChapter = this.playerChapteringPercent[i];
+            this.actualIndex = i;
+            return;
+          }
+        }
+        this.actualChapter = undefined;
+        this.actualIndex = -1;
+      },
+    },
+  },
+  methods: {
+    isInChapter(val: number, chapter: ChapterPercent) {
+      return Math.floor(chapter.startPercent) <= val && val < Math.floor(chapter.endPercent);
+    },
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app {
+ .margin-chaptering{
+  height: 23px;
+ }
+}
+</style>

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

@@ -34,6 +34,7 @@
           {{ playedTime }} / {{ totalTime }}
         </div>
       </div>
+      <PlayerChaptering />
       <PlayerProgressBar
         v-if="!radioUrl"
         :show-timeline="showTimeline"
@@ -69,6 +70,7 @@ import { playerDisplay } from "../../mixins/player/playerDisplay";
 import imageProxy from "../../mixins/imageProxy";
 import ClassicSpinner from "../ClassicSpinner.vue";
 import PlayerTimeline from "./PlayerTimeline.vue";
+import PlayerChaptering from "./PlayerChaptering.vue";
 import { defineAsyncComponent, defineComponent } from "vue";
 const RadioProgressBar = defineAsyncComponent(
   () => import("./radio/RadioProgressBar.vue"),
@@ -84,6 +86,7 @@ export default defineComponent({
     RadioProgressBar,
     PlayerTimeline,
     ClassicSpinner,
+    PlayerChaptering,
   },
   mixins: [playerDisplay, imageProxy],
 

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

@@ -1,11 +1,12 @@
 <template>
   <div
+    id="octopus-player-component"
     class="player-container"
     :class="playerVideo ? 'player-video' : ''"
     :style="{ height: playerHeight }"
     @transitionend="onHidden"
   >
-    <template v-if="display">
+    <template v-if="displayWithTimeout">
       <PlayerVideo v-if="playerVideo" />
       <template v-else>
         <audio
@@ -19,6 +20,7 @@
           @error="onError"
           @seeked="onSeeked"
           @pause="onPause"
+          @loadedmetadata="checkDelaytWithStitching"
         />
         <PlayerCompact
           v-if="!playerLargeVersion"
@@ -86,6 +88,7 @@ export default defineComponent({
       comments: [] as Array<CommentPodcast>,
       audioUrlToPlay: "" as string,
       hlsReady: false as boolean,
+      displayWithTimeout: false as boolean,
     };
   },
   computed: {
@@ -104,6 +107,15 @@ export default defineComponent({
     playerHeight(): void {
       this.$emit("hide", 0 === this.playerHeight);
     },
+    display(): void {
+      if (this.display) {
+        this.displayWithTimeout = this.display;
+      } else {
+        setTimeout(() => {
+          this.displayWithTimeout = this.display;
+        }, 3000);
+      }
+    },
   },
 
   methods: {
@@ -141,6 +153,12 @@ export default defineComponent({
     transition: height 1s;
     background: #282828 !important;
     font-size: 1rem;
+    .medium-text {
+      font-size: 0.65rem;
+    }
+    .small-text {
+      font-size: 0.5rem;
+    }
 
     @media (max-width: 960px) {
       .d-flex {

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

@@ -24,6 +24,7 @@
         {{ podcastTitle }}
       </div>
     </div>
+    <PlayerChaptering class="justify-content-center w-100" />
     <div class="player-grow-large-content">
       <PlayerProgressBar
         v-if="!radioUrl"
@@ -86,6 +87,7 @@ import ClassicSpinner from "../ClassicSpinner.vue";
 import { playerDisplay } from "../../mixins/player/playerDisplay";
 import imageProxy from "../../mixins/imageProxy";
 import PlayerTimeline from "./PlayerTimeline.vue";
+import PlayerChaptering from "./PlayerChaptering.vue";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { CommentPodcast } from "@/stores/class/general/comment";
 const RadioProgressBar = defineAsyncComponent(
@@ -106,6 +108,7 @@ export default defineComponent({
     PlayerTimeline,
     ClassicSpinner,
     RadioHistory,
+    PlayerChaptering,
   },
   mixins: [playerDisplay, imageProxy],
 

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

@@ -5,6 +5,7 @@
     :secondary-progress="percentLiveProgress"
     :alert-bar="displayAlertBar ? durationLivePosition : undefined"
     :class="classProgress"
+    :inPlayer="true"
     @mouseup="seekTo"
   />
   <CommentPlayer

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/components/mixins/player/playerTranscript.ts

@@ -2,12 +2,33 @@ import octopusApi from "@saooti/octopus-api";
 import { defineComponent } from "vue";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
+import { AdserverOtherEmission } from "@/stores/class/adserver/adserverOtherEmission";
 export const playerTranscript = defineComponent({
   computed: {
-    ...mapState(usePlayerStore, ["playerTranscript", "playerPodcast"]),
+    ...mapState(usePlayerStore, ["playerTranscript", "playerPodcast", 'playerDelayStitching']),
   },
   methods: {
-    ...mapActions(usePlayerStore, ["playerUpdateTranscript"]),
+    ...mapActions(usePlayerStore, ["playerUpdateTranscript", "playerUpdateDelayStitching"]),
+    async checkDelaytWithStitching(){
+      this.playerUpdateDelayStitching(0);
+      const audioPlayer = document.querySelector("#audio-player") as HTMLAudioElement;
+      if (!this.playerTranscript || !audioPlayer || !this.playerPodcast ||
+        audioPlayer.duration <= this.playerPodcast.duration / 1000 + 5) 
+      {
+        return;
+      }
+      let adserverConfig = await octopusApi.fetchDataPublic<AdserverOtherEmission>(0,`ad/test/podcast/${this.playerPodcast.podcastId}`);
+      const doubletsLength = adserverConfig.config.doublets.length;
+      if(1=== doubletsLength &&  "pre" === adserverConfig.config.doublets[0].timing.insertion){
+        this.playerUpdateDelayStitching( audioPlayer.duration - (this.playerPodcast.duration / 1000));
+      }else if(0===doubletsLength || 1=== doubletsLength &&  "post" === adserverConfig.config.doublets[0].timing.insertion){
+        return;
+      }else{
+        // todo remove chaptering
+        this.playerUpdateChaptering();
+        this.playerUpdateTranscript();
+      }
+    },
     async getTranscription(): Promise<void> {
       if (!this.playerPodcast) {
         this.playerUpdateTranscript();
@@ -20,10 +41,13 @@ export const playerTranscript = defineComponent({
       const arrayTranscript = this.parseSrt(result);
       const actualText =
         arrayTranscript?.[0]?.startTime === 0 ? arrayTranscript[0].text : "";
+      if(!arrayTranscript){
+        return;
+      }
       this.playerUpdateTranscript({
         actual: 0,
         actualText: actualText,
-        value: arrayTranscript,
+        value: arrayTranscript
       });
     },
     parseSrt(transcript: string) {
@@ -52,23 +76,30 @@ export const playerTranscript = defineComponent({
       return +a[0] * 60 * 60 + +a[1] * 60 + +parseFloat(a[2]);
     },
     onTimeUpdateTranscript(currentTime: number) {
+      if(!this.playerTranscript || !this.playerTranscript.value.length){
+        return;
+      }
+      const startTime = (this.playerTranscript.value[this.playerTranscript.actual]?.startTime ?? 0) + this.playerDelayStitching;
+      if (startTime <= currentTime) {
+        this.playerTranscript.actualText = this.playerTranscript.value[this.playerTranscript?.actual]?.text ??"";
+      }
       if (
-        this.playerTranscript &&
-        (this.playerTranscript?.value[this.playerTranscript?.actual]?.endTime ??
-          Infinity) < currentTime
+        (this.playerTranscript.value[this.playerTranscript.actual]?.endTime ??
+          Infinity) + this.playerDelayStitching < currentTime
       ) {
         this.playerTranscript.actual += 1;
         this.playerTranscript.actualText =
-          this.playerTranscript?.value[this.playerTranscript?.actual].text ??
+          this.playerTranscript?.value[this.playerTranscript.actual]?.text ??
           "";
       }
     },
+    
     onSeekedTranscript(currentTime: number) {
       if (this.playerTranscript) {
         let newActual = 0;
         while (
           currentTime >
-          (this.playerTranscript.value[newActual]?.endTime ?? Infinity)
+          (this.playerTranscript.value[newActual]?.endTime ?? Infinity) + this.playerDelayStitching
         ) {
           newActual += 1;
         }

package/src/components/pages/Error403Page.vue

@@ -20,15 +20,24 @@
       />
     </div>
 
+    <button
+      v-if="authenticated"
+      class="btn btn-primary"
+      @click="logoutFunction"
+
+      >{{ authText }}</button
+    >
     <a
+      v-else
       class="btn btn-primary"
-      :href="authenticated ? '/sso/logout' : '/sso/login'"
+      href="/sso/login"
       >{{ authText }}</a
     >
   </div>
 </template>
 
 <script lang="ts">
+import crudApi from "@/api/classicCrud";
 import { state } from "../../stores/ParamSdkStore";
 import { useGeneralStore } from "@/stores/GeneralStore";
 import { mapState } from "pinia";
@@ -47,6 +56,17 @@ export default defineComponent({
   mounted() {
     document.title = this.metaTitle;
   },
+  methods:{
+    async logoutFunction(){
+      try {
+        await crudApi.postData(4, '/logout', undefined);
+        await this.$router.push({ path: '/' });
+        location.reload();
+      } catch (error) {
+        //Do nothing
+      }
+    }
+  }
 });
 </script>
 <style lang="scss">

package/src/components/pages/RadioPage.vue

@@ -91,7 +91,8 @@ export default defineComponent({
   computed: {
     editRight(): boolean {
       return (
-        (true === this.authenticated && true === state.generalParameters.isRadio && 
+        (true === this.authenticated &&
+          true === state.generalParameters.isRadio &&
           this.myOrganisationId === this.radio?.organisationId) ||
         true === state.generalParameters.isAdmin
       );

package/src/helper/duration.ts

@@ -1,20 +1,18 @@
 export default {
+  convertTimestamptoSeconds(timestamp: string){
+    const [hours, minutes, seconds] = timestamp.split(':');
+    return Number(hours) * 60 * 60 + Number(minutes) * 60 + Number(seconds);
+  },
   formatToString(value: number) {
     if (value < 10) {
       return "0" + value;
     }
     return value.toString();
   },
-  formatDuration(totalSeconds: number): string {
+  formatDuration(totalSeconds: number, separator="'", isLast=true): string {
     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) + "'" : "") +
-      this.formatToString(minutes) +
-      "'" +
-      this.formatToString(seconds) +
-      "''"
-    );
+    return (hours > 0? this.formatToString(hours)+separator:"") + this.formatToString(minutes) +separator+ this.formatToString(seconds) + (isLast?separator:'' );
   },
 };

package/src/locale/de.ts

@@ -350,4 +350,5 @@ export default {
   "High version":"Hohe Version",
   "Generate a social media post (with AI)":"Einen Social-Media-Beitrag erstellen (mit KI)",
   "Share in one click":"Mit einem Klick teilen",
+  "Chaptering":"Kapitelaufteilung",
 }

package/src/locale/en.ts

@@ -350,4 +350,5 @@ export default {
   "High version":"High version",
   "Generate a social media post (with AI)":"Generate a social media post (with AI)",
   "Share in one click":"Share in one click",
+  "Chaptering":"Chaptering",
 };

package/src/locale/es.ts

@@ -351,4 +351,5 @@ export default {
   "High version":"Versión alta",
   "Generate a social media post (with AI)":"Generar una publicación en las redes sociales (con IA)",
   "Share in one click":"Comparte en un clic",
+  "Chaptering":"Capítulos",
 }

package/src/locale/fr.ts

@@ -357,4 +357,5 @@ export default {
   "High version":"Version en hauteur",
   "Generate a social media post (with AI)":"Générer un post réseaux sociaux (avec IA)",
   "Share in one click":"Partager en un clic",
+  "Chaptering":"Chapitrage",
 };

package/src/locale/it.ts

@@ -343,4 +343,5 @@ export default{
   "High version":"Versione alta",
   "Generate a social media post (with AI)":"Genera un post sui social media (con AI)",
   "Share in one click":"Condividi con un clic",
+  "Chaptering":"Capitolazione",
   };

package/src/locale/sl.ts

@@ -340,4 +340,5 @@ export default {
   "High version":"Visoka različica",
   "Generate a social media post (with AI)":"Ustvarite objavo v družabnem omrežju (z AI)",
   "Share in one click":"Delite z enim klikom",
+  "Chaptering":"Poglavje",
 }

package/src/stores/PlayerStore.ts

@@ -3,6 +3,8 @@ import { Media } from "@/stores/class/general/media";
 import { MediaRadio, Radio } from "@/stores/class/general/player";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineStore } from "pinia";
+import { Chaptering, ChapteringPercent } from "./class/chaptering/chaptering";
+import octopusApi from "@saooti/octopus-api";
 interface Transcript {
   actual: number;
   actualText: string;
@@ -22,6 +24,8 @@ interface PlayerState {
   playerTranscript?: Transcript;
   playerLargeVersion: boolean;
   playerVideo: boolean;
+  playerChaptering?: Chaptering;
+  playerDelayStitching: number;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -36,13 +40,35 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerSeekTime: 0,
     playerLargeVersion: false,
     playerVideo: false,
+    playerChaptering: undefined,
+    playerDelayStitching:0,
   }),
   getters: {
+    playerChapteringPercent(): ChapteringPercent|undefined{
+      if(!this.playerChaptering || 0===this.playerTotal){
+        return;
+      }
+      let chapteringPercent: ChapteringPercent = [];
+      for (let i = 0, len = this.playerChaptering.chapters.length; i < len; i++) {
+        const startTimeWithDelay = this.playerChaptering.chapters[i].startTime + Math.floor(this.playerDelayStitching);
+        chapteringPercent.push({
+          startTime : startTimeWithDelay,
+          startDisplay: DurationHelper.formatDuration(startTimeWithDelay, ':', false),
+          startPercent: (startTimeWithDelay * 100 ) / (Math.round(this.playerTotal)),
+          endPercent:100,
+          title: this.playerChaptering.chapters[i].title
+        });
+      }
+      for (let i = 0, len = chapteringPercent.length; i < len; i++) {
+        chapteringPercent[i].endPercent = chapteringPercent[i].startPercent + ((chapteringPercent[i+1]?.startPercent ?? 100) - chapteringPercent[i].startPercent);
+      }
+      return chapteringPercent;
+    },
     playerHeight() {
       if ("STOPPED" === this.playerStatus) return 0;
       if (this.playerVideo) return "0px"/* "281px" */;
       if (this.playerLargeVersion) return "27rem";
-      if (window.innerWidth > 450) return "5rem";
+      if (window.innerWidth > 450) return "6rem";
       return "3.5rem";
     },
     playedTime(): string {
@@ -91,7 +117,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     },
   },
   actions: {
-    playerPlay(param?: any, isVideo = false) {
+    async playerPlay(param?: any, isVideo = false) {
       if (!param) {
         this.playerStatus = "STOPPED";
         this.playerPodcast = undefined;
@@ -100,6 +126,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerRadio = undefined;
         this.playerElapsed = 0;
         this.playerVideo = false;
+        this.playerChaptering=undefined;
         return;
       }
       if (
@@ -118,16 +145,26 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerRadio = undefined;
       this.playerVideo = isVideo;
       this.playerElapsed = 0;
+      this.playerChaptering=undefined;
       if (
         param.conferenceId &&
         (!param.podcastId || param.processingStatus !== "READY")
       ) {
         this.playerLive = param;
-      } else if (param.podcastId) {
+        return;
+      }
+      if (param.podcastId) {
         this.playerPodcast = param;
-      } else if (param.mediaId) {
+        if(param.annotations?.chaptering){
+          this.playerChaptering =  await octopusApi.fetchDataPublic<Chaptering>(4, (param.annotations.chaptering as string));
+        }
+        return;
+      }
+      if (param.mediaId) {
         this.playerMedia = param;
-      } else if (param.canalId) {
+        return;
+      }
+      if (param.canalId) {
         this.playerRadio = { ...param, ...{ isInit: false } };
       }
     },
@@ -158,16 +195,24 @@ 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) {
       this.playerTranscript = transcript;
     },
+    playerUpdateDelayStitching(delay: number){
+      this.playerDelayStitching = delay;
+    },
     playerUpdateLargeVersion(largeVersion: boolean) {
       this.playerLargeVersion = largeVersion;
     },
+    playerUpdateChaptering(chaptering?: Chaptering){
+      this.playerChaptering = chaptering;
+    }
   },
 });

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

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