@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/misc/player/radio/RadioHistory.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="playerRadioHistory.length" class="d-flex align-items-center mt-3">
     <div class="fw-bold me-3">
-      {{ $t("Previously") + ":" }}
+      {{ t("Previously") + ":" }}
     </div>
     <button
       v-if="indexStart !== 0"
@@ -13,8 +13,8 @@
     <div ref="historyListContainer" class="history-list-container">
       <div
         v-for="(pastItem, index) in playerRadioHistory"
+        :id="'history' + index"
         :key="pastItem.title"
-        :ref="'history' + index"
         class="d-flex flex-shrink-0"
       >
         <div class="d-flex flex-shrink-0 align-items-end">
@@ -35,111 +35,92 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ChevronLeftIcon from "vue-material-design-icons/ChevronLeft.vue";
 import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
-import { mapState } from "pinia";
 import dayjs from "dayjs";
 import radioHelper from "../../../../helper/radio/radioHelper";
-import { defineComponent } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { MediaRadio } from "@/stores/class/general/player";
-export default defineComponent({
-  name: "RadioHistory",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ChevronLeftIcon,
-    ChevronRightIcon,
-  },
-  emits: ["updateNotListenTime"],
-  data() {
-    return {
-      indexStart: 0 as number,
-      indexNotDisplay: 100 as number,
-    };
-  },
 
-  computed: {
-    ...mapState(usePlayerStore, ["playerRadio"]),
-    playerRadioHistory() {
-      return this.playerRadio?.history ?? [];
-    },
-  },
-  watch: {
-    playerRadioHistory: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.$nextTick(() => {
-          this.handleResize(0);
-        });
-      },
-    },
-  },
-  created() {
-    window.addEventListener("resize", () => {
-      this.handleResize(0);
-    });
-  },
-  unmounted() {
-    window.removeEventListener("resize", () => {
-      this.handleResize(0);
-    });
-  },
-  mounted() {
-    this.handleResize(0);
-  },
-  methods: {
-    displayEverythingAfterIndex(indexAsked: number) {
-      for (let index = 0; index < this.playerRadioHistory.length; index++) {
-        const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
-        if (!el) continue;
-        if (index < indexAsked && !el.classList.contains("hid")) {
-          el.classList.add("hid");
-          continue;
-        }
-        if (index >= indexAsked && el.classList.contains("hid")) {
-          el.classList.remove("hid");
-        }
-      }
-    },
-    handleResize(indexAsked: number): void {
-      const historyList = this.$refs.historyListContainer as HTMLElement;
-      if (null === historyList || !historyList) {
-        return;
-      }
-      this.indexStart = indexAsked;
-      this.indexNotDisplay = this.playerRadioHistory.length;
-      this.displayEverythingAfterIndex(indexAsked);
-      for (
-        let index = this.indexStart + 1;
-        index < this.playerRadioHistory.length;
-        index++
-      ) {
-        const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
-        if (!el) continue;
-        if (index > this.indexNotDisplay && !el.classList.contains("hid")) {
-          el.classList.add("hid");
-          continue;
-        }
-        const parent = el.parentElement;
-        if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth) {
-          this.indexNotDisplay = index;
-          el.classList.add("hid");
-        }
-      }
-    },
-    displayTimeItem(item: MediaRadio): string {
-      return dayjs(item.startDate).format("HH:mm");
-    },
-    displayPreviousItem(item: MediaRadio): string {
-      if (item.podcastId) {
-        return item.title;
-      }
-      return radioHelper.displayTitle(item);
-    },
-  },
-});
+//Data 
+const indexStart = ref(0);
+const indexNotDisplay = ref(100);
+const historyListContainerRef = useTemplateRef('historyListContainer');
+
+//Composables
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+
+//Computed
+const playerRadioHistory = computed(() => playerStore.playerRadio?.history ?? []);
+   
+
+//Watch
+watch(playerRadioHistory, () => {
+  nextTick(() => {
+    handleResize(0);
+  });
+}, {deep: true,immediate: true});
+
+
+onMounted(()=>window.addEventListener("resize", () => {handleResize(0);}))
+onUnmounted(()=>window.removeEventListener("resize", () => {handleResize(0);}))
+
+
+//Methods
+function displayEverythingAfterIndex(indexAsked: number) {
+  for (let index = 0; index < playerRadioHistory.value.length; index++) {
+    const el = historyListContainerRef?.value?.querySelector('#history' + index);
+    if (!el) continue;
+    if (index < indexAsked && !el.classList.contains("hid")) {
+      el.classList.add("hid");
+      continue;
+    }
+    if (index >= indexAsked && el.classList.contains("hid")) {
+      el.classList.remove("hid");
+    }
+  }
+}
+function handleResize(indexAsked: number): void {
+  const historyList = historyListContainerRef?.value as HTMLElement;
+  if (null === historyList || !historyList) {
+    return;
+  }
+  indexStart.value = indexAsked;
+  indexNotDisplay.value = playerRadioHistory.value.length;
+  displayEverythingAfterIndex(indexAsked);
+  for (
+    let index = indexStart.value + 1;
+    index < playerRadioHistory.value.length;
+    index++
+  ) {
+    const el = historyListContainerRef?.value?.querySelector('#history' + index);
+    if (!el) continue;
+    if (index > indexNotDisplay.value && !el.classList.contains("hid")) {
+      el.classList.add("hid");
+      continue;
+    }
+    const parent = el.parentElement;
+    if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth) {
+      indexNotDisplay.value = index;
+      el.classList.add("hid");
+    }
+  }
+}
+function displayTimeItem(item: MediaRadio): string {
+  return dayjs(item.startDate).format("HH:mm");
+}
+function displayPreviousItem(item: MediaRadio): string {
+  if (item.podcastId) {
+    return item.title;
+  }
+  return radioHelper.displayTitle(item);
+}
 </script>
 <style lang="scss">
 .octopus-app {

package/src/components/misc/player/radio/RadioProgressBar.vue

@@ -4,67 +4,56 @@
     min="0"
     max="100"
     :value="percentProgress"
-    :aria-label="$t('Radio')"
+    :aria-label="t('Radio')"
     :class="isAmbiance ? 'ambiance-progress' : ''"
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePlayerStore } from "../../../../stores/PlayerStore";
-import { mapState, mapActions } from "pinia";
 import dayjs from "dayjs";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "RadioProgressBar",
