@saooti/octopus-sdk 30.0.5 → 30.0.9

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="module-box text-center-mobile share-button-page">
-    <div class="d-flex align-items-center mb-3 share-button-title">
+  <div class="module-box text-center-mobile">
+    <div class="d-flex align-items-center mb-3">
       <h3
         v-if="
           !bigRound &&
@@ -13,14 +13,13 @@
       <span
         v-if="authenticated"
         id="popover-share-help"
-        role="button"
-        class="saooti-help ml-2"
+        tabindex="-1"
+        class="saooti-help ms-2"
         :aria-label="$t('Help')"
       />
       <Popover
         v-if="authenticated"
         target="popover-share-help"
-        triggers="hover"
         placement="right"
       >
         {{ $t('Share this page without edit and share blocks') }}
@@ -30,12 +29,12 @@
       class="d-flex"
       :class="[
         bigRound && !audioUrl ? 'justify-content-center' : '',
-        verticalDisplay ? 'flex-column' : '',
+        verticalDisplay ? 'd-flex-row' : '',
       ]"
     >
       <a
         v-if="audioUrl"
-        class="btn btn-bigRound"
+        class="btn btn-big-round"
         :title="$t('Downloading')"
         :href="audioUrl"
         rel="noopener"
@@ -50,8 +49,8 @@
         target="_blank"
         :href="facebookURL"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-facebook share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-facebook share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         title="Facebook"
         aria-label="Facebook"
@@ -69,8 +68,8 @@
         rel="noopener"
         target="_blank"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-twitter share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-twitter share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         :href="twitterURL"
         title="Twitter"
@@ -89,8 +88,8 @@
         rel="noopener"
         target="_blank"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-linkedin share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-linkedin share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         :href="linkedinURL"
         title="Linkedin"
@@ -110,8 +109,8 @@
         rel="noopener"
         target="_blank"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         :href="rssUrl"
         :title="$t('Subscribe to this emission')"
@@ -131,8 +130,8 @@
         rel="noopener"
         target="_blank"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         aria-label="copy"
         :title="$t('Copy this page URL')"
@@ -152,8 +151,8 @@
         rel="noopener"
         target="_blank"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         :aria-label="$t('Share newsletter')"
         :title="$t('Share newsletter')"
@@ -173,8 +172,8 @@
         rel="noopener"
         target="_blank"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         :aria-label="$t('Share QR Code')"
         :title="$t('Share QR Code')"
@@ -195,8 +194,8 @@
         target="_blank"
         :href="whatsappURL"
         :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-whatsapp share-btn mb-2',
-          verticalDisplay ? '' : 'me-2 ms-2',
+          bigRound ? 'btn btn-big-round' : 'btn btn-whatsapp share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
         ]"
         aria-label="Whatsapp"
         title="Whatsapp"
@@ -348,26 +347,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss">
-.share-button-page {
-  .saooti-Whatsapp{
-    width: 25px;
-    height: 25px;
-  }
-  @media (max-width: 960px) {
-    .flex-column {
-      flex-direction: row !important;
-    }
-    .btn {
-      margin-right: 0.5rem;
-    }
-  }
-  @media (max-width: 450px) {
-    .flex-column {
-      flex-direction: row !important;
-      flex-wrap: wrap;
-    }
-  }
-}
-</style>

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

