@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="module-box text-center-mobile">
+    <div class="module-box text-center-mobile overflow-visible">
       <h3>{{ $t('Embed') }}</h3>
       <template v-if="!exclusive && (authenticated || notExclusive)">
         <div class="d-flex flex-column align-items-center">
@@ -16,130 +16,48 @@
             :src="iFrameSrc"
             scrolling="no"
             frameborder="0"
-            :width="iFrameWidth"
+            width="100%"
             :height="iFrameHeight"
-            class="maxIframe"
-          ></iframe>
-          <div class="d-flex flex-column">
-            <button class="btn mb-3" @click="isShareModal = true">
-              {{ $t('Share the player') }}
-            </button>
-            <template v-if="!isLiveReadyToRecord">
-              <label
-                for="iframe-select"
-                class="d-inline"
-                aria-label="select miniplayer"
-              ></label>
-              <select
-                v-model="iFrameModel"
-                id="iframe-select"
-                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="largeEmission"
-                  v-if="podcast && podcast.podcastId"
-                  >{{ $t('Large emission version') }}</option
-                >
-                <option
-                  value="largeSuggestion"
-                  v-if="podcast && podcast.podcastId"
-                  >{{ $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
-                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
-                  v-model="theme"
-                  :data-theme="theme"
-                  class="c-hand input-no-outline"
-                  :swatch-style="{
-                    padding: '0px 0px',
-                    marginRight: '0px',
-                    marginBottom: '0px',
-                    border: '1px gray solid',
-                  }"
-                  :wrapper-style="{
-                    paddingTop: '0px',
-                    paddingLeft: '0px',
-                    paddingRight: '0px',
-                    paddingBottom: '0px',
-                  }"
-                  :colors="['#ffffff']"
-                  inline
-                ></swatches>
-              </div>
-            </div>
-          </div>
-          <div
-            class="d-flex align-items-center flex-wrap"
+            class="max-iframe my-2"
+          />
+          <SharePlayerTypes 
+            v-if="!isLiveReadyToRecord"
+            v-model:iFrameModel="iFrameModel"
+            :podcast="podcast"
+            :emission="emission"
+            :playlist="playlist"
+            :organisation-id="organisationId"
+          />
+          <SharePlayerColors
+            v-model:color="color"
+            v-model:theme="theme"
+          />
+          <ClassicCheckbox
             v-if="isPodcastNotVisible || playlist"
-          >
-            <div class="checkbox-saooti">
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="isVisibleCheckbox"
-                v-model="isVisible"
-              />
-              <label
-                class="custom-control-label mr-2"
-                for="isVisibleCheckbox"
-                >{{ titleStillAvailable }}</label
-              >
-            </div>
-          </div>
+            v-model:textInit="isVisible"
+            id-checkbox="is-visible-checkbox"
+            :label="titleStillAvailable"
+          />
         </div>
         <PlayerParameters
-          v-if="!podcast || isEmission || isLargeEmission || isLargeSuggestion"
-          :podcast="podcast"
-          :playlist="playlist"
-          :iFrameModel="iFrameModel"
-          :isVisible="isVisible"
-          @episodeNumbers="updateEpisodeNumber"
-          @proceedReading="updateProceedReading"
-          @isVisible="updateIsVisible"
-          @iFrameNumber="updateIframeNumber"
-          @startTime="updateStartTime"
+          v-if="isPlayerParameter"
+          :is-visible="isVisible"
+          :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
+          :display-choice-all-episodes="displayChoiceAllEpisodes"
+          @displayArticle="displayArticle = $event"
+          @episodeNumbers="episodeNumbers = $event"
+          @proceedReading="proceedReading = $event"
+          @isVisible="isVisible = $event"
+          @iFrameNumber="iFrameNumber = $event"
         />
+        <div class="d-flex flex-column align-items-center mt-3">
+          <button
+            class="btn btn-primary mb-3"
+            @click="isShareModal = true"
+          >
+            {{ $t('Share the player') }}
+          </button>
+        </div>
       </template>
       <div v-else-if="exclusive && authenticated">
         {{ $t('Only organisation members can share the content') }}
@@ -150,314 +68,232 @@
     </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 { orgaComputed } from '../../mixins/orgaComputed';
 import { state } from '../../../store/paramStore';