+import { useI18n } from "vue-i18n";
+import { computed, onMounted, onUnmounted, ref, Ref } from "vue";
 
-  components: {},
-  emits: ["updateNotListenTime"],
-  data() {
-    return {
-      percentInterval: undefined as ReturnType<typeof setTimeout> | undefined,
-    };
-  },
+//Data 
+const percentInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
 
-  computed: {
-    ...mapState(usePlayerStore, ["playerRadio", "playerElapsed"]),
-    isAmbiance(): boolean {
-      return !this.playerRadio?.podcast?.podcastId;
-    },
-    percentProgress(): number {
-      if (!this.playerElapsed) {
-        return 0;
-      }
-      return this.playerElapsed * 100;
-    },
-  },
-  mounted() {
-    this.handlePercentInterval();
-  },
-  unmounted() {
-    clearInterval(this.percentInterval as unknown as number);
-  },
-  methods: {
-    ...mapActions(usePlayerStore, ["playerUpdateElapsed"]),
-    handlePercentInterval(): void {
-      this.percentInterval = setInterval(() => {
-        this.calculatePercent();
-      }, 1000);
-    },
-    calculatePercent(): void {
-      if (!this.playerRadio?.metadata) {
-        return;
-      }
-      const actualMilliSecondsPlayed = dayjs()
-        .subtract(18, "second")
-        .diff(dayjs(this.playerRadio.metadata.startDate));
-      const percentPlayed =
-        actualMilliSecondsPlayed /
-        (this.playerRadio?.metadata.playDuration * 1000);
-      this.playerUpdateElapsed(
-        percentPlayed,
-        this.playerRadio?.metadata.playDuration,
-      );
-    },
-  },
+//Composables
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+
+//Computed
+const isAmbiance = computed(() => !playerStore.playerRadio?.podcast?.podcastId);
+const percentProgress = computed(() => {
+  if (!playerStore.playerElapsed) {
+    return 0;
+  }
+  return playerStore.playerElapsed * 100;
 });
+
+
+onMounted(()=>handlePercentInterval())
+onUnmounted(()=>clearInterval(percentInterval.value as unknown as number))
+
+
+//Methods
+function handlePercentInterval(): void {
+  percentInterval.value = setInterval(() => {calculatePercent();}, 1000);
+}
+function calculatePercent(): void {
+  if (!playerStore.playerRadio?.metadata) {
+    return;
+  }
+  const actualMilliSecondsPlayed = dayjs()
+    .subtract(18, "second")
+    .diff(dayjs(playerStore.playerRadio.metadata.startDate));
+  const percentPlayed =
+    actualMilliSecondsPlayed /
+    (playerStore.playerRadio?.metadata.playDuration * 1000);
+    playerStore.playerUpdateElapsed(
+    percentPlayed,
+    playerStore.playerRadio?.metadata.playDuration,
+  );
+}
 </script>

package/src/components/misc/player/video/PlayerVideo.vue

@@ -1,24 +1,23 @@
 <template>
   <teleport to=".octopus-app">
-    <template v-if="playerVideo">
+    <template v-if="playerStore.playerVideo">
       <button class="btn btn-transparent video-close" @click="closePlayer">
         <WindowCloseIcon />
       </button>
       <div class="video-wrapper">
         <PlayerYoutubeEmbed v-if="youtubeId" :youtube-id="youtubeId" />
