@saooti/octopus-sdk 30.0.6 → 30.0.10

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li
+  <div
     class="emission-player-container shadow-element"
   >
     <router-link
@@ -17,7 +17,7 @@
         {{ rubriqueName }}
       </div>
       <div
-        class="img-box no-border-round"
+        class="img-box rounded-0"
         :style="{
           'background-image':
             'url(\'' + emission.imageUrl + '?dummy=' + dummyParam + '\')',
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div class="d-flex flex-column p-2">
-        <div class="fw-bold text-uppercase text-ellipsis">
+        <div class="fw-bold text-uppercase text-truncate">
           {{ emission.name }}
         </div>
         <div
@@ -52,7 +52,7 @@
       :key="p.podcastId"
       class="border-top emission-item-border-color p-2 secondary-bg d-flex"
     >
-      <div class="d-flex justify-content-between flex-grow">
+      <div class="d-flex justify-content-between flex-grow-1">
         <router-link
           :to="{
             name: 'podcast',
@@ -61,7 +61,7 @@
           }"
           class="d-flex flex-column define-width text-dark"
         >
-          <div class="fw-bold text-ellipsis">
+          <div class="fw-bold text-truncate">
             {{ p.title }}
           </div>
           <div
@@ -117,7 +117,7 @@
         {{ $t('More episodes') }}
       </router-link>
     </div>
-  </li>
+  </div>
 </template>
 
 <script lang="ts">
