@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -2,14 +2,14 @@
   <div class="module-box overflow-visible">
     <div class="d-flex justify-content-between align-items-center">
       <h2 class="big-h2 mb-3 height-40">
-        {{ $t('Embed') }}
+        {{ $t("Embed") }}
       </h2>
       <div
         v-if="noAd && !isEducation"
         class="sticker"
         :title="$t('You cannot insert advertising')"
       >
-        {{ $t('No advertising') }}
+        {{ $t("No advertising") }}
       </div>
     </div>
     <template v-if="!exclusive && (authenticated || notExclusive)">
@@ -23,7 +23,7 @@
           class="max-iframe mx-3"
         />
         <div class="d-flex flex-column flex-grow-1">
-          <SharePlayerTypes 
+          <SharePlayerTypes
             v-if="!isLiveReadyToRecord"
             v-model:iFrameModel="iFrameModel"
             :podcast="podcast"
@@ -45,17 +45,19 @@
           <PlayerParameters
             v-if="isPlayerParameter"
             :is-visible="isVisible"
-            :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
+            :chose-number-episode="
+              displayChoiceAllEpisodes || isLargeSuggestion
+            "
             :display-choice-all-episodes="displayChoiceAllEpisodes"
             :display-transcript-param="displayTranscriptParam"
             :display-article-param="displayArticleParam"
-            @displayArticle="displayArticle = $event"
-            @displayTranscript="displayTranscript = $event"
-            @displayWave="displayWave=$event"
-            @episodeNumbers="episodeNumbers = $event"
-            @proceedReading="proceedReading = $event"
-            @isVisible="isVisible = $event"
-            @iFrameNumber="iFrameNumber = $event"
+            @display-article="displayArticle = $event"
+            @display-transcript="displayTranscript = $event"
+            @display-wave="displayWave = $event"
+            @episode-numbers="episodeNumbers = $event"
+            @proceed-reading="proceedReading = $event"
+            @is-visible="isVisible = $event"
+            @i-frame-number="iFrameNumber = $event"
           />
           <ShareModalPlayer
             v-if="isShareModal"
@@ -68,150 +70,186 @@
             class="btn btn-primary width-fit-content mt-3"
             @click="isShareModal = true"
           >
-            {{ $t('Share the player') }}
+            {{ $t("Share the player") }}
           </button>
         </div>
       </div>
     </template>
     <div v-else-if="exclusive && authenticated">
-      {{ $t('Only organisation members can share the content') }}
+      {{ $t("Only organisation members can share the content") }}
     </div>
     <div v-else-if="!authenticated">
-      {{ $t('Only authenticated members can share the content') }}
+      {{ $t("Only authenticated members can share the content") }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { orgaComputed } from '../../mixins/orgaComputed';
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import { Podcast } from '@/stores/class/general/podcast';
-import { Emission } from '@/stores/class/general/emission';
-import { Playlist } from '@/stores/class/general/playlist';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-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'));
+import { orgaComputed } from "../../mixins/orgaComputed";
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Emission } from "@/stores/class/general/emission";
+import { Playlist } from "@/stores/class/general/playlist";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+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({
   components: {
     ShareModalPlayer,
     SharePlayerColors,
     PlayerParameters,
     SharePlayerTypes,
-    ClassicCheckbox
+    ClassicCheckbox,
   },
-  mixins:[orgaComputed],
+  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},
+    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' as string,
+      iFrameModel: "default" as string,
       isShareModal: false as boolean,
-      color: '#40a372' as string,
-      theme: '#000000' as string,
+      color: "#40a372" as string,
+      theme: "#000000" as string,
       proceedReading: true as boolean,
-      episodeNumbers: 'number' as string,
-      iFrameNumber: '3' as string,
+      episodeNumbers: "number" as string,
+      iFrameNumber: "3" as string,
       isVisible: false as boolean,
       displayArticle: true as boolean,
       displayTranscript: true as boolean,
       displayWave: true as boolean,
-      orgaAttributes: undefined as{[key: string]:string|number|boolean|undefined}|undefined,
+      orgaAttributes: undefined as
+        | { [key: string]: string | number | boolean | undefined }
+        | undefined,
     };
   },
