@saooti/octopus-sdk 40.2.12 → 40.2.14

package/package.json

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

package/src/components/composable/player/usePlayerLive.ts

@@ -4,6 +4,7 @@ import { Ref, ref } from "vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useApiStore } from "../../../stores/ApiStore";
 import dayjs from "dayjs";
+import { useAuthStore } from "../../../stores/AuthStore";
 /* eslint-disable*/
 let Hls:any = null;
 /* eslint-enable*/
@@ -21,6 +22,8 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
 
   const playerStore = usePlayerStore();
   const apiStore = useApiStore();
+  const authStore = useAuthStore();
+
 
   function onPlay(): void {
     playerStore.playerChangeStatus("PAUSED"===playerStore.playerStatus);
@@ -65,7 +68,11 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
         audioElement.value.canPlayType("application/vnd.apple.mpegurl") &&
         !isAndroid
       ) {
-        audioElement.value.src = hlsStreamUrl;
+        if ("SECURED" === playerStore.playerLive?.organisation?.privacy && authStore.authParam.accessToken) {
+          audioElement.value.src = hlsStreamUrl+"?access_token="+authStore.authParam.accessToken;
+        }else{
+          audioElement.value.src = hlsStreamUrl;
+        }
         await initLiveDownloadId();
         hlsReady.value = true;
         await audioElement.value.play();
@@ -97,7 +104,13 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
     if (!Hls.isSupported()) {
       throw new Error("Hls is not supported ! ");
     }
-    hls.value = new Hls();
+    hls.value = new Hls({
+      xhrSetup: (xhr: XMLHttpRequest) => {
+        if ("SECURED" === playerStore.playerLive?.organisation?.privacy && authStore.authParam.accessToken) {
+          xhr.setRequestHeader("Authorization", "Bearer " +authStore.authParam.accessToken);
+        }
+      }
+    });
     hls.value.on(Hls.Events.MANIFEST_PARSED, async () => {
       await initLiveDownloadId();
       hlsReady.value = true;

package/src/components/composable/player/usePlayerLogicProgress.ts

@@ -68,18 +68,20 @@ export const usePlayerLogicProgress = ()=>{
       const downloadId = await classicApi.putData<string | null>({
         api: 0,
         path:"podcast/prepare/live/" + playerStore.playerLive.podcastId+"?mediaType="+mediaType,
-        isNotAuth:true
-      });
-      await classicApi.fetchData<string | null>({
-        api:0,
-        path: "podcast/download/live/" + playerStore.playerLive.podcastId + ".m3u8",
-        parameters:{
-          downloadId: downloadId ?? undefined,
-          origin: "octopus",
-          distributorId: authStore.authOrgaId,
-        },
-        isNotAuth:true
       });
+      try {
+        await classicApi.fetchData<string | null>({
+          api:0,
+          path: "podcast/download/live/" + playerStore.playerLive.podcastId + ".m3u8",
+          parameters:{
+            downloadId: downloadId ?? undefined,
+            origin: "octopus",
+            distributorId: authStore.authOrgaId,
+          },
+        });
+      } catch {
+        // Remove try/catch when back will no longer redirect with a 403 in a secured context #13594
+      }
       setDownloadId(downloadId);
     } catch {
       downloadId.value = null;
@@ -138,6 +140,7 @@ export const usePlayerLogicProgress = ()=>{
     downloadId,
     initLiveDownloadId,
     setDownloadId,
-    onTimeUpdateProgress
+    onTimeUpdateProgress,
+    endListeningProgress
 	}
 }

package/src/components/misc/player/video/PlayerVideo.vue

@@ -7,7 +7,7 @@
       <div class="video-wrapper">
         <PlayerYoutubeEmbed v-if="youtubeId" :youtube-id="youtubeId" />
         <PlayerVideoDigiteka v-else-if="!playerLive" :video-id="playerPodcast?.video?.videoId" />
-        <PlayerVideoHls v-else :hls-url="hlsVideoUrl" />
+        <PlayerVideoHls v-else :hls-url="hlsVideoUrl" :is-secured="isSecured"/>
       </div>
     </template>
   </teleport>
@@ -45,6 +45,9 @@ export default defineComponent({
   computed: {
     ...mapState(useApiStore, ["hlsUrl"]),
     ...mapState(usePlayerStore, ["playerVideo", "playerLive", "playerPodcast"]),
+    isSecured(): boolean{
+      return "SECURED" === this.playerLive?.organisation?.privacy;
+    },
     hlsVideoUrl(): string {
       if (!this.playerLive) {
         return "";

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

@@ -15,7 +15,7 @@
 </template>
 <script lang="ts">
 import { usePlayerStore } from "../../../../stores/PlayerStore";
-import { mapActions } from "pinia";
+import { mapActions, mapState } from "pinia";
 import {usePlayerLogicProgress} from "../../../composable/player/usePlayerLogicProgress";
 import videojs, { VideoJsPlayer } from "video.js";
 import qualitySelectorHls from "videojs-quality-selector-hls";
@@ -23,18 +23,20 @@ if (undefined === videojs.getPlugin("qualitySelectorHls")) {
   videojs.registerPlugin("qualitySelectorHls", qualitySelectorHls);
 }
 import { defineComponent } from "vue";
+import { useAuthStore } from "../../../../stores/AuthStore";
 export default defineComponent({
   name: "PlayerVideoHls",
 
   props: {
     hlsUrl: { default: "", type: String },
     responsive: { default: false, type: Boolean },
+    isSecured: { default: true, type: Boolean },
   },
   emits: ["changeValid"],
 
   setup(){
-    const { downloadId, initLiveDownloadId, onTimeUpdateProgress} = usePlayerLogicProgress();
-    return { downloadId, initLiveDownloadId, onTimeUpdateProgress }
+    const { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();
+    return { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress }
   },
   data() {
     return {
@@ -47,6 +49,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useAuthStore, ["authParam"]),
     videoElement(): HTMLVideoElement {
       return this.$refs.videoelement as HTMLVideoElement;
     },
@@ -104,6 +107,15 @@ export default defineComponent({
         this.playLiveIos();
         return;
       }
+      if (this.isSecured && this.authParam.accessToken) {
+        const globalXhrRequestHook = (options: any) => {
+          options.beforeSend = (xhr: XMLHttpRequest) => {
+            xhr.setRequestHeader("Authorization", "Bearer "+this.authParam.accessToken);
+          };
+          return options;
+        };
+        videojs.Vhs.xhr.onRequest(globalXhrRequestHook);
+      }
       this.player = videojs(
         document.getElementById("video-element-hls") as Element,
         this.videoOptions,
@@ -165,6 +177,11 @@ export default defineComponent({
       this.videoElement.onseeking = async () => {
         this.playerUpdateSeekTime(this.videoElement.currentTime);
       };
+      if (this.isSecured && this.authParam.accessToken) {
+        this.videoElement.src = this.hlsUrl + "access_token="+this.authParam.accessToken;
+      }else{
+        this.videoElement.src = this.hlsUrl;
+      }
       this.videoElement.src = this.hlsUrl;
     },
     videoClean(): void {

package/src/components/pages/VideoPage.vue

@@ -20,6 +20,7 @@
             <PlayerVideoHls
               v-if="recordingLive"
               :hls-url="hlsVideoUrl"
+              :is-secured="isSecured"
               :responsive="true"
             />
             <div
@@ -190,6 +191,9 @@ const hlsVideoUrl = computed(() => {
   }
   return `${apiStore.hlsUrl}live/video_dev.${podcastConference.value.conferenceId}/index.m3u8`;
 });
+const isSecured = computed(() => {
+  return "SECURED" === podcast.value?.organisation?.privacy;
+});
 const overrideText = computed(() => {
   if ("PUBLISHING" !== podcastConference.value?.status) {
     return;