@saooti/octopus-sdk 31.0.26 → 31.0.29

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

@@ -7,7 +7,7 @@
       <input
         type="button"
         :value="$t('Copy')"
-        class="btn btn-link"
+        class="btn btn-primary"
         :title="$t('Copy')"
         @click="onCopyCode(rss, afterCopy)"
       >

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

@@ -16,26 +16,18 @@
             :src="iFrameSrc"
             scrolling="no"
             frameborder="0"
-            :width="iFrameWidth"
+            width="100%"
             :height="iFrameHeight"
             class="max-iframe my-2"
           />
-          <div class="d-flex flex-column">
-            <button
-              class="btn mb-3"
-              @click="isShareModal = true"
-            >
-              {{ $t('Share the player') }}
-            </button>
-            <SharePlayerTypes 
-              v-if="!isLiveReadyToRecord"
-              v-model:iFrameModel="iFrameModel"
-              :podcast="podcast"
-              :emission="emission"
-              :playlist="playlist"
-              :organisation-id="organisationId"
-            />
-          </div>
+          <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"
@@ -52,12 +44,20 @@
           :is-visible="isVisible"
           :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
           :display-choice-all-episodes="displayChoiceAllEpisodes"
-          @displayArticle="updateDisplayArticle"
-          @episodeNumbers="updateEpisodeNumber"
-          @proceedReading="updateProceedReading"
-          @isVisible="updateIsVisible"
-          @iFrameNumber="updateIframeNumber"
+          @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') }}
@@ -236,27 +236,18 @@ export default defineComponent({
       }
       return url.join('');
     },
-    iFrameWidth(): string {
-      return '100%';
-    },
     iFrameHeight(): string {
       switch (this.iFrameModel) {
         case 'large':
           if (this.podcast) return '180px';
           if ('number' === this.episodeNumbers) {
             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';
+              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';
@@ -264,28 +255,21 @@ export default defineComponent({
         case 'largeSuggestion':
           if ('number' !== this.episodeNumbers) 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 '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(): string {
-      return `<iframe src="${this.iFrameSrc}" width="${this.iFrameWidth}" height="${this.iFrameHeight}" scrolling="no" frameborder="0"></iframe>`;
+      return `<iframe src="${this.iFrameSrc}" width="100%" height="${this.iFrameHeight}" scrolling="no" frameborder="0"></iframe>`;
     },
     isPodcastNotVisible(): boolean {
       return (
@@ -321,32 +305,9 @@ export default defineComponent({
           state.generalParameters.organisationId ? state.generalParameters.organisationId : ""
         );
       }
-      if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
-        this.color = data.COLOR;
-      } else {
-        this.color = '#40a372';
-      }
-      if (Object.prototype.hasOwnProperty.call(data,'THEME')) {
-        this.theme = data.THEME;
-      } else {
-        this.theme = '#000000';
-      }
-    },
-    updateEpisodeNumber(value: string): void {
-      this.episodeNumbers = value;
+      this.color = Object.prototype.hasOwnProperty.call(data,'COLOR') ? data.COLOR : '#40a372';
+      this.theme = Object.prototype.hasOwnProperty.call(data,'THEME') ? data.THEME : '#000000';
     },
-    updateProceedReading(value: boolean): void {
-      this.proceedReading = value;
-    },
-    updateIframeNumber(value: string): void {
-      this.iFrameNumber = value;
-    },
-    updateIsVisible(value: boolean): void {
-      this.isVisible = value;
-    },
-    updateDisplayArticle(value: boolean): void{
-      this.displayArticle = value;
-    }
   },
 })
 </script>
@@ -354,26 +315,26 @@ export default defineComponent({
 <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;
-  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);
-    background: transparent;
-    color: $octopus-primary-dark;
+  .sticker {
+    align-self: center;
+    background: $octopus-primary-dark;
+    padding: 0.5rem;
+    transition: all 0.5s ease;
+    color: white;
+    font-weight: bold;
+    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);
+      background: transparent;
+      color: $octopus-primary-dark;
+    }
+  }
+  .max-iframe {
+    max-width: 300px;
   }
-}
-.max-iframe {
-  max-width: 300px;
-}
 }
 </style>

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

@@ -47,30 +47,32 @@ export default defineComponent({
     };
   },
   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);
       }
-    }
+    },
+    theme: {
+      immediate: true,
+      handler() {
+        if(this.theme !== this.internTheme){
+          this.internTheme = this.theme;
+        }
+      },
+    },
+    color: {
+      immediate: true,
+      handler() {
+        if(this.color !== this.internColor){
+          this.internColor = this.color;
+        }
+      },
+    },
   },
-  mounted(){
-    this.internColor= this.color;
-    this.internTheme= this.theme;
-  }
 })
 </script>

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

@@ -10,12 +10,11 @@
       class="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-for="option in optionsSelect" :key="option.value">