-  
+
   computed: {
-    ...mapState(useAuthStore, ['authOrganisation']),
-    displayArticleParam():boolean{
-      return undefined!==this.podcast && undefined!==this.podcast.article && 0 !== this.podcast.article.length;
+    ...mapState(useAuthStore, ["authOrganisation"]),
+    displayArticleParam(): boolean {
+      return (
+        undefined !== this.podcast &&
+        undefined !== this.podcast.article &&
+        0 !== this.podcast.article.length
+      );
     },
-    displayTranscriptParam():boolean{
-      return this.isTranscriptionAuthorize && (this.isDefault || this.isEmission);
+    displayTranscriptParam(): boolean {
+      return (
+        this.isTranscriptionAuthorize && (this.isDefault || this.isEmission)
+      );
     },
-    isTranscriptionAuthorize(): boolean{
-      if(!this.orgaAttributes){return false;}
-      return this.orgaAttributes && Object.prototype.hasOwnProperty.call(this.orgaAttributes,'speechtotext.active')?(this.orgaAttributes['speechtotext.active'] as boolean): false;
+    isTranscriptionAuthorize(): boolean {
+      if (!this.orgaAttributes) {
+        return false;
+      }
+      return this.orgaAttributes &&
+        Object.prototype.hasOwnProperty.call(
+          this.orgaAttributes,
+          "speechtotext.active",
+        )
+        ? (this.orgaAttributes["speechtotext.active"] as boolean)
+        : false;
     },
-    displayChoiceAllEpisodes():boolean{
+    displayChoiceAllEpisodes(): boolean {
       return !this.podcast || this.isEmission || this.isLargeEmission;
     },
-    baseUrl(): string{
-      return (state.podcastPage.MiniplayerUri as string); 
+    baseUrl(): string {
+      return state.podcastPage.MiniplayerUri as string;
     },
     isDefault(): boolean {
-      return 'default' === this.iFrameModel;
+      return "default" === this.iFrameModel;
     },
     isEmission(): boolean {
-      return 'emission' === this.iFrameModel;
+      return "emission" === this.iFrameModel;
     },
     isLargeEmission(): boolean {
-      return 'emissionLarge' === this.iFrameModel;
+      return "emissionLarge" === this.iFrameModel;
     },
     isLargeSuggestion(): boolean {
-      return 'largeSuggestion' === this.iFrameModel;
+      return "largeSuggestion" === this.iFrameModel;
     },
     titleStillAvailable(): string {
-      return this.isPodcastNotVisible ?this.$t('Podcast still available') : this.$t('Podcasts still available');
+      return this.isPodcastNotVisible
+        ? this.$t("Podcast still available")
+        : this.$t("Podcasts still available");
     },
     isLiveReadyToRecord(): boolean {
       if (this.podcast)
         return (
           undefined !== this.podcast.conferenceId &&
           0 !== this.podcast.conferenceId &&
-          this.podcast.processingStatus === 'READY_TO_RECORD'
+          this.podcast.processingStatus === "READY_TO_RECORD"
         );
       return false;
     },
     noAd(): boolean {
-      return (this.podcast?.organisation.id !== this.organisationId &&
-          'NO' === this.podcast?.monetisable) ||
-        ('UNDEFINED' === this.podcast?.monetisable &&
-          'NO' === this.podcast?.emission.monetisable);
+      return (
+        (this.podcast?.organisation.id !== this.organisationId &&
+          "NO" === this.podcast?.monetisable) ||
+        ("UNDEFINED" === this.podcast?.monetisable &&
+          "NO" === this.podcast?.emission.monetisable)
+      );
     },
     iFrameSrc(): string {
-      let url = [''];
-      let iFrameNumber = this.displayChoiceAllEpisodes && 'all' === this.episodeNumbers ? '/0' : '/' + this.iFrameNumber;
+      let url = [""];
+      let iFrameNumber =
+        this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
+          ? "/0"
+          : "/" + this.iFrameNumber;
       url.push(`${this.baseUrl}miniplayer/`);
       if (!this.podcast && !this.playlist && this.emission) {
         url = this.constructEmissionUrl(url);
       } else if (this.playlist) {
         url = this.constructPlaylistUrl(url);
-      } else if(this.emission && this.podcast){
+      } else if (this.emission && this.podcast) {
         url.push(`${this.iFrameModel}/`);
         if (this.isEmission || this.isLargeEmission) {
-          url.push(`${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`);
+          url.push(
+            `${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`,
+          );
         } else if (this.isLargeSuggestion) {
           url.push(`${this.podcast.podcastId}${iFrameNumber}`);
-        }  else {
+        } else {
           url.push(`${this.podcast.podcastId}`);
         }
       }
-      return this.addUrlParameters(url).join('');
+      return this.addUrlParameters(url).join("");
     },
     iFrameHeight(): string {
       switch (this.iFrameModel) {
-        case 'large':
-          if (this.podcast) return '210px';
-          return '350px';
-        case 'emissionLarge':
-        case 'largeSuggestion':
-          return '350px';
-        case 'emission':return '520px';
+        case "large":
+          if (this.podcast) return "210px";
+          return "350px";
+        case "emissionLarge":
+        case "largeSuggestion":
+          return "350px";
+        case "emission":
+          return "520px";
         default:
-          return '530px';
+          return "530px";
       }
     },
     iFrame(): string {
@@ -221,7 +259,7 @@ export default defineComponent({
       return (
         undefined !== this.podcast &&
         !this.podcast.availability.visibility &&
-        ('default' === this.iFrameModel || 'large' === this.iFrameModel)
+        ("default" === this.iFrameModel || "large" === this.iFrameModel)
       );
     },
     dataTitle(): number {
@@ -230,85 +268,127 @@ export default defineComponent({
       if (this.playlist) return this.playlist.playlistId;
       return 0;
     },
-    isPlayerParameter(): boolean{
-      return (!this.podcast || 
-      (this.displayArticleParam) ||
-      this.isEmission || this.isLargeEmission || this.isLargeSuggestion || 
-      (this.displayTranscriptParam))
-      && !this.playlist;
-    }
+    isPlayerParameter(): boolean {
+      return (
+        (!this.podcast ||
+          this.displayArticleParam ||
+          this.isEmission ||
+          this.isLargeEmission ||
+          this.isLargeSuggestion ||
+          this.displayTranscriptParam) &&
+        !this.playlist
+      );
+    },
   },
   async created() {
     await this.fetchOrgaAttributes();
     this.initColor();
     if (this.isLiveReadyToRecord) {
-      this.iFrameModel = 'large';
+      this.iFrameModel = "large";
     }
   },
   methods: {
-    getIframeNumber(): string{
-      return this.displayChoiceAllEpisodes && 'all' === this.episodeNumbers ? '/0' : '/' + this.iFrameNumber;
+    getIframeNumber(): string {
+      return this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
+        ? "/0"
+        : "/" + this.iFrameNumber;
     },
-    constructEmissionUrl(url: Array<string>){
-      if(!this.emission){return [];}
-       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}${this.getIframeNumber()}`);
-        return url;
+    constructEmissionUrl(url: Array<string>) {
+      if (!this.emission) {
+        return [];
+      }
+      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}${this.getIframeNumber()}`);
+      return url;
     },
-    constructPlaylistUrl(url: Array<string>){
-      if(!this.playlist){return [];}
+    constructPlaylistUrl(url: Array<string>) {
+      if (!this.playlist) {
+        return [];
+      }
       switch (this.iFrameModel) {
-        case 'default': url.push('playlist'); break;
-        case 'large': url.push('playlistLarge'); break;
-        default: url.push(`${this.iFrameModel}`);break;
+        case "default":
+          url.push("playlist");
+          break;
+        case "large":
+          url.push("playlistLarge");
+          break;
+        default:
+          url.push(`${this.iFrameModel}`);
+          break;
       }
       url.push(`/${this.playlist.playlistId}`);
       return url;
     },
-    addUrlParameters(url: Array<string>){
-      url.push('?distributorId=' + this.organisationId);
-      url.push(`&color=${this.color.substring(1)}&theme=${this.theme.substring(1)}`);
+    addUrlParameters(url: Array<string>) {
+      url.push("?distributorId=" + this.organisationId);
+      url.push(
+        `&color=${this.color.substring(1)}&theme=${this.theme.substring(1)}`,
+      );
       if (!this.proceedReading) {
-        url.push('&proceed=false');
+        url.push("&proceed=false");
       }
-      if(!this.displayArticle){
-        url.push('&article=false');
+      if (!this.displayArticle) {
+        url.push("&article=false");
       }
-      if(!this.displayTranscript){
-        url.push('&transcript=false');
+      if (!this.displayTranscript) {
+        url.push("&transcript=false");
       }
-      if(!this.displayWave){
-        url.push('&wave=false');
+      if (!this.displayWave) {
+        url.push("&wave=false");
       }
       if (this.isVisible) {
-        url.push('&key=' + window.btoa(this.dataTitle.toString()));
+        url.push("&key=" + window.btoa(this.dataTitle.toString()));
       }
       return url;
     },
-    async fetchOrgaAttributes(): Promise<void>{
-      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+    async fetchOrgaAttributes(): Promise<void> {
+      if (
+        "" !== this.authOrganisation.id &&
+        this.authOrganisation.attributes &&
+        Object.keys(this.authOrganisation.attributes).length > 1
+      ) {
         this.orgaAttributes = this.authOrganisation.attributes;
-      }else{
-        this.orgaAttributes= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+this.myOrganisationId);
+      } else {
+        this.orgaAttributes = await octopusApi.fetchData<{
+          [key: string]: string;
+        }>(0, "organisation/attributes/" + this.myOrganisationId);
       }
     },
     initColor(): void {
-      if(!this.orgaAttributes){return;}
-      this.color = Object.prototype.hasOwnProperty.call(this.orgaAttributes,'COLOR') ? (this.orgaAttributes.COLOR as string) : '#40a372';
-      this.theme = Object.prototype.hasOwnProperty.call(this.orgaAttributes,'THEME') ? (this.orgaAttributes.THEME as string) : '#000000';
+      if (!this.orgaAttributes) {
+        return;
+      }
+      this.color = Object.prototype.hasOwnProperty.call(
+        this.orgaAttributes,
+        "COLOR",
+      )
+        ? (this.orgaAttributes.COLOR as string)
+        : "#40a372";
+      this.theme = Object.prototype.hasOwnProperty.call(
+        this.orgaAttributes,
+        "THEME",
+      )
+        ? (this.orgaAttributes.THEME as string)
+        : "#000000";
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-@import '../../../assets/iframe.scss';
-.octopus-app{
+@import "@scss/_variables.scss";
+@import "../../../assets/iframe.scss";
+.octopus-app {
   .sticker {
     align-self: center;
     background: $octopus-primary-color;
@@ -327,4 +407,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>

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

@@ -2,30 +2,30 @@
   <div class="d-flex">
     <div class="d-flex flex-column align-items-center flex-shrink-0 me-4">
       <div class="h4 mb-2">
-        {{ $t('Choose color') }}
+        {{ $t("Choose color") }}
       </div>
       <VSwatches
         :model-value="color"
-        class="c-hand "
+        class="c-hand"
         show-fallback
         colors="text-advanced"
         popover-to="right"
         :data-color="color"
-        @update:modelValue="$emit('update:color',$event)"
+        @update:model-value="$emit('update:color', $event)"
       />
     </div>
     <div class="d-flex flex-column align-items-center">
       <div class="h4 mb-2">
-        {{ $t('Choose theme') }}
+        {{ $t("Choose theme") }}
       </div>
       <VSwatches
         :model-value="theme"
-        class="c-hand "
+        class="c-hand"
         show-fallback
         colors="text-advanced"
         popover-to="right"
         :data-color="theme"
-        @update:modelValue="$emit('update:theme',$event)"
+        @update:model-value="$emit('update:theme', $event)"
       />
     </div>
   </div>
@@ -33,18 +33,18 @@
 
 <script lang="ts">
 // @ts-ignore
-import {VSwatches} from 'vue3-swatches';
-import 'vue3-swatches/dist/style.css';
-import { defineComponent } from 'vue';
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
-    VSwatches
+    VSwatches,
   },
 
   props: {
-    color: { default: '#40a372', type: String},
-    theme: { default: '#000000', type: String},
+    color: { default: "#40a372", type: String },
+    theme: { default: "#000000", type: String },
   },
-  emits:['update:color', 'update:theme'],
-})
-</script>
+  emits: ["update:color", "update:theme"],
+});
+</script>