@saooti/octopus-sdk 29.0.7 → 29.0.11

package/src/components/display/sharing/SharePlayerColors.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="d-flex justify-content-around mt-3 flex-grow w-100">
+    <div class="d-flex flex-column align-items-center flex-shrink me-3">
+      <div class="fw-600">
+        {{ $t('Choose color') }}
+      </div>
+      <VSwatches
+        v-model="internColor"
+        class="c-hand input-no-outline"
+        show-fallback
+        colors="text-advanced"
+        popover-to="right"
+        :data-color="internColor"
+      />
+    </div>
+    <div class="d-flex flex-column align-items-center">
+      <div class="fw-600">
+        {{ $t('Choose theme') }}
+      </div>
+      <div
+        v-if="!isBeta"
+        class="d-flex"
+      >
+        <VSwatches
+          v-for="myColor in colors"
+          :key="myColor"
+          v-model="internTheme"
+          :data-theme="internTheme"
+          class="c-hand input-no-outline me-1"
+          :swatch-style="{
+            padding: '0px 0px',
+            marginRight: '0px',
+            marginBottom: '0px',
+            border: '1px gray solid',
+          }"
+          :wrapper-style="{
+            paddingTop: '0px',
+            paddingLeft: '0px',
+            paddingRight: '0px',
+            paddingBottom: '0px',
+          }"
+          :swatches="[myColor]"
+          inline
+        />
+      </div>
+      <VSwatches
+        v-else
+        v-model="internTheme"
+        class="c-hand input-no-outline"
+        show-fallback
+        colors="text-advanced"
+        popover-to="right"
+        :data-color="internTheme"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import VSwatches from 'vue3-swatches';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    VSwatches
+  },
+
+  props: {
+    isBeta: { default: false, type: Boolean},
+    color: { default: '#40a372', type: String},
+    theme: { default: '#000000', type: String},
+  },
+  emits:['update:color', 'update:theme'],
+
+  data() {
+    return {
+      internColor:'#40a372' as string,
+      internTheme:'#000000' as string,
+      colors: ['#000000', '#ffffff'],
+    };
+  },
+  watch:{
+    color(){
+      if(this.color !== this.internColor){
+        this.internColor = this.color;
+      }
+    },
+    internColor(){
+      if(this.color !== this.internColor){
+        this.$emit('update:color', this.internColor);
+      }
+    },
+    theme(){
+      if(this.theme !== this.internTheme){
+        this.internTheme = this.theme;
+      }
+    },
+    internTheme(){
+      if(this.theme !== this.internTheme){
+        this.$emit('update:theme', this.internTheme);
+      }
+    }
+  },
+  mounted(){
+    this.internColor= this.color;
+    this.internTheme= this.theme;
+  }
+
+})
+</script>

package/src/components/display/sharing/SharePlayerTypes.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="d-flex flex-column">
+    <label
+      for="iframe-select"
+      class="d-inline"
+      aria-label="select miniplayer"
+    />
+    <select
+      id="iframe-select"
+      :value="iFrameModel"
+      class="frame-select input-no-outline"
+      @change="$emit('update:iFrameModel',$event.target.value)"
+    >
+      <option value="default">
+        {{ $t('Default version') }}
+      </option>
+      <option value="large">
+        {{ $t('Large version') }}
+      </option>
+      <template v-if="isBeta">
+        <option
+          v-for="player in customPlayersDisplay"
+          :key="player.customId"
+          :value="player.customId"
+        >
+          {{ $t('Custom version') + " «" +player.name+"»" }}
+        </option>
+      </template>
+      <option
+        v-if="podcast && podcast.podcastId"
+        value="emission"
+      >
+        {{
+          $t('Emission version')
+        }}
+      </option>
+      <option
+        v-if="podcast && podcast.podcastId"
+        value="largeEmission"
+      >
+        {{ $t('Large emission version') }}
+      </option>
+      <option
+        v-if="podcast && podcast.podcastId"
+        value="largeSuggestion"
+      >
+        {{ $t('Large suggestion version') }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script lang="ts">
+import { Podcast } from '@/store/class/podcast';
+import { CustomPlayer } from '@/store/class/customPlayer';
+import { defineComponent } from 'vue';
+import { Emission } from '@/store/class/emission';
+import { Playlist } from '@/store/class/playlist';
+export default defineComponent({
+  props: {
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    emission: { default: undefined, type: Object as ()=> Emission},
+    playlist: { default: undefined, type: Object as ()=> Playlist},
+    customPlayers: { default: ()=>[], type: Array as ()=> Array<CustomPlayer>},
+    isBeta: { default: false, type: Boolean},
+    iFrameModel: { default: 'default', type: String},
+  },
+  emits:['update:iFrameModel'],
+
+  computed: {
+    customPlayersDisplay(): Array<CustomPlayer>{
+      return this.customPlayers.filter((player: CustomPlayer)=>{
+        return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) && this.podcast && this.podcast.podcastId) ||
+                          ('EMISSION' === player.typePlayer && this.emission  && !this.podcast)|| ('PLAYLIST' === player.typePlayer && this.playlist );
+      });
+    },
+  },
+})
+</script>

