@saooti/octopus-sdk 39.4.9 → 39.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.4.9",
+  "version": "39.4.10",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/categories/CategoryChooser.vue

@@ -15,6 +15,7 @@
     :width="width"
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
+    :display-required="displayRequired"
     @on-search="onSearchCategory"
     @selected="onCategorySelected"
   />
@@ -50,6 +51,7 @@ export default defineComponent({
     label:{default: undefined, type: String },
     displayLabel: { default: false, type: Boolean },
     textDanger :{ default: undefined, type: String },
+    displayRequired: { default: false, type: Boolean },
   },
   emits: [
     "update:categorySelected",

package/src/components/display/filter/AdvancedSearch.vue

@@ -12,10 +12,10 @@
       v-show="showFilters"
       class="advanced-search-container"
     >
-      <div class="d-flex flex-column">
-        <div class="text-primary mb-2">
+      <fieldset class="d-flex flex-column flex-grow-3">
+        <legend class="text-primary mb-2">
           {{ $t("Filter") }}
-        </div>
+        </legend>
         <MonetizableFilter
           v-if="!isPodcastmaker && !platformEducation"
           :is-emission="isEmission"
@@ -63,7 +63,7 @@
           :label="$t('Show only episodes with video')"
           @update:text-init="updateOnlyVideo"
         />
-      </div>
+      </fieldset>
       <SearchOrder
         :is-emission="isEmission"
         :sort="sort"

package/src/components/display/filter/SearchOrder.vue

@@ -5,10 +5,11 @@
     :options="optionsArray"
     :radio-label="$t('Sort')"
     class-label="text-primary mb-2"
+    :type-tag="typeTag"
+    class="flex-grow-1"
     @update:text-init="$emit('update:sort', $event)"
   />
 </template>
-
 <script lang="ts">
 import ClassicRadioLabel from "../../form/ClassicRadioLabel.vue";
 import { defineComponent } from "vue";
@@ -19,6 +20,7 @@ export default defineComponent({
   props: {
     isEmission: { default: false, type: Boolean },
     sort: { default: "DATE", type: String },
+    typeTag: { default: "fieldset", type: String },
   },
 
   emits: ["update:sort"],

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="d-flex align-items-center flex-wrap">
+    <span class="flex-shrink-0">{{ $t("Show") }}</span>
+    <input
+      id="number-input"
+      v-model="internNumber"
+      type="number"
+      min="1"
+      max="50"
+      class="input-share-player text-center m-2"
+      :title="$t('Number of player podcasts')"
+    />
+    <span class="flex-shrink-0">{{ $t("Last podcasts") }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    episodesNumber: { default: 3, type: Number },
+  },
+  emits: [
+    "updateNumber",
+  ],
+
+  data() {
+    return {
+      internNumber: 3 as number
+    };
+  },
+  watch:{
+    internNumber(){
+      if (this.internNumber < 1) {
+        this.$emit("updateNumber", 1);
+      }else if(this.internNumber > 50){
+        this.$emit("updateNumber", 50);
+      }else{
+        this.$emit("updateNumber", this.internNumber);
+      }
+    }
+  },
+
+  created(){
+    this.internNumber = this.episodesNumber;
+  }
+
+});
+</script>
+
+<style lang="scss">
+.octopus-app {
+  .input-share-player {
+    border: 1px solid var(--octopus-border-default);
+    border-radius: 50px;
+    width: 60px;
+  }
+}
+</style>

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

@@ -1,98 +1,102 @@
 <template>
-  <div class="h4 mb-2 mt-3">
-    {{ $t("player parameters") }}
-  </div>
-  <template v-if="choseNumberEpisode">
-    <div
-      v-if="displayChoiceAllEpisodes"
-      class="d-flex align-items-center flex-wrap mt-1"
-    >
-      <input
-        id="radio-all-episodes"
-        v-model="episodeNumbers"
-        class="form-check-input"
-        type="radio"
-        name="episodeNumbers"
-        value="all"
+  <fieldset class="mt-3">
+    <legend class="h4 mb-2 mt-3">
+      {{ $t("player parameters") }}
+    </legend>
+    <template v-if="choseNumberEpisode">
+      <div v-if="displayChoiceAllEpisodes" role="radiogroup">
+        <div
+          class="d-flex align-items-center flex-wrap mt-1"
+        >
+          <input
+            id="radio-all-episodes"
+            v-model="episodeChoiceDisplay"
+            class="form-check-input"
+            type="radio"
+            name="episodeNumbers"
+            value="all"
+          />
+          <label for="radio-all-episodes" class="flex-shrink-0">{{
+            $t("Show every episode")
+          }}</label>
+        </div>
+        <div
+          class="d-flex align-items-center flex-wrap"
+        >
+          <input
+            v-if="displayChoiceAllEpisodes"
+            v-model="episodeChoiceDisplay"
+            class="form-check-input"
+            type="radio"
+            name="episodeNumbers"
+            value="number"
+            :title="$t('Show') + ' ' + $t('Last podcasts')"
+          />
+          <ChooseEpisodesNumber :episodes-number="episodesNumber" @update-number="$emit('update:episodesNumber', $event)"/>
+        </div>
+      </div>
+      <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="$emit('update:episodesNumber', $event)"/>
+      <ClassicCheckbox
+        :text-init="proceedReading"
+        id-checkbox="proceed-reading-checkbox"
+        :label="$t('Proceed reading')"
+        @update:text-init="$emit('update:proceedReading', $event)"
       />
-      <label for="radio-all-episodes" class="flex-shrink-0">{{
-        $t("Show every episode")
-      }}</label>
-    </div>
-    <div
-      class="d-flex align-items-center flex-wrap"
-      :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
-    >
-      <input
-        v-if="displayChoiceAllEpisodes"
-        v-model="episodeNumbers"
-        class="form-check-input"
-        type="radio"
-        name="episodeNumbers"
-        value="number"
-        :title="$t('Show') + ' ' + $t('Last podcasts')"
-      />
-      <span class="flex-shrink-0">{{ $t("Show") }}</span>
-      <input
-        id="number-input"
-        v-model="iFrameNumber"
-        type="number"
-        min="1"
-        max="50"
-        class="input-share-player text-center m-2"
-        :title="$t('Number of player podcasts')"
-      />
-      <span class="flex-shrink-0">{{ $t("Last podcasts") }}</span>
-    </div>
+    </template>
+    <ClassicCheckbox
+      v-if="displayIsVisible"
+      :text-init="isVisible"
+      id-checkbox="is-visible-checkbox"
+      :label="titleStillAvailable"
+      @update:text-init="$emit('update:isVisible', $event)"
+    />
+    <ClassicCheckbox
+      v-if="displayArticleParam"
+      :text-init="displayArticle"
+      id-checkbox="display-article-checkbox"
+      :label="$t('Display associated article')"
+      @update:text-init="$emit('update:displayArticle', $event)"
+    />
+    <ClassicCheckbox
+      v-if="displayTranscriptParam"
+      :text-init="displayTranscript"
+      id-checkbox="display-transcript-checkbox"
+      :label="$t('If the transcript is available, show it')"
+      @update:text-init="$emit('update:displayTranscript', $event)"
+    />
+    <ClassicCheckbox
+      v-if="displayWaveParam"
+      :text-init="displayWave"
+      id-checkbox="display-wave-checkbox"
+      :label="$t('Show animated wave')"
+      @update:text-init="$emit('update:displayWave', $event)"
+    />
     <ClassicCheckbox
-      :text-init="proceedReading"
-      id-checkbox="proceed-reading-checkbox"
-      :label="$t('Proceed reading')"
-      @update:text-init="$emit('update:proceedReading', $event)"
+      :text-init="playerAutoPlay"
+      id-checkbox="player-autoplay-checkbox"
+      :label="$t('Trigger automatic reading if this is possible')"
+      @update:text-init="$emit('update:playerAutoPlay', $event)"
+    />
+    <PlayerCommonParameters
+      v-if="displayInsertCode"
+      :insert-code="insertCode"
+      @update:insert-code="$emit('update:insertCode', $event)"
     />
-  </template>
-  <ClassicCheckbox
-    v-if="displayIsVisible"
-    :text-init="isVisible"
-    id-checkbox="is-visible-checkbox"
-    :label="titleStillAvailable"
-    @update:text-init="$emit('update:isVisible', $event)"
-  />
-  <ClassicCheckbox
-    v-if="displayArticleParam"
-    :text-init="displayArticle"
-    id-checkbox="display-article-checkbox"
-    :label="$t('Display associated article')"
-    @update:text-init="$emit('update:displayArticle', $event)"
-  />
-  <ClassicCheckbox
-    v-if="displayTranscriptParam"
-    :text-init="displayTranscript"
-    id-checkbox="display-transcript-checkbox"
-    :label="$t('If the transcript is available, show it')"
-    @update:text-init="$emit('update:displayTranscript', $event)"
-  />
-  <ClassicCheckbox
-    v-if="displayWaveParam"
-    :text-init="displayWave"
-    id-checkbox="display-wave-checkbox"
-    :label="$t('Show animated wave')"
-    @update:text-init="$emit('update:displayWave', $event)"
-  />
-  <ClassicCheckbox
-    :text-init="playerAutoPlay"
-    id-checkbox="player-autoplay-checkbox"
-    :label="$t('Trigger automatic reading if this is possible')"
-    @update:text-init="$emit('update:playerAutoPlay', $event)"
-  />
+  </fieldset>
 </template>
 
 <script lang="ts">
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ChooseEpisodesNumber = defineAsyncComponent(() => import("./ChooseEpisodesNumber.vue"));
+const PlayerCommonParameters = defineAsyncComponent(
+  () => import("./PlayerCommonParameters.vue"),
+);
 export default defineComponent({
   components: {
     ClassicCheckbox,
+    ChooseEpisodesNumber,
+    PlayerCommonParameters
   },
   props: {
     isVisible: { default: false, type: Boolean },
@@ -102,28 +106,31 @@ export default defineComponent({
     displayTranscriptParam: { default: false, type: Boolean },
     displayArticleParam: { default: false, type: Boolean },
     displayIsVisible: { default: false, type: Boolean },
+    displayInsertCode: { default: false, type: Boolean },
     proceedReading: { default: true, type: Boolean },
     displayArticle: { default: true, type: Boolean },
     displayTranscript: { default: true, type: Boolean },
     displayWave: { default: true, type: Boolean },
     playerAutoPlay: { default: false, type: Boolean },
     isPodcastNotVisible: { default: false, type: Boolean },
+    episodesNumber: { default: 3, type: Number },
+    insertCode: { default: false, type: Boolean },
   },
   emits: [
-    "episodeNumbers",
+    "episodeChoiceDisplay",
     "update:proceedReading",
     "update:isVisible",
-    "iFrameNumber",
+    "update:episodesNumber",
     "update:displayArticle",
     "update:displayTranscript",
     "update:displayWave",
     "update:playerAutoPlay",
+    "update:insertCode"
   ],
 
   data() {
     return {
-      episodeNumbers: "number" as string,
-      iFrameNumberPriv: "3" as string,
+      episodeChoiceDisplay: "number" as string,
     };
   },
   computed: {
@@ -132,35 +139,11 @@ export default defineComponent({
         ? this.$t("Podcast still available")
         : this.$t("Podcasts still available");
     },
-    iFrameNumber: {
-      get(): string {
-        return this.iFrameNumberPriv;
-      },
-      set(value: string) {
-        const val = parseInt(value, 10);
-        if (!isNaN(val) && val >= 1 && val <= 50) {
-          this.iFrameNumberPriv = value;
-        }
-      },
-    },
   },
   watch: {
-    episodeNumbers(): void {
-      this.$emit("episodeNumbers", this.episodeNumbers);
-    },
-    iFrameNumberPriv(): void {
-      this.$emit("iFrameNumber", this.iFrameNumberPriv);
+    episodeChoiceDisplay(): void {
+      this.$emit("episodeChoiceDisplay", this.episodeChoiceDisplay);
     },
   },
 });
-</script>
-
-<style lang="scss">
-.octopus-app {
-  .input-share-player {
-    border: 1px solid var(--octopus-border-default);
-    border-radius: 50px;
-    width: 60px;
-  }
-}
-</style>
+</script>

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

@@ -47,6 +47,8 @@
             v-model:proceed-reading="proceedReading"
             v-model:is-visible="isVisible"
             v-model:player-auto-play="playerAutoPlay"
+            v-model:episodes-number="episodesNumber"
+            v-model:insert-code="insertCode"
             :display-is-visible="displayIsVisible"
             :is-podcast-not-visible="isPodcastNotVisible"
             :chose-number-episode="choseNumberEpisodes"
@@ -54,13 +56,10 @@
             :display-transcript-param="displayTranscriptParam"
             :display-article-param="displayArticleParam"
             :display-wave-param="displayWaveParam"
-            @i-frame-number="iFrameNumber = $event"
-            @episode-numbers="episodeNumbers = $event"
-          />
-          <PlayerCommonParameters
-            v-if="displayInsertCode"
-            v-model:insert-code="insertCode"
+            :display-insert-code="displayInsertCode"
+            @episode-choice-display="episodeChoiceDisplay = $event"
           />
+
           <ShareModalPlayer
             v-if="isShareModal"
             :embed-link="iFrame"
@@ -102,9 +101,6 @@ const ShareModalPlayer = defineAsyncComponent(
 const PlayerParameters = defineAsyncComponent(
   () => import("./PlayerParameters.vue"),
 );
-const PlayerCommonParameters = defineAsyncComponent(
-  () => import("./PlayerCommonParameters.vue"),
-);
 const SharePlayerTypes = defineAsyncComponent(
   () => import("./SharePlayerTypes.vue"),
 );
@@ -117,7 +113,6 @@ export default defineComponent({
     SharePlayerColors,
     PlayerParameters,
     SharePlayerTypes,
-    PlayerCommonParameters,
   },
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
@@ -136,8 +131,8 @@ export default defineComponent({
       color: "#40a372" as string,
       theme: "#000000" as string,
       proceedReading: true as boolean,
-      episodeNumbers: "number" as string,
-      iFrameNumber: "3" as string,
+      episodeChoiceDisplay: "number" as string,
+      episodesNumber: 3 as number,
       isVisible: false as boolean,
       displayArticle: true as boolean,
       displayTranscript: true as boolean,
@@ -263,9 +258,9 @@ export default defineComponent({
       }
       let url = [""];
       const iFrameNumber =
-        this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
+        this.displayChoiceAllEpisodes && "all" === this.episodeChoiceDisplay
           ? "/0"
-          : "/" + this.iFrameNumber;
+          : "/" + this.episodesNumber;
       url.push(`${this.miniplayerUrl}miniplayer/`);
       if (!this.podcast && !this.playlist && this.emission) {
         url = this.constructEmissionUrl(url);
@@ -334,9 +329,9 @@ export default defineComponent({
       }
     },
     getIframeNumber(): string {
-      return this.displayChoiceAllEpisodes && "all" === this.episodeNumbers
+      return this.displayChoiceAllEpisodes && "all" === this.episodeChoiceDisplay
         ? "/0"
-        : "/" + this.iFrameNumber;
+        : "/" + this.episodesNumber;
     },
     constructEmissionUrl(url: Array<string>) {
       if (!this.emission) {

package/src/components/form/ClassicInputText.vue

@@ -6,12 +6,10 @@
     <div class="d-flex align-items-center">
       <component
         :is="isWysiwyg? 'div': 'label'"
-        v-if="!isWysiwyg"
-        class="form-label"
+        :class="[classLabel, displayLabel ? '' : 'd-none']"
         :for="isWysiwyg ? '': inputId"
-        :class="displayLabel ? '' : 'd-none'"
         >{{ label }}
-        <AsteriskIcon v-if="displayRequired" size="15" class="ms-1 mb-1" :title="$t('Mandatory input')"/>
+        <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/>
       </component>
       <template v-if="popover">
         <button
@@ -154,6 +152,7 @@ export default defineComponent({
     forceReload: { default: false, type: Boolean },
     typeInput: { default: "text", type: String },
     displayRequired: { default: false, type: Boolean },
+    classLabel: { default: "form-label", type: String },
   },
   emits: ["update:textInit", "update:errorVariable"],
   data() {

package/src/components/form/ClassicMultiselect.vue

@@ -9,7 +9,9 @@
   >
     <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
       label
-    }}</label>
+    }}
+    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/>
+  </label>
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -74,12 +76,14 @@
 </template>
 
 <script lang="ts">
+import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
 export default {
   components: {
     vSelect,
     ChevronDownIcon,
+    AsteriskIcon
   },
   props: {
     id: { default: "", type: String },
@@ -100,6 +104,7 @@ export default {
     maxOptions: { default: null, type: Number },
     allowEmpty: { default: true, type: Boolean },
     textDanger :{ default: undefined, type: String },
+    displayRequired: { default: false, type: Boolean },
   },
 
   emits: ["onSearch", "selected", "onClose"],

package/src/components/form/ClassicRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" :class="isColumn ? 'flex-column' : ''">
+  <div role="radiogroup" class="d-flex" :class="isColumn ? 'flex-column' : ''">
     <div
       v-for="option in options"
       :key="option.title"

package/src/components/form/ClassicRadioLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="d-flex flex-column">
-    <div v-if="radioLabel" :class="classLabel">{{ radioLabel }}</div>
+  <component :is="typeTag" class="d-flex flex-column">
+    <component :is="'fieldset'===typeTag ? 'legend': 'div'" v-if="radioLabel" :class="classLabel">{{ radioLabel }}</component>
     <ClassicRadio
       :id-radio="idRadio"
       :is-disabled="isDisabled"
@@ -9,7 +9,7 @@
       :is-column="isColumn"
       @update:text-init="$emit('update:textInit', $event)"
     />
-  </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -32,6 +32,7 @@ export default defineComponent({
     isColumn: { default: true, type: Boolean },
     radioLabel: { default: undefined, type: String },
     classLabel: { default: "form-label", type: String },
+    typeTag: { default: "div", type: String },
   },
   emits: ["update:textInit"]
 });

package/src/components/form/ClassicSelect.vue

@@ -3,7 +3,7 @@
     <label v-show="displayLabel" :for="idSelect" :class="classLabel">{{
       label
     }}
-    <AsteriskIcon v-if="displayRequired" size="15" class="ms-1 mb-1" :title="$t('Mandatory input')"/></label>
+    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="$t('Mandatory input')"/></label>
     <select
       :id="idSelect"
       :value="textInit"
@@ -12,8 +12,8 @@
       :class="transparent ? 'transparent' : ''"
       :style="getFontFamily"
       :aria-label="label"
-      @change="$emit('update:textInit', $event.target.value)"
       :required="displayRequired"
+      @change="$emit('update:textInit', $event.target.value)"
     >
       <option v-if="placeholder" value="" disabled selected>{{ placeholder }}</option>
       <option

package/src/components/misc/ClassicPopover.vue

@@ -173,7 +173,6 @@ export default defineComponent({
       }
       this.show = true;
       let parentLeft = 0;
-      let parentRight = 0;
       let parentTop = 0;
       let parentScrollTop = 0;
       let parentBottom = 0;
@@ -190,7 +189,6 @@ export default defineComponent({
         }
         const modalBodyRect = modalBody.getBoundingClientRect();
         parentLeft = modalBodyRect.left;
-        parentRight = modalBodyRect.right;
         parentTop = modalBodyRect.top;
         parentScrollTop = modalBody.scrollTop;
         parentBottom=modalBodyRect.bottom;

package/src/style/_utilities.scss

@@ -179,6 +179,8 @@ $utilities: map.merge(
       values: (
         grow-0: 0,
         grow-1: 1,
+        grow-2: 2,
+        grow-3: 3,
       )
     ),
     "flex-shrink": (

package/src/style/form.scss

@@ -1,6 +1,11 @@
 
 
 .octopus-app{
+	fieldset{
+		border-color: var(--octopus-secondary-lighter);
+		border-style: solid;
+		padding: 1rem;
+	}
 	.octopus-form-item{
 		min-height: 1.44rem;
     padding: 0.4rem 0;

package/src/style/share.scss

@@ -234,7 +234,6 @@
     border-radius:var(--octopus-border-radius);
     display: flex;
     width: 100%;
-    padding: 1rem 2rem;
     margin-bottom: 1rem;
     justify-content: space-around;