@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -1,12 +1,12 @@
 <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>
+      <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))"
+        @change="$emit('update:rowsPerPage', parseInt($event.target.value, 10))"
       >
         <option
           v-for="option in optionsRowsPerPage"
@@ -20,47 +20,46 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: "Paginate",
+  name: "PaginateParams",
 
-	props: {
-		rowsPerPage:{ default:0, type:Number}
+  props: {
+    rowsPerPage: { default: 0, type: Number },
   },
 
-	emits:['update:rowsPerPage'],
+  emits: ["update:rowsPerPage"],
 
   data() {
     return {
-			optionsRowsPerPage: [10, 20, 30, 40, 50, 60] as Array<number>,
-		};
+      optionsRowsPerPage: [10, 20, 30, 40, 50, 60] as Array<number>,
+    };
   },
-  created(){
-		this.initRowsPerPage();
-	},
- 
-  methods:{
-     initRowsPerPage(){
-      if(this.optionsRowsPerPage.includes(this.rowsPerPage)){
+  created() {
+    this.initRowsPerPage();
+  },
+
+  methods: {
+    initRowsPerPage() {
+      if (this.optionsRowsPerPage.includes(this.rowsPerPage)) {
         return;
       }
       this.optionsRowsPerPage.push(this.rowsPerPage);
-      this.optionsRowsPerPage.sort((a,b)=>a-b);
+      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;
-	}
+@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>
+</style>

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

@@ -0,0 +1,210 @@
+<template>
+  <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"
+      >
+        <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>
+      <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: "PaginateSection",
+
+  props: {
+    totalCount: { default: 0, type: Number },
+    first: { default: 0, type: Number },
+    rowsPerPage: { default: 0, type: Number },
+    rangeSize: { default: 1, type: 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",
+        },
+        {
+          title: this.$t("Go to previous page"),
+          disabled: 0 === this.first,
+          action: () => {
+            this.changeFirst(this.first - this.rowsPerPage);
+          },
+          path: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z",
+        },
+      ];
+    },
+    buttonsRight() {
+      return [
+        {
+          title: this.$t("Go to next page"),
+          disabled: this.lastFirst === this.first,
+          action: () => {
+            this.changeFirst(this.first + this.rowsPerPage);
+          },
+          path: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z",
+        },
+        {
+          title: this.$t("Go to last page"),
+          disabled: this.lastFirst === this.first,
+          action: () => {
+            this.changeFirst(this.lastFirst);
+          },
+          path: "M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z",
+        },
+      ];
+    },
+    page() {
+      return Math.floor(this.first / this.rowsPerPage);
+    },
+    totalPage() {
+      return Math.ceil(this.totalCount / this.rowsPerPage);
+    },
+    pagination(): (number | null)[] {
+      if (-1 === this.rangeSize) {
+        return [];
+      }
+      const minPaginationElems = 5 + this.rangeSize * 2;
+      let rangeStart =
+        this.totalPage <= minPaginationElems
+          ? 1
+          : this.page + 1 - this.rangeSize;
+      let rangeEnd =
+        this.totalPage <= minPaginationElems
+          ? this.totalPage
+          : this.page + 1 + this.rangeSize;
+      rangeEnd = rangeEnd > this.totalPage ? this.totalPage : rangeEnd;
+      rangeStart = rangeStart < 1 ? 1 : rangeStart;
+      if (this.totalPage > minPaginationElems) {
+        return this.getPaginationArrayWithEllipsis(
+          rangeStart,
+          rangeEnd,
+          minPaginationElems,
+        );
+      }
+      const res = [];
+      for (let i = rangeStart; i <= rangeEnd; i++) {
+        res.push(i);
+      }
+      return res;
+    },
+    lastFirst(): number {
+      return (this.totalPage - 1) * this.rowsPerPage;
+    },
+  },
+
+  methods: {
+    getPaginationArrayWithEllipsis(
+      rangeStart: number,
+      rangeEnd: number,
+      minPaginationElems: number,
+    ) {
+      const res = [];
+      const isStartBoundaryReached = rangeStart - 1 < 3;
+      const isEndBoundaryReached = this.totalPage - rangeEnd < 3;
+      if (isStartBoundaryReached) {
+        rangeEnd = minPaginationElems - 2;
+        for (let i = 1; i < rangeStart; i++) {
+          res.push(i);
+        }
+      } else {
+        res.push(1);
+        res.push(null);
+      }
+      if (isEndBoundaryReached) {
+        rangeStart = this.totalPage - (minPaginationElems - 3);
+        for (let i = rangeStart; i <= this.totalPage; i++) {
+          res.push(i);
+        }
+      } else {
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+          res.push(i);
+        }
+        res.push(null);
+        res.push(this.totalPage);
+      }
+      return res;
+    },
+    changeFirst(newFirst: number) {
+      this.$emit("update:first", newFirst);
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/_variables.scss";
+.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 {
+      background: $primaryColorMoreTransparent;
+    }
+  }
+}
+</style>

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

@@ -2,67 +2,62 @@
   <swiper
     :slides-per-view="numberItem"
     :space-between="0"
-    :loop="listObject.length>=numberItem"
+    :loop="listObject.length >= numberItem"
     :navigation="true"
     :modules="modules"
   >
-    <swiper-slide
-      v-for="(obj, index) in listObject"
-      :key="obj"
-    >
-      <slot
-        name="octopusSlide"
-        :option="obj"
-        :index="index"
-      />
+    <swiper-slide v-for="(obj, index) in listObject" :key="obj">
+      <slot name="octopusSlide" :option="obj" :index="index" />
     </swiper-slide>
   </swiper>
 </template>
 
 <script lang="ts">
-import domHelper from '../../../helper/dom';
-import { state } from '../../../stores/ParamSdkStore';
+import domHelper from "../../../helper/dom";
+import { state } from "../../../stores/ParamSdkStore";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Navigation } from "swiper";
+import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'SwiperList',
-  
+  name: "SwiperList",
+
   components: {
     Swiper,
     SwiperSlide,
   },
 
   props: {
-    listObject: { default: ()=>[], type: Array as ()=> Array<unknown>},
-    sizeItemOverload:{default: undefined, type: Number}
+    listObject: { default: () => [], type: Array as () => Array<unknown> },
+    sizeItemOverload: { default: undefined, type: Number },
   },
 
   data() {
     return {
       modules: [Navigation],
-      numberItem: 5 as number
+      numberItem: 5 as number,
     };
   },
   computed: {
     sizeItem(): number {
-      if(this.sizeItemOverload){
+      if (this.sizeItemOverload) {
         return this.sizeItemOverload;
       }
       if (window.innerWidth <= 450) {
         return 12.5;
       }
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13.5;
+      return state.generalParameters.podcastItem
+        ? state.generalParameters.podcastItem
+        : 13.5;
     },
   },
-  
+
   created() {
-    window.addEventListener('resize', this.handleResize);
+    window.addEventListener("resize", this.handleResize);
   },
   unmounted() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
   },
 
   mounted() {
@@ -72,29 +67,30 @@ export default defineComponent({
     handleResize(): void {
       if (!this.$el) return;
       const width = (this.$el as HTMLElement).offsetWidth - 95;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem+ 0.5);
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
       this.numberItem = Math.max(1, Math.floor(width / sixteen));
     },
   },
-})
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
+@import "@scss/_variables.scss";
 .swiper {
   width: 100%;
   height: 100%;
 }
