@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -19,9 +19,12 @@
             :width="iFrameWidth"
             :height="iFrameHeight"
             class="maxIframe"
-          ></iframe>
+          />
           <div class="d-flex flex-column">
-            <button class="btn mb-3" @click="isShareModal = true">
+            <button
+              class="btn mb-3"
+              @click="isShareModal = true"
+            >
               {{ $t('Share the player') }}
             </button>
             <template v-if="!isLiveReadyToRecord">
@@ -29,68 +32,78 @@
                 for="iframe-select"
                 class="d-inline"
                 aria-label="select miniplayer"
-              ></label>
+              />
               <select
-                v-model="iFrameModel"
                 id="iframe-select"
+                v-model="iFrameModel"
                 class="frame-select input-no-outline"
               >
-                <option value="default">{{ $t('Default version') }}</option>
-                <option value="large">{{ $t('Large version') }}</option>
-                <option value="emission" v-if="podcast && podcast.podcastId">{{
-                  $t('Emission version')
-                }}</option>
+                <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
-                  value="largeEmission"
                   v-if="podcast && podcast.podcastId"
-                  >{{ $t('Large emission version') }}</option
+                  value="emission"
                 >
+                  {{
+                    $t('Emission version')
+                  }}
+                </option>
+                <option
+                  v-if="podcast && podcast.podcastId"
+                  value="largeEmission"
+                >
+                  {{ $t('Large emission version') }}
+                </option>
                 <option
-                  value="largeSuggestion"
                   v-if="podcast && podcast.podcastId"
-                  >{{ $t('Large suggestion version') }}</option
+                  value="largeSuggestion"
                 >
+                  {{ $t('Large suggestion version') }}
+                </option>
               </select>
             </template>
           </div>
           <div class="d-flex justify-content-around mt-3 flex-grow w-100">
-            <div class="d-flex flex-column align-items-center flex-shrink mr-3">
-              <div class="font-weight-600">{{ $t('Choose color') }}</div>
-              <swatches
+            <div class="d-flex flex-column align-items-center flex-shrink me-3">
+              <div class="fw-600">
+                {{ $t('Choose color') }}
+              </div>
+              <VSwatches
                 v-model="color"
                 class="c-hand input-no-outline"
                 show-fallback
                 colors="text-advanced"
                 popover-to="right"
                 :data-color="color"
-              ></swatches>
+              />
             </div>
             <div class="d-flex flex-column align-items-center">
-              <div class="font-weight-600">{{ $t('Choose theme') }}</div>
-              <div class="d-flex">
-                <swatches
-                  v-model="theme"
-                  :data-theme="theme"
-                  class="c-hand input-no-outline mr-1"
-                  :swatch-style="{
-                    padding: '0px 0px',
-                    marginRight: '0px',
-                    marginBottom: '0px',
-                    border: '1px gray solid',
-                  }"
-                  :wrapper-style="{
-                    paddingTop: '0px',
-                    paddingLeft: '0px',
-                    paddingRight: '0px',
-                    paddingBottom: '0px',
-                  }"
-                  :colors="['#000000']"
-                  inline
-                ></swatches>
-                <swatches
+              <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="theme"
                   :data-theme="theme"
-                  class="c-hand input-no-outline"
+                  class="c-hand input-no-outline me-1"
                   :swatch-style="{
                     padding: '0px 0px',
                     marginRight: '0px',
@@ -103,37 +116,58 @@
                     paddingRight: '0px',
                     paddingBottom: '0px',
                   }"
-                  :colors="['#ffffff']"
+                  :swatches="[myColor]"
                   inline
-                ></swatches>
+                />
               </div>
+              <VSwatches
+                v-else
+                v-model="theme"
+                class="c-hand input-no-outline"
+                show-fallback
+                colors="text-advanced"
+                popover-to="right"
+                :data-color="theme"
+              />
             </div>
           </div>
+          <div v-if="displayBetaChoice">
+            <input
+              id="isBetaCheckbox"
+              v-model="isBeta"
+              type="checkbox"
+              class="form-check-input"
+            >
+            <label
+              class="form-check-label me-2"
+              for="isBetaCheckbox"
+            >{{ $t('Use beta version') }}</label>
+          </div>
           <div
-            class="d-flex align-items-center flex-wrap"
             v-if="isPodcastNotVisible || playlist"
+            class="d-flex align-items-center flex-wrap"
           >
-            <div class="checkbox-saooti">
+            <div>
               <input
-                type="checkbox"
-                class="custom-control-input"
                 id="isVisibleCheckbox"
                 v-model="isVisible"
