@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -1,7 +1,7 @@
 <template>
   <div class="module-box overflow-visible">
     <h2 class="big-h2 mb-3 height-40">
-      {{ $t('Embed') }}
+      {{ $t("Embed") }}
     </h2>
     <div class="d-flex">
       <iframe
@@ -13,10 +13,7 @@
         class="max-iframe mx-3 flex-grow-1"
       />
       <div class="d-flex flex-column flex-grow-1 align-items-center">
-        <SharePlayerColors
-          v-model:color="color"
-          v-model:theme="theme"
-        />
+        <SharePlayerColors v-model:color="color" v-model:theme="theme" />
         <ShareModalPlayer
           v-if="isShareModal"
           :embed-link="iFrame"
@@ -27,7 +24,7 @@
           class="btn btn-primary width-fit-content mt-3"
           @click="isShareModal = true"
         >
-          {{ $t('Share the player') }}
+          {{ $t("Share the player") }}
         </button>
       </div>
     </div>
@@ -35,68 +32,94 @@
 </template>
 
 <script lang="ts">
-import { orgaComputed } from '../../mixins/orgaComputed';
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { Canal } from '@/stores/class/radio/canal';
-const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
-const SharePlayerColors = defineAsyncComponent(() => import('./SharePlayerColors.vue'));
+import { orgaComputed } from "../../mixins/orgaComputed";
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { Canal } from "@/stores/class/radio/canal";
+const ShareModalPlayer = defineAsyncComponent(
+  () => import("../../misc/modal/ShareModalPlayer.vue"),
+);
+const SharePlayerColors = defineAsyncComponent(
+  () => import("./SharePlayerColors.vue"),
+);
 export default defineComponent({
   components: {
     ShareModalPlayer,
-    SharePlayerColors
+    SharePlayerColors,
   },
-  mixins:[orgaComputed],
+  mixins: [orgaComputed],
   props: {
-    canal: { default: undefined, type: Object as ()=> Canal},
-    organisationId: { default: undefined, type: String},
+    canal: { default: undefined, type: Object as () => Canal },
+    organisationId: { default: undefined, type: String },
   },
 
   data() {
     return {
       isShareModal: false as boolean,
-      color: '#40a372' as string,
-      theme: '#000000' as string,
-      orgaAttributes: undefined as{[key: string]:string|number|boolean|undefined}|undefined,
+      color: "#40a372" as string,
+      theme: "#000000" as string,
+      orgaAttributes: undefined as
+        | { [key: string]: string | number | boolean | undefined }
+        | undefined,
     };
   },
-  
+
   computed: {
-    ...mapState(useAuthStore, ['authOrganisation']),
-    iFrameSrc(): string{
-      return `${state.podcastPage.MiniplayerUri}miniplayer/radio/${this.canal?.id}?distributorId=${this.organisationId}&color=${this.color.substring(1)}&theme=${this.theme.substring(1)}`; 
+    ...mapState(useAuthStore, ["authOrganisation"]),
+    iFrameSrc(): string {
+      return `${state.podcastPage.MiniplayerUri}miniplayer/radio/${this.canal
+        ?.id}?distributorId=${this.organisationId}&color=${this.color.substring(
+        1,
+      )}&theme=${this.theme.substring(1)}`;
     },
-   
+
     iFrame(): string {
       return `<iframe src="${this.iFrameSrc}" width="100%" height="140px" scrolling="no" frameborder="0"></iframe>`;
     },
-    
   },
   async created() {
     await this.fetchOrgaAttributes();
     this.initColor();
   },
   methods: {
-    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';
-</style>
+@import "@scss/_variables.scss";
+@import "../../../assets/iframe.scss";
+</style>

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

@@ -1,22 +1,13 @@
 <template>
-  <label
-    for="iframe-select"
-    title="select miniplayer"
-  />
+  <label for="iframe-select" title="select miniplayer" />
   <select
     id="iframe-select"
     :value="iFrameModel"
     class=""
-    @change="$emit('update:iFrameModel',$event.target.value)"
+    @change="$emit('update:iFrameModel', $event.target.value)"
   >
-    <template
-      v-for="option in optionsSelect"
-      :key="option.value"
-    >
-      <option
-        v-if="option.condition"
-        :value="option.value"
-      >
+    <template v-for="option in optionsSelect" :key="option.value">
+      <option v-if="option.condition" :value="option.value">
         {{ option.name }}
       </option>
     </template>
@@ -25,29 +16,29 @@
       :key="player.customId"
       :value="player.customId"
     >
-      {{ $t('Custom version') + " «" +player.name+"»" }}
+      {{ $t("Custom version") + " «" + player.name + "»" }}
     </option>
   </select>
 </template>
 
 <script lang="ts">
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import { Podcast } from '@/stores/class/general/podcast';
-import { CustomPlayer } from '@/stores/class/general/customPlayer';
-import { defineComponent } from 'vue';
-import { Emission } from '@/stores/class/general/emission';
-import { Playlist } from '@/stores/class/general/playlist';
-import { InterfacePageable } from '@/stores/class/general/interfacePageable';
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import { Podcast } from "@/stores/class/general/podcast";
+import { CustomPlayer } from "@/stores/class/general/customPlayer";
+import { defineComponent } from "vue";
+import { Emission } from "@/stores/class/general/emission";
+import { Playlist } from "@/stores/class/general/playlist";
+import { InterfacePageable } from "@/stores/class/general/interfacePageable";
 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},
-    iFrameModel: { default: 'default', type: String},
-    organisationId: { default: undefined, type: String},
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    playlist: { default: undefined, type: Object as () => Playlist },
+    iFrameModel: { default: "default", type: String },
+    organisationId: { default: undefined, type: String },
   },
-  emits:['update:iFrameModel'],
+  emits: ["update:iFrameModel"],
 
   data() {
     return {
@@ -55,19 +46,38 @@ export default defineComponent({
     };
   },
   computed: {
-    optionsSelect(){
+    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}
-      ]
+        { 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)=>{
-        return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) &&this.podcast?.podcastId) ||
-                          ('EMISSION' === player.typePlayer && this.emission  && !this.podcast)|| ('PLAYLIST' === player.typePlayer && this.playlist );
+    customPlayersDisplay(): Array<CustomPlayer> {
+      return this.customPlayers.filter((player: CustomPlayer) => {
+        return (
+          (("EPISODE" === player.typePlayer ||
+            "SUGGESTION" === player.typePlayer) &&
+            this.podcast?.podcastId) ||
+          ("EMISSION" === player.typePlayer &&
+            this.emission &&
+            !this.podcast) ||
+          ("PLAYLIST" === player.typePlayer && this.playlist)
+        );
       });
     },
   },
@@ -75,36 +85,64 @@ export default defineComponent({
     await this.initCustomPlayers();
   },
   methods: {
-    async fetchCustomPlayers(type:string, trySelect: boolean): Promise<boolean>{
-      let players = await octopusApi.fetchDataPublic<InterfacePageable<CustomPlayer>>(6,'customPlayer/type/'+ this.organisationId+'/'+type);
+    async fetchCustomPlayers(
+      type: string,
+      trySelect: boolean,
+    ): Promise<boolean> {
+      let players = await octopusApi.fetchDataPublic<
+        InterfacePageable<CustomPlayer>
+      >(6, "customPlayer/type/" + this.organisationId + "/" + type);
       let playersContent = players.content;
       const totalCount = players.totalElements;
       let index = 1;
       while (totalCount > playersContent.length) {
-        players =  await octopusApi.fetchDataPublic<InterfacePageable<CustomPlayer>>(6,'customPlayer/type/'+ this.organisationId+'/'+type+'?start='+index);
+        players = await octopusApi.fetchDataPublic<
+          InterfacePageable<CustomPlayer>
+        >(
+          6,
+          "customPlayer/type/" +
+            this.organisationId +
+            "/" +
+            type +
+            "?start=" +
+            index,
+        );
         playersContent = playersContent.concat(players.content);
         ++index;
       }
       this.customPlayers = this.customPlayers.concat(playersContent);
-      if(trySelect && this.customPlayers[0] && this.customPlayers[0].selected){
-        this.$emit('update:iFrameModel',this.customPlayers[0].customId.toString());
+      if (
+        trySelect &&
+        this.customPlayers[0] &&
+        this.customPlayers[0].selected
+      ) {
+        this.$emit(
+          "update:iFrameModel",
+          this.customPlayers[0].customId.toString(),
+        );
         return false;
       }
       return true;
     },
     async initCustomPlayers(): Promise<void> {
       if (!state.generalParameters.authenticated) return;
-      if(this.playlist){
-        this.fetchCustomPlayers('PLAYLIST', true);
-      }else if(this.emission  && !this.podcast){
-        this.fetchCustomPlayers('EMISSION', true);
-      }else{
+      if (this.playlist) {
+        this.fetchCustomPlayers("PLAYLIST", true);
+      } else if (this.emission && !this.podcast) {
+        this.fetchCustomPlayers("EMISSION", true);
+      } else {
         let playerTrySelect = true;
-        playerTrySelect = await this.fetchCustomPlayers('EPISODE', playerTrySelect);
-        playerTrySelect = await this.fetchCustomPlayers('EMISSION', playerTrySelect);
-        await this.fetchCustomPlayers('SUGGESTION', playerTrySelect);
+        playerTrySelect = await this.fetchCustomPlayers(
+          "EPISODE",
+          playerTrySelect,
+        );
+        playerTrySelect = await this.fetchCustomPlayers(
+          "EMISSION",
+          playerTrySelect,
+        );
+        await this.fetchCustomPlayers("SUGGESTION", playerTrySelect);
       }
     },
-  }
-})
-</script>
+  },
+});
+</script>

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

@@ -1,18 +1,15 @@
 <template>
   <div class="module-box flex-grow-0">
     <h2 class="big-h2 mb-3 height-40">
-      {{ $t('Subscribe emission') }}
+      {{ $t("Subscribe emission") }}
     </h2>
-    <template
-      v-for="(sub, index) in subscriptionsDisplay"
-      :key="sub.name"
-    >
+    <template v-for="(sub, index) in subscriptionsDisplay" :key="sub.name">
       <a
         rel="noopener"
         target="_blank"
         :class="[
-          0 === index? 'first': '',
-          subscriptionsDisplay.length-1 === index? 'last': '',
+          0 === index ? 'first' : '',
+          subscriptionsDisplay.length - 1 === index ? 'last' : '',
         ]"
         class="btn share-btn mb-2 mx-2"
         :href="sub.url"
