@saooti/octopus-sdk 30.0.7 → 30.0.11

package/src/components/misc/modal/NewsletterModal.vue

@@ -17,36 +17,20 @@
               <!-- eslint-disable vue/no-v-html -->
               <div v-html="newsletterHtml" />
               <!-- eslint-enable -->
-              <div class="d-flex flex-column flex-grow ms-4">
+              <div class="d-flex flex-column flex-grow-1 ms-4">
                 <h4 class="mb-3">
                   {{ $t('Configuration') }}
                 </h4>
-                <div>
-                  <input
-                    id="display-emission-name"
-                    v-model="displayEmissionName"
-                    type="checkbox"
-                    class="form-check-input"
-                  >
-                  <label
-                    class="form-check-label"
-                    for="display-emission-name"
-                  >{{
-                    $t('Display emission name')
-                  }}</label>
-                </div>
-                <div>
-                  <input
-                    id="display-participants-names"
-                    v-model="displayParticipantsNames"
-                    type="checkbox"
-                    class="form-check-input"
-                  >
-                  <label
-                    class="form-check-label"
-                    for="display-participants-names"
-                  >{{ $t('Display participants list') }}</label>
-                </div>
+                <ClassicCheckbox
+                  v-model:textInit="displayEmissionName"
+                  id-checkbox="display-emission-name"
+                  :label="$t('Display emission name')"
+                />
+                <ClassicCheckbox
+                  v-model:textInit="displayParticipantsNames"
+                  id-checkbox="display-participants-names"
+                  :label="$t('Display participants list')"
+                />
                 <div class="d-flex align-items-center mt-2">
                   <VSwatches
                     v-model="color"
@@ -104,6 +88,7 @@
 </template>
 
 <script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import Snackbar from '../../misc/Snackbar.vue';
 import moment from 'moment';
 import VSwatches from 'vue3-swatches';
@@ -121,6 +106,7 @@ export default defineComponent({
   components: {
     Snackbar,
     VSwatches,
+    ClassicCheckbox
   },
 
   mixins: [displayMethods],

package/src/components/pages/Category.vue

@@ -2,8 +2,8 @@
   <div class="page-box">
     <h1>{{ title }}</h1>
     <PodcastList
-      :first="firstRoute"
-      :size="sizeRoute"
+      :first="0"
+      :size="12"
       :iab-id="iabId"
       :organisation-id="filterOrga"
     />
@@ -20,8 +20,6 @@ export default defineComponent({
     PodcastList,
   },
   props: {
-    firstRoute: { default: 0, type: Number},
-    sizeRoute: { default: 12, type: Number},
     iabId: { default: undefined, type: Number},
   },
 
@@ -53,10 +51,7 @@ export default defineComponent({
       const matchCategories = this.categories.filter((c: Category) => c.id === this.iabId);
       if (1 !== matchCategories.length) return;
       this.title = matchCategories[0]['name'];
-
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Emission.vue

@@ -1,14 +1,13 @@
 <template>
-  <div>
+  <div class="page-box">
     <div
       v-if="loaded && !error"
-      class="page-box"
     >
       <h1 v-if="!isOuestFrance">
         {{ $t('Emission') }}
       </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"
             :emission="emission"
@@ -48,7 +47,7 @@
             :emission="emission"
           />
         </div>
-        <div class="d-flex flex-column share-container">
+        <div class="d-flex flex-column flex-grow-mobile">
           <SharePlayer
             v-if="isSharePlayer && (authenticated || notExclusive)"
             :emission="emission"
@@ -90,21 +89,10 @@
         @fetch="fetch"
       />
     </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("Emission doesn't exist") }}</h3>
-    </div>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Emission doesn't exist`):undefined"
+    />
   </div>
 </template>
 
@@ -113,7 +101,7 @@ import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
 import { Emission } from '@/store/class/general/emission';
-
+import ClassicLoading from '../form/ClassicLoading.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
 const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
@@ -133,6 +121,7 @@ export default defineComponent({
     PodcastList,
     SubscribeButtons,
     LiveHorizontalList,
+    ClassicLoading
   },
   mixins: [displayMethods],
   props: {
@@ -203,8 +192,9 @@ export default defineComponent({
       if (
         (this.authenticated && this.emission && this.organisationId === this.emission.orga.id) ||
         state.generalParameters.isAdmin
-      )
+      ){
         return true;
+      }
       return false;
     },
     countLink(): number {
@@ -272,6 +262,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Emissions.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="page-box">
-    <h1 v-if="undefined === titlePage">
-      {{ $t('All emissions') }}
-    </h1>
-    <h1 v-else>
-      {{ titlePage }}
+    <h1>
+      <template v-if="undefined === titlePage">
+        {{ $t('All emissions') }}
+      </template>
+      <template v-else>
+        {{ titlePage }}
+      </template>
     </h1>
     <ProductorSearch
       v-if="isProductorSearch"
@@ -53,7 +55,6 @@
 import EmissionList from '../display/emission/EmissionList.vue';
 import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
 import { state } from '../../store/paramStore';
-
 import { Category } from '@/store/class/general/category';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -65,8 +66,6 @@ export default defineComponent({
     AdvancedSearch,
   },
   props: {
-    firstRoute: { default: 0, type: Number},
-    sizeRoute: { default: 12, type: Number},
     productor: { default: undefined, type: String},
     isEducation: { default: false, type: Boolean},
   },
@@ -110,12 +109,6 @@ export default defineComponent({
   },
 
   created() {
-    if (this.firstRoute) {
-      this.first = this.firstRoute;
-    }
-    if (this.sizeRoute) {
-      this.size = this.sizeRoute;
-    }
     if(this.categoryFilter){
       this.iabId = this.categoryFilter.id;
     }
@@ -182,6 +175,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Home.vue

@@ -107,6 +107,4 @@ export default defineComponent({
     },
   }
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Lives.vue

@@ -17,7 +17,6 @@
           </div>
           <OrganisationChooser
             :defaultanswer="$t('Please chose a productor')"
-            :all="true"
             @selected="onOrganisationSelected"
           />
         </template>
@@ -99,6 +98,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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 -->
@@ -33,7 +34,7 @@
           class="d-flex justify-content-center"
         >
           <a
-            class="btn btn-bigRound"
+            class="btn btn-big-round"
             :title="$t('Subscribe to this participant')"
             :aria-label="$t('Subscribe to this participant')"
             :href="rssUrl"
@@ -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) {