@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -0,0 +1,78 @@
+<template>
+  <div class="d-flex justify-content-around mt-3 w-100">
+    <div class="d-flex flex-column align-items-center flex-shrink-0 me-3">
+      <div>{{ $t('Choose color') }}</div>
+      <VSwatches
+        v-model="internColor"
+        class="c-hand "
+        show-fallback
+        colors="text-advanced"
+        popover-to="right"
+        :data-color="internColor"
+      />
+    </div>
+    <div class="d-flex flex-column align-items-center">
+      <div>{{ $t('Choose theme') }}</div>
+      <VSwatches
+        v-model="internTheme"
+        class="c-hand "
+        show-fallback
+        colors="text-advanced"
+        popover-to="right"
+        :data-color="internTheme"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-ignore
+import VSwatches from 'vue3-swatches';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    VSwatches
+  },
+
+  props: {
+    color: { default: '#40a372', type: String},
+    theme: { default: '#000000', type: String},
+  },
+  emits:['update:color', 'update:theme'],
+
+  data() {
+    return {
+      internColor:'#40a372' as string,
+      internTheme:'#000000' as string,
+    };
+  },
+  watch:{
+    internColor(){
+      if(this.color !== this.internColor){
+        this.$emit('update:color', this.internColor);
+      }
+    },
+    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;
+        }
+      },
+    },
+  },
+})
+</script>

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="d-flex flex-column">
+    <label
+      for="iframe-select"
+      title="select miniplayer"
+    />
+    <select
+      id="iframe-select"
+      :value="iFrameModel"
+      class=""
+      @change="$emit('update:iFrameModel',$event.target.value)"
+    >
+      <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"
+        :value="player.customId"
+      >
+        {{ $t('Custom version') + " «" +player.name+"»" }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
+import { Podcast } from '@/store/class/general/podcast';
+import { CustomPlayer } from '@/store/class/general/customPlayer';
+import { defineComponent } from 'vue';
+import { Emission } from '@/store/class/general/emission';
+import { Playlist } from '@/store/class/general/playlist';
+import { InterfacePageable } from '@/store/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},
+  },
+  emits:['update:iFrameModel'],
+
+  data() {
+    return {
+      customPlayers: [] as Array<CustomPlayer>,
+    };
+  },
+  computed: {
+    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)=>{
+        return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) &&this.podcast?.podcastId) ||
+                          ('EMISSION' === player.typePlayer && this.emission  && !this.podcast)|| ('PLAYLIST' === player.typePlayer && this.playlist );
+      });
+    },
+  },
+  async created() {
+    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);
+      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);
+        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());
+        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{
+        let playerTrySelect = true;
+        playerTrySelect = await this.fetchCustomPlayers('EPISODE', playerTrySelect);
+        playerTrySelect = await this.fetchCustomPlayers('EMISSION', playerTrySelect);
+        playerTrySelect = await this.fetchCustomPlayers('SUGGESTION', playerTrySelect);
+      }
+    },
+  }
+})
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="btn-split"
+    @mouseleave="mobileHoverEffect=false"
+  >
+    <div class="d-flex flex-wrap">
+      <slot name="inside-button" />
+    </div>
+    <div class="label">
+      {{ title }}
+    </div> 
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  props: {
+    title: { default: '', type:String},
+  },
+   
+  data() {
+    return {
+      mobileHoverEffect:false as boolean,
+    };
+  },
+  computed:{
+    isMobile(): boolean {
+      return window.matchMedia('(hover: none)').matches;
+    },
+  },
+
+  methods: {
+    linkClick(event: { preventDefault: () => void; }){
+      if(this.isMobile && !this.mobileHoverEffect){
+        this.mobileHoverEffect = true;
+        event.preventDefault();
+      }
+    },
+  },
+})
+</script>

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

@@ -1,137 +1,84 @@
 <template>
