@saooti/octopus-sdk 37.0.28 → 37.0.30

package/package.json

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

package/src/components/misc/modal/ClassicModal.vue

@@ -1,25 +1,34 @@
 <template>
-  <div :id="idModal" class="octopus-modal">
-    <div class="octopus-modal-backdrop" />
-    <div class="octopus-modal-dialog">
+  <div :id="idModal" class="octopus-modal" :class="onlyHeader? 'octopus-only-header-modal':''">
+    <div class="octopus-modal-backdrop"/>
+    <div class="octopus-modal-dialog" >
       <div class="octopus-modal-content">
         <div class="octopus-modal-header">
           <h5 cclass="octopus-modal-title">
             {{ titleModal }}
           </h5>
-          <button
-            v-if="closable"
-            :ref="closable ? 'focusElement' : ''"
-            type="button"
-            class="btn-transparent text-light saooti-remove"
-            title="Close"
-            @click="$emit('close')"
-          />
+          <div class="d-flex align-items-center">
+            <button
+              v-if="canBeReduced"
+              class="btn-transparent text-light"
+              :class="onlyHeader? 'saooti-down':'saooti-up'"
+              :title="onlyHeader? $t('Enlarge'):$t('Reduce')"
+              @click="onlyHeader = !onlyHeader"
+            />
+            <button
+              v-if="closable"
+              :ref="closable ? 'focusElement' : ''"
+              type="button"
+              class="btn-transparent text-light saooti-remove"
+              :title="$t('Close')"
+              @click="$emit('close')"
+            />
+          </div>
         </div>
-        <div class="octopus-modal-body">
+        <div v-show="!onlyHeader" class="octopus-modal-body">
           <slot name="body" />
         </div>
-        <div class="octopus-modal-footer">
+        <div v-show="!onlyHeader" class="octopus-modal-footer">
           <slot name="footer" />
         </div>
       </div>
