@saooti/octopus-sdk 30.0.7 → 30.0.8

package/src/components/pages/Participant.vue

@@ -1,17 +1,18 @@
 <template>
-  <div>
+  <div class="page-box">
     <div
       v-if="loaded && !error"
-      class="page-box intervenant-page"
     >
-      <h1 v-if="undefined === titlePage ||!lightStyle">
-        {{ $t('Animator') }}
-      </h1>
-      <h1 v-else>
-        {{ titlePage }}
+      <h1>
+        <template v-if="undefined === titlePage ||!lightStyle">
+          {{ $t('Animator') }}
+        </template>
+        <template v-else>
+          {{ titlePage }}
+        </template>
       </h1>
       <div
-        class="d-flex w-100 flex-column align-items-center justify-content-center"
+        class="d-flex flex-column align-items-center"
       >
         <div
           class="img-box-circle mb-3"
@@ -24,7 +25,7 @@
         </h2>
         <!-- eslint-disable vue/no-v-html -->
         <div
-          class="h6 participant-desc html-wysiwyg-content"
+          class="participant-desc html-wysiwyg-content"
           v-html="urlify(description)"
         />
         <!-- eslint-enable -->
@@ -71,21 +72,10 @@
         :reload="reload"
       />
     </div>
-    <div
-      v-if="!loaded"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading content ...') }}
-      </h3>
-    </div>
-    <div
-      v-if="error"
-      class="text-center"
-    >
-      <h3>{{ $t("Animator doesn't exist") }}</h3>
-    </div>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Animator doesn't exist`):undefined"
+    />
   </div>
 </template>
 
@@ -94,7 +84,7 @@ import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
 import { Participant } from '@/store/class/general/participant';
-
+import ClassicLoading from '../form/ClassicLoading.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
 const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
@@ -106,6 +96,7 @@ export default defineComponent({
     PodcastFilterList,
     EditBox,
     PodcastList,
+    ClassicLoading
   },
   mixins: [displayMethods],
   props: {
@@ -165,8 +156,9 @@ export default defineComponent({
         (this.authenticated &&
           this.organisationId === this.participant.orga.id) ||
         state.generalParameters.isAdmin
-      )
+      ){
         return true;
+      }
       return false;
     },
   },

package/src/components/pages/Participants.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="page-box">
     <h1 v-if="undefined === titlePage">
-      {{ $t('All participants') }}
-    </h1>
-    <h1 v-else>
-      {{ titlePage }}
+      <template v-if="undefined === titlePage">
+        {{ $t('All participants') }}
+      </template>
+      <template v-else>
+        {{ titlePage }}
+      </template>
     </h1>
     <ProductorSearch
       :organisation-id="organisationId"
