@saooti/octopus-sdk 38.0.16 → 38.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "38.0.16",
+  "version": "38.0.18",
   "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/sharing/ShareButtonsIntern.vue

@@ -18,7 +18,7 @@
             <div :class="button.icon" />
           </a>
         </template>
-        <router-link
+        <!-- <router-link
           v-if="!isPodcastmaker && authenticated && podcast && isProduction"
           :class="getClass('saooti-share')"
           :title="$t('Advanced sharing')"
@@ -26,7 +26,7 @@
             name: 'advancedShare',
             params: { podcastId: podcast.podcastId },
           }"
-        />
+        /> -->
       </div>
     </div>
     <div v-if="podcast || emission || playlist" class="d-flex flex-column me-2">

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"
   >
@@ -28,10 +28,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 {
@@ -67,7 +69,9 @@ export default defineComponent({
           );
           this.targetElement.addEventListener("mouseleave", this.clearData);
         }
-        this.targetElement.addEventListener("click", this.setPopoverData);
+        if (!this.onlyMouse) {
+          this.targetElement.addEventListener("click", this.setPopoverData);
+        }
         this.targetElement.addEventListener("blur", this.clearDataBlur);
       }
     },
@@ -80,7 +84,9 @@ export default defineComponent({
           );
           this.targetElement.removeEventListener("mouseleave", this.clearData);
         }
-        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/ProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="octopus-progress">
+  <div v-if="display" id="test-menu-dropdown" class="octopus-progress">
     <div
       v-if="secondaryProgress"
       class="octopus-progress-bar bg-light"
@@ -48,18 +48,50 @@
     />
     <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 },