@@ -131,7 +131,6 @@ export default defineComponent({
   data() {
     return {
       emission: undefined as Emission|undefined,
-      error: false as boolean,
       rss: '' as string,
     };
   },
@@ -143,12 +142,7 @@ export default defineComponent({
 
   methods: {
     async getEmissionDetails(): Promise<void> {
-      try {
-        const data = await octopusApi.fetchEmission(this.emissionId);
-        this.emission = data;
-      } catch {
-        this.error = true;
-      }
+      this.emission = await octopusApi.fetchEmission(this.emissionId);
     },
     getRSS(): void {
       if (!this.$props.emissionId || this.$props.emissionId <= 0) return;

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

@@ -18,7 +18,7 @@
             frameborder="0"
             :width="iFrameWidth"
             :height="iFrameHeight"
-            class="maxIframe"
+            class="max-iframe"
           />
           <div class="d-flex flex-column">
             <button
@@ -40,23 +40,12 @@
             v-model:color="color"
             v-model:theme="theme"
           />
-          <div
+          <ClassicCheckbox
             v-if="isPodcastNotVisible || playlist"
-            class="d-flex align-items-center flex-wrap"
-          >
-            <div>
-              <input
-                id="isVisibleCheckbox"
-                v-model="isVisible"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label me-2"
-                for="isVisibleCheckbox"
-              >{{ titleStillAvailable }}</label>
-            </div>
-          </div>
+            v-model:textInit="isVisible"
+            id-checkbox="is-visible-checkbox"
+            :label="titleStillAvailable"
+          />
         </div>
         <PlayerParameters
           v-if="isPlayerParameter"
@@ -99,12 +88,14 @@ const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/Sha
 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
+    SharePlayerTypes,
+    ClassicCheckbox
   },
 
   props: {
@@ -388,7 +379,7 @@ export default defineComponent({
     box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
   }
 }
-.maxIframe {
+.max-iframe {
   max-width: 300px;
 }
 </style>

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

@@ -1,9 +1,7 @@
 <template>
-  <div class="d-flex justify-content-around mt-3 flex-grow w-100">
-    <div class="d-flex flex-column align-items-center flex-shrink me-3">
-      <div class="fw-600">
-        {{ $t('Choose color') }}
-      </div>
+  <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 input-no-outline"
@@ -14,9 +12,7 @@
       />
     </div>
     <div class="d-flex flex-column align-items-center">
-      <div class="fw-600">
-        {{ $t('Choose theme') }}
-      </div>
+      <div>{{ $t('Choose theme') }}</div>
       <VSwatches
         v-model="internTheme"
         class="c-hand input-no-outline"

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

@@ -2,13 +2,12 @@
   <div class="d-flex flex-column">
     <label
       for="iframe-select"
-      class="d-inline"
       aria-label="select miniplayer"
     />
     <select
       id="iframe-select"
       :value="iFrameModel"
-      class="frame-select input-no-outline"
+      class="input-no-outline"
       @change="$emit('update:iFrameModel',$event.target.value)"
     >
       <option value="default">

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="module-box flex-no-grow">
+  <div class="module-box flex-grow-0">
     <div class="d-flex align-items-center mb-3">
-      <h3 class="mb-0 share-button-title">
+      <h3 class="mb-0">
         {{ $t('Subscribe emission') }}
       </h3>
     </div>
@@ -197,5 +197,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss"></style>

package/src/components/form/ClassicCheckbox.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="form-check"
+    :class="isSwitch?'form-switch':''"
+  >
+    <input
+      :id="idCheckbox"
+      v-model="textValue"
+      type="checkbox"
+      class="form-check-input"
+      :disabled="isDisabled"
+      @click="emitClickAction"
+    >
+    <label
+      class="form-check-label"
+      :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}
+  },
+  emits: ['update:textInit', 'clickAction'],
+
+  data() {
+    return {
+      textValue: false as boolean,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		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" />
+    <h3 class="mt-2">
+      {{ loadingText }}
+    </h3>
+  </div>
+  <div
+    v-else-if="errorText"
+    class="text-center"
+  >
+    <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,61 @@
+<template>
+  <div class="d-flex flex-column">
+    <div
+      v-for="option in options"
+      :key="option.title"
+      class="form-check"
+    >
+      <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 },
+  },
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: undefined as string|undefined,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>

package/src/components/form/ClassicSearch.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="position-relative champs-searchPage static-height">
+    <input
+      :id="idSearch"
+      ref="search"
+      v-model="textValue"
+      type="text"
+      class="search-input w-100 p-2 input-no-outline"
+      :placeholder="label"
+      :autofocus="autofocus"
+    >
+    <label
+      :for="idSearch"
+      :aria-label="label"
+    />
+    <div
+      v-if="!textValue"
+      class="saooti-search-bounty search-icon-container"
+    />
+    <div
+      v-else
+      class="saooti-cross search-icon-container c-hand"
+      @click="textValue = ''"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicSearch',
+ props: {
+    idSearch: { default: '', type: String },
+    label: { default: '', type: String },
+    textInit: { default: '', type: String },
+    autofocus: { default: false, type: Boolean },
+  },
+
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: '' as string,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>
+<style lang="scss" scoped>
+.champs-searchPage input {
+  border: 2px solid #dee2e6;
+  border-radius: 10px;
+  margin: 0 !important;
+}
+.saooti-search-bounty,
+.saooti-cross {
+  font-size: 1rem;
+}
+.search-icon-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  margin: 1rem;
+}
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -4,7 +4,7 @@
     class="d-flex"
   >
     <div
-      class="d-flex align-items-center bg-error-message p-2 rounded mt-1 mb-1"
+      class="d-flex align-items-center bg-error-message p-2 rounded my-1"
     >
       <img
         src="/img/caution.png"
@@ -31,4 +31,7 @@ export default defineComponent({
 .bg-error-message {
   background-color: #ffd84a9c;
 }
+.alert-text{
+  color: darkred;
+}
 </style>