@@ -34,8 +36,6 @@ export default defineComponent({
     ParticipantList,
   },
   props: {
-    firstRoute: { default: 0, type: Number},
-    sizeRoute: { default: 12, type: Number},
     productor: { default: undefined, type: String},
   },
 
@@ -55,12 +55,6 @@ export default defineComponent({
   },
 
   created() {
-    if (this.firstRoute) {
-      this.first = this.firstRoute;
-    }
-    if (this.sizeRoute) {
-      this.size = this.sizeRoute;
-    }
     if (this.productor) {
       this.organisationId = this.productor;
     } else if (this.$store.state.filter.organisationId) {
@@ -77,6 +71,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Playlist.vue

@@ -1,16 +1,15 @@
 <template>
-  <div>
+  <div class="page-box">
     <div
       v-if="loaded && !error"
-      class="page-box"
     >
       <h1>{{ $t('Playlist') }}</h1>
       <div class="d-flex">
-        <div class="d-flex flex-column flex-grow">
+        <div class="d-flex flex-column flex-grow-1">
           <EditBox
             v-if="editRight && isEditBox"
             :playlist="playlist"
-            :is-ready="isReady"
+            :is-ready="true"
           />
           <div class="module-box">
             <h2>{{ name }}</h2>
@@ -29,7 +28,7 @@
             </div>
           </div>
         </div>
-        <div class="d-flex flex-column share-container">
+        <div class="d-flex flex-column flex-grow-mobile">
           <SharePlayer
             v-if="isSharePlayer && authenticated"
             :playlist="playlist"
@@ -41,25 +40,15 @@
       </div>
       <PodcastList :playlist="playlist" />
     </div>
-    <div
-      v-if="!loaded"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading content ...') }}
-      </h3>
-    </div>
-    <div
-      v-if="error"
-      class="text-center"
-    >
-      <h3>{{ $t("Playlist doesn't exist") }}</h3>
-    </div>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Playlist doesn't exist`):undefined"
+    />
   </div>
 </template>
 
 <script lang="ts">
+import ClassicLoading from '../form/ClassicLoading.vue';
 import PodcastList from '../display/playlist/PodcastList.vue';
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
@@ -75,6 +64,7 @@ export default defineComponent({
     EditBox,
     PodcastList,
     SharePlayer,
+    ClassicLoading
   },
   mixins:[displayMethods],
   props: {
@@ -88,7 +78,6 @@ export default defineComponent({
       loaded: false as boolean,
       playlist: undefined as Playlist | undefined,
       error: false as boolean,
-      isReady: true as boolean,
     };
   },
   
@@ -123,15 +112,14 @@ export default defineComponent({
         (state.generalParameters.isPlaylist && this.playlist &&
           this.organisationId === this.playlist.organisation.id) ||
         state.generalParameters.isAdmin
-      )
+      ){
         return true;
+      }
       return false;
     },
   },
   watch: {
     playlistId() {
-      this.loaded = false;
-      this.error = false;
       this.getPlaylistDetails();
     },
   },
@@ -142,17 +130,16 @@ export default defineComponent({
   methods: {
     async getPlaylistDetails(): Promise<void> {
       try {
+        this.loaded = false;
+        this.error = false;
         const data: Playlist = await octopusApi.fetchPlaylist(this.playlistId ? this.playlistId.toString(): "");
         this.playlist = data;
         this.$emit('playlistTitle', this.playlist.title);
-        this.loaded = true;
       } catch {
         this.error = true;
-        this.loaded = true;
       }
+      this.loaded = true;
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Playlists.vue

@@ -39,8 +39,6 @@ export default defineComponent({
     PlaylistList,
   },
   props: {
-    firstRoute: { default: 0, type: Number},
-    sizeRoute: { default: 12, type: Number},
     productor: { default: undefined, type: String},
   },
 
@@ -67,12 +65,6 @@ export default defineComponent({
   },
 
   created() {
-    if (this.firstRoute) {
-      this.first = this.firstRoute;
-    }
-    if (this.sizeRoute) {
-      this.size = this.sizeRoute;
-    }
     if (this.productor) {
       this.organisationId = this.productor;
     } else if (this.$store.state.filter.organisationId) {
@@ -88,6 +80,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Podcast.vue

@@ -1,9 +1,6 @@
 <template>
-  <div>
-    <div
-      v-if="loaded && !error"
-      class="page-box"
-    >
+  <div class="page-box">
+    <template v-if="loaded && !error">
       <h1 v-if="!isOuestFrance">
         {{ titlePage }}
       </h1>
@@ -20,7 +17,7 @@
                 !isNotRecorded &&
                 isOctopusAndAnimator
             "
-            class="module-box text-center-mobile flex-no-grow"
+            class="module-box text-center-mobile flex-grow-0"
             :podcast="podcast"
             :live="true"
             :recording="fetchConference"
@@ -30,7 +27,7 @@
           <EditBox
             v-else-if="editRight && isEditBox"
             :podcast="podcast"
-            :is-ready="isReady"
+            :is-ready="true"
             @validatePodcast="updatePodcast"
           />
           <PodcastModuleBox
@@ -44,8 +41,8 @@
           />
         </div>
         <div
-          class="d-flex flex-column share-container"
-          :class="authenticated || notExclusive ? 'flex-grow' : ''"
+          class="d-flex flex-column flex-grow-mobile"
+          :class="authenticated || notExclusive ? 'flex-grow-1' : ''"
         >
           <SharePlayer
             v-if="isSharePlayer && (authenticated || notExclusive)"
@@ -85,28 +82,18 @@
           :button-text="$t('All podcast button', { name: c.name })"
         />
       </template>
-    </div>
-    <div
-      v-if="!loaded"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading content ...') }}
-      </h3>
-    </div>
-    <div
-      v-if="error"
-      class="text-center"
-    >
-      <h3>{{ $t("Podcast doesn't exist") }}</h3>
-    </div>
+    </template>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Podcast doesn't exist`):undefined"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
 import PodcastModuleBox from '../display/podcasts/PodcastModuleBox.vue';
+import ClassicLoading from '../form/ClassicLoading.vue';
 import octopusApi from '@saooti/octopus-api';
 import studioApi from '@/api/studio';
 import { state } from '../../store/paramStore';
@@ -136,7 +123,8 @@ export default defineComponent({
     RecordingItemButton,
     Countdown,
     CommentSection,
-    PodcastModuleBox
+    PodcastModuleBox,
+    ClassicLoading
   },
 
   props: {
@@ -219,13 +207,11 @@ export default defineComponent({
         (this.authenticated &&
           this.organisationId === this.podcast.organisation.id) ||
         state.generalParameters.isAdmin
-      )
+      ){
         return true;
+      }
       return false;
     },
-    isReady(): boolean {
-      return true;
-    },
     countLink(): number {
       let count = 0;
       if (this.podcast && this.podcast.emission && this.podcast.emission.annotations) {

package/src/components/pages/Podcasts.vue

@@ -6,17 +6,13 @@
         isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
       "
     >
-      <h1
-        v-if="undefined === titlePage"
-        class="flex-shrink"
-      >
-        {{ $t('All podcasts') }}
-      </h1>
-      <h1
-        v-else
-        class="flex-shrink"
-      >
-        {{ titlePage }}
+      <h1 class="flex-shrink-0">
+        <template v-if="undefined === titlePage">
+          {{ $t('All podcasts') }}
+        </template>
+        <template v-else>
+          {{ titlePage }}
+        </template>
       </h1>
       <EmissionChooser
         v-if="isEmissionChooser"
@@ -92,8 +88,6 @@ export default defineComponent({
   },
 
   props: {
-    firstRoute: { default: 0, type: Number},
-    sizeRoute: { default: 12, type: Number},
     productor: { default: undefined, type: String},
     isEducation: { default: false, type: Boolean},
   },
@@ -101,7 +95,7 @@ export default defineComponent({
   data() {
     return {
       first: 0 as number,
-      size: 49 as number,
+      size: 12 as number,
       searchPattern: '' as string,
       organisationId: undefined as string|undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -160,12 +154,6 @@ export default defineComponent({
   },
 
   created() {
-    if (this.firstRoute) {
-      this.first = this.firstRoute;
-    }
-    if (this.sizeRoute) {
-      this.size = this.sizeRoute;
-    }
     if (this.productor) {
       this.organisationId = this.productor;
     } else if (this.$store.state.filter.organisationId) {
@@ -247,6 +235,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Search.vue

@@ -1,43 +1,23 @@
 <template>
   <div class="page-box">
-    <h1 v-if="!hideBar">
-      {{ $t('Podcast search') }}
+    <h1>
+      <template v-if="!hideBar">
+        {{ $t('Podcast search') }}
+      </template>
+      <template v-else-if="!noResult">
+        {{ $t('Search results', { query: rawQuery }) }}
+      </template>
+      <template v-else>
+        {{ $t('Search - no results', { query: rawQuery }) }}
+      </template>
     </h1>
-    <h1 v-else-if="!noResult">
-      {{ $t('Search results', { query: rawQuery }) }}
-    </h1>
-    <h1 v-else>
-      {{ $t('Search - no results', { query: rawQuery }) }}
-    </h1>
-    <div
+    <ClassicSearch
       v-if="!hideBar"
-      class="position-relative champs-searchPage w-75"
-    >
-      <input
-        id="search"
-        ref="search"
-        v-model="rawQuery"
-        type="text"
-        class="search-input border-primary w-100 p-2 input-no-outline"
-        :placeholder="$t('Please type at least three characters')"
-        autofocus
-        @change="onSearchBegin"
-      >
-      <label
-        for="search"
-        class="d-inline"
-        :aria-label="$t('Search')"
-      />
-      <div
-        v-if="!rawQuery"
-        class="saooti-search-bounty search-icon-container"
-      />
-      <div
-        v-else
-        class="saooti-cross search-icon-container c-hand"
-        @click="rawQuery = ''"
-      />
-    </div>
+      v-model:textInit="rawQuery"
+      :autofocus="true"
+      id-checkbox="search-page-input"
+      :label="$t('Please type at least three characters')"
+    />
     <PodcastList
       v-if="!!query"
       :query="query"
@@ -50,6 +30,7 @@
 
 <script lang="ts">
 import { state } from '../../store/paramStore';
+import ClassicSearch from '../form/ClassicSearch.vue';
 import PodcastList from '../display/podcasts/PodcastList.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
@@ -57,6 +38,7 @@ export default defineComponent({
 
   components: {
     PodcastList,
+    ClassicSearch
   },
 
   props: {
@@ -81,12 +63,13 @@ export default defineComponent({
   },
 
   watch: {
-    query: {
-        handler(search: string): void {
-          this.rawQuery = search;
-        },
-      deep: true,
-      immediate: true,
+    rawQuery(): void{
+      if (this.hideBar) {
+        this.noResult = false;
+      }
+    },
+    query(): void{
+      this.rawQuery = this.query;
     },
     queryRoute(): void{
       this.rawQuery = this.queryRoute;
@@ -97,9 +80,6 @@ export default defineComponent({
     if (this.queryRoute) {
       this.rawQuery = this.queryRoute;
     }
-    if (this.$refs.search) {
-      (this.$refs.search as HTMLElement).focus();
-    }
   },
   
   methods: {
@@ -108,24 +88,6 @@ export default defineComponent({
         this.noResult = true;
       }
     },
-    onSearchBegin(): void {
-      if (this.hideBar) {
-        this.noResult = false;
-      }
-    },
   },
 })
-</script>
-
-<style lang="scss">
-.champs-searchPage {
-  margin: 0 auto;
-  input {
-    margin: 1rem 0 !important;
-    padding-right: 40px !important;
-  }
-  .search-icon-container {
-    margin: 0 1em 0 0;
-  }
-}
-</style>
+</script>