@@ -238,6 +238,9 @@ export default defineComponent({
   height: min-content;
   border-radius: 0.8rem;
   overflow: hidden;
+  .emission-item-border-color {
+    border-color: #ddd;
+  }
   .emission-description {
     overflow: hidden;
     margin-top: 0.5em;
@@ -266,7 +269,5 @@ export default defineComponent({
     }
   }
 }
-.emission-item-border-color {
-  border-color: #ddd;
-}
+
 </style>

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

@@ -1,18 +1,14 @@
 <template>
   <div>
     <div
-      class="d-flex justify-content-center mb-3"
+      class="d-flex justify-content-center mb-3 text-secondary c-hand"
       @click="showFilters = !showFilters"
     >
-      <div class="text-secondary c-hand">
-        {{ $t('Advanced filters') }}
-      </div>
-      <div
-        class="text-secondary c-hand align-self-center large-font-size"
+      <div>{{ $t('Advanced filters') }}</div>
+      <div 
+        class="h3 saooti-arrow_down m-0"
         :class="{ 'arrow-transform': showFilters }"
-      >
-        <div class="saooti-arrow_down saooti-arrow_down-margin" />
-      </div>
+      />
     </div>
     <div
       v-show="showFilters"
@@ -23,8 +19,7 @@
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
-          v-if="isMonetizableFilter"
-          :is-education="isEducation"
+          v-if="isMonetizableFilter && !isEducation"
           :is-emission="isEmission"
           @updateMonetization="updateMonetization"
         />
@@ -43,20 +38,12 @@
             {{ $t('Emission with episode published :') }}
           </div>
           <div class="d-flex align-items-center">
-            <div class="flex-shrink">
-              <input
-                id="search-from-checkbox"
-                v-model="isFrom"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="search-from-checkbox"
-              >{{
-                $t('From the :')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="isFrom"
+              class="flex-shrink-0"
+              id-checkbox="search-from-checkbox"
+              :label="$t('From the :')"
+            />
             <DatePicker
               v-model="fromDate"
               class="ps-3 pe-3"
@@ -75,20 +62,12 @@
             </DatePicker>
           </div>
           <div class="d-flex align-items-center">
-            <div class="flex-shrink">
-              <input
-                id="search-to-checkbox"
-                v-model="isTo"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="search-to-checkbox"
-              >{{
-                $t('To the :')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="isTo"
+              class="flex-shrink-0"
+              id-checkbox="search-to-checkbox"
+              :label="$t('To the :')"
+            />
             <DatePicker
               v-model="toDate"
               class="ps-3"
@@ -111,89 +90,39 @@
           v-if="organisation && organisationRight && !isPodcastmaker"
           class="d-flex flex-column mt-3"
         >
-          <div class="flex-shrink">
-            <input
-              id="search-future-checkbox"
-              v-model="isNotVisible"
-              type="checkbox"
-              class="form-check-input"
-              :disabled="isCheckboxNotValidate && isNotValidate"
-            >
-            <label
-              class="form-check-label"
-              for="search-future-checkbox"
-            >{{
-              textNotVisible
-            }}</label>
-          </div>
+          <ClassicCheckbox
+            v-model:textInit="isNotVisible"
+            class="flex-shrink-0"
+            id-checkbox="search-future-checkbox"
+            :label="textNotVisible"
+            :is-disabled="isCheckboxNotValidate && isNotValidate"
+          />
         </div>
         <div
           v-if="isCheckboxNotValidate"
           class="d-flex flex-column mt-3"
         >
-          <div class="flex-shrink">
-            <input
-              id="search-not-validate-checkbox"
-              v-model="isNotValidate"
-              type="checkbox"
-              class="form-check-input"
-            >
-            <label
-              class="form-check-label"
-              for="search-not-validate-checkbox"
-            >{{ textNotValidate }}</label>
-          </div>
+          <ClassicCheckbox
+            v-model:textInit="isNotValidate"
+            class="flex-shrink-0"
+            id-checkbox="search-not-validate-checkbox"
+            :label="textNotValidate"
+          />
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2 padding-left-custom-radio">
+        <div class="primary-color mb-2">
           {{ $t('Sort') }}
         </div>
-        <div
-          v-if="isSearchBar"
-          class="form-check"
-        >
-          <input
-            id="radio_score"
-            v-model="sort"
-            class="form-check-input"
-            type="radio"
-            name="sortRadio"
-            value="SCORE"
-          >
-          <label
-            class="form-check-label"
-            for="radio_score"
-          >{{ $t('Sort score') }}</label>
-        </div>
-        <div class="form-check">
-          <input
-            id="radio_podcast"
-            v-model="sort"
-            class="form-check-input"
-            type="radio"
-            name="sortRadio"
-            :value="isEmission?'LAST_PODCAST_DESC':'DATE'"
-          >
-          <label
-            class="form-check-label"
-            for="radio_podcast"
-          >{{ $t('Sort last') }}</label>
-        </div>
-        <div class="form-check">
-          <input
-            id="radio_name"
-            v-model="sort"
-            class="form-check-input"
-            type="radio"
-            name="sortRadio"
-            value="NAME"
-          >
-          <label
-            class="form-check-label"
-            for="radio_name"
-          >{{ $t('Sort name') }}</label>
-        </div>
+        <ClassicRadio
+          v-model:textInit="sort"
+          id-select="sort-radio"
+          :options="isSearchBar? [{title:$t('Sort score'), value:'SCORE'},
+                                  {title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
+                                  {title:$t('Sort name'), value:'NAME'}]:
+            [{title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
+             {title:$t('Sort name'), value:'NAME'}]"
+        />
       </div>
     </div>
   </div>
@@ -204,6 +133,8 @@ import { state } from '../../../store/paramStore';
 import moment from 'moment';
 import CategoryFilter from './CategoryFilter.vue';
 import RubriqueFilter from './RubriqueFilter.vue';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import ClassicRadio from '../../form/ClassicRadio.vue';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { DatePicker } from 'v-calendar';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -213,7 +144,9 @@ export default defineComponent({
     MonetizableFilter,
     DatePicker,
     CategoryFilter,
-    RubriqueFilter
+    RubriqueFilter,
+    ClassicCheckbox,
+    ClassicRadio
   },
   props: {
     organisationId: { default: undefined, type: String},
@@ -237,10 +170,6 @@ export default defineComponent({
     return {
       isFrom: false as boolean,
       isTo: false as boolean,
-      lang: {
-        ok: this.$t('Validate') as string,
-        cancel: this.$t('Cancel') as string,
-      },
       fromDate: moment().subtract(10, 'days').toISOString() as string,
       toDate: moment().toISOString() as string,
       isNotVisible: false as boolean,
@@ -401,18 +330,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-
-.padding-left-custom-radio {
-  padding-left: 1.5rem;
-  @media (max-width: 720px) {
-    padding-left: 0;
-    margin-top: 1rem;
-  }
-}
-.large-font-size {
-  font-size: 1.3rem;
-}
-
 .advanced-search-container {
   background: #fff;
   border-radius: 0.8rem;
@@ -425,35 +342,22 @@ export default defineComponent({
     flex-wrap: wrap;
     justify-content: flex-start;
   }
-
   @media (max-width: 450px) {
     flex-direction: column;
-    .vdatetime {
-      padding: 0.5em 0 !important;
+    padding: 1rem;
+    .vdatetime, label {
+      padding: 0.5rem 0 !important;
       width: 100%;
       input {
         width: 100%;
       }
     }
-    padding: 1rem;
-
-    label.wrap {
-      width: 100%;
-      margin: 0.5em 0;
-      position: relative;
-    }
-  }
-
-  @media (min-width: 401px) {
-    label.wrap {
-      position: relative;
-      margin: 0;
-    }
   }
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    padding-right: 40px;
   }
 }
 </style>

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

@@ -1,17 +1,11 @@
 <template>
   <div class="d-flex mt-3 align-items-center">
-    <div class="flex-shrink me-2">
-      <input
-        id="search-category-checkbox"
-        v-model="isCategory"
-        type="checkbox"
-        class="form-check-input"
-      >
-      <label
-        class="form-check-label"
-        for="search-category-checkbox"
-      >{{ $t('By category') }}</label>
-    </div>
+    <ClassicCheckbox
+      v-model:textInit="isCategory"
+      class="flex-shrink-0 me-2"
+      id-checkbox="search-category-checkbox"
+      :label="$t('By category')"
+    />
     <CategoryChooser
       v-model:categorySelected="iabId"
       width="auto"
@@ -21,12 +15,14 @@
 </template>
 
 <script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import CategoryChooser from '../categories/CategoryChooser.vue';
 import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    CategoryChooser
+    CategoryChooser,
+    ClassicCheckbox
   },
   emits: ['updateCategory'],
   data() {

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

@@ -1,14 +1,13 @@
 <template>
   <div
-    v-if="!isEducation"
     class="d-flex align-items-center"
   >
     <div>{{ $t('Advertising') + ' :' }}</div>
-    <label class="wrap">
+    <label class="position-relative">
       <select
         ref="select"
         v-model="monetization"
-        class="basic-select ms-2 mb-0 border c-hand"
+        class="ms-2 mb-0 c-hand"
         @change="onChange"
       >
         <option
@@ -24,7 +23,7 @@
         <option value="YES">{{ $t('Authorized advertising') }}</option>
         <option value="NO">{{ $t('Prohibited advertising') }}</option>
       </select>
-      <div class="saooti-arrow_down octopus-arrow-down-2 classic-select" />
+      <div class="saooti-arrow_down octopus-arrow-down" />
     </label>
   </div>
 </template>
@@ -34,7 +33,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
     isEmission: { default: false, type:  Boolean},
-    isEducation: { default: false, type:  Boolean},
   },
   emits: ['updateMonetization'],
 

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

@@ -7,25 +7,15 @@
       <OrganisationChooser
         :defaultanswer="$t('No organisation filter')"
         :value="organisationId"
-        :all="true"
         @selected="onOrganisationSelected"
       />
-      <div
+      <ClassicCheckbox
         v-if="!!organisationId"
+        v-model:textInit="keepOrganisation"
         class="m-3"
-      >
-        <input
-          id="orgaCheck"
-          v-model="keepOrganisation"
-          type="checkbox"
-          class="form-check-input"
-          @click="onKeepOrganisation"
-        >
-        <label
-          class="form-check-label"
-          for="orgaCheck"
-        />
-      </div>
+        id-checkbox="organisation-checkbox"
+        @clickAction="onKeepOrganisation"
+      />
       <div
         v-if="showBubble"
         class="filter-speech-bubble"
@@ -37,36 +27,29 @@
         }}
       </div>
     </div>
-    <div class="d-flex align-items-center flex-grow">
-      <label
-        for="search"
-        class="d-inline"
-        :aria-label="$t('Search')"
-      />
-      <input
-        id="search"
-        ref="search"
-        class="filter-search-input input-no-outline"
-        :placeholder="searchText"
-        :value="searchPattern"
-        :readonly="notInitFocus"
-        @input="
-          event => $emit('updateSearchPattern', event.target.value)
-        "
-      >
-    </div>
+    <ClassicSearch
+      v-model:textInit="queryIntern"
+      class="d-flex align-items-center flex-grow-1"
+      :autofocus="true"
+      id-checkbox="productor-search-input"
+      :label="searchText"
+    />
   </div>
 </template>
 
 <script lang="ts">
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import { state } from '../../../store/paramStore';
 import { orgaFilter } from '../../mixins/organisationFilter';
 import { Organisation } from '@/store/class/general/organisation';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const OrganisationChooser = defineAsyncComponent(() => import('../organisation/OrganisationChooser.vue'));
+const ClassicCheckbox = defineAsyncComponent(() => import('../../form/ClassicCheckbox.vue'));
 export default defineComponent({
   components: {
     OrganisationChooser,
+    ClassicSearch,
+    ClassicCheckbox
   },
   mixins:[orgaFilter],
 
@@ -82,7 +65,7 @@ export default defineComponent({
       keepOrganisation: false as boolean,
       showBubble: false as boolean,
       imgUrl: '' as string,
-      notInitFocus: true as boolean
+      queryIntern: '' as string,
     };
   },
  
@@ -102,6 +85,9 @@ export default defineComponent({
     },
   },
   watch: {
+    queryIntern(): void {
+      this.$emit('updateSearchPattern', this.queryIntern);
+    },
     filterOrga(): void {
       if (this.filterOrga) {
         this.keepOrganisation = true;
@@ -117,12 +103,6 @@ export default defineComponent({
       this.keepOrganisation = true;
     }
   },
-  mounted() {
-    if (this.$refs.search) {
-      (this.$refs.search as HTMLElement).focus();
-      this.notInitFocus = false;
-    }
-  },
   methods: {
     onOrganisationSelected(organisation: Organisation): void {
       if (this.$route.query.productor) {

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

@@ -1,9 +1,9 @@
 <template>
   <div class="d-flex align-items-center">
-    <label class="wrap">
+    <label class="position-relative">
       <select
         v-model="rubriquageId"
-        class="basic-select ms-2 mb-0 border c-hand"
+        class="ms-2 mb-0 c-hand"
         @change="onRubriquageSelected"
       >
         <option
@@ -13,11 +13,11 @@
         >{{ rubriquage.title }}</option>
       </select>
       <div
-        class="saooti-arrow_down octopus-arrow-down-2 classic-select"
+        class="saooti-arrow_down octopus-arrow-down"
       />
     </label>
     <template v-if="rubriquageId">
-      <div class="ms-3 flex-shrink">
+      <div class="ms-3 flex-shrink-0">
         {{ $t('By rubric') }}
       </div>
       <RubriqueChooser
@@ -36,12 +36,10 @@
     </template>
     <button
       v-if="index"
-      class="btn btn-circle primary-color ms-1"
+      class="btn admin-button ms-1 saooti-bin"
       aria-label="delete"
       @click="deleteRubriquage"
-    >
-      <span class="saooti-bin" />
-    </button>
+    />
   </div>
 </template>
 

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

@@ -3,18 +3,12 @@
     v-if="organisationId && rubriquageData"
     class="d-flex mt-3 align-items-center"
   >
-    <div class="flex-shrink">
-      <input
-        id="search-rubriquage-checkbox"
-        v-model="isRubriquage"
-        type="checkbox"
-        class="form-check-input"
-      >
-      <label
-        class="form-check-label"
-        for="search-rubriquage-checkbox"
-      >{{ $t('By topic') }}</label>
-    </div>
+    <ClassicCheckbox
+      v-model:textInit="isRubriquage"
+      class="flex-shrink-0"
+      id-checkbox="search-rubriquage-checkbox"
+      :label="$t('By topic')"
+    />
     <div
       v-if="isRubriquage"
       class="d-flex flex-column mb-2"
@@ -44,6 +38,7 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import { Rubriquage } from '@/store/class/rubrique/rubriquage';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -51,6 +46,7 @@ const RubriqueChoice = defineAsyncComponent(() => import('./RubriqueChoice.vue')
 export default defineComponent({
   components: {
     RubriqueChoice,
+    ClassicCheckbox
   },
   props: {
     organisationId: { default: undefined, type: String},
@@ -65,7 +61,6 @@ export default defineComponent({
       rubriqueId: [] as Array<number>,
       arrayFilter: [] as Array<RubriquageFilter>,
       rubriquageData: [] as Array<Rubriquage>,
-      reset: false as boolean,
       saveOrganisation: "" as string,
       isInit: true as boolean,
       isInternChanged: false as boolean,

package/src/components/display/live/CountDown.vue

@@ -3,7 +3,6 @@
     <h3>{{ $t('This live will start') }}</h3>
     <h3
       v-if="countdownTimer"
-      ref="countdown"
     >
       {{
         $t('In days hours minutes seconds', {
@@ -44,6 +43,10 @@ export default defineComponent({
       this.timer();
     }, 1000);
   },
+  unmounted() {
+    clearInterval((this.countdownTimer as unknown as number));
+  },
+
   methods: {
     timer(): void {
       this.days = Math.floor(this.seconds / 24 / 60 / 60);
@@ -52,7 +55,6 @@ export default defineComponent({
       const minutesLeft = Math.floor(hoursLeft - this.hours * 3600);
       this.minutes = Math.floor(minutesLeft / 60);
       this.remainingSeconds = this.seconds % 60;
-      /* this.$refs.countdown.innerHTML = this.pad(days) + ":" + this.pad(hours) + ":" + this.pad(minutes) + ":" + this.pad(remainingSeconds); */
       if (0 === this.seconds) {
         clearInterval((this.countdownTimer as unknown as number));
         this.countdownTimer = undefined;

package/src/components/display/live/LiveHorizontalList.vue

@@ -16,7 +16,7 @@
     <button
       v-show="!allFetched"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus mt-3' : 'btn-more'"
       :disabled="inFetching"
       :aria-label="$t('See more')"
       @click="displayMore"