@saooti/octopus-sdk 37.0.50 → 37.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.50",
+  "version": "37.0.52",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -1,47 +1,19 @@
 <template>
   <div class="d-flex flex-column p-3 list-episode">
-    <div v-if="!overflowScroll" class="d-flex justify-content-end">
-      <div class="hide-phone">
-        <button
-          class="btn admin-button m-1 saooti-left"
-          :class="{ disabled: !previousAvailable }"
-          :title="$t('Display previous')"
-          @click="displayPrevious()"
-        />
-        <button
-          class="btn admin-button m-1 saooti-right"
-          :class="{ disabled: !nextAvailable }"
-          :title="$t('Display next')"
-          @click="displayNext()"
-        />
-      </div>
-    </div>
     <ClassicLoading
       :loading-text="loading ? $t('Loading emissions ...') : undefined"
     />
-    <transition-group
-      v-show="
-        (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
-      "
-      :name="transitionName"
-      class="element-list-inline"
-      tag="div"
-      :class="[
-        alignLeft ? 'justify-content-start' : '',
-        overflowScroll ? 'overflowScroll' : '',
-      ]"
-      :css="isInlineAnimation"
-    >
-      <EmissionPlayerItem
-        v-for="e in emissions"
-        :key="e.emissionId"
-        class="flex-shrink-0 item-phone-margin"
-        :emission="e"
-        :class="[alignLeft ? 'me-3' : '', mainRubriquage(e)]"
-        :nb-podcasts="nbPodcasts"
-        :rubrique-name="rubriquesId(e)"
-      />
-    </transition-group>
+    <SwiperList v-if="(displayRubriquage && rubriques) || !(displayRubriquage && loaded)" :sizeItemOverload="itemSize"  :list-object="allEmissions">
+      <template #octopusSlide="{ option }">
+        <EmissionPlayerItem
+          class="flex-shrink-0 item-phone-margin"
+          :emission="option"
+          :class="[mainRubriquage(option)]"
+          :nb-podcasts="nbPodcasts"
+          :rubrique-name="rubriquesId(option)"
+        />
+      </template>
+    </SwiperList>
     <router-link
       :to="href"
       class="btn btn-primary align-self-center width-fit-content m-4"
@@ -52,12 +24,11 @@
 </template>
 
 <script lang="ts">
+import SwiperList from "../list/SwiperList.vue";
 import octopusApi from "@saooti/octopus-api";
-import domHelper from "../../../helper/dom";
 import EmissionPlayerItem from "./EmissionPlayerItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { handle403 } from "../../mixins/handle403";
