@saooti/octopus-sdk 30.0.7 → 30.0.8

package/src/components/misc/TopBar.vue

@@ -1,137 +1,121 @@
 <template>
   <div
-    v-if="init"
-    class="top-bar-container position-sticky"
+    class="top-bar-container"
     :class="{ 'shadow-element': scrolled }"
   >
-    <div class="top-bar">
-      <div
-        class="hamburger-menu"
-        :aria-label="$t('open left Menu')"
-        @click="onDisplayMenu(false)"
+    <div
+      class="saooti-burger-menu"
+      :aria-label="$t('open left Menu')"
+      @click="onDisplayMenu(false)"
+    />
+    <router-link
+      class="top-bar-logo"
+      :to="{
+        name: 'home',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onDisplayMenu(true)"
+    >
+      <img
+        :src="!filterOrga || '' === imgUrl ? logoUrl : imgUrl"
+        :alt="$t('Logo of main page')"
+        :class="isEducation ? 'educationLogo' : ''"
       >
-        <div class="saooti-burger-menu h3" />
-      </div>
+    </router-link>
+    <OrganisationChooserLight
+      v-if="!isPodcastmaker"
+      page="topBar"
+      width="auto"
+      :defaultanswer="$t('No organisation filter')"
+      :value="organisationId"
+      :light="true"
+      class="me-2"
+      :reset="reset"
+      @selected="onOrganisationSelected"
+    />
+    <div class="d-flex justify-content-center flex-grow-1">
       <router-link
+        v-if="
+          isLiveTab &&
+            ((filterOrga && filterOrgaLive) || !filterOrga)
+        "
         :to="{
-          name: 'home',
+          name: 'lives',
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="link-hover p-3 fw-bold"
+      >
+        {{ $t('Live') }}
+      </router-link>
+      <router-link
+        :to="{
+          name: 'podcasts',
           query: { productor: $store.state.filter.organisationId,
                    iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
                    rubriquesId: rubriqueQueryParam},
         }"
+        class="link-hover p-3 fw-bold"
       >
-        <div
-          class="top-bar-logo m-3"
-          @click="onDisplayMenu(true)"
-        >
-          <img
-            v-if="!filterOrga || '' === imgUrl"
-            :src="logoUrl"
-            :alt="$t('Logo of main page')"
-            :class="isEducation ? 'educationLogo' : ''"
-          >
-          <img
-            v-else
-            :src="imgUrl"
-            :alt="$t('Logo of main page')"
-          >
-        </div>
+        {{ $t('Podcasts') }}
       </router-link>
-      <OrganisationChooserLight
-        v-if="!isPodcastmaker"
-        width="auto"
-        page="topBar"
-        :defaultanswer="$t('No organisation filter')"
-        :value="organisationId"
-        :light="true"
-        class="me-2 hide-top-bar"
-        :reset="reset"
-        @selected="onOrganisationSelected"
-      />
-      <div class="d-flex align-items-center justify-content-center flex-grow">
-        <router-link
-          v-if="
-            isLiveTab &&
-              ((filterOrga && filterOrgaLive) || !filterOrga)
-          "
-          :to="{
-            name: 'lives',
-            query: { productor: $store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark fw-bold"
-        >
-          {{ $t('Live') }}
-        </router-link>
+      <router-link
+        :to="{
+          name: 'emissions',
+          query: { productor: $store.state.filter.organisationId,
+                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                   rubriquesId: rubriqueQueryParam },
+        }"
+        class="link-hover p-3 fw-bold"
+      >
+        {{ $t('Emissions') }}
+      </router-link>
+      <router-link
+        :to="{
+          name: 'participants',
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="link-hover p-3 fw-bold"
+      >
+        {{ $t('Speakers') }}
+      </router-link>
+      <router-link
+        :to="{
+          name: 'playlists',
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="link-hover p-3 fw-bold"
+      >
+        {{ $t('Playlists') }}
+      </router-link>
+      <router-link
+        v-if="!isPodcastmaker && (!filterOrga || isEducation)"
+        :to="{
+          name: 'productors',
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="link-hover p-3 fw-bold"
+      >
+        {{ $t('Productors') }}
+      </router-link>
+    </div>
+    <div class="d-flex flex-column">
+      <div class="hosted-by">
+        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
+      </div>
+      <div class="d-flex justify-content-end flex-no-wrap">
+        <HomeDropdown :is-education="isEducation" />
         <router-link
+          :aria-label="$t('Search')"
           :to="{
             name: 'podcasts',
-            query: { productor: $store.state.filter.organisationId,
-                     iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                     rubriquesId: rubriqueQueryParam},
-          }"
-          class="linkHover p-3 text-dark fw-bold"
-        >
-          {{ $t('Podcasts') }}
-        </router-link>
-        <router-link
-          :to="{
-            name: 'emissions',
-            query: { productor: $store.state.filter.organisationId,
-                     iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                     rubriquesId: rubriqueQueryParam },
-          }"
-          class="linkHover p-3 text-dark fw-bold"
-        >
-          {{ $t('Emissions') }}
-        </router-link>
-        <router-link
-          :to="{
-            name: 'participants',
-            query: { productor: $store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark fw-bold"
-        >
-          {{ $t('Speakers') }}
-        </router-link>
-        <router-link
-          :to="{
-            name: 'playlists',
             query: { productor: $store.state.filter.organisationId },
           }"