@@ -25,45 +22,99 @@
 </template>
 
 <script lang="ts">
-import { Emission } from '@/stores/class/general/emission';
-import { defineComponent } from 'vue';
+import { Emission } from "@/stores/class/general/emission";
+import { defineComponent } from "vue";
 export default defineComponent({
   props: {
-    emission: { default: undefined, type: Object as ()=> Emission},
-    podcastId: { default: undefined, type: Number},
+    emission: { default: undefined, type: Object as () => Emission },
+    podcastId: { default: undefined, type: Number },
   },
-  computed:{
-    subscriptionsDisplay(){
+  computed: {
+    subscriptionsDisplay() {
       const sub = [
-        {name : 'amazon', icon : 'saooti-amzn',title:'Amazon Music | Podcasters', url : this.getUrl('amazon')},
-        {name:'applePodcast', icon:'saooti-apple', title:'Apple Podcast | iTunes', url : this.getUrl('applePodcast')},
-        {name:'deezer', icon:'saooti-deezer', title:'Deezer', url : this.getUrl('deezer')},
-        {name:'googlePodcasts', icon:"saooti-google-podcasts",title:'Google Podcasts', url : this.getUrl('googlePodcasts')},
-        {name:'playerFm', icon: 'saooti-playerfm',title:'PlayerFM', url : this.getUrl('playerFm')},
-        {name:'pocketCasts', icon:'saooti-pocket-casts', title:'Pocket Casts', url : this.getUrl('pocketCasts')},
-        {name:'podcastAddict', icon: 'saooti-podcast-addict', title:'Podcast Addict', url : this.getUrl('podcastAddict')},
-        {name:'radioline', icon:'saooti-radioline',title:'Radioline', url : this.getUrl('radioline')},
-        {name:'spotify', icon:'saooti-spotify',title:'Spotify',  url : this.getUrl('spotify')},
-        {name:'tunein', icon:'saooti-tunin',title:'TuneIn', url : this.getUrl('tunein')}
+        {
+          name: "amazon",
+          icon: "saooti-amzn",
+          title: "Amazon Music | Podcasters",
+          url: this.getUrl("amazon"),
+        },
+        {
+          name: "applePodcast",
+          icon: "saooti-apple",
+          title: "Apple Podcast | iTunes",
+          url: this.getUrl("applePodcast"),
+        },
+        {
+          name: "deezer",
+          icon: "saooti-deezer",
+          title: "Deezer",
+          url: this.getUrl("deezer"),
+        },
+        {
+          name: "googlePodcasts",
+          icon: "saooti-google-podcasts",
+          title: "Google Podcasts",
+          url: this.getUrl("googlePodcasts"),
+        },
+        {
+          name: "playerFm",
+          icon: "saooti-playerfm",
+          title: "PlayerFM",
+          url: this.getUrl("playerFm"),
+        },
+        {
+          name: "pocketCasts",
+          icon: "saooti-pocket-casts",
+          title: "Pocket Casts",
+          url: this.getUrl("pocketCasts"),
+        },
+        {
+          name: "podcastAddict",
+          icon: "saooti-podcast-addict",
+          title: "Podcast Addict",
+          url: this.getUrl("podcastAddict"),
+        },
+        {
+          name: "radioline",
+          icon: "saooti-radioline",
+          title: "Radioline",
+          url: this.getUrl("radioline"),
+        },
+        {
+          name: "spotify",
+          icon: "saooti-spotify",
+          title: "Spotify",
+          url: this.getUrl("spotify"),
+        },
+        {
+          name: "tunein",
+          icon: "saooti-tunin",
+          title: "TuneIn",
+          url: this.getUrl("tunein"),
+        },
       ];
-      return sub.filter(item=> item.url);
-    }
+      return sub.filter((item) => item.url);
+    },
   },
 
   methods: {
-    getUrl(sub: string): string | undefined{
-      return this.externaliseLinks(this.emission?.annotations?.[sub] as string|undefined);
+    getUrl(sub: string): string | undefined {
+      return this.externaliseLinks(
+        this.emission?.annotations?.[sub] as string | undefined,
+      );
     },
-    externaliseLinks(link?: string): string|undefined {
+    externaliseLinks(link?: string): string | undefined {
       if (!link) return link;
       link = link.trim();
-      return !link.startsWith('http') && !link.startsWith('//') ? '//' + link:link;
+      return !link.startsWith("http") && !link.startsWith("//")
+        ? "//" + link
+        : link;
     },
   },
-})
+});
 </script>
 <style lang="scss">
-.height-40{
+.height-40 {
   height: 40px;
 }
-</style>
+</style>

package/src/components/display/studio/RecordingItemButton.vue

@@ -3,6 +3,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({})
-</script>
+import { defineComponent } from "vue";
+export default defineComponent({});
+</script>

package/src/components/form/ClassicCheckbox.vue

@@ -1,69 +1,71 @@
 <template>
   <div class="d-flex align-items-center octopus-form-item">
-    <div
-      :class="isSwitch?'octopus-form-switch me-2':''"
-    >
+    <div :class="isSwitch ? 'octopus-form-switch me-2' : ''">
       <input
         :id="idCheckbox"
         :checked="textInit"
         type="checkbox"
         :disabled="isDisabled"
-        :title="displayLabel?'':label"
+        :title="displayLabel ? '' : label"
         :data-selenium="selenium"
-        @input="$emit('update:textInit',!textInit)"
+        @input="$emit('update:textInit', !textInit)"
         @click="emitClickAction"
-      >
+      />
       <span
         v-if="isSwitch"
         class="slider"
-        @click="$emit('update:textInit',!textInit);emitClickAction"
+        @click="
+          $emit('update:textInit', !textInit);
+          emitClickAction;
+        "
       />
     </div>
     <label
       class="c-hand"
-      :class="displayLabel? '': 'd-none'"
+      :class="displayLabel ? '' : 'd-none'"
       :for="idCheckbox"
-    >{{ label }}</label>
+      >{{ label }}</label
+    >
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ClassicCheckbox',
+  name: "ClassicCheckbox",
 
   props: {
-    idCheckbox: { default: '', type: String },
-    label: { default: '', type: String },
+    idCheckbox: { default: "", type: String },
+    label: { default: "", type: String },
     isDisabled: { default: false, type: Boolean },
     textInit: { default: false, type: Boolean },
-    isSwitch:{default:false, type:Boolean},
-    displayLabel: {default:true, type: Boolean},
-    selenium: { default: '', type: String },
+    isSwitch: { default: false, type: Boolean },
+    displayLabel: { default: true, type: Boolean },
+    selenium: { default: "", type: String },
+  },
+  emits: ["update:textInit", "clickAction"],
+  methods: {
+    emitClickAction(): void {
+      this.$emit("clickAction");
+    },
   },
-  emits: ['update:textInit', 'clickAction'],
-  methods:{
-    emitClickAction():void{
-      this.$emit('clickAction');
-    }
-  }
 });
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-  .octopus-form-switch{
+@import "@scss/_variables.scss";
+.octopus-app {
+  .octopus-form-switch {
     position: relative;
     display: inline-block;
     width: 2rem;
     height: 1rem;
-    input{
+    input {
       opacity: 0;
       width: 0;
       height: 0;
     }
-    .slider{
+    .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
@@ -71,7 +73,7 @@ export default defineComponent({
       right: 0;
       bottom: 0;
       background-color: #ccc;
-      transition: .4s;
+      transition: 0.4s;
       border-radius: 1rem;
     }
     .slider:before {
@@ -82,7 +84,7 @@ export default defineComponent({
       left: 2px;
       bottom: 2px;
       background-color: white;
-      transition: .4s;
+      transition: 0.4s;
       border-radius: 50%;
     }
     input:checked + .slider {
@@ -94,7 +96,6 @@ export default defineComponent({
     input:checked + .slider:before {
       transform: translateX(1rem);
     }
-
   }
 }
-</style>
+</style>