package/src/components/misc/Player.vue

@@ -48,151 +48,53 @@
           @durationChange="onTimeUpdate"
           @error="onError"
         />
-        <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>
-        <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>
-        <div
-          v-if="0 !== comments.length && !isPodcastmaker"
-          class="timeline-button"
-          @click="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>
+        <PlayerButtons
+          :player-error="playerError"
+        />
+        <PlayerProgressBar
+          v-model:notListenTime="notListenTime"
+          :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"
+        />
+        <PlayerClockAndTimeline
+          v-model:showTimeline="showTimeline"
+          :comments="comments"
+        />
       </div>
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { mapState } from 'vuex';
 import { state } from '../../store/paramStore';
-import DurationHelper from '../../helper/duration';
 const octopusApi = require('@saooti/octopus-api');
 let Hls: any= null;
-
-const moment = require('moment');
-//const axios = require("axios");
 import { CommentPodcast } from '@/store/class/comment';
 import { cookies } from '../mixins/functions';
 import { StoreState } from '@/store/typeAppStore';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const CommentPlayer = defineAsyncComponent(() => import('../display/comments/CommentPlayer.vue'));
+import PlayerProgressBar from './PlayerProgressBar.vue';
+import PlayerButtons from './PlayerButtons.vue';
+import PlayerClockAndTimeline from './PlayerClockAndTimeline.vue';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Player',
 
   components: {
-    CommentPlayer,
+    PlayerProgressBar,
+    PlayerButtons,
+    PlayerClockAndTimeline
   },
   mixins:[cookies],
   emits: ['hide'],