-.swiper-button-next, .swiper-button-prev{
+.swiper-button-next,
+.swiper-button-prev {
   color: $octopus-primary-color !important;
   height: 100%;
   top: 0;
   bottom: 0;
   margin: 0;
 }
-.swiper-button-next{
+.swiper-button-next {
   right: 0;
 }
-.swiper-button-prev{
+.swiper-button-prev {
   left: 0;
 }
 /* .swiper-slide-active{
@@ -106,7 +102,7 @@ export default defineComponent({
 .swiper-slide-next{
   padding-right:27px;
 } */
-.swiper-button-lock{
+.swiper-button-lock {
   display: flex;
 }
 .swiper-slide {
@@ -114,4 +110,4 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>

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

@@ -1,11 +1,9 @@
 <template>
   <div class="d-flex flex-column align-items-center text-white">
-    <h3>{{ $t('This live will start') }}</h3>
-    <h3
-      v-if="countdownTimer"
-    >
+    <h3>{{ $t("This live will start") }}</h3>
+    <h3 v-if="countdownTimer">
       {{
-        $t('In days hours minutes seconds', {
+        $t("In days hours minutes seconds", {
           days: pad(days),
           hours: pad(hours),
           minutes: pad(minutes),
@@ -14,21 +12,21 @@
       }}
     </h3>
     <h3 v-else>
-      {{ $t('In a moment') }}
+      {{ $t("In a moment") }}
     </h3>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 export default defineComponent({
   props: {
-    timeRemaining: { default: undefined, type: Number},
+    timeRemaining: { default: undefined, type: Number },
   },
   data() {
     return {
       seconds: 0 as number,
-      countdownTimer: undefined as  ReturnType<typeof setTimeout>|undefined,
+      countdownTimer: undefined as ReturnType<typeof setTimeout> | undefined,
       days: 0 as number,
       hours: 0 as number,
       minutes: 0 as number,
@@ -44,7 +42,7 @@ export default defineComponent({
     }, 1000);
   },
   unmounted() {
-    clearInterval((this.countdownTimer as unknown as number));
+    clearInterval(this.countdownTimer as unknown as number);
   },
 
   methods: {
@@ -56,15 +54,15 @@ export default defineComponent({
       this.minutes = Math.floor(minutesLeft / 60);
       this.remainingSeconds = this.seconds % 60;
       if (0 === this.seconds) {
-        clearInterval((this.countdownTimer as unknown as number));
+        clearInterval(this.countdownTimer as unknown as number);
         this.countdownTimer = undefined;
       } else {
         this.seconds--;
       }
     },
     pad(n: number): string {
-      return n < 10 ? '0' + n : n.toString();
+      return n < 10 ? "0" + n : n.toString();
     },
   },
-})
-</script>
+});
+</script>

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

@@ -1,10 +1,7 @@
 <template>
-  <div
-    v-if="notEmpty"
-    class="py-3"
-  >
+  <div v-if="notEmpty" class="py-3">
     <h2 class="mb-0 mt-3">
-      {{ $t('All live emission button') }}
+      {{ $t("All live emission button") }}
     </h2>
     <ListPaginate
       id="liveListPaginate"
@@ -15,17 +12,9 @@
       :loading="false"
     >
       <template #list>
-        <div
-          class="podcast-list"
-        >
-          <template
-            v-for="p in displayArray"
-            :key="p.podcastId"
-          >
-            <PodcastItem
-              v-if="0!==p.podcastId"
-              :podcast="p"
-            />
+        <div class="podcast-list">
+          <template v-for="p in displayArray" :key="p.podcastId">
+            <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
           </template>
         </div>
       </template>
@@ -34,23 +23,23 @@
 </template>
 
 <script lang="ts">
-import ListPaginate from '../list/ListPaginate.vue';
-import octopusApi from '@saooti/octopus-api';
-import PodcastItem from '../podcasts/PodcastItem.vue';
-import { Podcast, emptyPodcastData } from '@/stores/class/general/podcast';
-import { defineComponent } from 'vue'
+import ListPaginate from "../list/ListPaginate.vue";
+import octopusApi from "@saooti/octopus-api";
+import PodcastItem from "../podcasts/PodcastItem.vue";
+import { Podcast, emptyPodcastData } from "@/stores/class/general/podcast";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'LiveHorizontalList',
+  name: "LiveHorizontalList",
 
   components: {
     PodcastItem,
-    ListPaginate
+    ListPaginate,
   },
 
   props: {
     first: { default: 0, type: Number },
     size: { default: 30, type: Number },
-    emissionId: { default: undefined, type: Number},
+    emissionId: { default: undefined, type: Number },
   },
 
   data() {
@@ -65,31 +54,33 @@ export default defineComponent({
     };
   },
 
- 
   computed: {
-    displayArray(): Array<Podcast>{
-      if(this.isMobile){
+    displayArray(): Array<Podcast> {
+      if (this.isMobile) {
         return this.lives;
       }
-      return this.lives.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
-		},
+      return this.lives.slice(
+        this.dfirst,
+        Math.min(this.dfirst + this.dsize, this.totalCount),
+      );
+    },
   },
   watch: {
-    dsize():void{
+    dsize(): void {
       this.reloadList();
-		},
-		dfirst(): void{
-			if(!this.lives[this.dfirst] || 0===this.lives[this.dfirst].podcastId){
-				this.fetchContent(false);
-			}
-		},
+    },
+    dfirst(): void {
+      if (!this.lives[this.dfirst] || 0 === this.lives[this.dfirst].podcastId) {
+        this.fetchContent(false);
+      }
+    },
   },
 
   created() {
     this.fetchContent(true);
   },
   methods: {
-    reloadList(){
+    reloadList() {
       this.dfirst = 0;
       this.fetchContent(true);
     },
@@ -98,28 +89,47 @@ export default defineComponent({
       if (reset) {
         this.notEmpty = false;
       }
-      const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
-        first: this.dfirst,
-        size: this.dsize,
-        emissionId: this.emissionId,
-        sort: 'DATE',
-        includeStatus:'READY_TO_RECORD'
-      }, true);
+      const data = await octopusApi.fetchDataWithParams<{
+        count: number;
+        result: Array<Podcast>;
+        sort: string;
+      }>(
+        0,
+        "podcast/search",
+        {
+          first: this.dfirst,
+          size: this.dsize,
+          emissionId: this.emissionId,
+          sort: "DATE",
+          includeStatus: "READY_TO_RECORD",
+        },
+        true,
+      );
       this.afterFetching(reset, data);
     },
-    afterFetching(reset: boolean, data: {count: number, result: Array<Podcast>, sort: string}): void {
+    afterFetching(
+      reset: boolean,
+      data: { count: number; result: Array<Podcast>; sort: string },
+    ): void {
       if (reset) {
         this.lives.length = 0;
       }
-      if(this.dfirst > this.lives.length){
-        for (let i = this.lives.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+      if (this.dfirst > this.lives.length) {
+        for (
+          let i = this.lives.length - 1, len = this.dfirst + this.dsize;
+          i < len;
+          i++
+        ) {
           this.lives.push(emptyPodcastData());
         }
       }
       const responseLives = data.result.filter((l: Podcast | null) => {
         return null !== l;
       });
-      this.lives = this.lives.slice(0, this.dfirst).concat(responseLives).concat(this.lives.slice(this.dfirst+this.dsize, this.lives.length));
+      this.lives = this.lives
+        .slice(0, this.dfirst)
+        .concat(responseLives)
+        .concat(this.lives.slice(this.dfirst + this.dsize, this.lives.length));
       this.totalCount = data.count;
       if (0 !== this.lives.length) {
         this.notEmpty = true;
@@ -127,5 +137,5 @@ export default defineComponent({
       this.inFetching = false;
     },
   },
-})
-</script>
+});
+</script>