@saooti/octopus-sdk 30.0.6 → 30.0.10

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>

package/src/components/misc/Footer.vue

@@ -2,9 +2,9 @@
   <div class="bg-dark">
     <div
       id="footer"
-      class="d-flex p-3 secondary-bg border-top footer-display-phone"
+      class="d-flex-column p-3 secondary-bg border-top"
     >
-      <div class="d-flex flex-grow align-items-end flex-column">
+      <div class="d-flex flex-column flex-grow-1 align-items-end">
         <div class="d-flex flex-column">
           <router-link
             :to="{
@@ -13,7 +13,7 @@
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                        rubriquesId: rubriqueQueryParam },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Home') }}
           </router-link>
@@ -24,7 +24,7 @@
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                        rubriquesId: rubriqueQueryParam},
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Podcasts') }}
           </router-link>
@@ -34,7 +34,7 @@
               query: { productor: $store.state.filter.organisationId,
                        iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Emissions') }}
           </router-link>
@@ -44,7 +44,7 @@
               name: 'productors',
               query: { productor: $store.state.filter.organisationId },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Productors') }}
           </router-link>
@@ -53,23 +53,23 @@
               name: 'participants',
               query: { productor: $store.state.filter.organisationId },
             }"
-            class="linkHover"
+            class="link-hover"
           >
             {{ $t('Speakers') }}
           </router-link>
         </div>
       </div>
-      <hr class="divided-line show-phone">
+      <hr class="show-phone">
       <div
         v-if="!isPodcastmaker"
-        class="d-flex flex-grow align-items-center flex-column"
+        class="d-flex flex-grow-1 align-items-center flex-column"
       >
         <div class="d-flex flex-column">
           <div class="text-dark">
             &copy; Saooti 2019
           </div>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/contact"
           >
             {{
@@ -77,7 +77,7 @@
             }}
           </router-link>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/cgu"
           >
             {{
@@ -85,7 +85,7 @@
             }}
           </router-link>
           <router-link
-            class="linkHover"
+            class="link-hover"
             to="/main/pub/libraries"
           >
             {{
@@ -93,15 +93,15 @@
             }}
           </router-link>
           <a
-            class="linkHover c-hand"
+            class="link-hover c-hand"
             @click="changeLanguage"
           >{{
             $t('Change locale')
           }}</a>
         </div>
       </div>
-      <hr class="divided-line show-phone">
-      <div class="flex-grow">
+      <hr class="show-phone">
+      <div class="flex-grow-1">
         <a
           href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
           rel="noopener"
@@ -118,12 +118,12 @@
       </div>
       <div
         v-if="isPodcastmaker && isContactLink"
-        class="d-flex flex-grow align-items-center flex-column"
+        class="d-flex flex-column flex-grow-1 align-items-center"
       >
         <div class="d-flex flex-column">
           <a
             id="footer-contact"
-            class="linkHover"
+            class="link-hover"
             :href="isContactLink"
             rel="noopener"
             target="_blank"
@@ -201,33 +201,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#footer {
+#footer{
   font-size: 0.7rem;
-  a {
-    color: #666;
-  }
   .acpm_image {
     width: 70px;
     height: 70px;
   }
-}
-.border-round {
-  border-radius: 0 0 2rem 2rem;
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .footer-display-phone {
-    flex-direction: column;
+  a{
+    color: #666;
+  }
+  .border-round {
+    border-radius: 0 0 2rem 2rem;
+  }
+  /** PHONES*/
+  @media (max-width: 960px) {
     .align-items-center,
     .align-items-end {
       align-items: flex-start !important;
     }
   }
-  .container {
-    font-size: 0.6rem;
-    .pages {
-      margin-right: 3rem;
-    }
-  }
 }
 </style>