-  <div class="module-box flex-no-grow">
-    <div class="d-flex align-items-center mb-3">
-      <h3 class="mb-0 share-button-title">{{ $t('Subscribe emission') }}</h3>
-    </div>
-    <div class="d-flex">
+  <div class="module-box flex-grow-0">
+    <h3 class="mb-2 height-40">
+      {{ $t('Subscribe emission') }}
+    </h3>
+    <template
+      v-for="(sub, index) in subscriptionsDisplay"
+      :key="sub.name"
+    >
       <a
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="applePodcast"
-        v-if="applePodcast"
-        aria-label="Apple"
+        :class="[
+          0 === index? 'first': '',
+          subscriptionsDisplay.length-1 === index? 'last': '',
+        ]"
+        class="btn share-btn mb-2 mx-2"
+        :href="sub.url"
+        :title="sub.name"
       >
-        <span class="saooti-apple"></span>
+        <span :class="sub.icon">
+          <div
+            v-for="indexPath in getPathNumber(sub.name)"
+            :key="indexPath"
+            :class="'path'+(indexPath+1)"
+          />
+        </span>
       </a>
-      <a
-        target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="deezer"
-        v-if="deezer"
-        aria-label="Deezer"
-      >
-        <span class="saooti-deezer"></span>
-      </a>
-      <a
-        target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="spotify"
-        v-if="spotify"
-        aria-label="Spotify"
-      >
-        <span class="saooti-spotify"></span>
-      </a>
-      <a
-        target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="tunein"
-        v-if="tunein"
-        aria-label="Tunin"
-      >
-        <span class="saooti-tunin"></span>
-      </a>
-      <a
-        target="_blank"
-        class="btn mr-3 mb-2 btn-tootak share-btn"
-        :href="tootak"
-        v-if="tootak"
-        aria-label="Tootak"
-      >
-        <span class="saooti-tootak"></span>
-      </a>
-      <a
-        target="_blank"
-        class="btn mr-3 mb-2 btn-radioline share-btn"
-        :href="radioline"
-        v-if="radioline"
-        aria-label="Radioline"
-      >
-        <span class="saooti-radioline"></span>
-      </a>
-    </div>
+    </template>
   </div>
 </template>
 
-<style lang="scss">
-.saooti-tunin {
-  color: #36b4a7;
-}
-.saooti-radioline {
-  color: #2273b9;
-}
-.saooti-tootak {
-  color: #ff4d53;
-}
-.flex-no-grow {
-  flex-grow: 0 !important;
-}
-</style>
-
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { Emission } from '@/store/class/general/emission';
+import { defineComponent } from 'vue';
 export default defineComponent({
-  props: ['podcastId', 'emission'],
-
-  components: {},
-
-  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.tootak = this.externaliseLinks(this.tootak);
-    this.radioline = this.externaliseLinks(this.radioline);
+  props: {
+    emission: { default: undefined, type: Object as ()=> Emission},
+    podcastId: { default: undefined, type: Number},
   },
-
-  data() {
-    return {
-      applePodcast:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.applePodcast
-          : undefined as any,
-      deezer:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.deezer
-          : undefined as any,
-      spotify:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.spotify
-          : undefined as any,
-      tunein:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.tunein
-          : undefined as any,
-      tootak:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.tootak
-          : undefined as any,
-      radioline:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.radioline
-          : undefined as any,
-    };
+  computed:{
+    subscriptionsDisplay(){
+      const sub = [
+        {name : 'amazon', icon : 'saooti-amazon', url : this.getUrl('amazon')},
+        {name:'applePodcast', icon:'saooti-apple', url : this.getUrl('applePodcast')},
+        {name:'deezer', icon:'saooti-deezer', url : this.getUrl('deezer')},
+        {name:'googlePodcasts', icon:"saooti-google-podcasts", url : this.getUrl('googlePodcasts')},
+        {name:'playerFm', icon: 'saooti-playerfm', url : this.getUrl('playerFm')},
+        {name:'pocketCasts', icon:'saooti-pocket-casts', url : this.getUrl('pocketCasts')},
+        {name:'podcastAddict', icon: 'saooti-podcast-addict', url : this.getUrl('podcastAddict')},
+        {name:'radioline', icon:'saooti-radioline', url : this.getUrl('radioline')},
+        {name:'spotify', icon:'saooti-spotify', url : this.getUrl('spotify')},
+        {name:'stitcher', icon:'saooti-stitcher-logo', url : this.getUrl('stitcher')},
+        {name:'tunein', icon:'saooti-tunin', url : this.getUrl('tunein')}
+      ];
+      return sub.filter(item=> item.url);
+    }
   },
 
-  computed: {},
-
   methods: {
-    externaliseLinks(link?: string) {
+    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?.annotations?.[sub] as string|undefined);
+    },
+    externaliseLinks(link?: string): string|undefined {
       if (!link) return link;
       link = link.trim();
-      if (!link.startsWith('http') && !link.startsWith('//'))
-        return '//' + link;
-      return link;
+      return !link.startsWith('http') && !link.startsWith('//') ? '//' + link:link;
     },
   },
-});
+})
 </script>