-          class="linkHover p-3 text-dark fw-bold"
         >
-          {{ $t('Playlists') }}
-        </router-link>
-        <router-link
-          v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-          :to="{
-            name: 'productors',
-            query: { productor: $store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark fw-bold"
-        >
-          {{ $t('Productors') }}
+          <div class="btn admin-button m-1 saooti-search" />
         </router-link>
       </div>
-      <div class="d-flex flex-column">
-        <div class="d-flex justify-content-end hostedBy hide-phone">
-          <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
-        </div>
-        <div class="d-flex align-items-center justify-content-end flex-no-wrap">
-          <HomeDropdown :is-education="isEducation" />
-          <router-link
-            :aria-label="$t('Search')"
-            :to="{
-              name: 'podcasts',
-              query: { productor: $store.state.filter.organisationId },
-            }"
-          >
-            <div class="btn admin-button m-1">
-              <i class="saooti-search text-dark" />
-            </div>
-          </router-link>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -166,11 +150,9 @@ export default defineComponent({
       minScroll: 0 as number,
       organisationId: undefined as string | undefined,
       reset: false as boolean,
-      init: false as boolean,
       dummyParam: new Date().getTime().toString() as string,
     };
   },
-
  
   computed: {
     rubriqueQueryParam(): string|undefined{
@@ -218,7 +200,6 @@ export default defineComponent({
     if (this.filterOrga) {
       this.organisationId = this.filterOrga;
     }
-    this.init = true;
     window.addEventListener('scroll', this.handleScroll);
   },
 
@@ -278,139 +259,76 @@ export default defineComponent({
 
 <style lang="scss">
 .top-bar-container {
+  position: sticky;
   top: 0;
   background: #fff;
   width: 100%;
+  height: 5rem;
   z-index: 10;
-  padding: 0 2em;
-
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: height 1s;
   @media (max-width: 450px) {
     padding: 0 0.5rem;
   }
 
-  .top-bar {
-    transition: height 1s;
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    height: 5rem;
-    position: relative;
-
-    .top-bar-logo {
-      margin: 1rem 2rem 1rem 1rem !important;
-      img {
-        max-width: 160px !important;
-        max-height: 80px;
-        height: 80px;
-        border-radius: 0.8rem;
-        &.educationLogo {
-          height: auto;
-          border-radius: 0;
-        }
-      }
-    }
-    .multiselect__tags {
-      padding: 6px 40px 0 10px;
-    }
-
-    .hamburger-menu {
-      display: none;
-      margin: 0 1rem;
-      @media (max-width: 600px) {
-        margin: 0;
-      }
-      .saooti-burger-menu {
-        font-size: 2.2em;
-        font-weight: bold;
-        margin-bottom: 0;
-      }
-      cursor: pointer;
-    }
+  .saooti-burger-menu {
+    display: none;
+    cursor: pointer;
+    font-size: 2rem;
+    font-weight: bold;
+    margin: 0.5rem;
   }
 
-  &.shadow-element {
-    .linkHover {
-      display: none;
-    }
-    .top-bar {
-      height: 3.5rem;
-
-      .hamburger-menu {
-        display: block;
-        .saooti-burger-menu {
-          font-size: 2.2em;
-          font-weight: bold;
-          margin: 0;
-        }
-      }
-      .top-bar-logo {
-        flex-grow: 1;
-        text-align: center;
-        align-items: center;
-        display: flex;
-        img {
-          height: 2.5rem;
-          width: auto;
-        }
-      }
-      .hostedBy {
-        display: none !important;
+  .top-bar-logo {
+    margin: 1rem 2rem 1rem 1rem;
+    img {
+      max-width: 160px !important;
+      max-height: 2.5rem;
+      height: 2.5rem;
+      &.educationLogo {
+        height: auto;
       }
     }
   }
-  .hostedBy {
+  .hosted-by {
     font-size: 0.6rem;
     position: absolute;
     top: 5px;
     right: 0;
   }
-
+  .multiselect__tags {
+    padding: 6px 40px 0 10px;
+  }
+  &.shadow-element {
+    height: 3.5rem;
+    .link-hover,.hosted-by {
+      display: none;
+    }
+    .saooti-burger-menu {
+      display: block;
+    }
+  }
   /** PHONES*/
   @media (max-width: 1200px) {
-    .hide-top-bar {
-      display: none !important;
-    }
-    .hostedBy {
-      display: none !important;
+    height: 3.5rem;
+    .default-multiselect-width, .hosted-by, .link-hover {
+      display: none;
     }
-    .top-bar {
-      padding: 0;
-      height: 3.5rem;
-      .linkHover {
-        display: none;
-      }
-      .hamburger-menu {
-        flex-grow: 1;
-        display: block;
-      }
-      .top-bar-logo {
-        flex-grow: 1;
-        text-align: center;
-        display: flex;
-        width: 100px;
-        img {
-          max-width: 100px !important;
-        }
-      }
+    .saooti-burger-menu {
+      display: block;
     }
   }
   @media (max-width: 650px) {
-    .top-bar {
-      .top-bar-logo {
-        img {
-          height: 2rem;
-        }
-      }
+    .top-bar-logo img{
+      height: 2rem;
     }
   }
   @media (max-width: 290px) {
-    .top-bar {
-      .top-bar-logo {
-        img {
-          display: none;
-        }
-      }
+    .top-bar-logo img{
+      display: none;
     }
   }
 }

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

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