-//@ts-ignore
-import Swatches from 'vue-swatches';
-import 'vue-swatches/dist/vue-swatches.min.css';
-import profileApi from '@/api/profile';
-
-import { defineComponent } from 'vue'
+import octopusApi from '@saooti/octopus-api';
+import { Podcast } from '@/store/class/general/podcast';
+import { Emission } from '@/store/class/general/emission';
+import { Playlist } from '@/store/class/general/playlist';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
+const PlayerParameters = defineAsyncComponent(() => import('./PlayerParameters.vue'));
+const SharePlayerTypes = defineAsyncComponent(() => import('./SharePlayerTypes.vue'));
+const SharePlayerColors = defineAsyncComponent(() => import('./SharePlayerColors.vue'));
+const ClassicCheckbox = defineAsyncComponent(() => import('../../form/ClassicCheckbox.vue'));
 export default defineComponent({
-  props: [
-    'podcast',
-    'emission',
-    'organisationId',
-    'exclusive',
-    'notExclusive',
-    'playlist',
-    'isEducation',
-  ],
-
   components: {
     ShareModalPlayer,
-    Swatches,
+    SharePlayerColors,
     PlayerParameters,
+    SharePlayerTypes,
+    ClassicCheckbox
   },
-
-  async created() {
-    await this.initColor();
-    if (this.isLiveReadyToRecord) {
-      this.iFrameModel = 'large';
-    }
+  mixins:[orgaComputed],
+  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,
+      isVisible: false as boolean,
+      displayArticle: true as boolean,
+      colors: ['#000000', '#ffffff'],
     };
   },
+  
   computed: {
-    isEmission():boolean {
+    displayChoiceAllEpisodes():boolean{
+      return !this.podcast || this.isEmission || this.isLargeEmission;
+    },
+    baseUrl(): string{
+      return (state.podcastPage.MiniplayerUri as string); 
+    },
+    isEmission(): boolean {
       return 'emission' === this.iFrameModel;
     },
-    isLargeEmission():boolean {
-      return 'largeEmission' === this.iFrameModel;
+    isLargeEmission(): boolean {
+      return 'emissionLarge' === 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 {
+      return this.isPodcastNotVisible ?this.$t('Podcast still available') : this.$t('Podcasts still available');
     },
-    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() {
-      if (
-        (this.podcast &&
-          this.podcast.organisation.id !== this.organisationId &&
-          'NO' === this.podcast.monetisable) ||
-        (this.podcast &&
-          'UNDEFINED' === this.podcast.monetisable &&
-          'NO' === this.podcast.emission.monetisable)
-      ) {
-        return true;
-      }
-      return false;
-    },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
+    noAd(): boolean {
+      return (this.podcast?.organisation.id !== this.organisationId &&
+          'NO' === this.podcast?.monetisable) ||
+        ('UNDEFINED' === this.podcast?.monetisable &&
+          'NO' === this.podcast?.emission.monetisable);
     },
-    iFrameSrc() {
-      let url = [''];
-      let iFrameNumber = '/' + this.iFrameNumber;
-      if (
-        (!this.podcast || this.isEmission || this.isLargeEmission) &&
-        'all' === this.episodeNumbers
-      ) {
-        iFrameNumber = '/0';
-      }
-      if (!this.podcast && !this.playlist) {
-        if ('default' === this.iFrameModel) {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/emission/${this.emission.emissionId}${iFrameNumber}`
-          );
-        } else {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/emissionLarge/${this.emission.emissionId}${iFrameNumber}`
-          );
+    iFrameSrc(): string {
+      const url = [''];
+      let iFrameNumber = this.displayChoiceAllEpisodes && 'all' === this.episodeNumbers ? '/0' : '/' + this.iFrameNumber;
+      url.push(`${this.baseUrl}miniplayer/`);
+      if (!this.podcast && !this.playlist && this.emission) {
+        switch (this.iFrameModel) {
+          case 'default': url.push('emission'); break;
+          case 'large': url.push('emissionLarge'); break;
+          default: url.push(`${this.iFrameModel}`);break;
         }
+        url.push(`/${this.emission.emissionId}${iFrameNumber}`);
       } else if (this.playlist) {
-        if ('default' === this.iFrameModel) {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/playlist/${this.playlist.playlistId}`
-          );
-        } else {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/playlistLarge/${this.playlist.playlistId}`
-          );
+        switch (this.iFrameModel) {
+          case 'default': url.push('playlist'); break;
+          case 'large': url.push('playlistLarge'); break;
+          default: url.push(`${this.iFrameModel}`);break;
         }
-      } else {
+        url.push(`/${this.playlist.playlistId}`);
+      } else if(this.emission && this.podcast){
+        url.push(`${this.iFrameModel}/`);
         if (this.isEmission || this.isLargeEmission) {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/${this.iFrameModel}/${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`
-          );
+          url.push(`${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`);
         } else if (this.isLargeSuggestion) {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}${iFrameNumber}`
-          );
-        } else {
-          url.push(
-            `${state.podcastPage.MiniplayerUri}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}`
-          );
+          url.push(`${this.podcast.podcastId}${iFrameNumber}`);
+        }  else {
+          url.push(`${this.podcast.podcastId}`);
         }
       }
       url.push('?distributorId=' + this.organisationId);
-      url.push(
-        '&color=' +
-          this.color.substring(1) +
-          '&theme=' +
-          this.theme.substring(1)
-      );
-
+      url.push(`&color=${this.color.substring(1)}&theme=${this.theme.substring(1)}`);
       if (!this.proceedReading) {
         url.push('&proceed=false');
       }
-      url.push('&time=' + this.startTime);
+      if(!this.displayArticle){
+        url.push('&article=false');
+      }
       if (this.isVisible) {
-        url.push('&key=' + window.btoa(this.dataTitle));
+        url.push('&key=' + window.btoa(this.dataTitle.toString()));
       }
       return url.join('');
     },
-
-    iFrameWidth() {
-      return '100%';
-    },
-
-    iFrameHeight() {
+    iFrameHeight(): string {
       switch (this.iFrameModel) {
         case 'large':
           if (this.podcast) return '180px';
           if ('number' === this.episodeNumbers) {
-            switch (this.iFrameNumber) {
-              case '1':
-                return '185px';
-              case '2':
-                return '240px';
-              case '3':
-                return '290px';
-              case '4':
-                return '345px';
-              case '5':
-                return '390px';
-              default:
-                return '435px';
+            switch (this.iFrameNumber.toString()) {
+              case '1': return '270px';
+              case '2': return '320px';
+              case '3': return '360px';
+              case '4': return '420px';
+              case '5': return '420px';
+              default: return '420px';
             }
           }
           return '435px';
-        case 'largeEmission':
+        case 'emissionLarge':
         case 'largeSuggestion':
           if ('number' !== this.episodeNumbers) return '510px';
-          switch (this.iFrameNumber) {
-            case '1':
-              return '260px';
-            case '2':
-              return '315px';
-            case '3':
-              return '365px';
-            case '4':
-              return '420px';
-            case '5':
-              return '465px';
-            default:
-              return '510px';
+          switch (this.iFrameNumber.toString()) {
+            case '1':return '315px';
+            case '2':return '365px';
+            case '3':return '420px';
+            case '4':return '470px';
+            case '5':return '470px';
+            default:return '470px';
           }
-        case 'emission':
-          return '530px';
+        case 'emission':return '530px';
         default:
           if (this.podcast) return '520px';
           return '530px';
       }
     },
-
-    iFrame() {
-      return `<iframe src="${this.iFrameSrc}" width="${this.iFrameWidth}" height="${this.iFrameHeight}" scrolling="no" frameborder="0"></iframe>`;
+    iFrame(): string {
+      return `<iframe src="${this.iFrameSrc}" width="100%" 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) && !this.playlist;
+    }
+  },
+  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;
-      }
-      const data:any = await profileApi.fetchOrganisationAttibutes(
-        this.$store,
-        orgaId
-      );
-      if (data.hasOwnProperty('COLOR')) {
-        this.color = data.COLOR;
-      } else {
-        this.color = '#40a372';
-      }
-      if (data.hasOwnProperty('THEME')) {
-        this.theme = data.THEME;
-      } else {
-        this.theme = '#ffffff';
+      let data;
+      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+        data = this.$store.state.organisation.attributes;
+      }else{
+        data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+this.myOrganisationId);
       }
-    },
-    updateEpisodeNumber(value: string) {
-      this.episodeNumbers = value;
-    },
-    updateProceedReading(value: boolean) {
-      this.proceedReading = value;
-    },
-    updateIframeNumber(value: string) {
-      this.iFrameNumber = value;
-    },
-    updateStartTime(value: number) {
-      this.startTime = value;
-    },
-    updateIsVisible(value: boolean) {
-      this.isVisible = value;
+      this.color = Object.prototype.hasOwnProperty.call(data,'COLOR') ? data.COLOR : '#40a372';
+      this.theme = Object.prototype.hasOwnProperty.call(data,'THEME') ? data.THEME : '#000000';
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app{
+  .sticker {
+    align-self: center;
+    background: $octopus-primary-dark;
+    padding: 0.5rem;
+    transition: all 0.5s ease;
+    color: white;
+    font-weight: bold;
+    letter-spacing: 1px;
+    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);
+      background: transparent;
+      color: $octopus-primary-dark;
+    }
+  }
+  .max-iframe {
+    max-width: 300px;
+  }
+}
+</style>