@saooti/octopus-sdk 40.0.3 → 40.1.0

package/index.ts

@@ -89,28 +89,28 @@ export const getClassicContentEditable = () => import("./src/components/form/Cla
 export const getSwiperList = () => import("./src/components/display/list/SwiperList.vue");
 
 
-//mixins
-
-import selenium from "./src/components/mixins/selenium.ts";
-import cookies from "./src/components/mixins/cookies.ts";
-import displayMethods from "./src/components/mixins/displayMethods.ts";
-import imageProxy from "./src/components/mixins/imageProxy.ts";
-import orgaFilter from "./src/components/mixins/organisationFilter.ts";
-import initSDK from "./src/components/mixins/init.ts";
-import tagOfMixins from "./src/components/mixins/tagOfMixins.ts";
-import resizePhone from "./src/components/mixins/resizePhone.ts";
-import debounce from "./src/components/mixins/debounce.ts";
-import downloadMixins from "./src/components/mixins/download.ts";
-import metaTitle from "./src/components/mixins/metaTitle.ts";
-import metaTitleWatch from "./src/components/mixins/metaTitleWatch.ts";
+//Composable
+import {useResizePhone} from "./src/components/composable/useResizePhone";
+import {useTagOf} from "./src/components/composable/useTagOf.ts";
+import {useSelenium} from "./src/components/composable/useSelenium.ts";
+import {useImageProxy} from "./src/components/composable/useImageProxy.ts";
+import {useMetaTitle} from "./src/components/composable/useMetaTitle.ts";
+import {useMetaTitleWatch} from "./src/components/composable/useMetaTitleWatch.ts";
+import {useOrganisationFilter} from "./src/components/composable/useOrganisationFilter.ts";
+import {useInit} from "./src/components/composable/useInit.ts";
+import {useErrorHandler} from "./src/components/composable/useErrorHandler.ts";
 
 
-//helper
-import domHelper from "./src/helper/dom.ts";
-import durationHelper from "./src/helper/duration.ts";
-import stringHelper from "./src/helper/string.ts";
-import fetchHelper from "./src/helper/fetch.ts";
 
+//helper
+import domHelper from "./src/helper/domHelper.ts";
+import durationHelper from "./src/helper/durationHelper.ts";
+import stringHelper from "./src/helper/stringHelper.ts";
+import fetchHelper from "./src/helper/fetchHelper.ts";
+import cookiesHelper from "./src/helper/cookiesHelper.ts";
+import downloadHelper from "./src/helper/downloadHelper.ts";
+import displayHelper from "./src/helper/displayHelper.ts";
+import debounce from "./src/helper/debounceHelper.ts";
 
 //stores
 import {useVastStore} from "./src/stores/VastStore.ts";
@@ -138,16 +138,16 @@ export const getRadiolineIcon = () => import("./src/components/icons/RadiolineIc
 export const getTuninIcon = () => import("./src/components/icons/TuninIcon.vue");
 export const getXIcon = () => import("./src/components/icons/XIcon.vue");
 
-
 export {
-    selenium,
-    cookies,
-    displayMethods,
-    imageProxy,
-    orgaFilter,
-    initSDK,
-    tagOfMixins,
-    resizePhone,
+    useResizePhone,
+    useTagOf,
+    useSelenium,
+    useImageProxy,
+    useMetaTitle,
+    useMetaTitleWatch,
+    useOrganisationFilter,
+    useInit,
+    useErrorHandler,
     debounce,
     useVastStore,
     useSaveFetchStore,
@@ -164,7 +164,7 @@ export {
     getApiUrl,
     ModuleApi,
     classicApi,
-    downloadMixins,
-    metaTitle,
-    metaTitleWatch
+    cookiesHelper,
+    downloadHelper,
+    displayHelper
 };

package/package.json

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

package/plateform.conf

@@ -1 +1 @@
-dev2.saooti.org
+preprod.saooti.org

package/src/App.vue

@@ -18,8 +18,9 @@
 import TopBar from "@/components/misc/TopBar.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import ClassicLazy from "@/components/misc/ClassicLazy.vue";
-import initSDK from "./components/mixins/init";
-import metaTitle from "./components/mixins/metaTitle";
+import {useInit} from "./components/composable/useInit";
+import {useMetaTitle} from "./components/composable/useMetaTitle";
+import {useOrganisationFilter} from "./components/composable/useOrganisationFilter";
 import { useAuthStore } from "./stores/AuthStore";
 import { useFilterStore } from "./stores/FilterStore";
 import { useGeneralStore } from "./stores/GeneralStore";
@@ -42,7 +43,12 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [initSDK, metaTitle],
+  setup(){
+    const { updateMetaTitle } = useMetaTitle();
+    const {initSdk} = useInit();
+    const {selectOrganisation} = useOrganisationFilter();
+    return { updateMetaTitle, initSdk, selectOrganisation }
+  },
 
   data() {
     return {

package/src/api/classicApi.ts

@@ -1,5 +1,5 @@
 import {getApiUrl, ModuleApi} from "./apiConnection";
-import fetchHelper from "../helper/fetch";
+import fetchHelper from "../helper/fetchHelper";
 import axios, { AxiosError } from 'axios';
 import { FetchParam } from "@/stores/class/general/fetchParam";
 import { state } from "../stores/ParamSdkStore";

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

@@ -0,0 +1,33 @@
+import { computed } from "vue";
+import { usePlayerStore } from "../../../stores/PlayerStore";
+import { useVastStore } from "../../../stores/VastStore";
+import DurationHelper from "../../../helper/durationHelper";
+export const usePlayerDisplayTime = ()=>{
+
+  const playerStore = usePlayerStore();
+  const vastStore = useVastStore();
+
+  const displayPlayTime = computed(() => { 
+    if(vastStore.isAdPlaying){
+      return DurationHelper.formatDuration(Math.round(vastStore.currentTimeAd));
+    }
+    return playerStore.playedTime;
+  });
+
+  const displayTotalTime = computed(() => { 
+    if(vastStore.isAdPlaying){
+      return DurationHelper.formatDuration(Math.round(vastStore.currentDurationAd));
+    }
+    return playerStore.totalTime;
+  });
+
+
+
+	return {
+    displayPlayTime,
+    displayTotalTime,
+    transcriptText: playerStore.transcriptText,
+    radioUrl: playerStore.radioUrl,
+    isAdPlaying: vastStore.isAdPlaying,
+	}
+}

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

@@ -0,0 +1,150 @@
+import stringHelper from "../../../helper/stringHelper";
+import { usePlayerLogicProgress } from "./usePlayerLogicProgress";
+import { Ref, ref } from "vue";
+import { usePlayerStore } from "../../../stores/PlayerStore";
+import { useApiStore } from "../../../stores/ApiStore";
+import dayjs from "dayjs";
+/* eslint-disable*/
+let Hls:any = null;
+/* eslint-enable*/
+const maxMinutesSessionId = 1;
+export const usePlayerLive = ()=>{
+
+  const { listenTime, initLiveDownloadId, setDownloadId, onTimeUpdateProgress } = usePlayerLogicProgress();
+
+  const hlsReady= ref(false);
+  const audioElement: Ref<HTMLAudioElement | null>= ref(null);
+  const hls: Ref<any>= ref(null);
+  const hlsRetryTimeout: Ref<ReturnType<typeof setTimeout> | undefined>= ref(undefined);
+  const playPromise: Ref<any>= ref(undefined);
+  const errorHls= ref(false);
+
+
+  const playerStore = usePlayerStore();
+  const apiStore = useApiStore();
+
+  function onPlay(): void {
+    playerStore.playerChangeStatus("PAUSED"===playerStore.playerStatus);
+  }
+
+  function playRadio() {
+    if (!playerStore.playerRadio) return;
+    handleSessionIdRadio();
+    playHls(playerStore.playerRadio.url+"?origin=octopus&sessionId="+playerStore.playerRadio.sessionId);
+  }
+
+  function handleSessionIdRadio(){
+    if(!playerStore.playerRadio) return;
+    if(playerStore.playerRadio.sessionId && dayjs().diff(dayjs(playerStore.playerRadio.dateSessionId), 'm')<maxMinutesSessionId){
+      return;
+    }
+    playerStore.playerRadio.sessionId = stringHelper.uuidv4();
+  }
+
+  function playLive() {
+    if (!playerStore.playerLive) return;
+    const hlsStreamUrl = `${apiStore.hlsUrl}live/dev.${playerStore.playerLive.conferenceId}/index.m3u8`;
+    playHls(hlsStreamUrl);
+  }
+
+  async function playHls(hlsStreamUrl: string): Promise<void> {
+    try {
+      if(null===audioElement.value){
+        audioElement.value = document.getElementById(
+          "audio-player",
+        ) as HTMLAudioElement;
+      }
+      if (null === audioElement.value) {
+        setTimeout(() => {
+          playHls(hlsStreamUrl);
+        }, 1000);
+        return;
+      }
+      const ua = navigator.userAgent.toLowerCase();
+      const isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
+      if (
+        audioElement.value.canPlayType("application/vnd.apple.mpegurl") &&
+        !isAndroid
+      ) {
+        audioElement.value.src = hlsStreamUrl;
+        await initLiveDownloadId();
+        hlsReady.value = true;
+        await audioElement.value.play();
+        onPlay();
+      } else {
+        await initHls(hlsStreamUrl);
+      }
+    } catch {
+      onHlsError(hlsStreamUrl);
+    }
+  }
+
+  function onHlsError(hlsStreamUrl:string){
+    if("STOPPED"!==playerStore.playerStatus && undefined===hlsRetryTimeout.value){
+      hlsRetryTimeout.value = setTimeout(() => {
+        errorHls.value = false;
+        playHls(hlsStreamUrl);
+        hlsRetryTimeout.value = undefined;
+      }, 5000);
+    }
+  }
+
+  async function initHls(hlsStreamUrl: string) {
+    if (null === Hls) {
+      await import("hls.js").then((hlsLibrary) => {
+        Hls = hlsLibrary.default;
+      });
+    }
+    if (!Hls.isSupported()) {
+      throw new Error("Hls is not supported ! ");
+    }
+    hls.value = new Hls();
+    hls.value.on(Hls.Events.MANIFEST_PARSED, async () => {
+      await initLiveDownloadId();
+      hlsReady.value = true;
+      if(true===errorHls.value){
+        return;
+      }
+      playPromise.value = (audioElement.value as HTMLAudioElement).play();
+      playPromise.value.then(() =>{
+        playPromise.value = undefined;
+        onPlay();
+      }).catch(()=>{
+        onHlsError(hlsStreamUrl);
+        playPromise.value = undefined;
+      })
+    });
+    hls.value.on(Hls.Events.ERROR, async (e, data:any) => {
+      errorHls.value = true;
+      if(undefined===playPromise.value && data.fatal){
+        onHlsError(hlsStreamUrl);
+      }
+    });
+    hls.value.loadSource(hlsStreamUrl);
+    hls.value.attachMedia(audioElement.value as HTMLAudioElement);
+  }
+
+  async function endingLive(): Promise<void> {
+    clearTimeout(hlsRetryTimeout.value);
+    hlsRetryTimeout.value = undefined;
+    audioElement.value = null;
+    const audio: HTMLElement | null = document.getElementById("audio-player");
+    if (audio && hls.value) {
+      hls.value.destroy();
+      hls.value = null;
+    }else{
+      (audio as HTMLAudioElement).pause();
+    }
+    (audio as HTMLAudioElement).src = "";
+  }
+
+	return {
+    listenTime,
+    setDownloadId,
+    onTimeUpdateProgress,
+    playLive,
+    endingLive,
+    playRadio,
+    onPlay
+	}
+}

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

@@ -0,0 +1,265 @@
+
+import { usePlayerLive } from "./usePlayerLive";
+import { usePlayerStitching } from "./usePlayerStitching";
+import { usePlayerTranscript } from "./usePlayerTranscript";
+import { nextTick, Ref, ref, watch } from "vue";
+import { usePlayerStore } from "../../../stores/PlayerStore";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { useGeneralStore } from "../../../stores/GeneralStore";
+import { useVastStore } from "../../../stores/VastStore";
+import classicApi from "../../../api/classicApi";
+import dayjs from "dayjs";
+import { FetchParam } from "@/stores/class/general/fetchParam";
+export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
+
+  const { 
+    listenTime,
+    onPlay, setDownloadId, onTimeUpdateProgress, playLive, endingLive, playRadio} = usePlayerLive();
+  const { contentEndedAdsLoader } = usePlayerStitching();
+  const { getTranscription, onTimeUpdateTranscript, onSeekedTranscript, checkDelaytWithStitching } = usePlayerTranscript();
+
+  const playerError= ref(false);
+  const listenError= ref(false);
+  const percentLiveProgress= ref(0);
+  const durationLivePosition= ref(0);
+  const displayAlertBar= ref(false);
+  const hlsReady= ref(false);
+  const audioUrlToPlay= ref("");
+
+
+  const playerStore = usePlayerStore();
+  const generalStore = useGeneralStore();
+  const vastStore = useVastStore();
+  const authStore = useAuthStore();
+
+  watch(()=>getAudioUrl(), async () => {
+    playerError.value = false;
+    if (
+      playerStore.playerMedia ||
+      !playerStore.playerPodcast ||
+      playerStore.playerVideo ||
+      !playerStore.playerPodcast.availability.visibility ||
+      listenError.value
+    ) {
+      audioUrlToPlay.value = getAudioUrl();
+      return;
+    }
+    const response = await classicApi.fetchData<{
+      location: string;
+      downloadId: number;
+    }>({
+      api:0,
+      path:"podcast/download/register/"+playerStore.playerPodcast.podcastId + ".mp3",
+      parameters:getAudioUrlParameters(),
+      headers: {'X-Extra-UA':'Saooti Player'},
+      isNotAuth:true
+    });
+    setDownloadId(response.downloadId.toString());
+    audioUrlToPlay.value = response.location;
+  });
+
+  watch(()=>playerStore.playerPodcast, async () => {
+    reInitPlayer();
+    getTranscription();
+  }, {deep:true});
+
+  watch(()=>playerStore.playerLive, async () => {
+    if(playerStore.playerVideo){
+      return;
+    }
+    nextTick(async () => {
+      hlsReady.value = false;
+      reInitPlayer();
+      playLive();
+    });
+  }, {deep:true});
+
+  watch(()=>playerStore.playerRadio, async () => {
+    nextTick(async () => {
+      hlsReady.value = false;
+      reInitPlayer();
+      playRadio();
+    });
+  });
+
+  watch(()=>playerStore.playerStatus, async () => {
+    const audioPlayer: HTMLAudioElement | null =
+      document.querySelector("#audio-player");
+    if (!audioPlayer) return;
+    if (playerStore.playerLive && !hlsReady.value) {
+      audioPlayer.pause();
+      percentLiveProgress.value = 0;
+      durationLivePosition.value = 0;
+      return;
+    }
+    if ("PAUSED" === playerStore.playerStatus && playerStore.playerRadio) {
+      playerStore.playerRadio.dateSessionId = dayjs().toISOString();
+      hlsReady.value = false;
+      reInitPlayer();
+      endingLive();
+    } else if ("PAUSED" === playerStore.playerStatus) {
+      audioPlayer.pause();
+    } else if ("PLAYING" === playerStore.playerStatus && playerStore.playerRadio) {
+      if (playerStore.playerRadio.isInit) {
+        playRadio();
+      } else {
+        playerStore.playerRadio.isInit = true;
+      }
+    } else if ("PLAYING" === playerStore.playerStatus) {
+      audioPlayer.play();
+    }
+  });
+
+  function getAudioUrlParameters(): FetchParam {
+    if (!playerStore.playerPodcast) return {};
+    const parameters: FetchParam = {
+      origin: "octopus",
+      accepted: vastStore.useVastPlayerPodcast
+    };
+    if (authStore.authOrgaId) {
+      parameters.distributorId = authStore.authOrgaId;
+    }
+    if (generalStore.consentTcf) {
+      parameters.consent = generalStore.consentTcf;
+    }
+    if (
+      "SECURED" === playerStore.playerPodcast.organisation.privacy &&
+      authStore.authParam.accessToken
+    ) {
+      parameters.access_token =authStore.authParam.accessToken;
+    }
+    return parameters;
+  }
+
+  function getAudioUrl(): string {
+    if (playerStore.playerMedia){
+      return playerStore.playerMedia.audioUrl ?? "";
+    }
+    if (!playerStore.playerPodcast || playerStore.playerVideo) return "";
+    if (
+      !playerStore.playerPodcast.availability.visibility ||
+      "PROCESSING" === playerStore.playerPodcast.processingStatus
+    )
+      return playerStore.playerPodcast.audioStorageUrl;
+    if (listenError.value) return playerStore.playerPodcast.audioStorageUrl;
+    return playerStore.playerPodcast.podcastId + ".mp3?"+getAudioUrlParameters().toString();
+  }
+
+  function reInitPlayer(): void {
+    setDownloadId(null);
+    listenError.value = false;
+    if (playerStore.playerLive || playerStore.playerRadio) {
+      endingLive();
+    }
+  }
+
+  function stopPlayer(): void {
+    playerStore.playerPlay();
+  }
+
+  function onError(): void {
+    if (
+      playerStore.playerPodcast &&
+      "" !== audioUrlToPlay.value &&
+      !listenError.value
+    ) {
+      listenError.value = true;
+    } else if (
+      (playerStore.playerPodcast && "" !== audioUrlToPlay.value) ||
+      playerStore.playerMedia
+    ) {
+      playerError.value = true;
+    }
+  }
+
+  function streamDurationForSafari(mediaTarget: HTMLMediaElement) {
+    let streamDuration = mediaTarget.duration;
+    if (Infinity === streamDuration) {
+      const seekable = mediaTarget.seekable;
+      if (seekable) {
+        streamDuration = seekable.end(seekable.length - 1);
+      } else {
+        streamDuration = mediaTarget.currentTime;
+      }
+    }
+    return streamDuration;
+  }
+
+  function onTimeUpdatePodcast(streamDuration: number, currentTime: number) {
+    displayAlertBar.value = false;
+    percentLiveProgress.value = 0;
+    playerStore.playerUpdateElapsed(currentTime / streamDuration, streamDuration);
+    onTimeUpdateTranscript(currentTime);
+  }
+
+  function onTimeUpdateLive(streamDuration: number, currentTime: number) {
+    if (!playerStore.playerLive) {
+      return;
+    }
+    const scheduledDuration = playerStore.playerLive.duration / 1000;
+    if (scheduledDuration > streamDuration) {
+      displayAlertBar.value = false;
+      percentLiveProgress.value = (streamDuration / scheduledDuration) * 100;
+      playerStore.playerUpdateElapsed(
+        currentTime / scheduledDuration,
+        scheduledDuration,
+      );
+    } else {
+      percentLiveProgress.value = 100;
+      displayAlertBar.value = true;
+      durationLivePosition.value = (scheduledDuration / streamDuration) * 100;
+      playerStore.playerUpdateElapsed(currentTime / streamDuration, streamDuration);
+    }
+  }
+
+  function onTimeUpdate(event: Event): void {
+    if (playerStore.playerRadio) {
+      return;
+    }
+    const mediaTarget = event.currentTarget as HTMLMediaElement;
+    if (playerStore.playerPodcast || playerStore.playerLive) {
+      onTimeUpdateProgress(mediaTarget.currentTime);
+    }
+    const streamDuration = streamDurationForSafari(mediaTarget);
+    if (!streamDuration) return;
+    if (!mediaTarget.currentTime) return;
+    if (!playerStore.playerLive) {
+      onTimeUpdatePodcast(streamDuration, mediaTarget.currentTime);
+      return;
+    }
+    onTimeUpdateLive(streamDuration, mediaTarget.currentTime);
+  }
+
+  function onSeeked(event: Event): void {
+    const mediaTarget = event.currentTarget as HTMLMediaElement;
+    const currentTime = mediaTarget.currentTime;
+    onSeekedTranscript(currentTime);
+  }
+
+  function onFinished(): void {
+    setDownloadId(null);
+    contentEndedAdsLoader();
+    if (playerStore.playerLive) {
+      endingLive();
+    }
+    forceHide.value = true;
+  }
+
+
+	return {
+    audioUrlToPlay,
+    listenTime,
+    playerError,
+    percentLiveProgress,
+    durationLivePosition,
+    displayAlertBar,
+    hlsReady,
+    checkDelaytWithStitching,
+    stopPlayer,
+    onError,
+    onTimeUpdate,
+    onSeeked,
+    onFinished,
+    onPlay
+	}
+}