@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative w-100">
+  <div ref="root" class="position-relative w-100">
     <template v-if="!isPhone">
       <swiper
         :key="manualReload"
@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import domHelper from "../../../helper/domHelper";
 import { state } from "../../../stores/ParamSdkStore";
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -34,114 +34,102 @@ import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 import {useResizePhone} from "../../composable/useResizePhone";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "SwiperList",
-
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-
-  props: {
-    listObject: { default: () => [], type: Array as () => Array<unknown> },
-    sizeItemOverload: { default: undefined, type: Number },
-  },
-  setup(){
-    const { isPhone, windowWidth } = useResizePhone();
-    return { isPhone, windowWidth }
-  },
-
-  data() {
-    return {
-      manualReload: 0 as number,
-      modules: [Navigation],
-      numberItem: 5 as number,
-      offsetSwiper: 40 as number,
-      widthSwiperUsable: 0 as number,
-      itemSizeWithoutRecalculed: 0 as number,
-      composableInit: false as boolean,
-    };
-  },
-  computed: {
-    sizeItem(): number {
-      if (this.sizeItemOverload) {
-        return this.sizeItemOverload;
-      }
-      if (this.windowWidth <= 450) {
-        return 12.5;
-      }
-      return state.generalParameters.podcastItem
-        ? state.generalParameters.podcastItem
-        : 13.5;
-    },
-    /* isLoop(): boolean {
-      return this.listObject.length >= this.numberItem;
-    }, */
-    itemRecalculizedSize(): number {
-      return this.widthSwiperUsable / this.numberItem;
-    },
-  },
-  watch: {
-    windowWidth() {
-      if (!this.$el) return;
-      this.widthSwiperUsable =
-        (this.$el as HTMLElement).offsetWidth - this.offsetSwiper * 2;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
-      this.numberItem = Math.max(
-        1,
-        Math.floor(this.widthSwiperUsable / sixteen),
-      );
-      this.itemSizeWithoutRecalculed =
-        (this.$el as HTMLElement).offsetWidth / this.numberItem;
-    },
-    listObject: {
-      deep: true,
-      handler() {
-        this.manualReload += 1;
-      },
-    },
-  },
-  mounted(){
-    this.$nextTick(() => {
-      this.composableInit = true;
-    });
-  },
-
-  methods: {
-    slidesUpdated() {
-      if (!this.$el) return;
-      const slides = this.$el.getElementsByClassName("swiper-slide");
-      for (const slide of slides) {
-        slide.style.width = this.itemRecalculizedSize + "px";
-      }
-    },
-    slideChange() {
-      if (!this.$el) return;
-      const wrapper = this.$el.getElementsByClassName("swiper-wrapper")[0];
-      if (wrapper.style.transform.includes("translate3d(40px")) {
-        return;
-      }
-      const matches = /^^translate3d\((-*\d+\.*\d*)px/.exec(
-        wrapper.style.transform,
-      );
-      if (!matches || matches.length <= 1) {
-        return;
-      }
-      const transformPixel = parseFloat(matches[1]) - this.offsetSwiper;
-      const nbTransformItems = Math.round(
-        transformPixel / this.itemSizeWithoutRecalculed,
-      );
-      wrapper.style.transform =
-        "translate3d(" +
-        (nbTransformItems * this.itemRecalculizedSize + this.offsetSwiper) +
-        "px, 0px, 0px)";
-    },
-    slidePrevButton() {
-      this.$el.querySelector(".swiper").swiper.slidePrev();
-    },
-  },
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+
+//Props 
+const props = defineProps({
+  listObject: { default: () => [], type: Array as () => Array<unknown> },
+  sizeItemOverload: { default: undefined, type: Number },
+})
+ 
+//Data 
+const manualReload = ref(0);
+const modules = ref([Navigation]);
+const numberItem = ref(5);
+const offsetSwiper = ref(40);
+const widthSwiperUsable = ref(0);
+const itemSizeWithoutRecalculed = ref(0);
+const composableInit = ref(false);
+const rootRef = useTemplateRef('root');
+
+
+//Composables
+const { isPhone, windowWidth } = useResizePhone();
+
+
+//Computed
+const sizeItem = computed(() => {
+  if (props.sizeItemOverload) {
+    return props.sizeItemOverload;
+  }
+  if (windowWidth.value <= 450) {
+    return 12.5;
+  }
+  return state.generalParameters.podcastItem
+    ? state.generalParameters.podcastItem
+    : 13.5;
 });
+const itemRecalculizedSize = computed(() => widthSwiperUsable.value / numberItem.value);
+
+
+//Watch
+watch(windowWidth, () => onWindowResize());
+watch(()=>props.listObject, () => {
+  manualReload.value += 1;
+}, {deep:true});
+
+
+onMounted(()=>{
+  nextTick(() => {
+    onWindowResize();
+    composableInit.value = true;
+  });
+})
+
+
+//Methods
+function onWindowResize(){
+  const el = rootRef?.value as HTMLElement;
+  if (!el) return;
+  widthSwiperUsable.value =el.offsetWidth - offsetSwiper.value * 2;
+  const sixteen = domHelper.convertRemToPixels(sizeItem.value + 0.5);
+  numberItem.value = Math.max(
+    1,
+    Math.floor(widthSwiperUsable.value / sixteen),
+  );
+  itemSizeWithoutRecalculed.value =el.offsetWidth / numberItem.value;
+}
+function slidesUpdated() {
+  const el = rootRef?.value as HTMLElement;
+  if (!el) return;
+  const slides = el.getElementsByClassName("swiper-slide") as Array<HTMLElement>;
+  for (const slide of slides) {
+    slide.style.width = itemRecalculizedSize.value + "px";
+  }
+}
+function slideChange() {
+  const el = rootRef?.value as HTMLElement;
+  if (!el) return;
+  const wrapper = el.getElementsByClassName("swiper-wrapper")[0] as HTMLElement;
+  if (wrapper.style.transform.includes("translate3d(40px")) {
+    return;
+  }
+  const matches = /^^translate3d\((-*\d+\.*\d*)px/.exec(
+    wrapper.style.transform,
+  );
+  if (!matches || matches.length <= 1) {
+    return;
+  }
+  const transformPixel = parseFloat(matches[1]) - offsetSwiper.value;
+  const nbTransformItems = Math.round(
+    transformPixel / itemSizeWithoutRecalculed.value,
+  );
+  wrapper.style.transform =
+    "translate3d(" +
+    (nbTransformItems * itemRecalculizedSize.value + offsetSwiper.value) +
+    "px, 0px, 0px)";
+}
+
 </script>
 <style lang="scss">
 

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

@@ -1,21 +1,27 @@
 <template>
   <div class="d-flex flex-column align-items-center bg-warning p-3 mb-3">
-    <div>{{ $t("This live will start") }}</div>
+    <div>{{ t("This live will start") }}</div>
     <div v-if="countdownTimer">
       {{
-        $t("In days hours minutes seconds",countdownValues)
+        t("In days hours minutes seconds",countdownValues)
       }}
     </div>
     <div v-else>
-      {{ $t("In a moment") }}
+      {{ t("In a moment") }}
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-  import {useCountdown} from "../../composable/podcasts/useCountdown";
-  const props = defineProps({
-    timeRemaining:{ default: undefined, type: Number },
-  })
-  const { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import {useCountdown} from "../../composable/podcasts/useCountdown";
+
+//Props 
+const props = defineProps({
+  timeRemaining:{ default: undefined, type: Number },
+})
+
+//Composables
+const { t } = useI18n();
+const { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);
 </script>

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

@@ -9,15 +9,15 @@
     </div>
     <div class="thought">
       <template v-if="!props.overrideText">
-        {{ $t("This live will start") }}
+        {{ t("This live will start") }}
         <span class="text-lowercase">
           <template v-if="countdownTimer">
             {{
-              $t("In days hours minutes seconds", countdownValues)
+              t("In days hours minutes seconds", countdownValues)
             }}
           </template>
           <template v-else>
-            {{ $t("In a moment") }}
+            {{ t("In a moment") }}
           </template>
         </span>
       </template>
@@ -27,13 +27,19 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-  import {useCountdown} from "../../composable/podcasts/useCountdown";
-  const props = defineProps({
-    timeRemaining:{ default: undefined, type: Number },
-    overrideText: { default: undefined, type: String },
-  })
-  const { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import {useCountdown} from "../../composable/podcasts/useCountdown";
+
+//Props 
+const props = defineProps({
+  timeRemaining:{ default: undefined, type: Number },
+  overrideText: { default: undefined, type: String },
+})
+
+//Composables
+const { t } = useI18n();
+const { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);
 </script>
 
 <style lang="scss">

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

@@ -1,7 +1,7 @@
 <template>
   <div v-if="notEmpty">
     <h3 class="mb-0 mt-3">
-      {{ $t("All live emission button") }}
+      {{ t("All live emission button") }}
     </h3>
     <ListPaginate
       id="liveListPaginate"
@@ -23,117 +23,109 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import classicApi from "../../../api/classicApi";
 import PodcastItem from "../podcasts/PodcastItem.vue";
 import { Podcast, emptyPodcastData } from "@/stores/class/general/podcast";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, Ref, ref, watch } from "vue";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  name: "LiveHorizontalList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    PodcastItem,
-    ListPaginate,
-  },
 
-  props: {
-    first: { default: 0, type: Number },
-    size: { default: 30, type: Number },
-    emissionId: { default: undefined, type: Number },
-  },
+//Props 
+const props = defineProps({
+  first: { default: 0, type: Number },
+  size: { default: 30, type: Number },
+  emissionId: { default: undefined, type: Number },
+})
 
-  data() {
-    return {
-      dfirst: this.first,
-      dsize: this.size,
-      totalCount: 0 as number,
-      lives: [] as Array<Podcast>,
-      notEmpty: false as boolean,
-      inFetching: false as boolean,
-      isMobile: false as boolean,
-    };
-  },
+//Data 
+const dfirst = ref(props.first);
+const dsize = ref(props.size);
+const totalCount = ref(0);
+const lives: Ref<Array<Podcast>> = ref([]);
+const notEmpty = ref(false);
+const inFetching = ref(false);
+const isMobile = ref(false);
 
-  computed: {
-    displayArray(): Array<Podcast> {
-      if (this.isMobile) {
-        return this.lives;
-      }
-      return this.lives.slice(
-        this.dfirst,
-        Math.min(this.dfirst + this.dsize, this.totalCount),
-      );
-    },
-  },
-  watch: {
-    dsize(): void {
-      this.reloadList();
-    },
-    dfirst(): void {
-      if (!this.lives[this.dfirst] || 0 === this.lives[this.dfirst].podcastId) {
-        this.fetchContent(false);
-      }
-    },
-  },
+//Composables
+const { t } = useI18n();
 
-  created() {
-    this.fetchContent(true);
-  },
-  methods: {
-    reloadList() {
-      this.dfirst = 0;
-      this.fetchContent(true);
-    },
-    async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
-      if (reset) {
-        this.notEmpty = false;
-      }
-      const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
-        api: 0,
-        path: "podcast/search",
-        parameters: {
-          first: this.dfirst,
-          size: this.dsize,
-          emissionId: this.emissionId,
-          sort: "DATE",
-          includeStatus: "READY_TO_RECORD",
-        },
-        specialTreatement: true,
-      });
-      this.afterFetching(reset, data);
-    },
-    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++
-        ) {
-          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.totalCount = data.count;
-      if (0 !== this.lives.length) {
-        this.notEmpty = true;
-      }
-      this.inFetching = false;
-    },
-  },
+//Computed
+const displayArray = computed(() => {
+  if (isMobile.value) {
+    return lives.value;
+  }
+  return lives.value.slice(
+    dfirst.value,
+    Math.min(dfirst.value + dsize.value, totalCount.value),
+  );
 });
