@saooti/octopus-sdk 39.1.3-beta → 39.1.4-SNAPSHOT

package/index.ts

@@ -14,6 +14,7 @@ export const getCategory = () => import("./src/components/pages/CategoryPage.vue
 export const getRubrique = () => import("./src/components/pages/RubriquePage.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
 export const getRadio = () => import("./src/components/pages/RadioPage.vue");
+export const getVideo = () => import("./src/components/pages/VideoPage.vue");
 
 //Misc
 export const getAccordion = () => import("./src/components/misc/ClassicAccordion.vue");
@@ -33,6 +34,7 @@ export const getClassicModal = () => import("./src/components/misc/modal/Classic
 export const getClassicLazy = () => import("./src/components/misc/ClassicLazy.vue");
 
 
+
 //Display
 export const getCategoryChooser = () => import("./src/components/display/categories/CategoryChooser.vue");
 export const getCategoryList = () => import("./src/components/display/categories/CategoryList.vue");
@@ -49,7 +51,8 @@ export const getCommentList = () => import("./src/components/display/comments/Co
 export const getCommentInput = () => import("./src/components/display/comments/CommentInput.vue");
 export const getPodcastPlaylistInlineList = () => import("./src/components/display/playlist/PodcastPlaylistInlineList.vue");
 export const getLiveList = () => import("./src/components/display/live/LiveList.vue");
-
+export const getEmissionPresentationList = () => import("./src/components/display/emission/EmissionPresentationList.vue");
+export const getPodcastPlayButton = () => import("./src/components/display/podcasts/PodcastPlayButton.vue");
 
 //Radio
 export const getRadioCurrently = () => import("./src/components/display/live/RadioCurrently.vue");
@@ -76,6 +79,8 @@ export const getClassicMultiselect = () => import("./src/components/form/Classic
 export const getClassicInputText = () => import("./src/components/form/ClassicInputText.vue");
 export const getClassicEmojiPicker = () => import("./src/components/form/ClassicEmojiPicker.vue");
 export const getClassicContentEditable = () => import("./src/components/form/ClassicContentEditable.vue");
+export const getSwiperList = () => import("./src/components/display/list/SwiperList.vue");
+
 
 //mixins
 
@@ -87,10 +92,23 @@ import orgaFilter from "./src/components/mixins/organisationFilter.ts";
 import initSDK from "./src/components/mixins/init.ts";
 import tagOfMixins from "./src/components/mixins/tagOfMixins.ts";
 import resizePhone from "./src/components/mixins/resizePhone.ts";
-import commentWebsocket from "./src/websocket/commentWebsocket.ts";
+import debounce from "./src/components/mixins/debounce.ts";
+
+
+//helper
+import domHelper from "./src/helper/dom.ts";
+import durationHelper from "./src/helper/duration.ts";
+import stringHelper from "./src/helper/string.ts";
+
 
+//stores
+import {useVastStore} from "./src/stores/VastStore.ts";
+import {useSaveFetchStore} from "./src/stores/SaveFetchStore.ts";
+import {usePlayerStore} from "./src/stores/PlayerStore.ts";
+import {useGeneralStore} from "./src/stores/GeneralStore.ts";
+import {useFilterStore} from "./src/stores/FilterStore.ts";
+import {useCommentStore} from "./src/stores/CommentStore.ts";
 
-import TopBar from "./src/components/misc/TopBar.vue";
 
 export {
     selenium,
@@ -101,6 +119,14 @@ export {
     initSDK,
     tagOfMixins,
     resizePhone,
-    commentWebsocket,
-    TopBar
+    debounce,
+    useVastStore,
+    useSaveFetchStore,
+    usePlayerStore,
+    useGeneralStore,
+    useFilterStore,
+    useCommentStore,
+    domHelper,
+    durationHelper,
+    stringHelper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.1.3-beta",
+  "version": "39.1.4-SNAPSHOT",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -18,6 +18,7 @@
     "@popperjs/core": "^2.11.8",
     "@saooti/octopus-api": "^0.39.2",
     "@stomp/stompjs": "^7.0.0",
+    "@tiptap/extension-hard-break": "^2.8.0",
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/pm": "^2.4.0",

package/src/App.vue

@@ -21,8 +21,8 @@ import { Rubriquage } from "./stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "./stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "./stores/class/rubrique/rubrique";
 import initSDK from "./components/mixins/init";
-import { useFilterStore } from "@/stores/FilterStore";
-import { useGeneralStore } from "@/stores/GeneralStore";
+import { useFilterStore } from "./stores/FilterStore";
+import { useGeneralStore } from "./stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { Category } from "./stores/class/general/category";

package/src/assets/general.scss

@@ -73,6 +73,9 @@ body{
 	.really-light-primary-bg{
 		background-color: $primaryColorReallyTransparent !important;
 	}
+  .blue-bg{
+    background-color: $blue-octopus;
+  }
   .width-fit-content{
     width: fit-content !important;
   }
@@ -81,7 +84,7 @@ body{
   }
   .page-box{
     background-color: $octopus-background;
-    padding: 1rem 5rem 5rem 5rem;
+    padding: 1rem 3rem 3rem 3rem;
     flex-grow: 1;
     display: flex;
     flex-direction: column;

package/src/assets/videoPlayer.scss

@@ -0,0 +1,16 @@
+.octopus-app {
+  .video-responsive-wrapper {
+    position:relative;
+    padding-bottom:56.25%;
+    height:0;
+    width: 100%;
+    iframe, #video-element-hls {
+      position:absolute;
+      top:0;
+      left:0;
+      width:100% !important;
+      height:100%;
+      margin:0 !important;
+    }
+  }
+}

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

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { useGeneralStore } from "@/stores/GeneralStore";
+import { useGeneralStore } from "../../../stores/GeneralStore";
 import { mapState } from "pinia";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
 import { Category } from "@/stores/class/general/category";

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

@@ -65,7 +65,7 @@
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { useFilterStore } from "@/stores/FilterStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { state } from "../../../stores/ParamSdkStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";

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

@@ -43,8 +43,8 @@ import octopusApi from "@saooti/octopus-api";
 import { state } from "../../../stores/ParamSdkStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Category } from "@/stores/class/general/category";
-import { useFilterStore } from "@/stores/FilterStore";
-import { useGeneralStore } from "@/stores/GeneralStore";
+import { useFilterStore } from "../../../stores/FilterStore";
+import { useGeneralStore } from "../../../stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({

package/src/components/display/comments/CommentInput.vue

@@ -58,8 +58,8 @@ import { CommentCreate, CommentPodcast } from "@/stores/class/general/comment";
 import Constants from "../../../../public/config";
 import { mapState } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
-import { usePlayerStore } from "@/stores/PlayerStore";
+import { useCommentStore } from "../../../stores/CommentStore";
+import { usePlayerStore } from "../../../stores/PlayerStore";
 const CheckIdentityModal = defineAsyncComponent(
   () => import("./modal/CheckIdentityModal.vue"),
 );

package/src/components/display/comments/CommentName.vue

@@ -42,7 +42,7 @@ import Constants from "../../../../public/config";
 import { useAuthStore } from "@/stores/AuthStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../stores/CommentStore";
 export default defineComponent({
   name: "CommentName",
   emits: [],

package/src/components/display/comments/CommentPlayer.vue

@@ -35,10 +35,10 @@
 <script lang="ts">
 import { CommentPodcast } from "@/stores/class/general/comment";
 import selenium from "../../mixins/selenium";
-import { usePlayerStore } from "@/stores/PlayerStore";
+import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../stores/CommentStore";
 export default defineComponent({
   name: "CommentPlayer",
   mixins: [selenium],

package/src/components/display/comments/CommentSection.vue

@@ -30,7 +30,7 @@ import cookies from "../../mixins/cookies";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../stores/CommentStore";
 import {
   CommentMessage,
   CommentsConfig,

package/src/components/display/comments/item/CommentItem.vue

@@ -3,7 +3,7 @@
     class="d-flex flex-column flex-grow-1 w-100 really-light-secondary-bg"
     :class="isAnAnswer && !isFlatList ? 'my-1 p-0' : 'my-3 p-2'"
   >
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="d-flex flex-nowrap justify-content-between align-items-center">
       <CommentBasicView :comment="comment" :edit-right="editRight" />
       <CommentMoreActions
         v-model:comment="commentForVmodel"
@@ -89,7 +89,7 @@ import displayMethods from "../../../mixins/displayMethods";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "../../../../stores/class/general/podcast";
 import CommentBasicView from "./CommentBasicView.vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../../stores/CommentStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 import {
@@ -232,13 +232,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss">
-.octopus-app {
-  .answers-section {
-    .btn.btn-primary {
-      align-self: start !important;
-      margin: 0.5rem 0 0 0 !important;
-    }
-  }
-}
-</style>

package/src/components/display/comments/item/CommentMoreActions.vue

@@ -60,7 +60,7 @@ import CommentMoreActionsAdmin from "@/components/display/comments/item/CommentM
 import { useAuthStore } from "@/stores/AuthStore";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "@/stores/class/general/podcast";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../../stores/CommentStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { CommentsConfig } from "@/stores/class/config/commentsConfig";

package/src/components/display/comments/like/LikeSection.vue

@@ -26,7 +26,7 @@
 import { state } from "../../../../stores/ParamSdkStore";
 import { defineComponent, defineAsyncComponent } from "vue";
 import octopusApi from "@saooti/octopus-api";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../../stores/CommentStore";
 import { mapActions, mapState } from "pinia";
 import {
   CommentFeelings,

package/src/components/display/comments/modal/CheckIdentityModal.vue

@@ -25,7 +25,7 @@ import ClassicInputText from "../../../form/ClassicInputText.vue";
 import RecaptchaModal from "./RecaptchaModal.vue";
 import { mapActions } from "pinia";
 import { defineComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../../stores/CommentStore";
 export default defineComponent({
   name: "CheckIdentityModal",
   components: {

package/src/components/display/comments/modal/ReportAbuseModal.vue

@@ -39,7 +39,7 @@ import ClassicInputText from "../../../form/ClassicInputText.vue";
 import RecaptchaModal from "./RecaptchaModal.vue";
 import { mapActions, mapState } from "pinia";
 import { defineComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../../stores/CommentStore";
 import octopusApi from "@saooti/octopus-api";
 import {
   CommentAbuseInfo,

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

@@ -70,7 +70,7 @@ import { defineComponent, defineAsyncComponent } from "vue";
 import { FetchParam } from "@/stores/class/general/fetchParam";
 import { AxiosError } from "axios";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
-import { useFilterStore } from "@/stores/FilterStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState } from "pinia";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 const EmissionItem = defineAsyncComponent(() => import("./EmissionItem.vue"));

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

@@ -105,8 +105,8 @@ import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
 import imageProxy from "../../mixins/imageProxy";
 import displayMethods from "../../mixins/displayMethods";
-import { usePlayerStore } from "@/stores/PlayerStore";
-import { useFilterStore } from "@/stores/FilterStore";
+import { usePlayerStore } from "../../../stores/PlayerStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";

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

@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="emission-item-container emission-presentation-container mt-3"
+    :class="isVertical ? 'emission-vertical-item' : ''"
+  >
+    <router-link
+      :to="{
+        name: 'emission',
+        params: { emissionId: emission.emissionId },
+        query: { productor: filterOrgaId },
+      }"
+      :title="$t('Emission')"
+      class="d-flex-column flex-grow-1 text-dark"
+      :class="isVertical ? 'flex-column' : ''"
+    >
+      <img
+        v-lazy="proxyImageUrl(emission.imageUrl, isVertical ? '400' : '250')"
+        :width="isVertical ? '400' : '250'"
+        :height="isVertical ? '400' : '250'"
+        :class="isVertical ? 'img-box-bigger' : ''"
+        class="img-box"
+        :title="$t('Emission name image', { name: emission.name })"
+        :alt="$t('Emission name image', { name: emission.name })"
+      />
+      <div class="emission-item-text">
+        <div class="d-flex align-items-center emission-name">
+          {{ emission.name }}
+        </div>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { orgaComputed } from "../../mixins/orgaComputed";
+import { Emission } from "@/stores/class/general/emission";
+import imageProxy from "../../mixins/imageProxy";
+import displayMethods from "../../mixins/displayMethods";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "EmissionItem",
+
+  mixins: [displayMethods, orgaComputed, imageProxy],
+
+  props: {
+    emission: { default: () => ({}), type: Object as () => Emission },
+    isVertical: { default: false, type: Boolean },
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app {
+  .emission-presentation-container {
+    @media (max-width: 960px) {
+      width: 250px !important;
+      margin-right: 0.5rem;
+    }
+  }
+  .emission-item-container.emission-vertical-item {
+    flex-grow: 0;
+    width: 400px;
+    flex-shrink: 0;
+  }
+  .img-box-bigger {
+    width: 400px;
+    height: 400px;
+  }
+}
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+  <div class="d-flex flex-column p-3">
+    <h2 class="mb-3">{{ title }}</h2>
+    <ClassicLoading
+      :loading-text="loading ? $t('Loading emissions ...') : undefined"
+      :error-text="error ? $t(`Error`) : undefined"
+    />
+    <template v-if="!loading && !error">
+      <div class="d-flex flex-nowrap align-items-stretch overflow-phone-auto">
+        <EmissionItemPresentation
+          v-if="allEmissions[0]"
+          :class="!isPhone ? 'me-3' : ''"
+          :emission="allEmissions[0]"
+          :is-vertical="!isPhone"
+        />
+        <div
+          v-if="allEmissions.length > 1"
+          class="emission-column emission-column-margin d-flex-row flex-nowrap"
+        >
+          <EmissionItemPresentation
+            v-if="allEmissions[1]"
+            :emission="allEmissions[1]"
+          />
+          <EmissionItemPresentation
+            v-if="allEmissions[2]"
+            :emission="allEmissions[2]"
+          />
+        </div>
+        <div
+          v-if="allEmissions.length > 3"
+          class="emission-column d-flex-row flex-nowrap show-emission-column"
+        >
+          <EmissionItemPresentation
+            v-if="allEmissions[3]"
+            :emission="allEmissions[3]"
+          />
+          <EmissionItemPresentation
+            v-if="allEmissions[4]"
+            :emission="allEmissions[4]"
+          />
+        </div>
+      </div>
+      <router-link
+        v-if="buttonText && href"
+        :to="href"
+        class="btn btn-primary align-self-center width-fit-content m-4"
+      >
+        {{ buttonText }}
+      </router-link>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from "@saooti/octopus-api";
+import { handle403 } from "../../mixins/handle403";
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import { Emission } from "@/stores/class/general/emission";
+import { defineAsyncComponent, defineComponent } from "vue";
+import { AxiosError } from "axios";
+import imageProxy from "../../mixins/imageProxy";
+import resizePhone from "../../mixins/resizePhone";
+const EmissionItemPresentation = defineAsyncComponent(
+  () => import("./EmissionPresentationItem.vue"),
+);
+export default defineComponent({
+  name: "EmissionPresentationList",
+  components: {
+    ClassicLoading,
+    EmissionItemPresentation,
+  },
+
+  mixins: [handle403, imageProxy, resizePhone],
+
+  props: {
+    organisationId: { default: undefined, type: String },
+    title: { default: "", type: String },
+    href: { default: undefined, type: String },
+    buttonText: { default: undefined, type: String },
+  },
+  data() {
+    return {
+      loading: true as boolean,
+      error: false as boolean,
+      allEmissions: [] as Array<Emission>,
+      isPhone: false as boolean,
+      windowWidth: 0 as number,
+    };
+  },
+
+  mounted() {
+    this.fetchNext();
+  },
+  methods: {
+    async fetchNext(): Promise<void> {
+      this.loading = true;
+      try {
+        const data = await octopusApi.fetchDataWithParams<{
+          count: number;
+          result: Array<Emission>;
+          sort: string;
+        }>(
+          0,
+          "emission/search",
+          {
+            first: 0,
+            size: 5,
+            organisationId: this.organisationId,
+            sort: "LAST_PODCAST_DESC",
+          },
+          true,
+        );
+        this.allEmissions = this.allEmissions.concat(
+          data.result.filter((em: Emission | null) => null !== em),
+        );
+        this.loading = false;
+      } catch (error) {
+        this.handle403(error as AxiosError);
+        this.error = true;
+      }
+      this.loading = false;
+    },
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app {
+  .overflow-phone-auto {
+    @media (max-width: 960px) {
+      overflow-y: auto;
+    }
+  }
+  .emission-column {
+    flex-shrink: 0;
+    width: calc((100% - 420px) / 2);
+    @media (max-width: 1550px) {
+      width: calc((100% - 420px));
+    }
+    @media (max-width: 960px) {
+      width: auto;
+      flex-direction: row !important;
+    }
+  }
+  .emission-column-margin {
+    margin-right: 1rem;
+    @media (max-width: 960px) {
+      margin-right: 0;
+    }
+  }
+  .show-emission-column {
+    display: flex;
+    @media (max-width: 1550px) {
+      display: none !important;
+    }
+    @media (max-width: 960px) {
+      display: flex !important;
+    }
+  }
+}
+</style>

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

@@ -17,7 +17,7 @@
 <script lang="ts">
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import CategoryChooser from "../categories/CategoryChooser.vue";
-import { useFilterStore } from "@/stores/FilterStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({

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

@@ -46,7 +46,7 @@ import ClassicSearch from "../../form/ClassicSearch.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import orgaFilter from "../../mixins/organisationFilter";
 import { Organisation } from "@/stores/class/general/organisation";
-import { useFilterStore } from "@/stores/FilterStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const OrganisationChooser = defineAsyncComponent(

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

@@ -39,7 +39,7 @@ import octopusApi from "@saooti/octopus-api";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
-import { useFilterStore } from "@/stores/FilterStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const RubriqueChoice = defineAsyncComponent(

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

@@ -56,7 +56,7 @@ import PaginateParams from "./PaginateParams.vue";
 import PaginateSection from "./PaginateSection.vue";
 import resizePhone from "../../mixins/resizePhone";
 import { defineComponent } from "vue";
-import { usePlayerStore } from "@/stores/PlayerStore";
+import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState } from "pinia";
 export default defineComponent({
   name: "ListPaginate",

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

@@ -5,7 +5,7 @@
         :key="manualReload"
         :slides-per-view="numberItem"
         :space-between="0"
-        :loop="isLoop"
+        :loop="true"
         :slides-offset-before="offsetSwiper"
         :slides-offset-after="offsetSwiper"
         :navigation="true"
@@ -73,9 +73,9 @@ export default defineComponent({
         ? state.generalParameters.podcastItem
         : 13.5;
     },
-    isLoop(): boolean {
+    /* isLoop(): boolean {
       return this.listObject.length >= this.numberItem;
-    },
+    }, */
     itemRecalculizedSize(): number {
       return this.widthSwiperUsable / this.numberItem;
     },
@@ -146,6 +146,7 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 }
+
 .swiper-button-next,
 .swiper-button-prev {
   color: $octopus-primary-color !important;
@@ -160,7 +161,7 @@ export default defineComponent({
   display: flex;
 }
 .swiper-slide {
-  display: flex;
+  display: flex !important;
   align-items: center;
   justify-content: center;
 }