-              />
+                type="checkbox"
+                class="form-check-input"
+              >
               <label
-                class="custom-control-label mr-2"
+                class="form-check-label me-2"
                 for="isVisibleCheckbox"
-                >{{ titleStillAvailable }}</label
-              >
+              >{{ titleStillAvailable }}</label>
             </div>
           </div>
         </div>
         <PlayerParameters
-          v-if="!podcast || isEmission || isLargeEmission || isLargeSuggestion"
+          v-if="isPlayerParameter"
           :podcast="podcast"
           :playlist="playlist"
-          :iFrameModel="iFrameModel"
-          :isVisible="isVisible"
+          :i-frame-model="iFrameModel"
+          :is-visible="isVisible"
+          @displayArticle="updateDisplayArticle"
           @episodeNumbers="updateEpisodeNumber"
           @proceedReading="updateProceedReading"
           @isVisible="updateIsVisible"
@@ -150,127 +184,98 @@
     </div>
     <ShareModalPlayer
       v-if="isShareModal"
+      :embed-link="iFrame"
+      :embedly-link="iFrameSrc"
+      :direct-link="podcast"
       @close="isShareModal = false"
-      :embedLink="iFrame"
-      :embedlyLink="iFrameSrc"
-      :directLink="podcast"
-    ></ShareModalPlayer>
+    />
   </div>
 </template>
 
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.custom-radio .custom-control-label {
-  cursor: pointer;
-}
-.input-share-player {
-  border: 1px solid #ddd;
-  border-radius: 50px;
-  &#number-input {
-    margin: 0 1rem;
-    width: 60px;
-  }
-}
-.sticker {
-  align-self: center;
-  background: rgba($octopus-primary-color, 0.3);
-  padding: 0.5rem;
-  transition: all 0.5s ease;
-  color: #41403e;
-  letter-spacing: 1px;
-  outline: none;
-  box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
-  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
-  border: solid 2px #41403e;
-  &:hover {
-    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
-  }
-}
-.maxIframe {
-  max-width: 300px;
-}
-.vue-swatches__container {
-  padding: 0 !important;
-  background-color: transparent !important;
-}
-.vue-swatches__swatch--selected {
-  border: 2px #40a372 solid !important;
-  box-shadow: unset !important;
-  -webkit-box-shadow: unset !important;
-}
-</style>
-
 <script lang="ts">
-import ShareModalPlayer from '../../misc/modal/ShareModalPlayer.vue';
-import PlayerParameters from './PlayerParameters.vue';
 import { state } from '../../../store/paramStore';
-//@ts-ignore
-import Swatches from 'vue-swatches';
-import 'vue-swatches/dist/vue-swatches.min.css';
+import VSwatches from 'vue3-swatches';
 import profileApi from '@/api/profile';
