@saooti/octopus-sdk 30.0.4 → 30.0.8

package/src/components/display/podcasts/PodcastFilterList.vue

@@ -9,29 +9,19 @@
     <div class="d-flex align-items-center flex-wrap">
       <div
         v-if="categoryFilter"
-        class="d-flex align-items-center flex-grow categories-filter"
+        class="d-flex align-items-center flex-grow-1 categories-filter"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
           @selected="onCategorySelected"
         />
       </div>
-      <div class="d-flex position-relative small-flex-grow">
-        <label
-          for="search"
-          class="d-inline"
-          :aria-label="$t('Search')"
-        />
-        <input
-          id="search"
-          v-model="searchPattern"
-          :placeholder="$t('Search')"
-          class="filter-search-input input-no-outline flex-grow"
-        >
-        <div
-          class="saooti-search-bounty filter-list-search-icon search-icon-container"
-        />
-      </div>
+      <ClassicSearch
+        v-model:textInit="searchPattern"
+        class="small-flex-grow"
+        id-checkbox="podcast-filter-search"
+        :label="$t('Search')"
+      />
     </div>
     <PodcastList
       :first="first"
@@ -49,16 +39,17 @@
 </template>
 
 <script lang="ts">
-
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import PodcastList from './PodcastList.vue';
-import { Category } from '@/store/class/category';
+import { Category } from '@/store/class/general/category';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { Podcast } from '@/store/class/podcast';
+import { Podcast } from '@/store/class/general/podcast';
 const CategoryChooser = defineAsyncComponent(() => import('../categories/CategoryChooser.vue'));
 export default defineComponent({
   components: {
     CategoryChooser,
     PodcastList,
+    ClassicSearch
   },
   props: {
     participantId: { default: undefined, type: Number},

package/src/components/display/podcasts/PodcastImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="podcast"
-    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink float-start"
+    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
     :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
   >
     <template v-if="isPodcastmaker">
@@ -96,8 +96,8 @@
 import { mapState } from 'vuex';
 import { state } from '../../../store/paramStore';
 import {StoreState} from '@/store/typeAppStore';
-import { Podcast } from '@/store/class/podcast';
-import { Conference } from '@/store/class/conference';
+import { Podcast } from '@/store/class/general/podcast';
+import { Conference } from '@/store/class/conference/conference';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastImage',

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -62,7 +62,7 @@
       <PodcastItem
         v-for="p in podcasts"
         :key="p.podcastId"
-        class="flex-shrink item-phone-margin"
+        class="flex-shrink-0 item-phone-margin"
         :podcast="p"
         :class="[alignLeft ? 'me-3' : '']"
       />
@@ -88,8 +88,8 @@ import PodcastItem from './PodcastItem.vue';
 
 const PHONE_WIDTH = 960;
 
-import { Podcast } from '@/store/class/podcast';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { Podcast } from '@/store/class/general/podcast';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 import { RouteLocationRaw } from 'vue-router';
 export default defineComponent({

package/src/components/display/podcasts/PodcastItem.vue

@@ -54,7 +54,7 @@
           params: { podcastId: podcast.podcastId },
           query: { productor: $store.state.filter.organisationId },
         }"
-        class="text-dark d-flex flex-column flex-grow"
+        class="text-dark d-flex flex-column flex-grow-1"
       >
         <div class="title-podcast-item">
           {{ title }}
@@ -89,8 +89,8 @@ import moment from 'moment';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
 
-import { Podcast } from '@/store/class/podcast';
-import { Category } from '@/store/class/category';
+import { Podcast } from '@/store/class/general/podcast';
+import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastItem',

package/src/components/display/podcasts/PodcastList.vue

@@ -49,9 +49,9 @@ import octopusApi from '@saooti/octopus-api';
 import PodcastItem from './PodcastItem.vue';
 import { state } from '../../../store/paramStore';
 
-import { Podcast } from '@/store/class/podcast';
+import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
-import { FetchParam } from '@/store/class/fetchParam';
+import { FetchParam } from '@/store/class/general/fetchParam';
 export default defineComponent({
   name: 'PodcastList',
 

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -160,8 +160,8 @@ import moment from 'moment';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
 import { displayMethods } from '../../mixins/functions';
-import { Podcast } from '@/store/class/podcast';
-import { Conference } from '@/store/class/conference';
+import { Podcast } from '@/store/class/general/podcast';
+import { Conference } from '@/store/class/conference/conference';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ShareButtons = defineAsyncComponent(() => import('../sharing/ShareButtons.vue'));

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -70,7 +70,7 @@
 import { selenium } from '../../mixins/functions';
 //@ts-ignore
 import VueMultiselect from 'vue-multiselect';
-import { Rubrique } from '@/store/class/rubrique';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
 const getDefaultRubrique = (defaultName: string) => {
   if ('' === defaultName){
     return undefined;

package/src/components/display/rubriques/RubriqueList.vue

@@ -6,7 +6,7 @@
     >
       <select
         v-model="rubriquage"
-        class="basic-select border c-hand mb-0"
+        class="c-hand mb-0"
         @change="onRubriquageSelected"
       >
         <option
@@ -54,9 +54,9 @@
 </template>
 
 <script lang="ts">
-import { Rubrique } from '@/store/class/rubrique';
-import { Rubriquage } from '@/store/class/rubriquage';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'RubriqueList',

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

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="!playlist"
     id="accordionParameters"
     class="accordion player-parameters mt-3"
   >
@@ -28,13 +27,11 @@
       >
         <div class="accordion-body">
           <div
-            v-if="
-              !podcast || isEmission || isLargeEmission || isLargeSuggestion
-            "
-            class="d-flex flex-column flex-grow"
+            v-if="choseNumberEpisode"
+            class="d-flex flex-column flex-grow-1"
           >
             <div
-              v-if="!podcast || isEmission || isLargeEmission"
+              v-if="displayChoiceAllEpisodes"
               class="d-flex align-items-center w-100 flex-wrap mt-1"
             >
               <input
@@ -44,21 +41,21 @@
                 name="episodeNumbers"
                 value="all"
               >
-              <span class="flex-shrink">{{ $t('Show every episode') }}</span>
+              <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
-              :class="!podcast || isEmission || isLargeEmission ? '' : 'mt-3'"
+              :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
             >
               <input
-                v-if="!podcast || isEmission || isLargeEmission"
+                v-if="displayChoiceAllEpisodes"
                 v-model="episodeNumbers"
                 class="form-check-input"
                 type="radio"
                 name="episodeNumbers"
                 value="number"
               >
-              <span class="flex-shrink">{{ $t('Show') }}</span>
+              <span class="flex-shrink-0">{{ $t('Show') }}</span>
               <input
                 id="number-input"
                 v-model="iFrameNumber"
@@ -72,76 +69,29 @@
                 class="d-inline"
                 :aria-label="$t('Number of player podcasts')"
               />
-              <span class="flex-shrink">{{ $t('Last podcasts') }}</span>
-            </div>
-            <div>
-              <input
-                id="proceedCheck"
-                v-model="proceedReading"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="proceedCheck"
-              >{{
-                $t('Proceed reading')
-              }}</label>
-            </div>
-            <div>
-              <input
-                id="isVisibleCheckbox"
-                v-model="isVisibleTemp"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label me-2"
-                for="isVisibleCheckbox"
-              >{{ $t('Podcasts still available') }}</label>
+              <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
             </div>
+            <ClassicCheckbox
+              v-model:textInit="proceedReading"
+              id-checkbox="proceed-reading-checkbox"
+              :label="$t('Proceed reading')"
+            />
+            <ClassicCheckbox
+              v-model:textInit="isVisibleTemp"
+              id-checkbox="is-visible-checkbox"
+              :label="$t('Podcasts still available')"
+            />
           </div>
           <div
             v-else
-            class="d-flex flex-column flex-grow"
+            class="d-flex flex-column flex-grow-1"
           >
-            <div>
-              <input
-                id="proceedCheck"
-                v-model="displayArticle"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="proceedCheck"
-              >{{
-                $t('Display associated article')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="displayArticle"
+              id-checkbox="display-article-checkbox"
+              :label="$t('Display associated article')"
+            />
           </div>
-          <!-- <div class="d-flex align-items-center flex-wrap" v-if="podcast && iFrameModel !== 'emission'">
-              <div>  
-                <input type="checkbox" class="form-check-input" id="startTime" v-model="startTime">  
-                <label class="form-check-label me-2" for="startTime">{{$t('Start at')}}</label>  
-              </div>
-                <input 
-                ref="minutesRef"
-                type="number"
-                :value="minutes" 
-                min="0"
-                class="input-share-player input-no-outline" 
-                @change="onDurationChange"/>
-                <div class="me-1 ms-1">:</div>
-              <input 
-                ref="secondesRef"
-                type="number"
-                :value="secondes" 
-                min="0"
-                max="59"
-                class="input-share-player input-no-outline" 
-                @change="onDurationChange"/>
-            </div> -->
         </div>
       </div>
     </div>
@@ -149,26 +99,24 @@
 </template>
 
 <script lang="ts">
-import { Playlist } from '@/store/class/playlist';
-import { Podcast } from '@/store/class/podcast';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
+  components:{
+    ClassicCheckbox,
+  },
   props: {
-    podcast: { default: undefined, type: Object as ()=> Podcast},
-    playlist: { default: undefined, type: Object as ()=> Playlist},
-    iFrameModel: { default: undefined, type: String},
     isVisible: { default: false, type: Boolean},
+    choseNumberEpisode: {default: false, type: Boolean},
+    displayChoiceAllEpisodes: {default: false, type: Boolean}
   },
-  emits: ['startTime', 'episodeNumbers', 'proceedReading', 'isVisible', 'iFrameNumber', 'displayArticle'],
+  emits: ['episodeNumbers', 'proceedReading', 'isVisible', 'iFrameNumber', 'displayArticle'],
 
   data() {
     return {
       proceedReading: true as boolean,
       episodeNumbers: 'number' as string,
       iFrameNumberPriv: '3' as string,
-      minutes: 0 as number,
-      secondes: 0 as number,
-      startTime: true as boolean,
       isVisibleTemp: this.isVisible as boolean,
       displayArticle: true as boolean,
     };
@@ -185,15 +133,6 @@ export default defineComponent({
         }
       },
     },
-    isEmission(): boolean {
-      return 'emission' === this.iFrameModel;
-    },
-    isLargeEmission(): boolean {
-      return 'largeEmission' === this.iFrameModel;
-    },
-    isLargeSuggestion(): boolean {
-      return 'largeSuggestion' === this.iFrameModel;
-    },
   },
   watch: {
     episodeNumbers(): void {
@@ -215,17 +154,6 @@ export default defineComponent({
       this.$emit('displayArticle', this.displayArticle);
     }
   },
-  methods: {
-    /* onDurationChange(): void {
-      if (this.startTime) {
-        const minutes = parseInt((this.$refs.minutesRef as any).value, 10);
-        const secondes = parseInt((this.$refs.secondesRef as any).value, 10);
-        this.$emit('startTime', minutes * 60 + secondes);
-      } else {
-        this.$emit('startTime', 0);
-      }
-    }, */
-  },
 })
 </script>
 

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

@@ -14,13 +14,13 @@
         v-if="authenticated"
         id="popover-share-help"
         role="button"
+        tabindex="-1"
         class="saooti-help ml-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') }}
@@ -247,8 +247,8 @@
 </template>
 
 <script lang="ts">
-import { Emission } from '@/store/class/emission';
-import { Podcast } from '@/store/class/podcast';
+import { Emission } from '@/store/class/general/emission';
+import { Podcast } from '@/store/class/general/podcast';
 import { state } from '../../../store/paramStore';
 import Snackbar from '../../misc/Snackbar.vue';
 import { displayMethods } from '../../mixins/functions';

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

@@ -113,7 +113,7 @@
 import octopusApi from '@saooti/octopus-api';
 import Snackbar from '../../misc/Snackbar.vue';
 import { displayMethods } from '../../mixins/functions';
-import { Emission } from '@/store/class/emission';
+import { Emission } from '@/store/class/general/emission';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 import SnackbarVue from '../../misc/Snackbar.vue';

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

@@ -40,36 +40,23 @@
             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"
-          :podcast="podcast"
-          :playlist="playlist"
-          :i-frame-model="iFrameModel"
           :is-visible="isVisible"
+          :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
+          :display-choice-all-episodes="displayChoiceAllEpisodes"
           @displayArticle="updateDisplayArticle"
           @episodeNumbers="updateEpisodeNumber"
           @proceedReading="updateProceedReading"
           @isVisible="updateIsVisible"
           @iFrameNumber="updateIframeNumber"
-          @startTime="updateStartTime"
         />
       </template>
       <div v-else-if="exclusive && authenticated">
@@ -92,21 +79,23 @@
 <script lang="ts">
 import { state } from '../../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
-import { Podcast } from '@/store/class/podcast';
-import { Emission } from '@/store/class/emission';
-import { Playlist } from '@/store/class/playlist';
-import { CustomPlayer } from '@/store/class/customPlayer';
+import { Podcast } from '@/store/class/general/podcast';
+import { Emission } from '@/store/class/general/emission';
+import { Playlist } from '@/store/class/general/playlist';
+import { CustomPlayer } from '@/store/class/general/customPlayer';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
 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: {
@@ -128,7 +117,6 @@ export default defineComponent({
       proceedReading: true as boolean,
       episodeNumbers: 'number' as string,
       iFrameNumber: '3' as string,
-      startTime: 0 as number,
       isVisible: false as boolean,
       displayArticle: true as boolean,
       customPlayers: [] as Array<CustomPlayer>,
@@ -137,6 +125,9 @@ export default defineComponent({
   },
   
   computed: {
+    displayChoiceAllEpisodes():boolean{
+      return !this.podcast || this.isEmission || this.isLargeEmission;
+    },
     miniplayerBaseUrl(): string{
       return (state.podcastPage.MiniplayerUri as string); 
     },
@@ -144,7 +135,7 @@ export default defineComponent({
       return 'emission' === this.iFrameModel;
     },
     isLargeEmission(): boolean {
-      return 'largeEmission' === this.iFrameModel;
+      return 'emissionLarge' === this.iFrameModel;
     },
     isLargeSuggestion(): boolean {
       return 'largeSuggestion' === this.iFrameModel;
@@ -181,10 +172,7 @@ export default defineComponent({
     iFrameSrc(): string {
       const url = [''];
       let iFrameNumber = '/' + this.iFrameNumber;
-      if (
-        (!this.podcast || this.isEmission || this.isLargeEmission) &&
-        'all' === this.episodeNumbers
-      ) {
+      if (this.displayChoiceAllEpisodes && 'all' === this.episodeNumbers) {
         iFrameNumber = '/0';
       }
       if (!this.podcast && !this.playlist && this.emission) {
@@ -245,7 +233,6 @@ export default defineComponent({
       if(!this.displayArticle){
         url.push('&article=false');
       }
-      url.push('&time=' + this.startTime);
       if (this.isVisible) {
         url.push('&key=' + window.btoa(this.dataTitle.toString()));
       }
@@ -259,38 +246,38 @@ export default defineComponent({
         case 'large':
           if (this.podcast) return '180px';
           if ('number' === this.episodeNumbers) {
-            switch (this.iFrameNumber) {
+            switch (this.iFrameNumber.toString()) {
               case '1':
-                return '185px';
+                return '270px';
               case '2':
-                return '240px';
+                return '320px';
               case '3':
-                return '290px';
+                return '360px';
               case '4':
-                return '345px';
+                return '420px';
               case '5':
-                return '390px';
+                return '420px';
               default:
-                return '435px';
+                return '420px';
             }
           }
           return '435px';
-        case 'largeEmission':
+        case 'emissionLarge':
         case 'largeSuggestion':
           if ('number' !== this.episodeNumbers) return '510px';
-          switch (this.iFrameNumber) {
+          switch (this.iFrameNumber.toString()) {
             case '1':
-              return '260px';
-            case '2':
               return '315px';
-            case '3':
+            case '2':
               return '365px';
-            case '4':
+            case '3':
               return '420px';
+            case '4':
+              return '470px';
             case '5':
-              return '465px';
+              return '470px';
             default:
-              return '510px';
+              return '470px';
           }
         case 'emission':
           return '530px';
@@ -316,7 +303,7 @@ export default defineComponent({
       return 0;
     },
     isPlayerParameter(): boolean{
-      return !this.podcast || (this.podcast.article && 0 !== this.podcast.article.length) || this.isEmission || this.isLargeEmission || this.isLargeSuggestion;
+      return (!this.podcast || (this.podcast.article && 0 !== this.podcast.article.length) || this.isEmission || this.isLargeEmission || this.isLargeSuggestion) && !this.playlist;
     }
   },
   async created() {
@@ -365,9 +352,6 @@ export default defineComponent({
     updateIframeNumber(value: string): void {
       this.iFrameNumber = value;
     },
-    updateStartTime(value: number): void {
-      this.startTime = value;
-    },
     updateIsVisible(value: boolean): void {
       this.isVisible = value;
     },

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

@@ -1,6 +1,6 @@
 <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="d-flex justify-content-around mt-3 flex-grow-1 w-100">
+    <div class="d-flex flex-column align-items-center flex-shrink-0 me-3">
       <div class="fw-600">
         {{ $t('Choose color') }}
       </div>

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

@@ -34,7 +34,7 @@
       </option>
       <option
         v-if="podcast && podcast.podcastId"
-        value="largeEmission"
+        value="emissionLarge"
       >
         {{ $t('Large emission version') }}
       </option>
@@ -49,11 +49,11 @@
 </template>
 
 <script lang="ts">
-import { Podcast } from '@/store/class/podcast';
-import { CustomPlayer } from '@/store/class/customPlayer';
+import { Podcast } from '@/store/class/general/podcast';
+import { CustomPlayer } from '@/store/class/general/customPlayer';
 import { defineComponent } from 'vue';
-import { Emission } from '@/store/class/emission';
-import { Playlist } from '@/store/class/playlist';
+import { Emission } from '@/store/class/general/emission';
+import { Playlist } from '@/store/class/general/playlist';
 export default defineComponent({
   props: {
     podcast: { default: undefined, type: Object as ()=> Podcast},