-
   data() {
     return {
       forceHide: false as boolean,
-      actualTime: '' as string,
       listenTime: 0 as number,
       notListenTime: 0 as number,
       lastSend: 0 as number,
@@ -207,29 +109,7 @@ export default defineComponent({
       showTimeline: false as boolean,
     };
   },
-
   computed: {
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
-    },
-    isPlaying(): boolean {
-      return 'PLAYING' === this.status;
-    },
-    isPaused(): boolean {
-      return 'PAUSED' === this.status;
-    },
-    isLoading(): boolean {
-      return 'LOADING' === this.status;
-    },
-    isImage(): string {
-      return state.player.image;
-    },
-    isEmissionName(): string {
-      return state.player.emissionName;
-    },
-    isClock(): boolean {
-      return state.player.clock;
-    },
     isBarTop(): boolean {
       return state.player.barTop;
     },
@@ -241,35 +121,15 @@ export default defineComponent({
         if (window.innerWidth > 450 && this.showTimeline) return '6rem';
         return '3.5rem';
       },
-      status: (state: StoreState) => state.player.status,
       podcast: (state: StoreState) => state.player.podcast,
       media: (state: StoreState) => state.player.media,
       live: (state: StoreState) => state.player.live,
       volume: (state: StoreState) => state.player.volume,
-      isStop: (state: StoreState) => state.player.stop,
       commentsLoaded: (state: StoreState) => state.comments.loadedComments,
-      podcastImage: (state: StoreState) => {
-        if (state.player.podcast) return state.player.podcast.imageUrl;
-        return '';
-      },
-      playedTime: (state: StoreState) => {
-        if (state.player.elapsed && state.player.elapsed > 0 && state.player.total && state.player.total > 0) {
-          return DurationHelper.formatDuration(
-            Math.round(state.player.elapsed * state.player.total)
-          );
-        }
-        return '--:--';
-      },
       percentProgress: (state: StoreState) => {
         if(!state.player.elapsed){return 0;}
         return state.player.elapsed * 100;
       },
-      totalTime: (state: StoreState) => {
-        if (state.player.elapsed && state.player.elapsed > 0 && state.player.total && state.player.total > 0)
-          return DurationHelper.formatDuration(Math.round(state.player.total));
-        return '--:--';
-      },
-      totalSecondes: (state: StoreState) => state.player.total,
     }),
     audioUrl(): string {
       if (this.media) return this.media.audioUrl;
@@ -291,34 +151,6 @@ export default defineComponent({
       }
       return this.podcast.audioUrl + '?' + parameters.join('&');
     },
-    podcastShareUrl(): any {
-      if (this.podcast) {
-        return {
-          name: 'podcast',
-          params: { podcastId: this.podcast.podcastId },
-          query: { productor: this.$store.state.filter.organisationId },
-        };
-      }
-      return '';
-    },
-    podcastTitle(): string {
-      if (this.podcast) {
-        if (this.isEmissionName)
-          return this.emissionName + ' - ' + this.podcast.title;
-        return this.podcast.title;
-      }
-      if (this.media) return this.media.title;
-      if (this.live) {
-        if (!this.hlsReady)
-          return this.live.title + ' (' + this.$t('Start in a while') + ')';
-        return this.live.title;
-      }
-      return '';
-    },
-    emissionName(): string {
-      if (this.podcast) return this.podcast.emission.name;
-      return '';
-    },
     organisationId(): string {
       return state.generalParameters.organisationId;
     },
@@ -347,16 +179,7 @@ export default defineComponent({
       }
     },
     async listenTime(newVal): Promise<void> {
-      if (!this.podcast && !this.live) {
-        //Nothing can be done there is no listen time
-        return;
-      }
-      if (!this.getDownloadId()) {
-        //nothing can be done there is no downloadId
-        return;
-      }
-      if (newVal - this.lastSend < 10) {
-        //Last send is too recent, do nothing
+      if ((!this.podcast && !this.live)||(!this.getDownloadId())||(newVal - this.lastSend < 10)) {
         return;
       }
       this.lastSend = newVal;
@@ -371,12 +194,6 @@ export default defineComponent({
   },
 
   mounted() {
-    moment.locale('fr');
-    if (this.isClock) {
-      setInterval(() => {
-        this.actualTime = moment(new Date()).format('HH:mm:ss');
-      }, 1000);
-    }
     window.addEventListener('beforeunload', this.endListeningProgress);
     this.watchPlayerStatus();
   },
@@ -428,30 +245,6 @@ export default defineComponent({
         this.playerError = true;
       }
     },
-    switchPausePlay(): void {
-      const audioPlayer: any = document.querySelector('#audio-player');
-      if (audioPlayer.paused) {
-        this.onPlay();
-      } else {
-        this.onPause();
-      }
-    },
-    stopPlayer(): void {
-      this.$store.commit('playerPlayPodcast');
-    },
-    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; //x position within the element.
-      const percentPosition = x / barWidth;
-      if (percentPosition * 100 >= this.percentLiveProgress) return;
-      const seekTime = this.$store.state.player.total * percentPosition;
-      if (this.podcast || this.live) {
-        this.notListenTime = seekTime - this.listenTime;
-      }
-      audioPlayer.currentTime = seekTime;
-    },
     onTimeUpdate(event: { currentTarget: { currentTime: number; duration: any } }): void {
       if (this.podcast || this.live) {
         if (!this.getDownloadId()) {
@@ -500,9 +293,6 @@ export default defineComponent({
     onPlay(): void {
       this.$store.commit('playerPause', false);
     },
-    onPause(): void {
-      this.$store.commit('playerPause', true);
-    },
     onFinished(): void {
       this.setDownloadId(null);
       if (this.live) {
@@ -673,21 +463,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../sass/_variables.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 {
   position: fixed;
   overflow: hidden;
@@ -701,89 +476,12 @@ export default defineComponent({
   max-width: 100%;
   font-size: 1rem;
 
-  .player-image {
-    border-radius: 0.2rem;
-    height: 2.4rem;
-    width: 2.4rem;
-  }
   .player-progress-border {
     height: 10px;
     width: 3px;
     background: black;
   }
-  .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;
-  }
-  .player-title {
-    font-size: 0.8rem;
-    margin: 0 0 5px 0;
-  }
-
-  .hide-phone {
-    font-size: 0.8rem;
-    margin: 0 0 5px 0;
-  }
-  .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;
-    }
-  }
 }
-/** PHONES*/
-@media (max-width: 450px) {
-  .player-container {
-    .player-image {
-      height: 2rem;
-      width: 2rem;
-    }
-  }
-}
-
 @media (max-width: 960px) {
   .player-container {
     .d-flex {
@@ -791,12 +489,6 @@ export default defineComponent({
         flex-wrap: nowrap !important;
       }
     }
-    .player-title {
-      font-size: 12px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
   }
 }
 </style>