@saooti/octopus-sdk 36.0.2 → 36.0.4

package/src/components/display/categories/CategoryList.vue

@@ -11,7 +11,7 @@
         v-for="category in categories"
         :ref="'category' + category.id"
         :key="category.id"
-        class="category-item text-dark bg-white"
+        class="btn btn-primary btn-on-dark m-1"
         @click="checkIfFilter(category)"
       >
         {{ category.name }}
@@ -20,7 +20,7 @@
     <button
       v-show="hidenCategories.length"
       id="categories-dropdown"
-      class="btn admin-button saooti-more"
+      class="btn btn-primary btn-on-dark m-1 saooti-more"
       :title="$t('See more')"
     />
     <Popover
@@ -148,12 +148,18 @@ export default defineComponent({
       }
       categoryList.style.justifyContent = 'flex-start';
       this.hidenCategories.length = 0;
+      this.categories.forEach((element: Category) => {
+        const el = (this.$refs['category' + element.id] as Array<HTMLElement>)[0];
+        if (!el) return;
+        if (el.classList.contains('hid')) {
+          el.classList.remove('hid');
+        }
+      });
       this.categories.forEach((element: Category) => {
         const el = (this.$refs['category' + element.id] as Array<HTMLElement>)[0];
         if (!el) return;
         const parent = el.parentElement;
         if (parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
-          el.classList.remove('hid');
           return;
         }
         this.hidenCategories.push(element);
@@ -183,23 +189,6 @@ export default defineComponent({
     overflow: hidden;
     flex-grow: 1;
     width: 0;
-    padding: 0 4rem;
-  }
-  .category-item {
-    font-size: 0.6rem;
-    margin: 0.2rem;
-    padding: 0.5rem;
-    height: 1.5rem;
-    border-radius: 1.5rem;
-    border: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    flex-shrink: 0;
-    .router-link-active,&:hover {
-      background: $octopus-secondary-color !important;
-    }
   }
 }
 </style>

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

@@ -71,7 +71,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
+            class="saooti-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -221,7 +221,7 @@ export default defineComponent({
     },
     preloadImage(url: string): void {
       const img = new Image();
-      img.src = this.proxyImageUrl(url,'260');
+      img.src = this.proxyImageUrl(url,'330');
     },
     async fetchRubriques(): Promise<void> {
       const data = await octopusApi.fetchData<Rubriquage>(0, 'rubriquage/'+this.displayRubriquage);

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mt-3 emission-item-container shadow-element"
+    class="mt-3 emission-item-container"
   >
     <router-link
       :to="{
@@ -12,9 +12,9 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
-        v-lazy="proxyImageUrl(emission.imageUrl, '260')"
-        width="260"
-        height="260"
+        v-lazy="proxyImageUrl(emission.imageUrl, '330')"
+        width="330"
+        height="330"
         class="img-box"
         :title="$t('Emission name image', {name:emission.name})"
         :alt="$t('Emission name image', {name:emission.name})"
@@ -41,7 +41,7 @@
         </div>
         <router-link
           v-if="!isPodcastmaker"
-          class="emission-producer mt-auto"
+          class="text-dark mt-auto"
           :to="{
             name: 'productor',
             params: { productorId: emission.orga.id },

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="emission-player-container shadow-element"
+    class="emission-player-container"
   >
     <router-link
       :to="{
@@ -20,9 +20,9 @@
         class="img-box rounded-0"
       >
         <img
-          v-lazy="proxyImageUrl(emission.imageUrl, '260')"
-          width="260"
-          height="260"
+          v-lazy="proxyImageUrl(emission.imageUrl, '330')"
+          width="330"
+          height="330"
           :title="$t('Emission name image', {name:emission.name})"
           :alt="$t('Emission name image', {name:emission.name})"
           class="img-box rounded-0"
@@ -54,7 +54,7 @@
     <div
       v-for="p in podcasts"
       :key="p.podcastId"
-      class="border-top emission-item-border-color p-2 secondary-bg d-flex flex-column"
+      class="border-top emission-item-border-color p-2 d-flex flex-column"
     >
       <router-link
         v-if="isProgressBar"
@@ -93,7 +93,7 @@
               <!-- eslint-enable -->
             </div>
           </router-link>
-          <PodcastPlayBar :podcast="p" />
+          <PodcastPlayBar  :podcast-id="p.podcastId" :duration="p.duration" />
         </div>
         <button
           v-if="
@@ -233,8 +233,8 @@ export default defineComponent({
       this.podcasts = data.result;
       this.$nextTick(() => {
       for (let index = 0, len = this.podcasts.length; index < len; index++) {
-        const podcastDesc = (this.$refs['descriptionPodcast'+this.podcasts[index].podcastId] as Array<HTMLElement>)[0];
-        const podcastDescContainer = (this.$refs['descriptionPodcastContainer'+this.podcasts[index].podcastId] as Array<HTMLElement>)[0];
+        const podcastDesc = (this.$refs['descriptionPodcast'+this.podcasts[index].podcastId] as Array<HTMLElement>)?.[0] ?? null;
+        const podcastDescContainer = (this.$refs['descriptionPodcastContainer'+this.podcasts[index].podcastId] as Array<HTMLElement>)?.[0] ?? null;
         if (
           null !== podcastDesc && null !== podcastDescContainer &&
           podcastDesc.clientHeight > podcastDescContainer.clientHeight
@@ -249,16 +249,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-
+@import '@scss/_variables.scss';
 .emission-player-container {
   list-style: none;
   background: #fff;
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 13rem;
+  max-width: $octopus-item-size;
   height: min-content;
-  border-radius: 0.8rem;
+  border: 2px solid #eee;
+  border-radius: $octopus-borderradius;
   overflow: hidden;
   .emission-item-border-color {
     border-color: #ddd;
@@ -290,6 +291,9 @@ export default defineComponent({
       flex-wrap: nowrap;
     }
   }
+  @media (max-width: 450px) {
+    max-width: $octopus-mobile-item-size;
+  }
 }
 
 </style>

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

@@ -12,7 +12,7 @@
         <option value="YES">{{ $t('Authorized advertising') }}</option>
         <option value="NO">{{ $t('Prohibited advertising') }}</option>
       </select>
-      <div class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
+      <div class="saooti-down octopus-arrow-down-absolute" />
     </label>
   </div>
 </template>

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

@@ -139,7 +139,7 @@ export default defineComponent({
   .filter-speech-bubble {
     position: absolute;
     background: $octopus-primary-color;
-    border-radius: 0.4em;
+    border-radius:$octopus-borderradius;
     width: 10rem;
     right: 4rem;
     padding: 5px;

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

@@ -13,7 +13,7 @@
         >{{ rubriquage.title }}</option>
       </select>
       <div
-        class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
+        class="saooti-down octopus-arrow-down-absolute"
       />
     </label>
     <template v-if="rubriquageId">

package/src/components/display/list/ListPaginate.vue

@@ -10,25 +10,29 @@
     <template v-if="!loading">
       <div
         v-if="!justSizeChosen"
-        class="paginate-section mb-2 page-box"
+        class="d-flex justify-content-between align-items-center flex-grow-1 w-100"
       >
         <div class="text-secondary">
           <template v-if="textCount && (windowWidth > 1300 || windowWidth<=960)">
             {{ textCount }}
           </template>
         </div>
-        <Paginate 
-          v-if="!isPhone && !justSizeChosen"
-          :first="first"
+        <PaginateParams
+          v-if="!isPhone && !justSizeChosen && totalCount > 0"
           :rows-per-page="rowsPerPage"
-          :total-count="totalCount"
-          :range-size="rangeSize"
-          @update:first="changeFirst"
           @update:rowsPerPage="changeSize"
         />
       </div>
     </template>
     <slot name="list" />
+    <Paginate 
+      v-if="!isPhone && !justSizeChosen && totalCount > 0"
+      :first="first"
+      :rows-per-page="rowsPerPage"
+      :total-count="totalCount"
+      :range-size="rangeSize"
+      @update:first="changeFirst"
+    />
     <button
       v-show="((first+rowsPerPage) < totalCount) && (isPhone || justSizeChosen)"
       :disabled="loading"
@@ -52,12 +56,14 @@
 import domHelper from '../../../helper/dom';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import { state } from '../../../stores/ParamSdkStore';
+import PaginateParams from './PaginateParams.vue';
 import Paginate from './Paginate.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ListPaginate',
   components: {
     Paginate,
+    PaginateParams,
     ClassicLoading
   },
   props: {
@@ -132,21 +138,4 @@ export default defineComponent({
     }
 	}
 })
-</script>
-<style lang="scss">
-.octopus-app .page-box.paginate-section{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 99vw;
-  position: sticky;
-  top: 3.5rem;
-  z-index: 9;
-  padding-bottom: 1rem;
-  padding-top: 1rem;
-  @media (max-width: 960px) {
-    position: initial;
-    justify-content:center;
-  }
-}
-</style>
+</script>

package/src/components/display/list/Paginate.vue

@@ -1,94 +1,76 @@
 <template>
-  <div
-    v-if="totalCount > 0"
-    class="paginate"
-  >
-    <div class="d-flex align-items-center justify-content-center">
-      <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
-      <select
-        id="rows-per-page-select"
-        :value="rowsPerPage"
-        class="c-hand p-1 mx-2"
-        @change="$emit('update:rowsPerPage',parseInt($event.target.value,10))"
+  <div class="paginate-fixed" :style="'bottom:'+playerHeight">
+    <div class="mx-2">
+      {{ $t('Showing items number', {page: (page+1), totalPage: totalPage}) }}
+    </div>
+    <div class="d-flex flex-nowrap">
+      <button
+        v-for="paginateButton in buttonsLeft"
+        :key="paginateButton.title"
+        class="btn"
+        :title="paginateButton.title"
+        :disabled="paginateButton.disabled"
+        @click="paginateButton.action"
       >
-        <option
-          v-for="option in optionsRowsPerPage"
-          :key="option"
-          :value="option"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
         >
-          {{ option }}
-        </option>
-      </select>
-      <div class="mx-2">
-        {{ $t('Showing items number', {page: (page+1), totalPage: totalPage}) }}
-      </div>
-      <div class="d-flex flex-nowrap">
-        <button
-          v-for="paginateButton in buttonsLeft"
-          :key="paginateButton.title"
+          <path
+            fill-rule="evenodd"
+            :d="paginateButton.path"
+          />
+        </svg>
+      </button>
+      <div
+        v-for="pageNumber in pagination"
+        :key="pageNumber"
+      >
+        <span
+          v-if="null === pageNumber"
           class="btn"
-          :title="paginateButton.title"
-          :disabled="paginateButton.disabled"
-          @click="paginateButton.action"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            viewBox="0 0 16 16"
-          >
-            <path
-              fill-rule="evenodd"
-              :d="paginateButton.path"
-            />
-          </svg>
-        </button>
-        <div
-          v-for="pageNumber in pagination"
-          :key="pageNumber"
-        >
-          <span
-            v-if="null === pageNumber"
-            class="btn"
-          >
-            ...
-          </span>
-          <button
-            v-else
-            class="btn"
-            :class="{ 'active': page === (pageNumber-1) }"
-            @click="changeFirst((pageNumber-1)*rowsPerPage)"
-          >
-            {{ pageNumber }}
-          </button>
-        </div>
+          ...
+        </span>
         <button
-          v-for="paginateButton in buttonsRight"
-          :key="paginateButton.title"
+          v-else
           class="btn"
-          :title="paginateButton.title"
-          :disabled="paginateButton.disabled"
-          @click="paginateButton.action"
+          :class="{ 'active': page === (pageNumber-1) }"
+          @click="changeFirst((pageNumber-1)*rowsPerPage)"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            viewBox="0 0 16 16"
-          >
-            <path
-              fill-rule="evenodd"
-              :d="paginateButton.path"
-            />
-          </svg>
+          {{ pageNumber }}
         </button>
       </div>
+      <button
+        v-for="paginateButton in buttonsRight"
+        :key="paginateButton.title"
+        class="btn"
+        :title="paginateButton.title"
+        :disabled="paginateButton.disabled"
+        @click="paginateButton.action"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            :d="paginateButton.path"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </template>
 <script lang="ts">
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "Paginate",
@@ -100,15 +82,10 @@ export default defineComponent({
     rangeSize:{default:1, type: Number}
   },
 
-	emits:['update:first', 'update:rowsPerPage'],
-
-  data() {
-    return {
-			optionsRowsPerPage: [10, 20, 30, 40, 50, 60] as Array<number>,
-		};
-  },
+	emits:['update:first'],
   
 	computed:{
+    ...mapState(usePlayerStore, ['playerHeight']),
     buttonsLeft(){
       return [{
         title: this.$t('Go to first page'), disabled: 0===this.first, action: ()=>{this.changeFirst(0)}, path:"M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"},
@@ -145,10 +122,7 @@ export default defineComponent({
 			return (this.totalPage-1)*this.rowsPerPage;
 		}
 	},
-	created(){
-		this.initRowsPerPage();
-	},
- 
+	
 	methods:{
     getPaginationArrayWithEllipsis(rangeStart: number, rangeEnd:number, minPaginationElems:number){
       const res = [];
@@ -176,13 +150,6 @@ export default defineComponent({
         res.push(this.totalPage);
       }
       return res;
-    },
-    initRowsPerPage(){
-      if(this.optionsRowsPerPage.includes(this.rowsPerPage)){
-        return;
-      }
-      this.optionsRowsPerPage.push(this.rowsPerPage);
-      this.optionsRowsPerPage.sort((a,b)=>a-b);
     },
 		changeFirst(newFirst: number){
 			this.$emit('update:first', newFirst);
@@ -192,15 +159,15 @@ export default defineComponent({
 </script>
 <style lang="scss">
 @import '@scss/_variables.scss';
-.octopus-app .paginate{
-	display: flex;
-	justify-content: flex-end;
-	select{
-		border-top: 0;
-		border-right: 0;
-		border-left: 0;
-		background: transparent !important;
-	}
+.octopus-app .paginate-fixed{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  position: sticky;
+  background: $octopus-background;
+  padding: 0.5rem 0;
+  z-index: 10;
   .btn{
     border-radius: 0;
     &.active{

package/src/components/display/list/PaginateParams.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="paginate">
+    <div class="d-flex align-items-center justify-content-center">
+      <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
+      <select
+        id="rows-per-page-select"
+        :value="rowsPerPage"
+        class="c-hand p-1 mx-2"
+        @change="$emit('update:rowsPerPage',parseInt($event.target.value,10))"
+      >
+        <option
+          v-for="option in optionsRowsPerPage"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "Paginate",
+
+	props: {
+		rowsPerPage:{ default:0, type:Number}
+  },
+
+	emits:['update:rowsPerPage'],
+
+  data() {
+    return {
+			optionsRowsPerPage: [10, 20, 30, 40, 50, 60] as Array<number>,
+		};
+  },
+  created(){
+		this.initRowsPerPage();
+	},
+ 
+  methods:{
+     initRowsPerPage(){
+      if(this.optionsRowsPerPage.includes(this.rowsPerPage)){
+        return;
+      }
+      this.optionsRowsPerPage.push(this.rowsPerPage);
+      this.optionsRowsPerPage.sort((a,b)=>a-b);
+    },
+  }
+
+});
+</script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app .paginate{
+	display: flex;
+	justify-content: flex-end;
+	select{
+		border-top: 0;
+		border-right: 0;
+		border-left: 0;
+		background: transparent !important;
+	}
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column align-items-center text-danger">
+  <div class="d-flex flex-column align-items-center text-white">
     <h3>{{ $t('This live will start') }}</h3>
     <h3
       v-if="countdownTimer"

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

@@ -30,13 +30,6 @@
     >
       <PodcastImage
         class="me-3"
-        :class="
-          fetchConference &&
-            'null' !== fetchConference &&
-            fetchConference.status
-            ? fetchConference.status.toLowerCase() + '-shadow'
-            : ''
-        "
         :podcast="live"
         :hide-play="false"
         :playing-podcast="false"

package/src/components/display/organisation/OrganisationChooser.vue

@@ -104,7 +104,7 @@
           class="position-relative"
         >
           <span
-            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
+            class="saooti-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

package/src/components/display/participant/ParticipantItem.vue

@@ -18,9 +18,9 @@
         height="200"
         :title="$t('Animator image')"
         :alt="$t('Animator image')"
-        class="img-box-circle"
+        class="img-box border"
       >
-      <div class="d-flex align-items-center participant-name">
+      <div class="d-flex align-items-center h4 justify-content-center mt-2">
         <span
           v-if="!activeParticipant && !isPodcastmaker && editRight"
           :title="$t('Participant have not podcasts')"
@@ -121,27 +121,21 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
 .participant-item-container {
   list-style: none;
-  border-radius: 2rem;
+  border-radius: $octopus-borderradius;
   display: flex;
   flex-direction: column;
   margin: 1rem 0;
   align-items: center;
 
-  .participant-name {
-    margin-top: 1rem;
-    font-size: 0.9rem;
-    font-weight: 600;
-    text-align: center;
-  }
-
   .participant-description {
     overflow: hidden;
     margin-top: 0.5em;
     word-break: break-word;
-    max-height: 4rem;
+    max-height: 3rem;
     position: relative;
     &.after-participant-description:after {
       content: '...';
@@ -156,7 +150,7 @@ export default defineComponent({
       background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0),
-        #fafafa 40%
+        white 40%
       );
     }
   }