+<style lang="scss">
+.height-40{
+  height: 40px;
+}
+</style>

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

@@ -1,10 +1,8 @@
 <template>
-  <div></div>
+  <div />
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
-export default defineComponent({});
-</script>
+export default defineComponent({})
+</script>

package/src/components/form/ClassicCheckbox.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="form-check"
+    :class="isSwitch?'form-switch':''"
+  >
+    <input
+      :id="idCheckbox"
+      v-model="textValue"
+      type="checkbox"
+      class="form-check-input"
+      :disabled="isDisabled"
+      :title="displayLabel?'':label"
+      :data-selenium="selenium"
+      @click="emitClickAction"
+    >
+    <label
+      class="form-check-label"
+      :class="displayLabel? '': 'd-none'"
+      :for="idCheckbox"
+    >{{ label }}</label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicCheckbox',
+
+  props: {
+    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 },
+  },
+  emits: ['update:textInit', 'clickAction'],
+
+  data() {
+    return {
+      textValue: false as boolean,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+					this.textValue =this.textInit;
+					}
+      },
+    },
+  },
+  methods:{
+    emitClickAction():void{
+      this.$emit('clickAction');
+    }
+  }
+});
+</script>

package/src/components/form/ClassicLoading.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    v-if="loadingText"
+    class="d-flex justify-content-center"
+  >
+    <div class="spinner-border me-3" />
+    <div class="h3 mt-2">
+      {{ loadingText }}
+    </div>
+  </div>
+  <div
+    v-else-if="errorText"
+    class="text-center text-danger"
+  >
+    <h3>{{ errorText }}</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "ClassicLoading",
+  props: {
+    loadingText: { default: undefined, type: String},
+    errorText: { default: undefined, type: String},
+  }
+})
+</script>

package/src/components/form/ClassicRadio.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="d-flex"
+    :class="isColumn? 'flex-column':''"
+  >
+    <div
+      v-for="option in options"
+      :key="option.title"
+      class="form-check"
+      :class="isColumn? '':'me-2'"
+    >
+      <input
+        :id="idRadio + option.value"
+        v-model="textValue"
+        class="form-check-input"
+        type="radio"
+        :name="idRadio"
+        :value="option.value"
+        :disabled="isDisabled"
+      >
+      <label
+        class="form-check-label"
+        :for="idRadio + option.value"
+      >{{
+        option.title
+      }}</label>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicRadio',
+
+  props: {
+    idRadio: { default: '', type: String },
+    isDisabled: { default: false, type: Boolean },
+    options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined}> },
+    textInit: { default: undefined, type: String },
+    isColumn: {default:true, type:Boolean}
+  },
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: undefined as string|undefined,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+          this.textValue =this.textInit;
+          }
+      },
+    },
+  }
+});
+</script>