@@ -73,7 +105,14 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ["playerMedia"]),
+    ...mapState(usePlayerStore, [
+      "playerMedia",
+      "playerChapteringPercent",
+      "playerStatus",
+    ]),
+    display() {
+      return "STOPPED" !== this.playerStatus;
+    },
   },
   watch: {
     playerMedia: {
@@ -104,4 +143,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,75 @@
+<template>
+  <ClassicModal
+    id-modal="chaptering-modal"
+    :title-modal="$t('Chaptering')"
+    @close="closePopup"
+  >
+    <template #body>
+      <div class="d-flex flex-column">
+        <a
+          v-for="(chapter, index) in playerChapteringPercent"
+          :key="chapter"
+          class="c-hand text-truncate mb-1"
+          @click="goToChapter(index)"
+        >
+          {{ chapter.startTime + " - " + chapter.title }}
+        </a>
+      </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: {},
+  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"]),
+    closePopup(): void {
+      this.$emit("close");
+    },
+    goToChapter(index: number) {
+      if (!this.playerChapteringPercent || !this.audioPlayer) {
+        return;
+      }
+      const seekTime =
+        this.playerTotal *
+        (this.playerChapteringPercent[index].startPercent / 100);
+      if (this.playerPodcast || this.playerLive) {
+        this.playerUpdateSeekTime(seekTime);
+      }
+      this.audioPlayer.currentTime = seekTime;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,72 @@
+<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">{{ "• " + actualChapter.title }}</div>
+      <span class="saooti-right small-text" />
+    </button>
+    <ChapteringModal v-if="showChaptering" @close="showChaptering = false" />
+  </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,
+      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];
+            return;
+          }
+        }
+      },
+    },
+  },
+  methods: {
+    isInChapter(val: number, chapter: ChapterPercent) {
+      return chapter.startPercent <= val && val < chapter.endPercent;
+    },
+  },
+});
+</script>

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
@@ -86,6 +87,7 @@ export default defineComponent({
       comments: [] as Array<CommentPodcast>,
       audioUrlToPlay: "" as string,
       hlsReady: false as boolean,
+      displayWithTimeout: false as boolean,
     };
   },
   computed: {
@@ -104,6 +106,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 +152,12 @@ export default defineComponent({
     transition: height 1s;
     background: #282828 !important;
     font-size: 1rem;
+    .medium-text {
+      font-size: 0.75rem;
+    }
+    .small-text {
+      font-size: 0.6rem;
+    }
 
     @media (max-width: 960px) {
       .d-flex {

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

@@ -24,6 +24,7 @@
         {{ podcastTitle }}
       </div>
     </div>
+    <PlayerChaptering class="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/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:separator );
   },
 };

package/src/locale/de.ts

@@ -350,4 +350,5 @@ export default {
   "Trigger automatic reading if this is possible":"Wenn möglich, automatisches Auslesen auslösen",
   "High version":"Hohe Version",
   "Advanced sharing":"Erweitertes Teilen",
+  "Chaptering":"Kapitelaufteilung",
 }

package/src/locale/en.ts

@@ -350,4 +350,5 @@ export default {
   "Trigger automatic reading if this is possible":"Trigger automatic reading if this is possible",
   "High version":"High version",
   "Advanced sharing":"Advanced sharing",
+  "Chaptering":"Chaptering",
 };

package/src/locale/es.ts

@@ -351,4 +351,5 @@ export default {
   "Trigger automatic reading if this is possible":"Activar la lectura automática si esto es posible",
   "High version":"Versión alta",
   "Advanced sharing":"Reparto adelantado",
+  "Chaptering":"Capítulos",
 }

package/src/locale/fr.ts

@@ -357,4 +357,5 @@ export default {
   "Trigger automatic reading if this is possible":"Déclencher la lecture automatique si celle ci est possible",
   "High version":"Version en hauteur",
   "Advanced sharing":"Partage avancé",
+  "Chaptering":"Chapitrage",
 };

package/src/locale/it.ts

@@ -343,4 +343,5 @@ export default{
   "Trigger automatic reading if this is possible":"Attivare la lettura automatica, se possibile",
   "High version":"Versione alta",
   "Advanced sharing":"Condivisione avanzata",
+  "Chaptering":"Capitolazione",
   };

package/src/locale/sl.ts

@@ -340,4 +340,5 @@ export default {
   "Trigger automatic reading if this is possible":"Sprožite samodejno branje, če je to mogoče",
   "High version":"Visoka različica",
   "Advanced sharing":"Napredno deljenje",
+  "Chaptering":"Poglavje",
 }

package/src/stores/ParamSdkStore.ts

@@ -13,7 +13,7 @@ const state: ParamStore = {
     isProduction: false,
     isContribution: false,
     isRadio: false,
-    ApiUri: "https://api.staging.saooti.org/",
+    ApiUri: "https://api.dev2.saooti.org/",
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -27,8 +27,8 @@ const state: ParamStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: "https://playerbeta.staging.saooti.org/",
-    hlsUri: "https://hls.live.staging.saooti.org/",
+    MiniplayerUri: "https://playerbeta.dev2.saooti.org/",
+    hlsUri: "https://hls.live.dev2.saooti.org/",
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
@@ -80,14 +80,14 @@ const state: ParamStore = {
     userName: "",
   },
   octopusApi: {
-    url: "https://api.staging.saooti.org/",
-    commentsUrl: "https://comments.staging.saooti.org/",
-    imageUrl: "https://imageproxy.staging.saooti.org/",
-    studioUrl: "https://studio.staging.saooti.org/",
-    playerUrl: "https://playerbeta.staging.saooti.org/",
-    speechToTextUrl: "https://speech2text.staging.saooti.org/",
-    radioUrl:"https://radio.staging.saooti.org/",
-    recoUrl: "https://reco.staging.saooti.org/",
+    url: "https://api.dev2.saooti.org/",
+    commentsUrl: "https://comments.dev2.saooti.org/",
+    imageUrl: "https://imageproxy.dev2.saooti.org/",
+    studioUrl: "https://studio.dev2.saooti.org/",
+    playerUrl: "https://playerbeta.dev2.saooti.org/",
+    speechToTextUrl: "https://speech2text.dev2.saooti.org/",
+    radioUrl:"https://radio.dev2.saooti.org/",
+    recoUrl: "https://reco.dev2.saooti.org/",
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },

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,7 @@ interface PlayerState {
   playerTranscript?: Transcript;
   playerLargeVersion: boolean;
   playerVideo: boolean;
+  playerChaptering?: Chaptering;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -36,13 +39,33 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerSeekTime: 0,
     playerLargeVersion: false,
     playerVideo: false,
+    playerChaptering: undefined,
   }),
   getters: {
+    playerChapteringPercent(): ChapteringPercent|undefined{
+      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++) {
+        chapteringPercent.push({
+          startTime : chapteringKeys[i],
+          startPercent: (DurationHelper.convertTimestamptoSeconds(chapteringKeys[i]) * 100 ) / (Math.round(this.playerTotal)),
+          endPercent:100,
+          title: this.playerChaptering[chapteringKeys[i]]
+        });
+      }
+      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 +114,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 +123,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerRadio = undefined;
         this.playerElapsed = 0;
         this.playerVideo = false;
+        this.playerChaptering=undefined;
         return;
       }
       if (
@@ -118,16 +142,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 } };
       }
     },

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

@@ -0,0 +1,12 @@
+export interface Chaptering {
+  [startTime: string] : string;
+}
+
+export interface ChapterPercent {
+  startTime: string;
+  startPercent: number;
+  endPercent: number;
+  title: string;
+}
+
+export type ChapteringPercent = Array<ChapterPercent>;