@@ -35,8 +44,14 @@ export default defineComponent({
     idModal: { default: undefined, type: String },
     titleModal: { default: undefined, type: String },
     closable: { default: true, type: Boolean },
+    canBeReduced: { default: false, type: Boolean },
   },
   emits: ["close"],
+  data() {
+    return {
+      onlyHeader: false as boolean,
+    };
+  },
   mounted() {
     (this.$refs.focusElement as HTMLElement)?.focus();
   },
@@ -67,6 +82,9 @@ export default defineComponent({
     height: 100vh;
     background-color: black;
   }
+  .octopus-modal.octopus-only-header-modal .octopus-modal-backdrop {
+    opacity: 0.1;
+  }
 
   .octopus-modal-dialog {
     position: relative;
@@ -103,8 +121,8 @@ export default defineComponent({
     padding: 1rem;
   }
 
-  .octopus-modal-dialog,
-  .octopus-modal-content {
+  .octopus-modal:not(.octopus-only-header-modal) .octopus-modal-dialog,
+  .octopus-modal:not(.octopus-only-header-modal) .octopus-modal-content {
     min-height: 300px;
   }
   .octopus-modal-content {

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

@@ -43,7 +43,6 @@
         :duration-live-position="durationLivePosition"
         :player-error="playerError"
         :listen-time="listenTime"
-        @update-not-listen-time="$emit('update:notListenTime', $event)"
       />
       <RadioProgressBar v-else />
     </div>
@@ -90,7 +89,6 @@ export default defineComponent({
 
   props: {
     playerError: { default: false, type: Boolean },
-    notListenTime: { default: 0, type: Number },
     comments: { default: () => [], type: Array as () => Array<CommentPodcast> },
     displayAlertBar: { default: false, type: Boolean },
     percentLiveProgress: { default: 0, type: Number },
@@ -99,7 +97,7 @@ export default defineComponent({
     hlsReady: { default: false, type: Boolean },
   },
 
-  emits: ["stopPlayer", "update:notListenTime", "changePlayerLargeVersion"],
+  emits: ["stopPlayer", "changePlayerLargeVersion"],
   data() {
     return {
       showTimeline: false as boolean,

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

@@ -22,7 +22,6 @@
         />
         <PlayerCompact
           v-if="!playerLargeVersion"
-          v-model:notListenTime="notListenTime"
           :player-error="playerError"
           :comments="comments"
           :display-alert-bar="displayAlertBar"
@@ -35,7 +34,6 @@
         />
         <PlayerLarge
           v-else
-          v-model:notListenTime="notListenTime"
           :player-error="playerError"
           :comments="comments"
           :display-alert-bar="displayAlertBar"

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

@@ -36,7 +36,6 @@
         :duration-live-position="durationLivePosition"
         :player-error="playerError"
         :listen-time="listenTime"
-        @update-not-listen-time="$emit('update:notListenTime', $event)"
       />
       <RadioProgressBar v-else />
       <div class="d-flex justify-content-between">
@@ -112,7 +111,6 @@ export default defineComponent({
 
   props: {
     playerError: { default: false, type: Boolean },
-    notListenTime: { default: 0, type: Number },
     comments: { default: () => [], type: Array as () => Array<CommentPodcast> },
     displayAlertBar: { default: false, type: Boolean },
     percentLiveProgress: { default: 0, type: Number },
@@ -121,7 +119,7 @@ export default defineComponent({
     hlsReady: { default: false, type: Boolean },
   },
 
-  emits: ["stopPlayer", "update:notListenTime", "changePlayerLargeVersion"],
+  emits: ["stopPlayer", "changePlayerLargeVersion"],
   data() {
     return {
       showTimeline: false as boolean,

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

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
 import ProgressBar from "../ProgressBar.vue";
 import { CommentPodcast } from "@/stores/class/general/comment";
-import { usePlayerStore } from "@/stores/PlayerStore";
-import { mapState } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const CommentPlayer = defineAsyncComponent(
   () => import("../../display/comments/CommentPlayer.vue"),
@@ -40,7 +40,6 @@ export default defineComponent({
     playerError: { default: false, type: Boolean },
     listenTime: { default: 0, type: Number },
   },
-  emits: ["updateNotListenTime"],
 
   computed: {
     ...mapState(usePlayerStore, [
@@ -58,6 +57,7 @@ export default defineComponent({
   },
 
   methods: {
+    ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
     seekTo(event: MouseEvent): void {
       const audioPlayer: HTMLAudioElement | null =
         document.querySelector("#audio-player");
@@ -74,7 +74,7 @@ export default defineComponent({
     },
     isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
       if (this.playerPodcast || this.playerLive) {
-        this.$emit("updateNotListenTime", seekTime - this.listenTime);
+        this.playerUpdateSeekTime(seekTime);
       }
       audioPlayer.currentTime = seekTime;
     },

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

@@ -10,6 +10,9 @@
   </div>
 </template>
 <script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapActions } from "pinia";
+import { playerLogicProgress } from "../../mixins/player/playerLogicProgress";
 import videojs, { VideoJsPlayer } from "video.js";
 import qualitySelector from "videojs-hls-quality-selector";
 import qualityLevels from "videojs-contrib-quality-levels";
@@ -26,7 +29,7 @@ export default defineComponent({
   props: {
     hlsUrl: { default: "", type: String },
   },
-
+  mixins: [playerLogicProgress],
   emits: ["changeValid"],
   data() {
     return {
@@ -34,7 +37,13 @@ export default defineComponent({
       useVideoSrc: false as boolean,
       player: undefined as VideoJsPlayer | undefined,
       playing: false as boolean,
+      isPaused: false as boolean,
       stalledTimout: undefined as ReturnType<typeof setTimeout> | undefined,
+      //playerLive mixins
+      downloadId: null as string | null,
+      listenTime: 0 as number,
+      notListenTime: 0 as number,
+      lastSend: 0 as number,
     };
   },
   computed: {
@@ -68,10 +77,10 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.playLive();
     this.useVideoSrc =
       "" !== this.videoElement.canPlayType("application/vnd.apple.mpegurl") &&
       !navigator.userAgent.includes("Android");
+    this.playLive();
   },
 
   beforeUnmount() {
@@ -81,8 +90,13 @@ export default defineComponent({
   },
 
   methods: {
+     ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
     definedStalledTimeout() {
+      this.isPaused = false;
       this.stalledTimout = setTimeout(() => {
+        if(this.isPaused){
+          return;
+        }
         this.videoClean();
         this.playLive();
       }, 5000);
@@ -90,6 +104,7 @@ export default defineComponent({
     async playLive(): Promise<void> {
       clearTimeout(this.stalledTimout);
       this.definedStalledTimeout();
+      await this.initLiveDownloadId();
       if (this.useVideoSrc) {
         this.playLiveIos();
         return;
@@ -102,10 +117,6 @@ export default defineComponent({
           this.playing = true;
         },
       );
-      this.player.on("timeupdate", () => {
-        clearTimeout(this.stalledTimout);
-        this.definedStalledTimeout();
-      });
       this.player.on("error", (error) => {
         this.stopLive();
         if (error.description && error.description.includes("403")) {
@@ -114,6 +125,20 @@ export default defineComponent({
           this.errorPlay = this.$t("Podcast play error");
         }
       });
+      this.player.on('seeking', () => {
+        this.playerUpdateSeekTime(this.player?.currentTime()??0);
+      });
+      this.player.on('pause', () => {
+        this.isPaused=true;
+      });
+      this.player.on("timeupdate", () => {
+        clearTimeout(this.stalledTimout);
+        this.definedStalledTimeout();
+        this.onTimeUpdateVideo();
+      });
+      this.player.on('seeking', () => {
+        this.playerUpdateSeekTime(this.player?.currentTime()??0);
+      });
     },
     async playLiveIos(): Promise<void> {
       this.videoElement.onloadedmetadata = () => {
@@ -136,6 +161,13 @@ export default defineComponent({
       this.videoElement.ontimeupdate = async () => {
         clearTimeout(this.stalledTimout);
         this.definedStalledTimeout();
+        this.onTimeUpdateVideo();
+      };
+      this.videoElement.onpause = async () => {
+        this.isPaused=true;
+      };
+      this.videoElement.onseeking = async () => {
+        this.playerUpdateSeekTime(this.videoElement.currentTime);
       };
       this.videoElement.src = this.hlsUrl;
     },
@@ -165,8 +197,14 @@ export default defineComponent({
       this.errorPlay = "";
       this.videoClean();
       this.playing = false;
+      this.endListeningProgress();
+    },
+    onTimeUpdateVideo(): void {
+      if (!this.downloadId) { return;}
+      const currentTime = this.player?.currentTime() ?? this.videoElement.currentTime;
+      this.onTimeUpdateProgress(currentTime);
+    },
     },
-  },
 });
 </script>
 

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

@@ -1,5 +1,5 @@
 import { state } from "../../../stores/ParamSdkStore";
-import octopusApi from "@saooti/octopus-api";
+import { playerLogicProgress} from "./playerLogicProgress";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { useAuthStore } from "@/stores/AuthStore";
 import { mapState, mapActions } from "pinia";
@@ -8,6 +8,7 @@ let Hls:any = null;
 /* eslint-enable */
 import { defineComponent } from "vue";
 export const playerLive = defineComponent({
+  mixins: [playerLogicProgress],
   data() {
     return {
       listenTime: 0 as number,
@@ -20,7 +21,7 @@ export const playerLive = defineComponent({
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ["playerLive", "playerRadio"]),
+    ...mapState(usePlayerStore, ["playerLive", "playerRadio", "playerVideo"]),
     ...mapState(useAuthStore, ["authOrgaId"]),
   },
   methods: {
@@ -56,6 +57,7 @@ export const playerLive = defineComponent({
         ) {
           this.audioElement.src = hlsStreamUrl;
           await this.initLiveDownloadId();
+          this.hlsReady = true;
           await this.audioElement.play();
           this.onPlay();
         } else {
@@ -67,32 +69,6 @@ export const playerLive = defineComponent({
         }, 1000);
       }
     },
-    async initLiveDownloadId() {
-      if (!this.playerLive || this.downloadId) {
-        return;
-      }
-      try {
-        const downloadId = await octopusApi.putDataPublic<string | null>(
-          0,
-          "podcast/prepare/live/" + this.playerLive.podcastId,
-          undefined,
-        );
-        await octopusApi.fetchDataPublicWithParams<string | null>(
-          0,
-          "podcast/download/live/" + this.playerLive.podcastId + ".m3u8",
-          {
-            downloadId: null !== downloadId ? downloadId : undefined,
-            origin: "octopus",
-            distributorId: this.authOrgaId,
-          },
-        );
-        this.setDownloadId(downloadId);
-      } catch (error) {
-        this.downloadId = null;
-        console.log("ERROR downloadId");
-      }
-      this.hlsReady = true;
-    },
     async initHls(hlsStreamUrl: string): Promise<void> {
       return new Promise<void>(async (resolve, reject) => {
         if (null === Hls) {
@@ -106,6 +82,7 @@ export const playerLive = defineComponent({
         this.hls = new Hls();
         this.hls.on(Hls.Events.MANIFEST_PARSED, async () => {
           await this.initLiveDownloadId();
+          this.hlsReady = true;
           this.hls.attachMedia(this.audioElement as HTMLAudioElement);
           await (this.audioElement as HTMLAudioElement).play();
           this.onPlay();
@@ -117,29 +94,6 @@ export const playerLive = defineComponent({
         this.hls.loadSource(hlsStreamUrl);
       });
     },
-    setDownloadId(newValue: string | null): void {
-      this.endListeningProgress();
-      this.downloadId = newValue;
-    },
-    async endListeningProgress(): Promise<void> {
-      if (!this.downloadId) return;
-      try {
-        await octopusApi.putDataPublic(
-          0,
-          "podcast/listen/" +
-            this.downloadId +
-            "?seconds=" +
-            Math.round(this.listenTime),
-          undefined,
-        );
-      } catch {
-        //Do nothing
-      }
-      this.downloadId = null;
-      this.notListenTime = 0;
-      this.lastSend = 0;
-      this.listenTime = 0;
-    },
     endingLive(): void {
       const audio: HTMLElement | null = document.getElementById("audio-player");
       if (audio && this.hls) {

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

@@ -40,6 +40,7 @@ export const playerLogic = defineComponent({
       "playerVolume",
       "playerStatus",
       "playerSeekTime",
+      "playerVideo"
     ]),
 
     audioUrl(): string {
@@ -82,6 +83,9 @@ export const playerLogic = defineComponent({
     playerLive: {
       deep: true,
       handler() {
+        if(this.playerVideo){
+          return;
+        }
         this.$nextTick(async () => {
           this.hlsReady = false;
           this.reInitPlayer();
@@ -96,33 +100,6 @@ export const playerLogic = defineComponent({
         this.playRadio();
       });
     },
-    async listenTime(newVal): Promise<void> {
-      if (
-        (this.playerRadio && !this.playerPodcast && !this.playerLive) ||
-        !this.downloadId ||
-        newVal - this.lastSend < 10
-      ) {
-        return;
-      }
-      this.lastSend = newVal;
-      await octopusApi.putDataPublic(
-        0,
-        "podcast/listen/" + this.downloadId + "?seconds=" + Math.round(newVal),
-        undefined,
-      );
-    },
-    playerSeekTime() {
-      if (!this.playerSeekTime) {
-        return;
-      }
-      if (this.playerPodcast || this.playerLive) {
-        this.notListenTime = this.playerSeekTime - this.listenTime;
-      }
-      const audioPlayer: HTMLAudioElement | null =
-        document.querySelector("#audio-player");
-      if (!audioPlayer) return;
-      audioPlayer.currentTime = this.playerSeekTime;
-    },
     playerStatus() {
       const audioPlayer: HTMLAudioElement | null =
         document.querySelector("#audio-player");
@@ -151,10 +128,6 @@ export const playerLogic = defineComponent({
     },
   },
 
-  mounted() {
-    window.addEventListener("beforeunload", this.endListeningProgress);
-  },
-
   methods: {
     ...mapActions(usePlayerStore, ["playerPlay", "playerUpdateElapsed"]),
     getDomain(): string {
@@ -267,19 +240,7 @@ export const playerLogic = defineComponent({
       }
       const mediaTarget = event.currentTarget as HTMLMediaElement;
       if (this.playerPodcast || this.playerLive) {
-        if (!this.downloadId) {
-          return;
-        }
-        if (
-          this.playerLive &&
-          0 === this.listenTime &&
-          0 !== mediaTarget.currentTime
-        ) {
-          this.notListenTime = mediaTarget.currentTime;
-          this.listenTime = 1;
-        } else {
-          this.listenTime = mediaTarget.currentTime - this.notListenTime;
-        }
+        this.onTimeUpdateProgress(mediaTarget.currentTime);
       }
       const streamDuration = this.streamDurationForSafari(mediaTarget);
       if (!streamDuration) return;

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

@@ -0,0 +1,134 @@
+import octopusApi from "@saooti/octopus-api";
+import { defineComponent } from "vue";
+import { useAuthStore } from "@/stores/AuthStore";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+export const playerLogicProgress = defineComponent({
+  mixins: [],
+  data() {
+    return {
+      listenTime: 0 as number,
+      notListenTime: 0 as number,
+      lastSend: 0 as number,
+      downloadId: null as string | null,
+    };
+  },
+  computed: {
+    ...mapState(useAuthStore, ["authOrgaId"]),
+    ...mapState(usePlayerStore, [
+      "playerPodcast",
+      "playerLive",
+      "playerRadio",
+      "playerSeekTime",
+      "playerVideo"
+    ]),
+  },
+
+  watch: {
+    async listenTime(newVal): Promise<void> {
+      if (
+        (this.playerRadio && !this.playerPodcast && !this.playerLive) ||
+        !this.downloadId ||
+        newVal - this.lastSend < 10
+      ) {
+        return;
+      }
+      this.lastSend = newVal;
+      await octopusApi.putDataPublic(
+        0,
+        "podcast/listen/" + this.downloadId + "?seconds=" + Math.round(newVal),
+        undefined,
+      );
+    },
+    playerSeekTime() {
+      if (!this.playerSeekTime) {
+        return;
+      }
+      if (this.playerPodcast || this.playerLive) {
+        this.notListenTime = this.playerSeekTime - this.listenTime;
+      }
+      if(this.playerVideo){
+        return;
+      }
+      const audioPlayer: HTMLAudioElement | null = document.querySelector("#audio-player");
+      if (!audioPlayer) return;
+      audioPlayer.currentTime = this.playerSeekTime;
+    },
+  },
+
+  mounted() {
+    window.addEventListener("beforeunload", this.endListeningProgress);
+  },
+
+  methods: {
+    async initLiveDownloadId() {
+      if (!this.playerLive || this.downloadId) {
+        return;
+      }
+      try {
+        const mediaType = this.playerVideo ? "VIDEO":"AUDIO";
+        const downloadId = await octopusApi.putDataPublic<string | null>(
+          0,
+          "podcast/prepare/live/" + this.playerLive.podcastId+"?mediaType="+mediaType,
+          undefined,
+        );
+        await octopusApi.fetchDataPublicWithParams<string | null>(
+          0,
+          "podcast/download/live/" + this.playerLive.podcastId + ".m3u8",
+          {
+            downloadId: null !== downloadId ? downloadId : undefined,
+            origin: "octopus",
+            distributorId: this.authOrgaId,
+          },
+        );
+        this.setDownloadId(downloadId);
+      } catch (error) {
+        this.downloadId = null;
+        console.log("ERROR downloadId");
+      }
+    },
+    onTimeUpdateProgress(currentTime: number): void {
+      if (!this.downloadId) {
+        return;
+      }
+      if (
+        this.playerLive &&
+        0 === this.listenTime &&
+        0 !== currentTime
+      ) {
+        this.notListenTime = currentTime;
+        this.listenTime = 1;
+      } else {
+        const newListenTime = currentTime - this.notListenTime;
+        const diffTime = newListenTime - this.listenTime;
+        if(diffTime > 0 && diffTime<1){
+          this.listenTime = newListenTime;
+        }
+      }
+    },
+    setDownloadId(newValue: string | null): void {
+      this.endListeningProgress();
+      this.downloadId = newValue;
+    },
+    async endListeningProgress(): Promise<void> {
+      if (!this.downloadId) return;
+      try {
+        await octopusApi.putDataPublic(
+          0,
+          "podcast/listen/" +
+            this.downloadId +
+            "?seconds=" +
+            Math.round(this.listenTime),
+          undefined,
+        );
+      } catch {
+        //Do nothing
+      }
+      this.downloadId = null;
+      this.notListenTime = 0;
+      this.lastSend = 0;
+      this.listenTime = 0;
+    },
+
+  },
+});

package/src/stores/ParamSdkStore.ts

@@ -3,7 +3,7 @@ import { Category } from "./class/general/category";
 
 const state: ParamStore = {
   generalParameters: {
-    organisationId: "ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c",
+    organisationId: /* "7e67406d-c1f5-4f98-91ca-dd45583aa1a6" */"ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c",
     authenticated: true,
     isAdmin: true,
     isRoleLive: true,