-const PHONE_WIDTH = 960;
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
@@ -72,6 +43,7 @@ export default defineComponent({
   components: {
     EmissionPlayerItem,
     ClassicLoading,
+    SwiperList
   },
 
   mixins: [handle403, imageProxy, resizePhone],
@@ -83,69 +55,21 @@ export default defineComponent({
     rubriqueId: { default: undefined, type: Number },
     rubriquageId: { default: undefined, type: Number },
     nbPodcasts: { default: undefined, type: Number },
-    itemSize: { default: 13, type: Number },
+    itemSize: { default: undefined, type: Number },
   },
 
   data() {
     return {
       loading: true as boolean,
-      loaded: true as boolean,
-      index: 0 as number,
-      first: 0 as number,
-      size: 5 as number,
-      totalCount: 0 as number,
-      popularSort: true as boolean,
       allEmissions: [] as Array<Emission>,
-      direction: 1 as number,
-      alignLeft: false as boolean,
       rubriques: undefined as Array<Rubrique> | undefined,
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
     };
   },
 
   computed: {
-    emissions(): Array<Emission> {
-      return this.allEmissions.slice(this.index, this.index + this.size);
-    },
-    overflowScroll(): boolean {
-      return state.emissionsPage.overflowScroll as boolean;
-    },
-    previousAvailable(): boolean {
-      return this.index > 0;
-    },
-    nextAvailable(): boolean {
-      return this.index + this.size < this.totalCount;
-    },
     displayRubriquage(): number | undefined {
       return state.emissionsPage.rubriquage;
     },
-    transitionName(): string {
-      return this.direction > 0 ? "out-left" : "out-right";
-    },
-    isInlineAnimation(): boolean {
-      return state.generalParameters.isInlineAnimation as boolean;
-    },
-  },
-
-  watch: {
-    sizeItem() {
-      this.handleResize();
-    },
-    windowWidth() {
-      if (!this.$el) return;
-      if (this.overflowScroll) {
-        this.size = 20;
-        return;
-      }
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
-      const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
-      this.size = Math.floor(width / sixteen);
-    },
   },
 
   mounted() {
@@ -165,8 +89,8 @@ export default defineComponent({
           0,
           "emission/search",
           {
-            first: this.first,
-            size: this.size + 1,
+            first: 0,
+            size: 10,
             organisationId: this.organisationId,
             rubriqueId: this.rubriqueId ? [this.rubriqueId] : [],
             rubriquageId: this.rubriquageId ? [this.rubriquageId] : [],
@@ -174,52 +98,19 @@ export default defineComponent({
           },
           true,
         );
-
+        this.allEmissions = this.allEmissions.concat(
+          data.result.filter((em: Emission | null) => null !== em),
+        );
         this.loading = false;
-        this.loaded = true;
-        this.totalCount = data.count;
-        if (this.allEmissions.length + data.result.length < this.totalCount) {
-          const nexEl = data.result.pop() as Emission;
-          this.preloadImage(nexEl.imageUrl ? nexEl.imageUrl : "");
-        }
-        this.allEmissions = this.allEmissions.concat(data.result);
-        if (this.allEmissions.length <= 3) {
-          this.alignLeft = true;
-        }
-        this.first += this.size;
       } catch (error) {
         this.handle403(error as AxiosError);
       }
     },
-    displayPrevious(): void {
-      this.direction = -1;
-      if (this.previousAvailable) {
-        this.index -= 1;
-      }
-    },
-    displayNext(): void {
-      this.direction = 1;
-      if (!this.nextAvailable) return;
-      if (
-        this.first - (this.index + this.size) < 2 &&
-        this.allEmissions.length < this.totalCount
-      ) {
-        this.fetchNext();
-      }
-      this.index += 1;
-    },
+
     reset(): void {
       this.loading = true;
-      this.loaded = true;
-      this.index = 0;
-      this.first = 0;
-      this.totalCount = 0;
       this.allEmissions.length = 0;
     },
-    preloadImage(url: string): void {
-      const img = new Image();
-      img.src = this.proxyImageUrl(url, "330");
-    },
     async fetchRubriques(): Promise<void> {
       const data = await octopusApi.fetchData<Rubriquage>(
         0,

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

@@ -34,6 +34,7 @@
             :emission="e"
             class="m-3 flex-shrink-0"
             :class="mainRubriquage(e)"
+            :nb-podcasts="nbPodcasts"
             :rubrique-name="rubriquesId(e)"
           />
         </template>
@@ -85,6 +86,7 @@ export default defineComponent({
     rubriqueId: { default: () => [], type: Array as () => Array<number> },
     rubriquageId: { default: () => [], type: Array as () => Array<number> },
     noRubriquageId: { default: () => [], type: Array as () => Array<number> },
+    nbPodcasts: { default: undefined, type: Number },
   },
 
   data() {

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

@@ -24,21 +24,8 @@
           {{ emission.name }}
         </div>
       </div>
-      <div class="d-flex flex-column p-2">
-        <div class="fw-bold text-uppercase text-truncate">
-          {{ emission.name }}
-        </div>
-        <div
-          ref="descriptionEmissionContainer"
-          class="emission-description html-wysiwyg-content"
-        >
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            ref="descriptionEmission"
-            v-html="urlify(emission.description)"
-          />
-          <!-- eslint-enable -->
-        </div>
+      <div class="fw-bold text-uppercase text-truncate p-2">
+        {{ emission.name }}
       </div>
     </router-link>
     <div
@@ -66,22 +53,11 @@
               params: { podcastId: p.podcastId },
               query: { productor: filterOrgaId },
             }"
-            class="d-flex flex-column define-width text-dark"
+            class="d-flex flex-grow-1 align-items-center define-width text-dark"
           >
             <div class="fw-bold text-truncate">
               {{ p.title }}
             </div>
-            <div
-              :ref="'descriptionPodcastContainer' + p.podcastId"
-              class="emission-description html-wysiwyg-content"
-            >
-              <!-- eslint-disable vue/no-v-html -->
-              <div
-                :ref="'descriptionPodcast' + p.podcastId"
-                v-html="urlify(p.description)"
-              />
-              <!-- eslint-enable -->
-            </div>
           </router-link>
           <PodcastPlayBar :podcast-id="p.podcastId" :duration="p.duration" />
         </div>
@@ -180,18 +156,6 @@ export default defineComponent({
   created() {
     this.loadPodcasts();
   },
-  mounted() {
-    const emissionDesc = this.$refs.descriptionEmission as HTMLElement;
-    const emissionDescContainer = this.$refs
-      .descriptionEmissionContainer as HTMLElement;
-    if (
-      null !== emissionDesc &&
-      null !== emissionDescContainer &&
-      emissionDesc.clientHeight > emissionDescContainer.clientHeight
-    ) {
-      emissionDescContainer.classList.add("after-emission-description");
-    }
-  },
   methods: {
     ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
     play(podcast: Podcast): void {
@@ -224,29 +188,6 @@ export default defineComponent({
         this.activeEmission = false;
       }
       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] ?? null;
-          const podcastDescContainer =
-            (
-              this.$refs[
-                "descriptionPodcastContainer" + this.podcasts[index].podcastId
-              ] as Array<HTMLElement>
-            )?.[0] ?? null;
-          if (
-            null !== podcastDesc &&
-            null !== podcastDescContainer &&
-            podcastDesc.clientHeight > podcastDescContainer.clientHeight
-          ) {
-            podcastDescContainer.classList.add("after-emission-description");
-          }
-        }
-      });
     },
   },
 });
@@ -268,25 +209,6 @@ export default defineComponent({
   .emission-item-border-color {
     border-color: #ddd;
   }
-  .emission-description {
-    overflow: hidden;
-    margin-top: 0.5em;
-    word-break: break-word;
-    max-height: 3.5rem;
-    position: relative;
-    &.after-emission-description:after {
-      content: "...";
-      position: absolute;
-      padding-left: 1rem;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      font-size: 1rem;
-      font-weight: bolder;
-      text-align: center;
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
-    }
-  }
   .define-width {
     width: 9rem;
   }