+
+
+//Watch
+watch(dsize, () => reloadList());
+watch(dfirst, () => {
+  if (!lives.value[dfirst.value] || 0 === lives.value[dfirst.value].podcastId) {
+    fetchContent(false);
+  }
+});
+
+onBeforeMount(()=>fetchContent(true))
+
+
+//Methods
+function reloadList() {
+  dfirst.value = 0;
+  fetchContent(true);
+}
+async function fetchContent(reset: boolean): Promise<void> {
+  inFetching.value = true;
+  if (reset) {
+    notEmpty.value = false;
+  }
+  const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
+    api: 0,
+    path: "podcast/search",
+    parameters: {
+      first: dfirst.value,
+      size: dsize.value,
+      emissionId: props.emissionId,
+      sort: "DATE",
+      includeStatus: "READY_TO_RECORD",
+    },
+    specialTreatement: true,
+  });
+  afterFetching(reset, data);
+}
+function afterFetching(
+  reset: boolean,
+  data: { count: number; result: Array<Podcast>; sort: string },
+): void {
+  if (reset) {
+    lives.value.length = 0;
+  }
+  if (dfirst.value > lives.value.length) {
+    for (
+      let i = lives.value.length - 1, len = dfirst.value + dsize.value;
+      i < len;
+      i++
+    ) {
+      lives.value.push(emptyPodcastData());
+    }
+  }
+  const responseLives = data.result.filter((l: Podcast | null) => {
+    return null !== l;
+  });
+  lives.value = lives.value
+    .slice(0, dfirst.value)
+    .concat(responseLives)
+    .concat(lives.value.slice(dfirst.value + dsize.value, lives.value.length));
+  totalCount.value = data.count;
+  if (0 !== lives.value.length) {
+    notEmpty.value = true;
+  }
+  inFetching.value = false;
+}
 </script>

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