-
-import { defineComponent } from 'vue'
+const octopusApi = require('@saooti/octopus-api');
+import { Podcast } from '@/store/class/podcast';
+import { Emission } from '@/store/class/emission';
+import { Playlist } from '@/store/class/playlist';
+import { CustomPlayer } from '@/store/class/customPlayer';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
+const PlayerParameters = defineAsyncComponent(() => import('./PlayerParameters.vue'));
 export default defineComponent({
-  props: [
-    'podcast',
-    'emission',
-    'organisationId',
-    'exclusive',
-    'notExclusive',
-    'playlist',
-    'isEducation',
-  ],
-
   components: {
     ShareModalPlayer,
-    Swatches,
+    VSwatches,
     PlayerParameters,
   },
 
-  async created() {
-    await this.initColor();
-    if (this.isLiveReadyToRecord) {
-      this.iFrameModel = 'large';
-    }
+  props: {
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    emission: { default: undefined, type: Object as ()=> Emission},
+    playlist: { default: undefined, type: Object as ()=> Playlist},
+    organisationId: { default: undefined, type: String},
+    isEducation: { default: false, type: Boolean},
+    exclusive: { default: false, type: Boolean},
+    notExclusive: { default: true, type: Boolean},
   },
 
   data() {
     return {
-      iFrameModel: 'default',
-      isShareModal: false,
-      color: '#40a372',
-      theme: '#ffffff',
-      proceedReading: true,
-      episodeNumbers: 'number',
-      iFrameNumber: '3',
-      startTime: 0,
-      isVisible: false,
+      iFrameModel: 'default' as string,
+      isShareModal: false as boolean,
+      color: '#40a372' as string,
+      theme: '#000000' as string,
+      proceedReading: true as boolean,
+      episodeNumbers: 'number' as string,
+      iFrameNumber: '3' as string,
+      startTime: 0 as number,
+      isVisible: false as boolean,
+      displayArticle: true as boolean,
+      displayBetaChoice: false as boolean,
+      customPlayers: [] as Array<CustomPlayer>,
+      isBeta: false as boolean,
+      colors: ['#000000', '#ffffff'],
     };
   },
+  
   computed: {
-    isEmission():boolean {
+    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 );
+      });
+    },
+    miniplayerBaseUrl(): string{
+      if(this.isBeta){
+        return state.podcastPage.MiniplayerBetaUri;  
+      }
+      return state.podcastPage.MiniplayerUri;
+    },
+    isEmission(): boolean {
       return 'emission' === this.iFrameModel;
     },
-    isLargeEmission():boolean {
+    isLargeEmission(): boolean {
       return 'largeEmission' === this.iFrameModel;
     },
-    isLargeSuggestion():boolean {
+    isLargeSuggestion(): boolean {
       return 'largeSuggestion' === this.iFrameModel;
     },
-    titleStillAvailable():string {
-      if (this.isPodcastNotVisible) return this.$t('Podcast still available');
-      return this.$t('Podcasts still available');
+    titleStillAvailable(): string {
+      if (this.isPodcastNotVisible) return this.$t('Podcast still available').toString();
+      return this.$t('Podcasts still available').toString();
     },
-    isLiveReadyToRecord():boolean {
+    isLiveReadyToRecord(): boolean {
       if (this.podcast)
         return (
-          this.podcast.conferenceId &&
+          undefined !== this.podcast.conferenceId &&
           0 !== this.podcast.conferenceId &&
           this.podcast.processingStatus === 'READY_TO_RECORD'
         );
       return false;
     },
-    noAd() {
+    noAd(): boolean {
       if (
         (this.podcast &&
           this.podcast.organisation.id !== this.organisationId &&
@@ -283,11 +288,11 @@ export default defineComponent({
       }
       return false;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    iFrameSrc() {
-      let url = [''];
+    iFrameSrc(): string {
+      const url = [''];
       let iFrameNumber = '/' + this.iFrameNumber;
       if (
         (!this.podcast || this.isEmission || this.isLargeEmission) &&
@@ -295,38 +300,47 @@ export default defineComponent({
       ) {
         iFrameNumber = '/0';
       }
-      if (!this.podcast && !this.playlist) {
+      if (!this.podcast && !this.playlist && this.emission) {
         if ('default' === this.iFrameModel) {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/emission/${this.emission.emissionId}${iFrameNumber}`
+            `${this.miniplayerBaseUrl}miniplayer/emission/${this.emission.emissionId}${iFrameNumber}`
+          );
+        }else if('large' === this.iFrameModel) {
+          url.push(
+            `${this.miniplayerBaseUrl}miniplayer/emissionLarge/${this.emission.emissionId}${iFrameNumber}`
           );
-        } else {
+        }
+        else {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/emissionLarge/${this.emission.emissionId}${iFrameNumber}`
+            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.emission.emissionId}${iFrameNumber}`
           );
         }
       } else if (this.playlist) {
         if ('default' === this.iFrameModel) {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/playlist/${this.playlist.playlistId}`
+            `${this.miniplayerBaseUrl}miniplayer/playlist/${this.playlist.playlistId}`
+          );
+        } else if('large' === this.iFrameModel) {
+          url.push(
+            `${this.miniplayerBaseUrl}miniplayer/playlistLarge/${this.playlist.playlistId}`
           );
-        } else {
+        }else {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/playlistLarge/${this.playlist.playlistId}`
+            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.playlist.playlistId}`
           );
         }
-      } else {
+      } else if(this.emission && this.podcast){
         if (this.isEmission || this.isLargeEmission) {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/${this.iFrameModel}/${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`
+            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`
           );
         } else if (this.isLargeSuggestion) {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}${iFrameNumber}`
+            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}${iFrameNumber}`
           );
-        } else {
+        }  else {
           url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}`
+            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}`
           );
         }
       }
@@ -337,22 +351,22 @@ export default defineComponent({
           '&theme=' +
           this.theme.substring(1)
       );
-
       if (!this.proceedReading) {
         url.push('&proceed=false');
       }
+      if(!this.displayArticle){
+        url.push('&article=false');
+      }
       url.push('&time=' + this.startTime);
       if (this.isVisible) {
-        url.push('&key=' + window.btoa(this.dataTitle));
+        url.push('&key=' + window.btoa(this.dataTitle.toString()));
       }
       return url.join('');
     },
-
-    iFrameWidth() {
+    iFrameWidth(): string {
       return '100%';
     },
-
-    iFrameHeight() {
+    iFrameHeight(): string {
       switch (this.iFrameModel) {
         case 'large':
           if (this.podcast) return '180px';
@@ -397,67 +411,108 @@ export default defineComponent({
           return '530px';
       }
     },
-
-    iFrame() {
+    iFrame(): string {
       return `<iframe src="${this.iFrameSrc}" width="${this.iFrameWidth}" height="${this.iFrameHeight}" scrolling="no" frameborder="0"></iframe>`;
     },
-
-    isPodcastNotVisible():boolean {
+    isPodcastNotVisible(): boolean {
       return (
-        this.podcast &&
+        undefined !== this.podcast &&
         !this.podcast.availability.visibility &&
         ('default' === this.iFrameModel || 'large' === this.iFrameModel)
       );
     },
-
-    dataTitle():any {
+    dataTitle(): number {
       if (this.podcast) return this.podcast.podcastId;
       if (this.emission) return this.emission.emissionId;
-      return this.playlist.playlistId;
+      if (this.playlist) return this.playlist.playlistId;
+      return 0;
     },
+    isPlayerParameter(): boolean{
+      return !this.podcast || (this.podcast.article && 0 !== this.podcast.article.length) || this.isEmission || this.isLargeEmission || this.isLargeSuggestion;
+    }
+  },
+  async created() {
+    await this.initColor();
+    if (this.isLiveReadyToRecord) {
+      this.iFrameModel = 'large';
+    }
   },
-
   methods: {
-    async initColor() {
+    async initColor(): Promise<void> {
       if (!this.authenticated) return;
-      let orgaId = undefined;
-      if (this.podcast) {
-        orgaId = this.podcast.organisation.id;
-      } else if (this.playlist) {
-        orgaId = this.playlist.organisation.id;
-      } else {
-        orgaId = this.emission.orga.id;
+      let data;
+      if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+        data = this.$store.state.organisation.attributes;
+      }else{
+        data= await profileApi.fetchOrganisationAttibutes(
+          this.$store.state,
+          state.generalParameters.organisationId
+        );
       }
-      const data:any = await profileApi.fetchOrganisationAttibutes(
-        this.$store,
-        orgaId
-      );
-      if (data.hasOwnProperty('COLOR')) {
+      if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
         this.color = data.COLOR;
       } else {
         this.color = '#40a372';
       }
-      if (data.hasOwnProperty('THEME')) {
+      if (Object.prototype.hasOwnProperty.call(data,'THEME')) {
         this.theme = data.THEME;
       } else {
         this.theme = '#ffffff';
       }
+      if (Object.prototype.hasOwnProperty.call(data,'playerBeta')) {
+        this.displayBetaChoice = data.playerBeta;
+        let dataFetched = await octopusApi.fetchCustomPlayer('customPlayer/organisation/'+ this.organisationId);
+        this.customPlayers = dataFetched.content;
+        const totalCount = dataFetched.totalElements;
+        let index = 1;
+        while (totalCount > this.customPlayers.length) {
+          dataFetched =  await octopusApi.fetchCustomPlayer('customPlayer/organisation/'+ this.organisationId+'?start='+index);
+          this.customPlayers = this.customPlayers.concat(dataFetched.content);
+          ++index;
+        }
+      }
+      return;
     },
-    updateEpisodeNumber(value: string) {
+    updateEpisodeNumber(value: string): void {
       this.episodeNumbers = value;
     },
-    updateProceedReading(value: boolean) {
+    updateProceedReading(value: boolean): void {
       this.proceedReading = value;
     },
-    updateIframeNumber(value: string) {
+    updateIframeNumber(value: string): void {
       this.iFrameNumber = value;
     },
-    updateStartTime(value: number) {
+    updateStartTime(value: number): void {
       this.startTime = value;
     },
-    updateIsVisible(value: boolean) {
+    updateIsVisible(value: boolean): void {
       this.isVisible = value;
     },
+    updateDisplayArticle(value: boolean): void{
+      this.displayArticle = value;
+    }
   },
-});
+})
 </script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.sticker {
+  align-self: center;
+  background: rgba($octopus-primary-color, 0.3);
+  padding: 0.5rem;
+  transition: all 0.5s ease;
+  color: #41403e;
+  letter-spacing: 1px;
+  outline: none;
+  box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
+  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+  border: solid 2px #41403e;
+  &:hover {
+    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+  }
+}
+.maxIframe {
+  max-width: 300px;
+}
+</style>