-        <PlayerVideoDigiteka v-else-if="!playerLive" :video-id="playerPodcast?.video?.videoId" />
+        <PlayerVideoDigiteka v-else-if="!playerStore.playerLive" :video-id="playerStore.playerPodcast?.video?.videoId" />
         <PlayerVideoHls v-else :hls-url="hlsVideoUrl" :is-secured="isSecured"/>
       </div>
     </template>
   </teleport>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import youtubeVideoHelper from "../../../../helper/youtubeVideoHelper";
 import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useApiStore } from "../../../../stores/ApiStore";
-import { mapState, mapActions } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, Ref, computed, onMounted } from "vue";
 const PlayerVideoDigiteka = defineAsyncComponent(
   () => import("../video/PlayerVideoDigiteka.vue"),
 );
@@ -28,44 +27,32 @@ const PlayerVideoHls = defineAsyncComponent(
 const PlayerYoutubeEmbed = defineAsyncComponent(
   () => import("../video/PlayerYoutubeEmbed.vue"),
 );
-export default defineComponent({
-  name: "PlayerVideo",
 
-  components: {
-    PlayerVideoDigiteka,
-    PlayerVideoHls,
-    PlayerYoutubeEmbed,
-    WindowCloseIcon,
-  },
-  data() {
-    return {
-      youtubeId: undefined as string|undefined,
-    };
-  },
-  computed: {
-    ...mapState(useApiStore, ["hlsUrl"]),
-    ...mapState(usePlayerStore, ["playerVideo", "playerLive", "playerPodcast"]),
-    isSecured(): boolean{
-      return "SECURED" === this.playerLive?.organisation?.privacy;
-    },
-    hlsVideoUrl(): string {
-      if (!this.playerLive) {
-        return "";
-      }
-      return `${this.hlsUrl}live/video_dev.${this.playerLive.conferenceId}/index.m3u8`;
-    },
-  },
-  created(){
-    this.youtubeId = youtubeVideoHelper.getYoutubeId((this.playerPodcast ?? this.playerLive )?.tags ?? []);
-  },
+//Data 
+const youtubeId: Ref<string|undefined> = ref(undefined);
 
-  methods: {
-    ...mapActions(usePlayerStore, ["playerPlay"]),
-    closePlayer() {
-      this.playerPlay();
-    },
-  },
+//Composables
+const apiStore = useApiStore();
+const playerStore = usePlayerStore();
+
+
+//Computed
+const isSecured = computed(() => "SECURED" === playerStore.playerLive?.organisation?.privacy);
+const hlsVideoUrl = computed(() => {
+  if (!playerStore.playerLive) {
+    return "";
+  }
+  return `${apiStore.hlsUrl}live/video_dev.${playerStore.playerLive.conferenceId}/index.m3u8`;
 });
+
+onMounted(()=>{
+  youtubeId.value = youtubeVideoHelper.getYoutubeId((playerStore.playerPodcast ?? playerStore.playerLive )?.tags ?? []);
+})
+
+//Methods
+function closePlayer() {
+  playerStore.playerPlay();
+}
 </script>
 
 <style lang="scss">

package/src/components/misc/player/video/PlayerVideoDigiteka.vue

@@ -4,7 +4,7 @@
       v-if="videoId"
       ref="iframeVideo"
       :src="srcVideo"
-      :title="$t('Video')"
+      :title="t('Video')"
       width="500"
       height="281"
       style="z-index: 1"
@@ -18,44 +18,39 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import SnackBar from "../../SnackBar.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PlayerVideo",
-  components: {
-    SnackBar,
-  },
-  props: {
-    videoId: { default: undefined, type: String },
-    responsive: { default: false, type: Boolean },
-  },
-
-  computed: {
-    srcVideo(): string {
-      return (
-        "//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/" +
-        this.videoId +
-        "/sound/yes/autoplay/1"
-      );
-    },
-  },
-  mounted() {
-    if (undefined === this.videoId) {
-      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-        this.$t("Podcast play error"),
-      );
-    }
-  },
-  methods: {
-    goFullScreen() {
-      if ("" === this.srcVideo) {
-        return;
-      }
-      (this.$refs.iframeVideo as Element).requestFullscreen();
-    },
-  },
+import { computed, onMounted, useTemplateRef } from "vue";
+
+//Props 
+const props = defineProps({
+  videoId: { default: undefined, type: String },
+  responsive: { default: false, type: Boolean },
+})
+
+//Data
+const snackBarRef = useTemplateRef('snackbar');
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const srcVideo = computed(() => {
+  return (
+    "//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/" +
+    props.videoId +
+    "/sound/yes/autoplay/1"
+  );
 });
+
+onMounted(()=>{
+  if (undefined === props.videoId) {
+    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t("Podcast play error"));
+  }
+})
+
 </script>
 <style lang="scss">
 @use "../../../../style/videoPlayer";