@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/misc/player/PlayerProgressBar.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="!playerError"
+    class="progress c-hand"
+    @mouseup="seekTo"
+  >
+    <div
+      class="progress-bar bg-light"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + percentLiveProgress + '%'"
+    />
+    <div
+      class="progress-bar primary-bg"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + percentProgress + '%'"
+    />
+    <div
+      v-if="displayAlertBar"
+      class="progress-bar progress-bar-duration bg-danger"
+      :style="'left: ' + durationLivePosition + '%'"
+    />
+  </div>
+  <CommentPlayer
+    v-if="showTimeline"
+    :total-time="totalSecondes"
+    :comments="comments"
+  />
+</template>
+
+<script lang="ts">
+import { CommentPodcast } from '@/store/class/general/comment';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CommentPlayer = defineAsyncComponent(() => import('../../display/comments/CommentPlayer.vue'));
+export default defineComponent({
+  name: 'PlayerProgressBar',
+
+  components: {
+    CommentPlayer,
+  },
+  props: {
+    hlsReady: { default: false, type: Boolean},
+    showTimeline: { default: false, type: Boolean},
+    comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
+    displayAlertBar: { default: false, type: Boolean},
+    percentLiveProgress: { default: 0, type: Number},
+    durationLivePosition: { default: 0, type: Number},
+    playerError: { default: false, type: Boolean},
+    listenTime: { default: 0, type: Number},
+  },
+  emits: ['updateNotListenTime'],
+  
+  computed: {
+    percentProgress(): number{
+      if(!this.$store.state.player.elapsed){return 0;}
+      return this.$store.state.player.elapsed * 100;
+    },
+    totalSecondes(): number{
+      return this.$store.state.player.total;
+    },
+  },
+
+  
+  methods: {
+    seekTo(event: MouseEvent): void {
+      const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
+      if(!audioPlayer || null===event.currentTarget){return;}
+      const rect = (event.currentTarget as Element).getBoundingClientRect();
+      const barWidth = (event.currentTarget as Element).clientWidth;
+      const x = event.clientX - rect.left;
+      const percentPosition = x / barWidth;
+      if (percentPosition * 100 >= this.percentLiveProgress) return;
+      const seekTime = this.$store.state.player.total * percentPosition;
+      this.isSeekTo(audioPlayer, seekTime);
+    },
+    isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
+      if (this.$store.state.player.podcast || this.$store.state.player.live) {
+        this.$emit('updateNotListenTime',seekTime - this.listenTime);
+      }
+      audioPlayer.currentTime = seekTime;
+    }
+    
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+  .progress {
+    height: 4px;
+    position: relative;
+    @media (max-width: 960px) {
+      height: 8px;
+    }
+  }
+  .progress-bar-duration {
+    width: 10px;
+  }
+  .progress-bar {
+    height: 4px;
+    position: absolute;
+    @media (max-width: 960px) {
+      height: 8px;
+    }
+  }
+}
+</style>

package/src/components/misc/player/PlayerTimeline.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="0 !== comments.length && !isPodcastmaker"
+    class="timeline-button"
+    @click="$emit('update:showTimeline', !showTimeline)"
+  >
+    <div
+      class="saooti-down"
+      :class="showTimeline ? '' : 'arrow-transform'"
+    />
+    <div>Timeline</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from '../../../store/paramStore';
+import { defineComponent } from 'vue';
+import { CommentPodcast } from '@/store/class/general/comment';
+export default defineComponent({
+  name: 'PlayerTimeline',
+
+  props: {
+    showTimeline: { default: false, type: Boolean},
+    comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
+  },
+  emits:['update:showTimeline'],
+
+  computed: {
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+  },
+
+})
+</script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app{
+.player-container {
+  .timeline-button {
+    background: black;
+    padding: 0.1rem;
+    border-radius: 50%;
+    width: 70px;
+    height: 70px;
+    font-size: 0.7rem;
+    font-weight: bold;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    color: $octopus-primary-color;
+    margin-left: 0.5rem;
+    @media (max-width: 960px) {
+      display: none;
+    }
+  }
+}
+}
+</style>

package/src/components/mixins/functions.ts

@@ -1,23 +1,25 @@
-export const selenium = {
+
+export const selenium ={
   methods: {
-    seleniumFormat(string: string) {
+    seleniumFormat(string: string): string {
       return string.toLowerCase().replace(/\s/g, '');
     },
   },
 };
-export const cookies = {
+export const cookies =
+{
   methods: {
-    setCookie(name: string, value: any) {
-      var date = new Date();
+    setCookie(name: string, value: string, domain= ""): void {
+      const date = new Date();
       date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
-      var expires = '; expires=' + date.toUTCString();
-      document.cookie = name + '=' + (value || '') + expires + '; path=/';
+      const expires = '; expires=' + date.toUTCString();
+      document.cookie = name + '=' + (value || '') + expires +domain+ '; path=/';
     },
-    getCookie(name: string) {
-      var nameEQ = name + '=';
-      var ca = document.cookie.split(';');
-      for (var i = 0; i < ca.length; i++) {
-        var c = ca[i];
+    getCookie(name: string): string|null {
+      const nameEQ = name + '=';
+      const ca = document.cookie.split(';');
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
         while (c.charAt(0) == ' ') c = c.substring(1, c.length);
         if (0 === c.indexOf(nameEQ))
           return c.substring(nameEQ.length, c.length);
@@ -27,21 +29,21 @@ export const cookies = {
   },
 };
 
-export const displayMethods = {
+export const displayMethods ={
   methods: {
-    urlify(text: string) {
-      let urlRegex = /(https?:\/\/[^\s]+)/g;
+    urlify(text: string): string {
+      const urlRegex = /(https?:\/\/[^\s<]+)/g;
       if (!text) return '';
       return text.replace(urlRegex, (url: string) => {
-        return '<a href="' + url + '" target="_blank">' + url + '</a>';
+        return '<a href="' + url + '" target="_blank" rel="noopener">' + url + '</a>';
       });
     },
-    async onCopyCode(link: string, callback: ()=>void) {
+    async onCopyCode(link: string, callback: () => void): Promise<void> {
       if ('undefined' !== typeof navigator.clipboard) {
         await navigator.clipboard.writeText(link);
         return callback();
       }
-      let textArea = document.createElement('textarea');
+      const textArea = document.createElement('textarea');
       textArea.value = link;
       textArea.style.position = 'fixed';
       document.body.appendChild(textArea);
@@ -53,3 +55,4 @@ export const displayMethods = {
     },
   },
 };
+

package/src/components/mixins/handle403.ts

@@ -0,0 +1,17 @@
+import { AxiosError } from 'axios';
+import { defineComponent } from 'vue';
+export const handle403 = defineComponent({
+  methods: {
+    handle403(error: AxiosError): void {
+      if (403 === error.response?.status) {
+        if(!this.$store.state.authentication.isAuthenticated){
+          window.location.href = window.location.origin + "/sso/login";
+        }else{
+          this.$router.push({
+            path: '/main/pub/error'
+          });
+        }
+      }
+    },
+  },
+});

package/src/components/mixins/init.ts

@@ -0,0 +1,24 @@
+
+import { Category } from "@/store/class/general/category";
+import { orgaFilter } from '../mixins/organisationFilter';
+import octopusApi from '@saooti/octopus-api';
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+export const initSDK = defineComponent({
+  mixins: [orgaFilter],
+  methods: {
+    async initSdk() {
+      if (0 === (state.generalParameters.allCategories as Array<Category>).length) {
+        octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list${state.octopusApi.organisationId? '/'+state.octopusApi.organisationId : ''}`, { lang: this.$i18n.locale }).then((data: Array<Category>) => {
+          this.$store.commit('categoriesSet', data);
+        });
+      }else{
+        this.$store.commit('categoriesSet', (state.generalParameters.allCategories as Array<Category>));
+      }
+      const captcha = (document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement);
+      if (captcha) {
+        captcha.style.display = 'none';
+      }
+    },
+  },
+});

package/src/components/mixins/orgaComputed.ts

@@ -0,0 +1,15 @@
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+export const orgaComputed = defineComponent({
+  computed: {
+		myOrganisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+		filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+  },
+});

package/src/components/mixins/organisationFilter.ts

@@ -0,0 +1,41 @@
+
+import { handle403 } from '../mixins/handle403';
+import { Rubriquage } from "@/store/class/rubrique/rubriquage";
+import octopusApi from '@saooti/octopus-api';
+import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
+import { Organisation } from '@/store/class/general/organisation';
+export const orgaFilter = defineComponent({
+  mixins: [handle403],
+  methods: {
+    async selectOrganisation(organisationId: string): Promise<void> {
+      try {
+        const response = await octopusApi.fetchData<Organisation>(0,`organisation/${organisationId}`);
+        const data = await octopusApi.fetchDataWithParams<Array<Rubriquage>>(0, 'rubriquage/find/'+organisationId,{
+          sort:'HOMEPAGEORDER',
+          homePageOrder: true
+        }, true);
+        const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+organisationId);
+        this.$store.commit('filterOrga', {
+          orgaId: organisationId,
+          imgUrl: response.imageUrl,
+          name: response.name,
+          rubriquageArray: data.filter((element: Rubriquage)=>{
+            return element.rubriques.length;
+          }),
+          isLive: isLive
+        });
+        const queries = this.$route.query;
+        this.$router.replace({ query: {...queries, ...{productor: organisationId} } });
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
+    },
+    removeSelectedOrga(): void{
+      if (this.$route.query.productor) {
+        this.$router.push({ query: {...this.$route.query, ...{productor: undefined} } });
+      }
+      this.$store.commit('filterOrga', { orgaId: undefined });
+    }
+  },
+});

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

@@ -0,0 +1,98 @@
+
+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';
+import { InterfacePageable } from '@/store/class/general/interfacePageable';
+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.postDataPublic<InterfacePageable<CommentPodcast>>(2, 'getRootCom',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,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;
+    },
+  },
+})