@saooti/octopus-sdk 31.0.19 → 31.0.20

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

@@ -0,0 +1,97 @@
+
+import { mapState } from 'vuex';
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
+import { CommentPodcast } from '@/store/class/general/comment';
+import { StoreState } from '@/store/typeAppStore';
+import { defineComponent } from 'vue';
+import { FetchParam } from '@/store/class/general/fetchParam';
+export const playerComment = defineComponent({
+  data() {
+    return {
+      comments: [] as Array<CommentPodcast>,
+    };
+  },
+  computed: {
+    ...mapState({
+      commentsLoaded(state: StoreState){ return state.comments.loadedComments},
+      live(state: StoreState) { return state.player.live},
+      podcast(state: StoreState) { return state.player.podcast}
+    }),
+    organisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+  },
+
+  watch: {
+    commentsLoaded(): void {
+      this.initComments(true);
+    },
+  },
+  methods: {
+    editRight(organisation: string): boolean {
+      if (
+        (state.generalParameters.isCommments &&
+          this.organisationId === organisation) ||
+        state.generalParameters.isAdmin
+      )
+        return true;
+      return false;
+    },
+    async initComments(refresh = false): Promise<void> {
+      let podcastId, organisation;
+      if (this.podcast) {
+        podcastId = this.podcast.podcastId;
+        organisation = this.podcast.organisation.id;
+      } else if (this.live) {
+        podcastId = this.live.livePodcastId;
+        organisation = this.live.organisation.id;
+      }
+      if (
+        refresh &&
+        podcastId &&
+        this.$store.state.comments.actualPodcastId !== podcastId
+      ) {
+        return;
+      }
+      let first = 0;
+      let count = 0;
+      const size = 50;
+      if (
+        podcastId &&
+        this.$store.state.comments.actualPodcastId === podcastId
+      ) {
+        this.comments = this.commentsLoaded;
+        if (
+          this.commentsLoaded &&
+          this.commentsLoaded.length < this.$store.state.comments.totalCount
+        ) {
+          first = this.commentsLoaded.length;
+          count = this.$store.state.comments.totalCount;
+        }
+      }
+      if (
+        (!podcastId ||
+          this.$store.state.comments.actualPodcastId === podcastId) &&
+        0 === first
+      )
+        return;
+      while (0 === first || this.comments.length < count) {
+        const param: FetchParam = {
+          first: first,
+          size: size,
+          podcastId: podcastId,
+        };
+        if (!this.editRight(organisation? organisation : '')) {
+          param.status = ['Valid'];
+        }
+        const data = await octopusApi.fetchRootComments(param);
+        first += size;
+        count = data.totalElements;
+        this.comments = this.comments.concat(data.content).filter((c: CommentPodcast) => {
+          return null !== c;
+        });
+      }
+    },
+  },
+})

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,113 @@
+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 ! ');
+        }
+        let hls = new Hls();
+        if(this.$store.state.authentication.isAuthenticated && this.$store.state.oAuthParam.accessToken){
+          hls = new Hls({xhrSetup:
+            (xhr: any) => {
+              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.requestLiveDownloadId(
+              this.live.livePodcastId
+            );
+            await octopusApi.markPlayingLive(
+              this.live.livePodcastId,
+              downloadId,
+              'octopus',
+              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;
+      await octopusApi.updatePlayerTime(
+        this.downloadId,
+        Math.round(this.listenTime)
+      );
+      this.setDownloadId(null);
+      this.notListenTime = 0;
+      this.lastSend = 0;
+      this.listenTime = 0;
+    },
+  },
+})

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

@@ -0,0 +1,234 @@
+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,
+    };
+  },
+  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: {
+    audioUrl(): void{
+      this.playerError = false;
+    },
+    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.updatePlayerTime(
+        this.downloadId,
+        Math.round(newVal)
+      );
+    },
+    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: {
+    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('cookieName=player_' + this.podcast.podcastId);
+      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.audioUrl + '?' + 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();
+        let domain = "";
+        const domainArray: RegExpExecArray | null = /\.(.+)/.exec(window.location.host);
+        if(domainArray &&  null !== domainArray){
+          domain = domainArray[1];
+        }
+        this.setCookie("octopus_listenerId", listenerId, ';domain='+domain);
+      }
+      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.listenError) {
+        this.listenError = true;
+      } else if (this.podcast || this.media) {
+        this.playerError = true;
+      }
+    },
+    onTimeUpdate(event: Event): void {
+      const mediaTarget = (event.currentTarget as HTMLMediaElement);
+      if (this.podcast || this.live) {
+        if (!this.downloadId) {
+          this.loadDownloadId();
+        }
+        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;
+    },
+    loadDownloadId(): void {
+      if (!this.podcast) return;
+      const matching_cookies = document.cookie
+        .split(';')
+        .map(item => {
+          const _return = item.trim().split('=');
+          return _return.map(item => item.trim());
+        })
+        .filter(item => {
+          if(!this.podcast){return '';}
+          return 'player_' + this.podcast.podcastId === item[0];
+        });
+      if (1 === matching_cookies.length) {
+        this.setDownloadId(matching_cookies[0][1]);
+      }
+    },
+  },
+})

package/src/locale/de.ts

@@ -297,4 +297,6 @@ export default{
   'From RSS': "Aus RSS-Feed",
   "User menu":"Benutzermenü",
   'Podcast tags': "Podcast-Tags",
+  "Enlarge":"Vergrößern",
+  "Reduce":"Reduzieren",
 }

package/src/locale/en.ts

@@ -298,4 +298,6 @@ export default{
   "User menu":"User menu",
   'Podcast tags': 'Podcast tags',
   "You do not have the right to access this page":"You do not have the right to access this page",
+  "Enlarge":"Enlarge",
+  "Reduce":"Reduce",
 };

package/src/locale/es.ts

@@ -297,4 +297,6 @@ export default{
   'From RSS': "Desde un canal RSS",
   "User menu":"Menú de usuario",
   'Podcast tags': 'Etiquetas de pódcast',
+  "Enlarge":"Agrandar",
+  "Reduce":"Reducir",
 }

package/src/locale/fr.ts

@@ -298,4 +298,6 @@ export default{
   "User menu":"Menu utilisateur",
   'Podcast tags': "Mot-clé de l'épisode",
   "You do not have the right to access this page":"Vous n’avez pas le droit d’accéder à cette page",
+  "Enlarge":"Agrandir",
+  "Reduce":"Réduire",
 };

package/src/locale/it.ts

@@ -295,4 +295,6 @@ export default{
     'Podcast tags': 'Tag podcast', 
     "Term of use":"Termini d'uso",
     'More episodes of this category : ': "Altri episodi su questo tema : {name}",
+    "Enlarge":"Ingrandire",
+    "Reduce":"Ridurre",
   };

package/src/locale/sl.ts

@@ -297,4 +297,6 @@ export default{
   'From RSS': "Z vira RSS",
   "User menu":"Uporabniški meni",
   'Podcast tags': 'Oznake podkastov',
+  "Enlarge":"Povečaj",
+  "Reduce":"Zmanjšaj",
 }

package/src/store/paramStore.ts

@@ -73,8 +73,6 @@ const state:paramStore = {
   player: {
     image: true,
     emissionName: false,
-    clock: false,
-    barTop: false,
   },
   footer: {
     contactLink: undefined,
@@ -164,9 +162,7 @@ export interface SearchPage{
 }
 export interface Player{
   image?: boolean
-    emissionName?: boolean
-    clock?: boolean
-    barTop?: boolean
+  emissionName?: boolean
 }
 export interface Footer{
   contactLink?: string|undefined