@@ -6,89 +6,81 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../../api/classicApi";
 import PodcastItem from "../podcasts/PodcastItem.vue";
 import { Podcast } from "@/stores/class/general/podcast";
-import { defineComponent } from "vue";
+import {onBeforeMount, onUnmounted, ref, Ref } from "vue";
 import {
   Conference,
   ConferencePublicInfo,
 } from "@/stores/class/conference/conference";
-export default defineComponent({
-  name: "LiveItem",
 
-  components: {
-    PodcastItem,
-  },
-  props: {
-    fetchConference: { default: undefined, type: Object as () => Conference },
-  },
-  emits: ["deleteItem", "updateItem"],
+//Props 
+const props = defineProps({
+  fetchConference: { default: undefined, type: Object as () => Conference },
+})
+ 
+//Emits
+const emit = defineEmits(["deleteItem", "updateItem"]);
 
-  data() {
-    return {
-      live: undefined as Podcast | undefined,
-      watchInterval: undefined as ReturnType<typeof setInterval> | undefined,
-    };
-  },
+//Data 
+const live: Ref<Podcast | undefined> = ref(undefined);
+const watchInterval: Ref<ReturnType<typeof setInterval> | undefined> = ref(undefined);
 
-  created() {
-    this.initLiveItem();
-  },
-  unmounted() {
-    this.clearWatchStatus();
-  },
-  methods: {
-    clearWatchStatus() {
-      clearInterval(this.watchInterval as unknown as number);
-      this.watchInterval = undefined;
-    },
-    async initLiveItem(){
-      await this.fetchPodcastData();
-      this.watchInterval = setInterval(() => {
-        this.fetchStatus();
-      }, 5000);
-    },
-    async fetchPodcastData(): Promise<void> {
-      if (!this.fetchConference?.podcastId) return;
-      try {
-        this.live = await classicApi.fetchData<Podcast>({
-          api: 0,
-          path: "podcast/" + this.fetchConference.podcastId,
-        });
-      } catch {
-        this.$emit("deleteItem");
-        if (this.fetchConference.conferenceId) {
-          await classicApi.deleteData({
-            api: 9,
-            path: "conference/" + this.fetchConference.conferenceId,
-          });
-        }
-      }
-    },
-    async fetchStatus(): Promise<void> {
-      if (
-        !this.fetchConference ||
-        ("PLANNED" !== this.fetchConference.status &&
-          "PENDING" !== this.fetchConference.status &&
-          "RECORDING" !== this.fetchConference.status)
-      ) {
-        this.clearWatchStatus();
-        return;
-      }
-      const confInfo = await classicApi.fetchData<ConferencePublicInfo>({
+
+onBeforeMount(()=>initLiveItem());
+onUnmounted(()=>clearWatchStatus())
+
+
+//Methods
+function clearWatchStatus() {
+  clearInterval(watchInterval.value as unknown as number);
+  watchInterval.value = undefined;
+}
+async function initLiveItem(){
+  await fetchPodcastData();
+  watchInterval.value = setInterval(() => {
+    fetchStatus();
+  }, 5000);
+}
+async function fetchPodcastData(): Promise<void> {
+  if (!props.fetchConference?.podcastId) return;
+  try {
+    live.value = await classicApi.fetchData<Podcast>({
+      api: 0,
+      path: "podcast/" + props.fetchConference.podcastId,
+    });
+  } catch {
+    emit("deleteItem");
+    if (props.fetchConference.conferenceId) {
+      await classicApi.deleteData({
         api: 9,
-        path: "conference/info/" + this.fetchConference.conferenceId,
+        path: "conference/" + props.fetchConference.conferenceId,
       });
-      const newStatus = confInfo.status;
-      if (newStatus !== this.fetchConference.status) {
-        this.$emit("updateItem", {
-          ...this.fetchConference,
-          ...{ status: newStatus },
-        });
-      }
-    },
-  },
-});
+    }
+  }
+}
+async function fetchStatus(): Promise<void> {
+  if (
+    !props.fetchConference ||
+    ("PLANNED" !== props.fetchConference.status &&
+      "PENDING" !== props.fetchConference.status &&
+      "RECORDING" !== props.fetchConference.status)
+  ) {
+    clearWatchStatus();
+    return;
+  }
+  const confInfo = await classicApi.fetchData<ConferencePublicInfo>({
+    api: 9,
+    path: "conference/info/" + props.fetchConference.conferenceId,
+  });
+  const newStatus = confInfo.status;
+  if (newStatus !== props.fetchConference.status) {
+    emit("updateItem", {
+      ...props.fetchConference,
+      ...{ status: newStatus },
+    });
+  }
+}
 </script>