@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -1,134 +1,169 @@
-import { state } from '../../../stores/ParamSdkStore';
-import { defineComponent } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
-import {fetchRadioData} from '../../mixins/radio/fetchRadioData';
-import { MediaRadio } from '@/stores/class/general/player';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import { Podcast } from '@/stores/class/general/podcast';
+import { state } from "../../../stores/ParamSdkStore";
+import { defineComponent } from "vue";
+import { RouteLocationRaw } from "vue-router";
+import { fetchRadioData } from "../../mixins/radio/fetchRadioData";
+import { MediaRadio } from "@/stores/class/general/player";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import { Podcast } from "@/stores/class/general/podcast";
 export const playerDisplay = defineComponent({
-	props: {
-    hlsReady: { default: false , type: Boolean},
-  },
   mixins: [fetchRadioData],
+  props: {
+    hlsReady: { default: false, type: Boolean },
+  },
   data() {
     return {
-      radioInterval: undefined as  ReturnType<typeof setTimeout>|undefined,
+      radioInterval: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
-	computed:{
+  computed: {
     ...mapState(usePlayerStore, [
-      'playerPodcast',
-      'playerRadio',
-      'playerLive',
-      'playerMedia',
-      'playedTime',
-      'totalTime',
-      'isPlaying',
-      'isPaused',
-      'podcastImage',
-      'emissionName',
-      'transcriptText',
-      'radioUrl'
+      "playerPodcast",
+      "playerRadio",
+      "playerLive",
+      "playerMedia",
+      "playedTime",
+      "totalTime",
+      "isPlaying",
+      "isPaused",
+      "podcastImage",
+      "emissionName",
+      "transcriptText",
+      "radioUrl",
     ]),
-    ...mapState(useFilterStore, ['filterOrgaId']),
-		isImage(): boolean {
-			return (state.player.image as boolean);
-		},
-		podcastShareUrl(): RouteLocationRaw|string {
-      if(this.playerRadio?.podcast?.podcastId){
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    isImage(): boolean {
+      return state.player.image as boolean;
+    },
+    podcastShareUrl(): RouteLocationRaw | string {
+      if (this.playerRadio?.podcast?.podcastId) {
         return {
-					name: 'podcast',
-					params: { podcastId: this.playerRadio?.podcast?.podcastId.toString() },
-					query: { productor: this.filterOrgaId },
-				};
+          name: "podcast",
+          params: {
+            podcastId: this.playerRadio?.podcast?.podcastId.toString(),
+          },
+          query: { productor: this.filterOrgaId },
+        };
       }
-			if (this.playerPodcast) {
-				return {
-					name: 'podcast',
-					params: { podcastId: this.playerPodcast.podcastId.toString() },
-					query: { productor: this.filterOrgaId },
-				};
-			}
-			return '';
-		},
-		isEmissionName(): boolean {
-      return (state.player.emissionName as boolean);
+      if (this.playerPodcast) {
+        return {
+          name: "podcast",
+          params: { podcastId: this.playerPodcast.podcastId.toString() },
+          query: { productor: this.filterOrgaId },
+        };
+      }
+      return "";
+    },
+    isEmissionName(): boolean {
+      return state.player.emissionName as boolean;
     },
-		podcastTitle(): string {
-      if(this.playerRadio){
-        if(this.playerRadio.podcast){
+    podcastTitle(): string {
+      if (this.playerRadio) {
+        if (this.playerRadio.podcast) {
           return this.playerRadio.podcast.title;
         }
         return this.displayTitle(this.playerRadio.metadata);
       }
       if (this.playerPodcast) {
         if (this.isEmissionName)
-          return this.emissionName + ' - ' + this.playerPodcast.title;
+          return this.emissionName + " - " + this.playerPodcast.title;
         return this.playerPodcast.title;
       }
       if (this.playerMedia) return this.playerMedia.title;
       if (this.playerLive) {
         if (!this.hlsReady)
-          return this.playerLive.title + ' (' + this.$t('Start in a while') + ')';
+          return (
+            this.playerLive.title + " (" + this.$t("Start in a while") + ")"
+          );
         return this.playerLive.title;
       }
-      return '';
+      return "";
     },
-	},
-  watch:{
+  },
+  watch: {
     playerRadio: {
       deep: true,
-      immediate:true,
-      handler(newValue,oldValue){
-        if(oldValue && newValue && newValue.canalId === oldValue.canalId){return;}
-        clearInterval((this.radioInterval as unknown as number));
-        if(this.playerRadio){
+      immediate: true,
+      handler(newValue, oldValue) {
+        if (oldValue && newValue && newValue.canalId === oldValue.canalId) {
+          return;
+        }
+        clearInterval(this.radioInterval as unknown as number);
+        if (this.playerRadio) {
           this.fetchCurrentlyPlaying();
           this.radioInterval = setInterval(() => {
             this.fetchCurrentlyPlaying();
           }, 10000);
         }
-      }
+      },
     },
   },
-	created(){
-    window.addEventListener('keydown', this.addKeyboardControl);
+  created() {
+    window.addEventListener("keydown", this.addKeyboardControl);
   },
   beforeUnmount() {
-    window.removeEventListener('keydown', this.addKeyboardControl);
+    window.removeEventListener("keydown", this.addKeyboardControl);
   },
   methods: {
-    ...mapActions(usePlayerStore, ['playerMetadata', 'playerChangeStatus', 'playerRadioPodcast']),
-    async fetchCurrentlyPlaying(): Promise<void>{
-      this.fetchRadioMetadata(this.playerRadio?.canalId??0,this.playerRadio?.metadata.title??"", this.updateMetadata);
+    ...mapActions(usePlayerStore, [
+      "playerMetadata",
+      "playerChangeStatus",
+      "playerRadioPodcast",
+    ]),
+    async fetchCurrentlyPlaying(): Promise<void> {
+      this.fetchRadioMetadata(
+        this.playerRadio?.canalId ?? 0,
+        this.playerRadio?.metadata.title ?? "",
+        this.updateMetadata,
+      );
     },
-    updateMetadata(metadata: MediaRadio, podcast:Podcast|undefined, history?: Array<MediaRadio>): void{
-      this.playerMetadata(metadata, history??[]);
+    updateMetadata(
+      metadata: MediaRadio,
+      podcast: Podcast | undefined,
+      history?: Array<MediaRadio>,
+    ): void {
+      this.playerMetadata(metadata, history ?? []);
       this.playerRadioPodcast(podcast);
     },
-    addKeyboardControl(event: KeyboardEvent): void{
-      if(!event || null ===event){return;}
-      const element = event.target as HTMLElement; 
-      if (!element || 'INPUT' == element.tagName.toUpperCase() || 'TEXTAREA' == element.tagName.toUpperCase()){return;}
-      if (' ' === event.key || 'Spacebar' === event.key) {
+    addKeyboardControl(event: KeyboardEvent): void {
+      if (!event || null === event) {
+        return;
+      }
+      const element = event.target as HTMLElement;
+      if (
+        !element ||
+        "INPUT" == element.tagName.toUpperCase() ||
+        "TEXTAREA" == element.tagName.toUpperCase()
+      ) {
+        return;
+      }
+      if (" " === event.key || "Spacebar" === event.key) {
         event.preventDefault();
         this.switchPausePlay();
-			}else if ('ArrowRight' === event.key && event.ctrlKey) {
-        const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
-        if(!audioPlayer){return;}
+      } else if ("ArrowRight" === event.key && event.ctrlKey) {
+        const audioPlayer: HTMLAudioElement | null =
+          document.querySelector("#audio-player");
+        if (!audioPlayer) {
+          return;
+        }
         audioPlayer.currentTime += 15;
-			}else if ('ArrowLeft' === event.key && event.ctrlKey) {
-        const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
-        if(!audioPlayer){return;}
-        audioPlayer.currentTime -=15;
-			}
+      } else if ("ArrowLeft" === event.key && event.ctrlKey) {
+        const audioPlayer: HTMLAudioElement | null =
+          document.querySelector("#audio-player");
+        if (!audioPlayer) {
+          return;
+        }
+        audioPlayer.currentTime -= 15;
+      }
     },
-		switchPausePlay(): void {
-      const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
-      if(!audioPlayer){return;}
+    switchPausePlay(): void {
+      const audioPlayer: HTMLAudioElement | null =
+        document.querySelector("#audio-player");
+      if (!audioPlayer) {
+        return;
+      }
       this.playerChangeStatus(!audioPlayer.paused);
     },
-	}
-});
+  },
+});

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

@@ -1,12 +1,12 @@
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState, mapActions } from 'pinia';
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState, mapActions } from "pinia";
 /* eslint-disable */
 let Hls:any = null;
 /* eslint-enable */
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export const playerLive = defineComponent({
   data() {
     return {
@@ -14,21 +14,21 @@ export const playerLive = defineComponent({
       notListenTime: 0 as number,
       lastSend: 0 as number,
       hlsReady: false as boolean,
-      downloadId: null as string|null,
-      audioElement: null as HTMLAudioElement|null,
+      downloadId: null as string | null,
+      audioElement: null as HTMLAudioElement | null,
       hls: null as any,
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ['playerLive', 'playerRadio']),
-    ...mapState(useAuthStore, ['authOrgaId'])
+    ...mapState(usePlayerStore, ["playerLive", "playerRadio"]),
+    ...mapState(useAuthStore, ["authOrgaId"]),
   },
   methods: {
-    ...mapActions(usePlayerStore, ['playerChangeStatus']),
+    ...mapActions(usePlayerStore, ["playerChangeStatus"]),
     onPlay(): void {
       this.playerChangeStatus(false);
     },
-    playRadio(){
+    playRadio() {
       if (!this.playerRadio) return;
       this.playHls(this.playerRadio.url);
     },
@@ -37,10 +37,12 @@ export const playerLive = defineComponent({
       const hlsStreamUrl = `${state.podcastPage.hlsUri}live/dev.${this.playerLive.conferenceId}/index.m3u8`;
       this.playHls(hlsStreamUrl);
     },
-    async playHls(hlsStreamUrl: string): Promise<void>{
+    async playHls(hlsStreamUrl: string): Promise<void> {
       try {
-        this.audioElement = (document.getElementById('audio-player') as HTMLAudioElement);
-        if(null===this.audioElement){
+        this.audioElement = document.getElementById(
+          "audio-player",
+        ) as HTMLAudioElement;
+        if (null === this.audioElement) {
           setTimeout(() => {
             this.playHls(hlsStreamUrl);
           }, 1000);
@@ -48,12 +50,15 @@ export const playerLive = defineComponent({
         }
         const ua = navigator.userAgent.toLowerCase();
         const isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
-        if (this.audioElement.canPlayType('application/vnd.apple.mpegurl') && !isAndroid) {
+        if (
+          this.audioElement.canPlayType("application/vnd.apple.mpegurl") &&
+          !isAndroid
+        ) {
           this.audioElement.src = hlsStreamUrl;
           await this.initLiveDownloadId();
           await this.audioElement.play();
           this.onPlay();
-        }else{
+        } else {
           await this.initHls(hlsStreamUrl);
         }
       } catch (error) {
@@ -62,55 +67,72 @@ export const playerLive = defineComponent({
         }, 1000);
       }
     },
-    async initLiveDownloadId(){
-      if(!this.playerLive || this.downloadId){ return;}
+    async initLiveDownloadId() {
+      if (!this.playerLive || this.downloadId) {
+        return;
+      }
       try {
-        let 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
-        });
+        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');
+        console.log("ERROR downloadId");
       }
       this.hlsReady = true;
     },
     async initHls(hlsStreamUrl: string): Promise<void> {
-      return new Promise<void>(async(resolve, reject) => {
-        if(null === Hls){
-          await import('hls.js').then((hlsLibrary) => {
+      return new Promise<void>(async (resolve, reject) => {
+        if (null === Hls) {
+          await import("hls.js").then((hlsLibrary) => {
             Hls = hlsLibrary.default;
-          })
+          });
         }
         if (!Hls.isSupported()) {
-          reject('Hls is not supported ! ');
+          reject("Hls is not supported ! ");
         }
         this.hls = new Hls();
         this.hls.on(Hls.Events.MANIFEST_PARSED, async () => {
           await this.initLiveDownloadId();
-          this.hls.attachMedia((this.audioElement as HTMLAudioElement));
+          this.hls.attachMedia(this.audioElement as HTMLAudioElement);
           await (this.audioElement as HTMLAudioElement).play();
           this.onPlay();
           resolve();
         });
-        this.hls.on(Hls.Events.ERROR, async() => {
-          reject('There is an error while reading media content');
+        this.hls.on(Hls.Events.ERROR, async () => {
+          reject("There is an error while reading media content");
         });
         this.hls.loadSource(hlsStreamUrl);
       });
     },
-    setDownloadId(newValue: string|null): void {
+    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{
+        await octopusApi.putDataPublic(
+          0,
+          "podcast/listen/" +
+            this.downloadId +
+            "?seconds=" +
+            Math.round(this.listenTime),
+          undefined,
+        );
+      } catch {
         //Do nothing
       }
       this.downloadId = null;
@@ -118,13 +140,13 @@ export const playerLive = defineComponent({
       this.lastSend = 0;
       this.listenTime = 0;
     },
-    endingLive():void{
-      const audio: HTMLElement|null = document.getElementById('audio-player');
-      if(audio && this.hls){
+    endingLive(): void {
+      const audio: HTMLElement | null = document.getElementById("audio-player");
+      if (audio && this.hls) {
         this.hls.destroy();
-        (audio as HTMLAudioElement).src = '';
+        (audio as HTMLAudioElement).src = "";
         this.hls = null;
       }
-    }
+    },
   },
-})
+});