@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -0,0 +1,113 @@
+import { Podcast } from '@/store/class/general/podcast';
+import DurationHelper from '../../../helper/duration';
+import { state } from '../../../store/paramStore';
+import { defineComponent } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+export const playerDisplay = defineComponent({
+	props: {
+    hlsReady: { default: false , type: Boolean},
+  },
+	computed:{
+		playedTime(): string{
+      if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
+        return DurationHelper.formatDuration(
+          Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
+        );
+      }
+      return '--:--';
+    },
+		totalTime(): string {
+      if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0)
+        return DurationHelper.formatDuration(Math.round(this.$store.state.player.total));
+      return '--:--';
+    },
+		isPlaying(): boolean {
+			return 'PLAYING' === this.$store.state.player.status;
+		},
+		isPaused(): boolean {
+			return 'PAUSED' === this.$store.state.player.status;
+		},
+		podcast(): undefined|Podcast{
+			return this.$store.state.player.podcast;
+		},
+		isImage(): boolean {
+			return (state.player.image as boolean);
+		},
+		podcastImage(): string{
+			if (this.$store.state.player.podcast) return this.$store.state.player.podcast.imageUrl;
+			return '';
+		},
+		podcastShareUrl(): RouteLocationRaw|string {
+			if (this.podcast) {
+				return {
+					name: 'podcast',
+					params: { podcastId: this.podcast.podcastId.toString() },
+					query: { productor: this.$store.state.filter.organisationId },
+				};
+			}
+			return '';
+		},
+		isEmissionName(): boolean {
+      return (state.player.emissionName as boolean);
+    },
+		podcastTitle(): string {
+      if (this.$store.state.player.podcast) {
+        if (this.isEmissionName)
+          return this.emissionName + ' - ' + this.$store.state.player.podcast.title;
+        return this.$store.state.player.podcast.title;
+      }
+      if (this.$store.state.player.media) return this.$store.state.player.media.title;
+      if (this.$store.state.player.live) {
+        if (!this.hlsReady)
+          return this.$store.state.player.live.title + ' (' + this.$t('Start in a while') + ')';
+        return this.$store.state.player.live.title;
+      }
+      return '';
+    },
+    emissionName(): string {
+      if (this.$store.state.player.podcast) return this.$store.state.player.podcast.emission.name;
+      return '';
+    },
+	},
+	created(){
+    window.addEventListener('keydown', this.addKeyboardControl);
+  },
+  beforeUnmount() {
+    window.removeEventListener('keydown', this.addKeyboardControl);
+  },
+
+  methods: {
+    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;}
+        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;}
+      if (audioPlayer.paused) {
+        this.onPlay();
+      } else {
+        this.onPause();
+      }
+    },
+    onPlay(): void {
+      this.$store.commit('playerPause', false);
+    },
+    onPause(): void {
+      this.$store.commit('playerPause', true);
+    },
+	}
+});

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