+        <option v-if="option.condition" :value="option.value">
+          {{ option.name }}
+        </option>
+      </template>
       <option
         v-for="player in customPlayersDisplay"
         :key="player.customId"
@@ -23,26 +22,6 @@
       >
         {{ $t('Custom version') + " «" +player.name+"»" }}
       </option>
-      <option
-        v-if="podcast && podcast.podcastId"
-        value="emission"
-      >
-        {{
-          $t('Emission version')
-        }}
-      </option>
-      <option
-        v-if="podcast && podcast.podcastId"
-        value="emissionLarge"
-      >
-        {{ $t('Large emission version') }}
-      </option>
-      <option
-        v-if="podcast && podcast.podcastId"
-        value="largeSuggestion"
-      >
-        {{ $t('Large suggestion version') }}
-      </option>
     </select>
   </div>
 </template>
@@ -70,10 +49,15 @@ export default defineComponent({
       customPlayers: [] as Array<CustomPlayer>,
     };
   },
-
   computed: {
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+    optionsSelect(){
+      return [
+        {name: this.$t('Default version'), value: 'default', condition: true},
+        {name: this.$t('Large version'), value: 'large', condition: true},
+        {name: this.$t('Emission version'), value: 'emission', condition: this.podcast && this.podcast.podcastId},
+        {name: this.$t('Large emission version'), value: 'emissionLarge', condition: this.podcast && this.podcast.podcastId},
+        {name: this.$t('Large suggestion version'), value: 'largeSuggestion', condition: this.podcast && this.podcast.podcastId}
+      ]
     },
     customPlayersDisplay(): Array<CustomPlayer>{
       return this.customPlayers.filter((player: CustomPlayer)=>{
@@ -82,10 +66,9 @@ export default defineComponent({
       });
     },
   },
-   async created() {
+  async created() {
     await this.initCustomPlayers();
   },
-
   methods: {
     async fetchCustomPlayers(type:string, trySelect: boolean): Promise<boolean>{
       let players = await octopusApi.fetchCustomPlayer('customPlayer/type/'+ this.organisationId+'/'+type);
@@ -105,7 +88,7 @@ export default defineComponent({
       return true;
     },
     async initCustomPlayers(): Promise<void> {
-      if (!this.authenticated) return;
+      if (!state.generalParameters.authenticated) return;
       if(this.playlist){
         this.fetchCustomPlayers('PLAYLIST', true);
       }else if(this.emission  && !this.podcast){

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

@@ -4,153 +4,34 @@
       {{ $t('Subscribe emission') }}
     </h3>
     <div class="d-flex flex-wrap">
-      <a
-        v-if="amazon"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="amazon"
-        title="amazon"
+      <template
+        v-for="sub in subscriptions"
+        :key="sub.name"
       >
-        <span class="saooti-amazon">
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-        </span>
-      </a>
-      <a
-        v-if="applePodcast"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="applePodcast"
-        title="Apple"
-      >
-        <span class="saooti-apple" />
-      </a>
-      <a
-        v-if="deezer"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="deezer"
-        title="Deezer"
-      >
-        <span class="saooti-deezer" />
-      </a>
-      <a
-        v-if="googlePodcasts"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="googlePodcasts"
-        title="googlePodcasts"
-      >
-        <span class="saooti-google-podcasts">
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-          <div class="path4" />
-          <div class="path5" />
-          <div class="path6" />
-          <div class="path7" />
-        </span>
-      </a>
-      <a
-        v-if="playerFm"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="playerFm"
-        title="playerFm"
-      >
-        <span class="saooti-playerfm" />
-      </a>
-      <a
-        v-if="pocketCasts"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="pocketCasts"
-        title="pocketCasts"
-      >
-        <span class="saooti-pocket-casts" />
-      </a>
-      <a
-        v-if="podcastAddict"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="podcastAddict"
-        title="podcastAddict"
-      >
-        <span class="saooti-podcast-addict" />
-      </a>
-      <a
-        v-if="radioline"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 btn-radioline share-btn"
-        :href="radioline"
-        title="Radioline"
-      >
-        <span class="saooti-radioline" />
-      </a>
-      <a
-        v-if="spotify"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="spotify"
-        title="Spotify"
-      >
-        <span class="saooti-spotify" />
-      </a>
-      <a
-        v-if="stitcher"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="stitcher"
-        title="stitcher"
-      >
-        <span class="saooti-stitcher-logo">
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-          <div class="path4" />
-          <div class="path5" />
-          <div class="path6" />
-          <div class="path7" />
-          <div class="path8" />
-          <div class="path9" />
-          <div class="path10" />
-          <div class="path11" />
-          <div class="path12" />
-          <div class="path13" />
-          <div class="path14" />
-          <div class="path15" />
-          <div class="path16" />
-          <div class="path17" />
-          <div class="path18" /> </span>
-      </a>
-      <a
-        v-if="tunein"
-        rel="noopener"
-        target="_blank"
-        class="btn me-3 mb-2 share-btn"
-        :href="tunein"
-        title="Tunin"
-      >
-        <span class="saooti-tunin" />
-      </a>
+        <a
+          v-if="getUrl(sub.name)"
+          rel="noopener"
+          target="_blank"
+          class="btn me-3 mb-2 share-btn"
+          :href="getUrl(sub.name)"
+          :title="sub.name"
+        >
+          <span :class="sub.icon">
+            <div
+              v-for="index in getPathNumber(sub.name)"
+              :key="index"
+              :class="'path'+(index+1)"
+            />
+          </span>
+        </a>
+      </template>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Emission } from '@/store/class/general/emission';
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 export default defineComponent({
   props: {
     emission: { default: undefined, type: Object as ()=> Emission},
@@ -159,70 +40,33 @@ export default defineComponent({
    
   data() {
     return {
-      applePodcast:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.applePodcast
-          : undefined) as string | undefined,
-      deezer:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.deezer
-          : undefined) as string | undefined,
-      spotify:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.spotify
-          : undefined) as string | undefined,
-      tunein:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.tunein
-          : undefined) as string | undefined,
-      radioline:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.radioline
-          : undefined) as string | undefined,
-      podcastAddict:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.podcastAddict
-          : undefined) as string | undefined,
-      playerFm:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.playerFm
-          : undefined) as string | undefined,
-      stitcher:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.stitcher
-          : undefined) as string | undefined,
-      amazon:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.amazon
-          : undefined) as string | undefined,
-      googlePodcasts:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.googlePodcasts
-          : undefined) as string | undefined,
-      pocketCasts:
-        (this.emission && this.emission.annotations
-          ? this.emission.annotations.pocketCasts
-          : undefined) as string | undefined,
+      subscriptions : [
+        {name : 'amazon', icon : 'saooti-amazon'},
+        {name:'applePodcast', icon:'saooti-apple'},
+        {name:'deezer', icon:'saooti-deezer'},
+        {name:'googlePodcasts', icon:"saooti-google-podcasts"},
+        {name:'playerFm', icon: 'saooti-saooti-playerfm'},
+        {name:'pocketCasts', icon:'saooti-pocket-casts'},
+        {name:'podcastAddict', icon: 'saooti-podcast-addict'},
+        {name:'radioline', icon:'saooti-radioline'},
+        {name:'spotify', icon:'saooti-spotify'},
+        {name:'stitcher', icon:'saooti-stitcher-logo'},
+        {name:'tunein', icon:'saooti-tunin'}] as Array<{name:string, icon:string}>,
     };
   },
 
-  computed: {},
-
-  mounted() {
-    this.applePodcast = this.externaliseLinks(this.applePodcast);
-    this.deezer = this.externaliseLinks(this.deezer);
-    this.spotify = this.externaliseLinks(this.spotify);
-    this.tunein = this.externaliseLinks(this.tunein);
-    this.radioline = this.externaliseLinks(this.radioline);
-    this.podcastAddict = this.externaliseLinks(this.podcastAddict);
-    this.playerFm = this.externaliseLinks(this.playerFm);
-    this.stitcher = this.externaliseLinks(this.stitcher);
-    this.amazon = this.externaliseLinks(this.amazon);
-    this.googlePodcasts = this.externaliseLinks(this.googlePodcasts);
-    this.pocketCasts = this.externaliseLinks(this.pocketCasts);
-  },
-
   methods: {
+    getPathNumber(sub: string): number{
+      switch (sub) {
+        case 'amazon': return 3;
+        case 'googlePodcasts': return 7;
+        case 'stitcher': return 18;
+        default: return 0;
+      }
+    },
+    getUrl(sub: string): string | undefined{
+      return this.externaliseLinks(this.emission && this.emission.annotations? (this.emission.annotations[sub] as string): undefined);
+    },
     externaliseLinks(link?: string): string|undefined {
       if (!link) return link;
       link = link.trim();

package/src/components/form/ClassicCheckbox.vue

@@ -48,15 +48,15 @@ export default defineComponent({
 				this.$emit('update:textInit', this.textValue)
 			}
 		},
-		textInit(){
-			if(this.textInit !== this.textValue){
-				this.textValue =this.textInit;
-			}
-		}
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+					this.textValue =this.textInit;
+					}
+      },
+    },
   },
-  mounted(){
-		this.textValue = this.textInit;
-	},
   methods:{
     emitClickAction():void{
       this.$emit('clickAction');

package/src/components/form/ClassicRadio.vue

@@ -53,14 +53,14 @@ export default defineComponent({
 				this.$emit('update:textInit', this.textValue)
 			}
 		},
-		textInit(){
-			if(this.textInit !== this.textValue){
-				this.textValue =this.textInit;
-			}
-		}
-  },
-  mounted(){
-		this.textValue = this.textInit;
-	}
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+          this.textValue =this.textInit;
+          }
+      },
+    },
+  }
 });
 </script>