@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="d-flex flex-column align-items-center my-2 flex-grow-1 text-light position-relative overflow-y-auto"
+  >
+    <button
+      :title="$t('Reduce')"
+      class="player-reduce-button btn bg-transparent text-light saooti-down"
+      @click="changePlayerLargeVersion"
+    />
+    <router-link
+      v-if="isImage && podcastImage"
+      :to="podcastShareUrl"
+    >
+      <img
+        v-lazy="podcastImage"
+        :alt="$t('Podcast image')"
+        class="img-box"
+      >
+    </router-link>
+    <div class="d-flex w-100 px-2 mt-2 text-center">
+      <div
+        v-if="playerError"
+        class="text-warning mx-2"
+      >
+        {{ $t('Podcast play error') + ' - ' }}
+      </div>
+      <div class="flex-grow-1 text-truncate h3">
+        {{ podcastTitle }}
+      </div>
+    </div>
+    <div class="player-grow-large-content">
+      <PlayerProgressBar
+        ref="progressbar"
+        :hls-ready="hlsReady"
+        :show-timeline="showTimeline"
+        :comments="comments"
+        :display-alert-bar="displayAlertBar"
+        :percent-live-progress="percentLiveProgress"
+        :duration-live-position="durationLivePosition"
+        :player-error="playerError"
+        :listen-time="listenTime"
+        @updateNotListenTime="$emit('update:notListenTime', $event)"
+      />
+      <div class="d-flex justify-content-between">
+        <div>{{ playedTime }}</div>
+        <div>{{ totalTime }}</div>
+      </div>
+    </div>
+    <div class="d-flex align-items-center">
+      <button
+        class="btn fs-1 bg-transparent text-light saooti-backward"
+        @click="seekClick(-15)"
+      />
+      <button
+        v-if="!playerError"
+        :title="$t('Play')"
+        :class="{
+          'saooti-play': isPaused,
+          'saooti-pause': isPlaying,
+          '':!isPaused&&!isPlaying
+        }"
+        class="btn play-big-button-box text-light primary-bg"
+        @click="switchPausePlay"
+      >
+        <span
+          v-if="!isPaused&&!isPlaying"
+          class="spinner-border flex-shrink-0"
+        />
+      </button>
+      <button
+        class="btn fs-1 bg-transparent text-light saooti-forward"
+        @click="seekClick(15)"
+      />
+    </div>
+    <PlayerTimeline
+      v-model:showTimeline="showTimeline"
+      :comments="comments"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { playerDisplay } from '../../mixins/player/playerDisplay';
+import PlayerProgressBar from './PlayerProgressBar.vue';
+import PlayerTimeline from './PlayerTimeline.vue';
+import { defineComponent } from 'vue';
+import { CommentPodcast } from '@/store/class/general/comment';
+export default defineComponent({
+  name: 'PlayerLarge',
+
+  components: {
+    PlayerProgressBar,
+    PlayerTimeline
+  },
+    mixins:[playerDisplay],
+
+  props: {
+    playerError: { default: false, type: Boolean},
+    notListenTime: { default: 0 , type: Number},
+    hlsReady: { 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},
+    listenTime: { default: 0 , type: Number},
+  },
+
+  emits: ['stopPlayer', 'update:notListenTime', 'changePlayerLargeVersion'],
+  data() {
+    return {
+      showTimeline: false as boolean,
+    };
+  },
+  methods:{
+    stopPlayer(){
+      this.$emit('stopPlayer');
+    },
+    changePlayerLargeVersion(){
+      this.$emit('changePlayerLargeVersion');
+    },
+    seekClick(addTime: number):void{
+      const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
+      if(!audioPlayer){return;}
+      const seekTo = audioPlayer.currentTime + addTime;
+      (this.$refs.progressbar as InstanceType<typeof PlayerProgressBar>).isSeekTo(audioPlayer, seekTo >0?seekTo: 0);
+    },
+  }
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+  .player-container .img-box{
+    @media (max-width: 960px) {
+      width: 10rem;
+      height: 10rem;
+    }
+  }
+  .player-reduce-button{
+    position: absolute;
+    right: 0;
+    font-size: 1.2rem !important;
+  }
+  .player-grow-large-content{
+    width: 100%;
+    padding: 1rem 2rem;
+    @media (max-width: 960px) {
+      padding: 0.5rem;
+    }
+    .progress, .progress-bar{
+      height: 15px !important;
+    }
+  }
+  .play-big-button-box {
+    height: 5rem;
+    width: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0.5rem;
+    border-radius: 50%;
+    font-size: 2.5rem !important;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+}
+</style>

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,22 +1,21 @@
 
-import Vue from "vue";
-export const selenium = Vue.extend({
+export const selenium ={
   methods: {
-    seleniumFormat(string: string) {
+    seleniumFormat(string: string): string {
       return string.toLowerCase().replace(/\s/g, '');
     },
   },
-});
-export const cookies = Vue.extend(
+};
+export const cookies =
 {
   methods: {
-    setCookie(name: string, value: string, domain= "") {
+    setCookie(name: string, value: string, domain= ""): void {
       const date = new Date();
       date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
       const expires = '; expires=' + date.toUTCString();
       document.cookie = name + '=' + (value || '') + expires +domain+ '; path=/';
     },
-    getCookie(name: string) {
+    getCookie(name: string): string|null {
       const nameEQ = name + '=';
       const ca = document.cookie.split(';');
       for (let i = 0; i < ca.length; i++) {
@@ -28,18 +27,18 @@ export const cookies = Vue.extend(
       return null;
     },
   },
-});
+};
 
-export const displayMethods =Vue.extend({
+export const displayMethods ={
   methods: {
-    urlify(text: string) {
+    urlify(text: string): string {
       const urlRegex = /(https?:\/\/[^\s<]+)/g;
       if (!text) return '';
       return text.replace(urlRegex, (url: string) => {
         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();
@@ -55,36 +54,5 @@ export const displayMethods =Vue.extend({
       return callback();
     },
   },
-});
+};
 
-export const cookiesAndMethods = displayMethods.extend(
-  {
-    methods: {
-      setCookie(name: string, value: string, domain = "") {
-        const date = new Date();
-        date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
-        const expires = '; expires=' + date.toUTCString();
-        document.cookie = name + '=' + (value || '') + expires +domain+ '; path=/';
-      },
-      getCookie(name: string) {
-        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);
-        }
-        return null;
-      },
-    },
-  });
-
-export const seleniumAndMethods = displayMethods.extend(
-  {
-    methods: {
-      seleniumFormat(string: string) {
-        return string.toLowerCase().replace(/\s/g, '');
-      },
-    },
-  });

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

@@ -1,17 +1,19 @@
 
-import { Category } from "@/store/class/category";
+import { Category } from "@/store/class/general/category";
 import { orgaFilter } from '../mixins/organisationFilter';
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
-export const initSDK = orgaFilter.extend({
+import { defineComponent } from 'vue';
+export const initSDK = defineComponent({
+  mixins: [orgaFilter],
   methods: {
     async initSdk() {
-      if (0 === state.generalParameters.allCategories.length) {
-        octopusApi.fetchCategories({ lang: this.$i18n.locale }).then((data: Array<Category>) => {
+      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);
+        this.$store.commit('categoriesSet', (state.generalParameters.allCategories as Array<Category>));
       }
       const captcha = (document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement);
       if (captcha) {

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

@@ -1,24 +1,41 @@
 
-import { Rubriquage } from "@/store/class/rubriquage";
-import Vue from "vue";
-const octopusApi = require('@saooti/octopus-api');
-export const orgaFilter = Vue.extend({
+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> {
-      const response = await octopusApi.fetchOrganisation(organisationId);
-      const data = await octopusApi.fetchTopics(organisationId, {
-        sort:'HOMEPAGEORDER',
-        homePageOrder: true
-      });
-      const isLive = await octopusApi.liveEnabledOrganisation(organisationId);
-      this.$store.commit('filterOrga', {
-        orgaId: organisationId,
-        imgUrl: response.imageUrl,
-        rubriquageArray: data.filter((element: Rubriquage)=>{
-          return element.rubriques.length;
-        }),
-        isLive: isLive
-      });
+      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;
+        });
+      }
+    },
+  },
+})