@@ -0,0 +1,111 @@
+import { mapState } from 'vuex';
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
+/* eslint-disable */
+let Hls:any = null;
+/* eslint-enable */
+import { StoreState } from '@/store/typeAppStore';
+import { defineComponent } from 'vue';
+export const playerLive = defineComponent({
+  data() {
+    return {
+      listenTime: 0 as number,
+      notListenTime: 0 as number,
+      lastSend: 0 as number,
+      hlsReady: false as boolean,
+      downloadId: null as string|null,
+    };
+  },
+  computed: {
+    ...mapState({
+      live(state: StoreState) { return state.player.live}
+    }),
+  },
+  methods: {
+    onPlay(): void {
+      this.$store.commit('playerPause', false);
+    },
+    async playLive(): Promise<void> {
+      if (!this.live) return;
+      const hlsStreamUrl =
+        state.podcastPage.hlsUri +
+        'stream/dev.' +
+        this.live.conferenceId +
+        '/index.m3u8';
+      try {
+        await this.initHls(hlsStreamUrl);
+      } catch (error) {
+        console.log(error);
+        setTimeout(() => {
+          this.playLive();
+        }, 1000);
+      }
+    },
+    async initHls(hlsStreamUrl: string): Promise<void> {
+      return new Promise<void>(async(resolve, reject) => {
+        if(null === Hls){
+          //TODO -> Version light min quand ce sera possible
+          await import('hls.js/dist/hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
+            await import('hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
+        }
+        if (!Hls.isSupported()) {
+          reject('Hls is not supported ! ');
+        }
+        const hls = new Hls();
+        /* if(this.$store.state.authentication.isAuthenticated && this.$store.state.oAuthParam.accessToken){
+          hls = new Hls({xhrSetup:
+            (xhr: XMLHttpRequest) => {
+              xhr.setRequestHeader("Authorization", "Bearer " + this.$store.state.oAuthParam.accessToken);
+            }
+            }
+          );
+        } */
+        hls.on(Hls.Events.MANIFEST_PARSED, async () => {
+          if(!this.live){ return; }
+          let downloadId = null;
+          try {
+            downloadId = await octopusApi.putDataPublic<string | null>(0, 'podcast/prepare/live/'+this.live.livePodcastId, undefined);
+            await octopusApi.fetchDataPublicWithParams<string | null>(0,'podcast/download/live/' + this.live.livePodcastId+".m3u8",{
+              'downloadId': null!==downloadId ? downloadId : undefined,
+              'origin':'octopus',
+              'distributorId':this.$store.state.authentication.organisationId
+            });
+            this.setDownloadId(downloadId);
+          } catch (error) {
+            console.log('ERROR downloadId');
+          }
+          this.hlsReady = true;
+          const audio: HTMLElement|null = document.getElementById('audio-player');
+          hls.attachMedia((audio as HTMLAudioElement));
+          await (audio as HTMLAudioElement).play();
+          this.onPlay();
+          resolve();
+        });
+        hls.on(Hls.Events.ERROR, async() => {
+          reject('There is an error while reading media content');
+        });
+        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;
+    },
+  },
+})

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

@@ -0,0 +1,225 @@
+import { mapState } from 'vuex';
+import octopusApi from '@saooti/octopus-api';
+import { CommentPodcast } from '@/store/class/general/comment';
+import { cookies } from '../functions';
+import { playerLive } from './playerLive';
+import { playerComment } from './playerComment';
+import { StoreState } from '@/store/typeAppStore';
+import { defineComponent } from 'vue';
+export const playerLogic = defineComponent({
+  mixins:[cookies,playerLive,playerComment],
+  data() {
+    return {
+      forceHide: false as boolean,
+      listenTime: 0 as number,
+      notListenTime: 0 as number,
+      lastSend: 0 as number,
+      downloadId: null as string|null,
+      playerError: false as boolean,
+      listenError: false as boolean,
+      percentLiveProgress: 0 as number,
+      durationLivePosition: 0 as number,
+      displayAlertBar: false as boolean,
+      hlsReady: false as boolean,
+      comments: [] as Array<CommentPodcast>,
+      showTimeline: false as boolean,
+      audioUrlToPlay: "" as string
+    };
+  },
+  computed: {
+    ...mapState({
+      podcast (state: StoreState){ return state.player.podcast},
+      media: (state: StoreState) => state.player.media,
+      live: (state: StoreState) => state.player.live,
+      volume: (state: StoreState) => state.player.volume,
+      commentsLoaded: (state: StoreState) => state.comments.loadedComments,
+      percentProgress: (state: StoreState) => {
+        if(!state.player.elapsed){return 0;}
+        return state.player.elapsed * 100;
+      },
+      playerSeekTime: (state: StoreState) => state.player.seekTime,
+    }),
+    audioUrl(): string {
+      return this.getAudioUrl();
+    },
+  },
+
+  watch: {
+    async audioUrl(): Promise<void>{
+      this.playerError = false;
+      if(this.media || !this.podcast || !this.podcast.availability.visibility ||this.listenError){
+        this.audioUrlToPlay = this.audioUrl;
+      }
+      if(!this.podcast){return;}
+      const response = await octopusApi.fetchDataPublic<{location:string, downloadId: number}>(0,"podcast/download/register/"+ this.audioUrl);
+      this.setDownloadId(response.downloadId.toString());
+      this.audioUrlToPlay = response.location;
+    },
+    podcast: {
+      deep: true,
+      handler(){
+        this.reInitPlayer();
+      }
+    },
+    live: {
+      deep: true,
+      async handler(){
+        this.hlsReady = false;
+        this.reInitPlayer();
+        await this.playLive();
+      }
+    },
+    async listenTime(newVal): Promise<void> {
+      if ((!this.podcast && !this.live)||(!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.$store.state.player.podcast || this.$store.state.player.live) {
+        this.notListenTime = this.playerSeekTime - this.listenTime;
+      }
+      const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
+      if (!audioPlayer) return;
+      audioPlayer.currentTime = this.playerSeekTime;
+    },
+  },
+
+  mounted() {
+    window.addEventListener('beforeunload', this.endListeningProgress);
+    this.watchPlayerStatus();
+  },
+  
+  methods: {
+    getDomain(): string{
+      let domain = "";
+      const domainArray: RegExpExecArray | null = /\.(.+)/.exec(window.location.host);
+      if(domainArray &&  null !== domainArray){
+        domain = domainArray[1];
+      }
+      return domain;
+    },
+    getAudioUrl(): string{
+      if (this.media) return this.media.audioUrl? this.media.audioUrl:"";
+      if (!this.podcast) return '';
+      if (!this.podcast.availability.visibility)
+        return this.podcast.audioStorageUrl;
+      if (this.listenError) return this.podcast.audioStorageUrl;
+      const parameters = [];
+      parameters.push('origin=octopus');
+      parameters.push('listenerId='+this.getListenerId());
+      if (
+        this.$store.state.authentication &&
+        this.$store.state.authentication.organisationId
+      ) {
+        parameters.push(
+          'distributorId=' + this.$store.state.authentication.organisationId
+        );
+      }
+      if("SECURED" === this.podcast.organisation.privacy && this.$store.state.authentication.isAuthenticated && this.$store.state.oAuthParam.accessToken){
+        parameters.push('access_token='+this.$store.state.oAuthParam.accessToken);
+      }
+      return this.podcast.podcastId + '.mp3?' + parameters.join('&');
+    },
+    reInitPlayer():void{
+      this.setDownloadId(null);
+      this.listenError = false;
+      this.initComments();
+    },
+    stopPlayer(): void {
+      this.$store.commit('playerPlayPodcast');
+    },
+    getListenerId(): string{
+      let listenerId = this.getCookie("octopus_listenerId");
+      if(!listenerId){
+        listenerId = new Date().valueOf().toString() + Math.random();
+        this.setCookie("octopus_listenerId", listenerId, ';domain='+this.getDomain());
+      }
+      return listenerId;
+    },
+    watchPlayerStatus(): void {
+      this.$store.watch(
+        (state: StoreState) => state.player.status,
+        (newValue: string) => {
+          const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
+          if (!audioPlayer) return;
+          if (this.live && !this.hlsReady) {
+            audioPlayer.pause();
+            this.percentLiveProgress = 0;
+            this.durationLivePosition = 0;
+            return;
+          }
+          if ('PAUSED' === newValue) {
+            audioPlayer.pause();
+          }else if ('PLAYING' === newValue){
+            audioPlayer.play();
+          }
+        }
+      );
+    },
+    onError(): void {
+      if (this.podcast && ""!==this.audioUrlToPlay &&  !this.listenError) {
+        this.listenError = true;
+      } else if ((this.podcast && ""!==this.audioUrlToPlay ) || this.media) {
+        this.playerError = true;
+      }
+    },
+    onTimeUpdate(event: Event): void {
+      const mediaTarget = (event.currentTarget as HTMLMediaElement);
+      if (this.podcast || this.live) {
+        if (!this.downloadId) {
+          return;
+        }
+        if (
+          this.live &&
+          0 === this.listenTime &&
+          0 !== mediaTarget.currentTime
+        ) {
+          this.notListenTime = mediaTarget.currentTime;
+          this.listenTime = 1;
+        } else {
+          this.listenTime =
+            mediaTarget.currentTime - this.notListenTime;
+        }
+      }
+      const streamDuration = mediaTarget.duration;
+      if (!streamDuration) return;
+      if (!mediaTarget.currentTime) return;
+      if (!this.live) {
+        this.displayAlertBar = false;
+        this.percentLiveProgress = 100;
+        this.$store.commit('playerTotalTime', streamDuration);
+        this.$store.commit('playerElapsed', mediaTarget.currentTime / streamDuration);
+        return;
+      }
+      const scheduledDuration = this.live.duration / 1000;
+      if (scheduledDuration > streamDuration) {
+        this.displayAlertBar = false;
+        this.percentLiveProgress = (streamDuration / scheduledDuration) * 100;
+        this.$store.commit('playerTotalTime', scheduledDuration);
+        this.$store.commit(
+          'playerElapsed',
+          mediaTarget.currentTime / scheduledDuration
+        );
+      } else {
+        this.percentLiveProgress = 100;
+        this.displayAlertBar = true;
+        this.durationLivePosition = (scheduledDuration / streamDuration) * 100;
+        this.$store.commit('playerTotalTime', streamDuration);
+        this.$store.commit('playerElapsed', mediaTarget.currentTime / streamDuration);
+      }
+    },
+    onFinished(): void {
+      this.setDownloadId(null);
+      if (this.live) {
+        const audio: HTMLElement|null = document.getElementById('audio-player');
+        if(audio){
+          (audio as HTMLAudioElement).src = '';
+        }
+      }
+      this.forceHide = true;
+    },
+  },
+})

package/src/components/mixins/tagOfMixins.ts

@@ -0,0 +1,19 @@
+import {defineComponent } from 'vue';
+export const tagOfMixins =  defineComponent({
+  name: 'TagOfMixins',
+	methods:{
+    isOuestFranceTag(tag: string): boolean{
+      return "[of]"===tag.substring(0,4);
+    },
+    formateOfTag(tag: string): string{
+      if(!this.isOuestFranceTag(tag)){
+        return tag;
+      }
+      const lastSlash = tag.lastIndexOf('/');
+      if(-1!==lastSlash){
+        return tag.substring(lastSlash + 1, tag.length);
+      }
+      return tag.substring(4, tag.length);
+    },
+	}
+});

package/src/components/pages/Category.vue

@@ -2,29 +2,25 @@
   <div class="page-box">
     <h1>{{ title }}</h1>
     <PodcastList
-      :first="firstRoute"
-      :size="sizeRoute"
-      :iabId="iabId"
-      :organisationId="filterOrga"
+      :first="0"
+      :size="30"
+      :iab-id="iabId"
+      :organisation-id="filterOrga"
     />
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-// @ is an alias to /src
 import PodcastList from '../display/podcasts/PodcastList.vue';
 
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue'
+import { Category } from '@/store/class/general/category';
+export default defineComponent({
   components: {
     PodcastList,
   },
   props: {
-    firstRoute: { default: 0 as number},
-    sizeRoute: { default: 12 as number},
-    iabId: { default: undefined as number|undefined},
+    iabId: { default: undefined, type: Number},
   },
 
   data() {
@@ -33,30 +29,29 @@ export default Vue.extend({
     };
   },
 
-  mounted() {
-    this.extractTitle();
-  },
-
   computed: {
-    categories(): any {
+    categories(): Array<Category> {
       return this.$store.state.categories;
     },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
   },
+  watch: {
+    iabId(): void {
+      this.extractTitle();
+    },
+  },
+
+  mounted() {
+    this.extractTitle();
+  },
   methods: {
     extractTitle(): void {
-      const matchCategories = this.categories.filter((c: any) => c.id === this.iabId);
+      const matchCategories = this.categories.filter((c: Category) => c.id === this.iabId);
       if (1 !== matchCategories.length) return;
       this.title = matchCategories[0]['name'];
-
-    },
-  },
-  watch: {
-    iabId(): void {
-      this.extractTitle();
     },
   },
-});
-</script>
+})
+</script>