@saooti/octopus-sdk 29.0.7 → 29.0.11

package/src/components/misc/PlayerButtons.vue

@@ -0,0 +1,155 @@
+<template>
+  <router-link
+    v-if="isImage && podcastImage"
+    :to="podcastShareUrl"
+  >
+    <img
+      :src="podcastImage"
+      :alt="$t('Podcast image')"
+      class="player-image c-hand"
+    >
+  </router-link>
+  <div
+    v-if="!playerError"
+    class="play-button-box"
+    :class="{
+      'primary-bg': !isLoading,
+      'text-light': !isLoading,
+    }"
+    @click="switchPausePlay"
+  >
+    <div
+      class="text-light"
+      :aria-label="$t('Play')"
+      :class="{
+        saooti: isPlaying || isPaused,
+        'saooti-play2-bounty': isPaused,
+        'saooti-pause-bounty': isPlaying,
+        loading: isLoading,
+      }"
+    />
+  </div>
+  <div
+    v-if="(isPlaying || isPaused) && (media || isStop)"
+    class="play-button-box primary-bg text-light"
+    @click="stopPlayer"
+  >
+    <div
+      class="text-light saooti-stop-bounty"
+      :aria-label="$t('Stop')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+import { Media } from '@/store/class/media';
+import { Podcast } from '@/store/class/podcast';
+export default defineComponent({
+  name: 'PlayerButtons',
+
+  props: {
+    playerError: { default: false, type: Boolean},
+  },
+
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    isPlaying(): boolean {
+      return 'PLAYING' === this.$store.state.player.status;
+    },
+    isPaused(): boolean {
+      return 'PAUSED' === this.$store.state.player.status;
+    },
+    isLoading(): boolean {
+      return 'LOADING' === this.$store.state.player.status;
+    },
+    isImage(): string {
+      return state.player.image;
+    },
+    podcastImage(): string{
+      if (this.$store.state.player.podcast) return state.player.podcast.imageUrl;
+      return '';
+    },
+    isStop(): boolean{
+      return this.$store.state.player.stop;
+    },
+    media(): undefined|Media{
+      return this.$store.state.player.media;
+    },
+    podcast(): undefined|Podcast{
+      return this.$store.state.player.podcast;
+    },
+
+    podcastShareUrl(): any {
+      if (this.podcast) {
+        return {
+          name: 'podcast',
+          params: { podcastId: this.podcast.podcastId },
+          query: { productor: this.$store.state.filter.organisationId },
+        };
+      }
+      return '';
+    },
+  },
+
+  methods: {
+    switchPausePlay(): void {
+      const audioPlayer: any = document.querySelector('#audio-player');
+      if (audioPlayer.paused) {
+        this.onPlay();
+      } else {
+        this.onPause();
+      }
+    },
+    stopPlayer(): void {
+      this.$store.commit('playerPlayPodcast');
+    },
+    
+    onPlay(): void {
+      this.$store.commit('playerPause', false);
+    },
+    onPause(): void {
+      this.$store.commit('playerPause', true);
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.play-button-box {
+  height: 2.5rem;
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.5rem;
+  border-radius: 50%;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.player-container {
+  .player-image {
+    border-radius: 0.2rem;
+    height: 2.4rem;
+    width: 2.4rem;
+  }
+
+}
+/** PHONES*/
+@media (max-width: 450px) {
+  .player-container {
+    .player-image {
+      height: 2rem;
+      width: 2rem;
+    }
+  }
+}
+
+</style>

package/src/components/misc/PlayerClockAndTimeline.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="0 !== comments.length && !isPodcastmaker"
+    class="timeline-button"
+    @click="$emit('update:showTimeline', !showTimeline)"
+  >
+    <div
+      class="saooti-arrow_down saooti-arrow_down-margin"
+      :class="showTimeline ? '' : 'arrow-transform'"
+    />
+    <div>Timeline</div>
+  </div>
+  <div
+    v-if="isClock"
+    class="d-flex text-light align-items-center hide-phone"
+  >
+    <div class="saooti-clock-stud m-2" />
+    <div>{{ actualTime }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+const moment = require('moment');
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+import { CommentPodcast } from '@/store/class/comment';
+export default defineComponent({
+  name: 'PlayerClockAndTimeline',
+
+  props: {
+    showTimeline: { default: false, type: Boolean},
+    comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
+  },
+  emits:['update:showTimeline'],
+
+  data() {
+    return {
+      actualTime: '' as string,
+    };
+  },
+
+  computed: {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    isClock(): boolean {
+      return state.player.clock;
+    },
+
+  },
+
+  mounted() {
+    if (this.isClock) {
+      setInterval(() => {
+        this.actualTime = moment(new Date()).format('HH:mm:ss');
+      }, 1000);
+    }
+  },
+
+})
+</script>
+<style lang="scss">
+@import '../../sass/_variables.scss';
+.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/misc/PlayerProgressBar.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="text-light player-grow-content">
+    <div class="d-flex">
+      <div
+        v-if="playerError"
+        class="text-warning player-title ms-2 me-2"
+      >
+        {{ $t('Podcast play error') + ' - ' }}
+      </div>
+      <div class="flex-grow player-title">
+        {{ podcastTitle }}
+      </div>
+      <div
+        v-if="!playerError"
+        v-show="!isBarTop"
+        class="hide-phone"
+      >
+        {{ playedTime }} / {{ totalTime }}
+      </div>
+    </div>
+    <div
+      v-if="!playerError"
+      v-show="!isBarTop"
+      class="progress c-hand custom-bg-darkgrey"
+      style="height: 3px;"
+      @mouseup="seekTo"
+    >
+      <div
+        class="progress-bar custom-bg-grey"
+        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"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+import DurationHelper from '../../helper/duration';
+import { CommentPodcast } from '@/store/class/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},
+    notListenTime: { default: 0, type: Number},
+  },
+  emits: ['update:notListenTime'],
+
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    isEmissionName(): string {
+      return state.player.emissionName;
+    },
+    isBarTop(): boolean {
+      return state.player.barTop;
+    },
+    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 '--:--';
+    },
+    percentProgress(): number{
+      if(!this.$store.state.player.elapsed){return 0;}
+      return this.$store.state.player.elapsed * 100;
+    },
+    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 '--:--';
+    },
+    totalSecondes(): number{
+      return this.$store.state.player.total;
+    },
+    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 '';
+    },
+  },
+
+  
+  methods: {
+    seekTo(event: { currentTarget: { getBoundingClientRect: () => any; clientWidth: any }; clientX: number }): void {
+      const audioPlayer: any = document.querySelector('#audio-player');
+      const rect = event.currentTarget.getBoundingClientRect();
+      const barWidth = event.currentTarget.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;
+      if (this.$store.state.player.podcast || this.$store.state.player.live) {
+        this.$emit('update:notListenTime',seekTime - this.listenTime);
+      }
+      audioPlayer.currentTime = seekTime;
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.player-container {
+  .progress {
+    align-items: flex-end;
+    height: 10px;
+    position: relative;
+  }
+  .progress-bar-duration {
+    width: 10px;
+  }
+  .progress-bar {
+    height: 4px;
+    position: absolute;
+  }
+
+  .progress.custom-bg-darkgrey {
+    background: #555;
+  }
+
+  .progress-bar.custom-bg-grey {
+    background: #e9ecef;
+  }
+
+  .player-title,
+  .hide-phone {
+    font-size: 0.8rem;
+    margin: 0 0 5px 0;
+  }
+  .player-grow-content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    flex-shrink: 1;
+    flex-basis: 20px;
+    overflow: hidden;
+  }
+}
+/** PHONES*/
+@media (max-width: 960px) {
+  .player-container {
+    .player-title {
+      font-size: 12px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

package/src/components/misc/Popover.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import {Popover} from 'bootstrap'
-import {defineComponent, onMounted, PropType, ref, watch} from 'vue'
+import {defineComponent, onMounted, PropType, ref} from 'vue'
 import useEventListener from '../../helper/useEventListener'
 export default defineComponent({
   name: 'Popover',
@@ -34,6 +34,7 @@ export default defineComponent({
     title: {type: String, default: ''},
     triggers: {type: String as PropType<Popover.Options['trigger']>, default: 'click'},
     show: {type: Boolean, default: false},
+    disable: {type: Boolean, default: false},
   },
   emits: ['show', 'shown', 'hide', 'hidden', 'inserted'],
   setup(props, {emit}) {
@@ -42,7 +43,7 @@ export default defineComponent({
     const instance = ref<Popover>()
     const titleRef = ref<HTMLElement>()
     const contentRef = ref<HTMLElement>()
-    onMounted(() => {
+    function initPopover(){
       instance.value = new Popover(`#${props.target}`, {
         container: 'body',
         trigger: props.triggers,
@@ -58,19 +59,13 @@ export default defineComponent({
       if (props.show) {
         instance.value.show()
       }
-    })
-    watch(
-      () => props.show,
-      (show, oldVal) => {
-        if (show !== oldVal) {
-          if (show) {
-            instance.value?.show()
-          } else {
-            instance.value?.hide()
-          }
-        }
+      if (props.disable) {
+        instance.value.disable()
       }
-    )
+    }
+    onMounted(()=>{
+      initPopover();
+    })
     useEventListener(target, 'show.bs.popover', () => emit('show'))
     useEventListener(target, 'shown.bs.popover', () => emit('shown'))
     useEventListener(target, 'hide.bs.popover', () => emit('hide'))
@@ -80,7 +75,34 @@ export default defineComponent({
       element,
       titleRef,
       contentRef,
+      instance,
+      initPopover
     }
   },
+  watch:{
+    disable(){
+      if(!this.instance){ return; }
+      if (this.disable) {
+        this.instance.disable();
+      } else {
+        this.instance.enable();
+      }
+    },
+    content(){
+      if(!this.instance){ return; }
+      this.$nextTick(() => {
+        this.instance?.dispose();
+        this.initPopover();
+      });
+    },
+    title(){
+      if(!this.instance){ return; }
+      this.$nextTick(() => {
+        this.instance?.dispose();
+        this.initPopover();
+      });
+    }
+  }
+
 })
 </script>

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -62,7 +62,7 @@
               </div>
               <div
                 v-if="directLink"
-                class="tab-pane tab-pane active"
+                class="tab-pane tab-pane"
                 :class="activeTab === 2? 'active':''"
               >
                 <p>{{ directLink.audioUrl }}</p>