@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/misc/player/elements/PlayerPlayButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="!playerError"
-    :title="$t('Play')"
+    :title="t('Play')"
     :class="{
       'p-0': !displayIsPaused && !displayIsPlaying,
       'play-button-box': !isBigButton,
@@ -18,104 +18,93 @@
     />
   </button>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import PlayIcon from "vue-material-design-icons/Play.vue";
 import PauseIcon from "vue-material-design-icons/Pause.vue";
 import ClassicSpinner from "../../ClassicSpinner.vue";
-import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { computed, onMounted, onUnmounted } from "vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useVastStore } from "../../../../stores/VastStore";
-export default defineComponent({
-  name: "PlayerPlayButton",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ClassicSpinner,
-    PlayIcon,
-    PauseIcon,
-  },
-  props: {
-    playerError: { default: false, type: Boolean },
-    isBigButton: { default: false, type: Boolean },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState(usePlayerStore, ["isPlaying", "isPaused"]),
-    ...mapState(useVastStore, ["isAdPlaying", "isAdPaused"]),
-    displayIsPlaying(): boolean {
-      return (
-        (this.isAdPlaying && !this.isAdPaused) ||
-        (!this.isAdPlaying && this.isPlaying)
-      );
-    },
-    displayIsPaused(): boolean {
-      return (
-        (this.isAdPlaying && this.isAdPaused) ||
-        (!this.isAdPlaying && this.isPaused)
-      );
-    },
-  },
-  created() {
-    window.addEventListener("keydown", this.addKeyboardControl);
-  },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.addKeyboardControl);
-  },
-  methods: {
-    ...mapActions(useVastStore, ["updateIsAdPaused"]),
-    ...mapActions(usePlayerStore, ["playerChangeStatus"]),
-    addKeyboardControl(event: KeyboardEvent): void {
-      if (!event || null === event) {
-        return;
-      }
-      const element = event.target as HTMLElement;
-      if (
-        !element ||
-        "INPUT" == element.tagName.toUpperCase() ||
-        "TEXTAREA" == element.tagName.toUpperCase()
-      ) {
-        return;
-      }
-      if (" " === event.key || "Spacebar" === event.key) {
-        event.preventDefault();
-        this.switchPausePlay();
-        return;
-      }
-      if (this.isAdPlaying) {
-        return;
-      }
-      if ("ArrowRight" === event.key && event.ctrlKey) {
-        this.changeCurrentTime(15);
-        return;
-      }
-      if ("ArrowLeft" === event.key && event.ctrlKey) {
-        this.changeCurrentTime(-15);
-      }
-    },
-    changeCurrentTime(delay: number) {
-      const audioPlayer: HTMLAudioElement | null =
-        document.querySelector("#audio-player");
-      if (!audioPlayer) {
-        return;
-      }
-      audioPlayer.currentTime += delay;
-    },
-    switchPausePlay(): void {
-      if (this.isAdPlaying) {
-        this.updateIsAdPaused(!this.isAdPaused);
-        return;
-      }
-      const audioPlayer: HTMLAudioElement | null =
-        document.querySelector("#audio-player");
-      if (!audioPlayer) {
-        return;
-      }
-      this.playerChangeStatus(!audioPlayer.paused);
-    },
-  },
+//Props 
+defineProps({
+  playerError: { default: false, type: Boolean },
+  isBigButton: { default: false, type: Boolean },
+})
+
+//Composables
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+const vastStore = useVastStore();
+
+
+//Computed
+const displayIsPlaying = computed(() => {
+  return (
+    (vastStore.isAdPlaying && !vastStore.isAdPaused) ||
+    (!vastStore.isAdPlaying && playerStore.isPlaying)
+  );
 });
+const displayIsPaused = computed(() => {
+  return (
+    (vastStore.isAdPlaying && vastStore.isAdPaused) ||
+    (!vastStore.isAdPlaying && playerStore.isPaused)
+  );
+});
+
+
+onMounted(()=>window.addEventListener("keydown", addKeyboardControl));
+onUnmounted(()=>window.removeEventListener("keydown", addKeyboardControl))
+
+
+//Methods
+function addKeyboardControl(event: KeyboardEvent): void {
+  if (!event || null === event) {
+    return;
+  }
+  const element = event.target as HTMLElement;
+  if (
+    !element ||
+    "INPUT" == element.tagName.toUpperCase() ||
+    "TEXTAREA" == element.tagName.toUpperCase()
+  ) {
+    return;
+  }
+  if (" " === event.key || "Spacebar" === event.key) {
+    event.preventDefault();
+    switchPausePlay();
+    return;
+  }
+  if (vastStore.isAdPlaying) {
+    return;
+  }
+  if ("ArrowRight" === event.key && event.ctrlKey) {
+    changeCurrentTime(15);
+    return;
+  }
+  if ("ArrowLeft" === event.key && event.ctrlKey) {
+    changeCurrentTime(-15);
+  }
+}
+function changeCurrentTime(delay: number) {
+  const audioPlayer: HTMLAudioElement | null = document.querySelector("#audio-player");
+  if (!audioPlayer) {
+    return;
+  }
+  audioPlayer.currentTime += delay;
+}
+function switchPausePlay(): void {
+  if (vastStore.isAdPlaying) {
+    vastStore.updateIsAdPaused(!vastStore.isAdPaused);
+    return;
+  }
+  const audioPlayer: HTMLAudioElement | null =document.querySelector("#audio-player");
+  if (!audioPlayer) {
+    return;
+  }
+  playerStore.playerChangeStatus(!audioPlayer.paused);
+}
 </script>
 
 <style lang="scss">

package/src/components/misc/player/elements/PlayerSpeedButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     id="player-speed-button"
-    :title="$t('Change speed')"
+    :title="t('Change speed')"
     class="btn play-button-box small-font btn-transparent text-light me-0"
   >
     {{ "×" + speedArray[speedIndex] }}
@@ -25,34 +25,30 @@
     </button>
   </ClassicPopover>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicPopover from "../../ClassicPopover.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PlayerSpeedButton",
-  components: {
-    ClassicPopover,
-  },
+import { onMounted, Ref, ref } from "vue";
 
-  data() {
-    return {
-      audioPlayer: null as HTMLAudioElement | null,
-      speedIndex: 2 as number,
-      speedArray: [0.5, 0.75, 1, 1.25, 1.5, 1.75],
-    };
-  },
-  mounted() {
-    this.audioPlayer = document.querySelector("#audio-player");
-  },
-  methods: {
-    changeSpeed(index: number) {
-      this.speedIndex = index;
-      if (this.audioPlayer) {
-        this.audioPlayer.playbackRate = this.speedArray[this.speedIndex];
-      }
-    },
-  },
-});
+//Data 
+const speedIndex = ref(2);
+const speedArray = ref([0.5, 0.75, 1, 1.25, 1.5, 1.75]);
+const audioPlayer: Ref<HTMLAudioElement | null> = ref(null);
+
+//Composables
+const { t } = useI18n();
+
+onMounted(()=>{
+  audioPlayer.value = document.querySelector("#audio-player");
+})
+
+//Methods
+function changeSpeed(index: number) {
+  speedIndex.value = index;
+  if (audioPlayer.value) {
+    audioPlayer.value.playbackRate = speedArray.value[speedIndex.value];
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/misc/player/elements/PlayerTitle.vue

@@ -1,134 +1,108 @@
 <template>
   <div v-if="playerError" class="text-warning mx-2">
-    {{ $t("Podcast play error") + " - " }}
+    {{ t("Podcast play error") + " - " }}
   </div>
   <component
-    :is="linkAdvertising ? 'a' : 'div'"
+    :is="vastStore.linkAdvertising ? 'a' : 'div'"
     class="flex-grow-1 text-truncate text-light"
     :class="titleClass"
-    :href="linkAdvertising"
+    :href="vastStore.linkAdvertising"
     rel="noreferrer noopener"
     target="_blank"
-    :title="$t('New window', {text: podcastTitle})"
+    :title="t('New window', {text: podcastTitle})"
   >
     {{ podcastTitle }}
   </component>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import {useFetchRadio} from "../../../composable/radio/usefetchRadioData";
-import { state } from "../../../../stores/ParamSdkStore";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useVastStore } from "../../../../stores/VastStore";
-import { mapState, mapActions } from "pinia";
-import { defineComponent } from "vue";
+import { computed, onUnmounted, Ref, ref, watch } from "vue";
 import { MediaRadio, NextAdvertising } from "@/stores/class/general/player";
 import { Podcast } from "@/stores/class/general/podcast";
-export default defineComponent({
-  name: "PlayerTitle",
+import { useI18n } from "vue-i18n";
 
-  props: {
-    playerError: { default: false, type: Boolean },
-    hlsReady: { default: false, type: Boolean },
-    titleClass: { default: "", type: String },
-  },
+//Props 
+const props = defineProps({
+  playerError: { default: false, type: Boolean },
+  hlsReady: { default: false, type: Boolean },
+  titleClass: { default: "", type: String },
+})
 
-  setup(){
-    const { fetchRadioMetadata, displayTitle } = useFetchRadio();
-    return { fetchRadioMetadata, displayTitle };
-  },
+//Data 
+const radioInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
 
-  data() {
-    return {
-      radioInterval: undefined as ReturnType<typeof setTimeout> | undefined,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerPodcast",
-      "playerRadio",
-      "playerLive",
-      "playerMedia",
-      "emissionName",
-    ]),
-    ...mapState(useVastStore, [
-      "isAdPlaying",
-      "titleAdvertising",
-      "linkAdvertising",
-    ]),
-    isEmissionName(): boolean {
-      return state.player.emissionName as boolean;
-    },
-    podcastTitle(): string {
-      if (this.isAdPlaying) {
-        return this.$t("Advertising") + this.titleAdvertising;
-      }
-      if (this.playerRadio) {
-        if (this.playerRadio.podcast) {
-          return this.playerRadio.podcast.title;
-        }
-        return this.displayTitle(this.playerRadio.metadata);
-      }
-      if (this.playerPodcast) {
-        return this.playerPodcast.title;
-      }
-      if (this.playerMedia) return this.playerMedia.title;
-      if (this.playerLive) {
-        if (!this.hlsReady)
-          return (
-            this.playerLive.title + " (" + this.$t("Start in a while") + ")"
-          );
-        return this.playerLive.title;
-      }
-      return "";
-    },
-  },
-  watch: {
-    playerRadio: {
-      deep: true,
-      immediate: true,
-      handler(newValue, oldValue) {
-        if (oldValue && newValue && newValue.canalId === oldValue.canalId) {
-          return;
-        }
-        clearInterval(this.radioInterval as unknown as number);
-        if (this.playerRadio) {
-          this.fetchCurrentlyPlaying();
-          this.radioInterval = setInterval(() => {
-            this.fetchCurrentlyPlaying();
-          }, 10000);
-        }
-      },
-    },
-  },
-  unmounted(){
-    clearInterval(this.radioInterval as unknown as number);
-    this.radioInterval= undefined;
-  },
-  methods: {
-    ...mapActions(usePlayerStore, [
-      "playerMetadata",
-      "playerRadioPodcast",
-      "playerRadioUpdateNextAdvertising",
-    ]),
-    async fetchCurrentlyPlaying(): Promise<void> {
-      this.fetchRadioMetadata(
-        this.playerRadio?.canalId ?? 0,
-        this.playerRadio?.metadata.title ?? "",
-        this.updateMetadata,
-        this.updateAdvertising,
+//Composables
+const { t } = useI18n();
+const { fetchRadioMetadata, displayTitle } = useFetchRadio();
+const playerStore = usePlayerStore();
+const vastStore = useVastStore();
+
+
+//Computed
+const podcastTitle = computed(() => {
+  if (vastStore.isAdPlaying) {
+    return t("Advertising") + vastStore.titleAdvertising;
+  }
+  if (playerStore.playerRadio) {
+    if (playerStore.playerRadio.podcast) {
+      return playerStore.playerRadio.podcast.title;
+    }
+    return displayTitle(playerStore.playerRadio.metadata);
+  }
+  if (playerStore.playerPodcast) {
+    return playerStore.playerPodcast.title;
+  }
+  if (playerStore.playerMedia) return playerStore.playerMedia.title;
+  if (playerStore.playerLive) {
+    if (!props.hlsReady)
+      return (
+        playerStore.playerLive.title + " (" + t("Start in a while") + ")"
       );
-    },
-    updateAdvertising(nextAdvertising: NextAdvertising): void {
-      this.playerRadioUpdateNextAdvertising(nextAdvertising);
-    },
-    updateMetadata(
-      metadata: MediaRadio,
-      podcast: Podcast | undefined,
-      history: Array<MediaRadio>,
-    ): void {
-      this.playerMetadata(metadata, history);
-      this.playerRadioPodcast(podcast);
-    },
-  },
+    return playerStore.playerLive.title;
+  }
+  return "";
 });
+
+//Watch
+watch(()=>playerStore.playerRadio, (newValue, oldValue) => {
+  if (oldValue && newValue && newValue.canalId === oldValue.canalId) {
+    return;
+  }
+  clearInterval(radioInterval.value as unknown as number);
+  if (playerStore.playerRadio) {
+    fetchCurrentlyPlaying();
+    radioInterval.value = setInterval(() => {
+      fetchCurrentlyPlaying();
+    }, 10000);
+  }
+}, {deep: true,immediate: true});
+
+onUnmounted(()=>{
+  clearInterval(radioInterval.value as unknown as number);
+  radioInterval.value= undefined;
+})
+
+
+//Methods
+async function fetchCurrentlyPlaying(): Promise<void> {
+  fetchRadioMetadata(
+    playerStore.playerRadio?.canalId ?? 0,
+    playerStore.playerRadio?.metadata.title ?? "",
+    updateMetadata,
+    updateAdvertising,
+  );
+}
+function updateAdvertising(nextAdvertising: NextAdvertising): void {
+  playerStore.playerRadioUpdateNextAdvertising(nextAdvertising);
+}
+function updateMetadata(
+  metadata: MediaRadio,
+  podcast: Podcast | undefined,
+  history: Array<MediaRadio>,
+): void {
+  playerStore.playerMetadata(metadata, history);
+  playerStore.playerRadioPodcast(podcast);
+}
 </script>

package/src/components/misc/player/progressbar/PlayerProgressBar.vue

@@ -1,6 +1,6 @@
 <template>
-  <AdsProgressBar v-if="isAdPlaying" :class="classProgress" />
-  <RadioProgressBar v-else-if="radioUrl" :class="classProgress" />
+  <AdsProgressBar v-if="vastStore.isAdPlaying" :class="classProgress" />
+  <RadioProgressBar v-else-if="playerStore.radioUrl" :class="classProgress" />
   <PodcastProgressBar
     v-else
     :show-comments="showComments"
@@ -12,11 +12,10 @@
     :class-progress="classProgress"
   />
 </template>
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from "vue";
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useVastStore } from "../../../../stores/VastStore";
-import { mapState } from "pinia";
 const RadioProgressBar = defineAsyncComponent(
   () => import("../radio/RadioProgressBar.vue"),
 );
@@ -26,30 +25,20 @@ const AdsProgressBar = defineAsyncComponent(
 const PodcastProgressBar = defineAsyncComponent(
   () => import("./PodcastProgressBar.vue"),
 );
-export default defineComponent({
-  name: "PlayerProgressBar",
 
-  components: {
-    PodcastProgressBar,
-    RadioProgressBar,
-    AdsProgressBar,
-  },
+//Props 
+defineProps({
+  classProgress: { default: "", type: String },
+  playerError: { default: false, type: Boolean },
+  showComments: { default: false, type: Boolean },
+  displayAlertBar: { default: false, type: Boolean },
+  percentLiveProgress: { default: 0, type: Number },
+  durationLivePosition: { default: 0, type: Number },
+  listenTime: { default: 0, type: Number },
+})
+
+//Composables
+const playerStore = usePlayerStore();
+const vastStore = useVastStore();
 
-  props: {
-    classProgress: { default: "", type: String },
-    playerError: { default: false, type: Boolean },
-    showComments: { default: false, type: Boolean },
-    displayAlertBar: { default: false, type: Boolean },
-    percentLiveProgress: { default: 0, type: Number },
-    durationLivePosition: { default: 0, type: Number },
-    listenTime: { default: 0, type: Number },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState(useVastStore, ["isAdPlaying"]),
-    ...mapState(usePlayerStore, ["radioUrl"]),
-  },
-});
 </script>

package/src/components/misc/player/progressbar/PodcastProgressBar.vue

@@ -11,69 +11,58 @@
   <CommentPlayer v-if="showComments" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePlayerStore } from "../../../../stores/PlayerStore";
-import { mapState, mapActions } from "pinia";
 import ProgressBar from "../../ProgressBar.vue";
-import { defineComponent, defineAsyncComponent } from "vue";
+import {  defineAsyncComponent, computed } from "vue";
 const CommentPlayer = defineAsyncComponent(
   () => import("../../../display/comments/CommentPlayer.vue"),
 );
-export default defineComponent({
-  name: "PodcastProgressBar",
 
-  components: {
-    CommentPlayer,
-    ProgressBar,
-  },
-  props: {
-    classProgress: { default: "", type: String },
-    showComments: { default: false, type: Boolean },
-    displayAlertBar: { default: false, type: Boolean },
-    percentLiveProgress: { default: 0, type: Number },
-    durationLivePosition: { default: 0, type: Number },
-    playerError: { default: false, type: Boolean },
-    listenTime: { default: 0, type: Number },
-  },
+//Props 
+const props = defineProps({
+  classProgress: { default: "", type: String },
+  showComments: { default: false, type: Boolean },
+  displayAlertBar: { default: false, type: Boolean },
+  percentLiveProgress: { default: 0, type: Number },
+  durationLivePosition: { default: 0, type: Number },
+  playerError: { default: false, type: Boolean },
+  listenTime: { default: 0, type: Number },
+})
 
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerElapsed",
-      "playerTotal",
-      "playerPodcast",
-      "playerLive",
-    ]),
-    percentProgress(): number {
-      if (!this.playerElapsed) {
-        return 0;
-      }
-      return this.playerElapsed * 100;
-    },
-  },
+//Composables
+const playerStore = usePlayerStore();
 
-  methods: {
-    ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
-    seekTo(event: MouseEvent): void {
-      const audioPlayer: HTMLAudioElement | null =
-        document.querySelector("#audio-player");
-      if (!audioPlayer || null === event.currentTarget) {
-        return;
-      }
-      const rect = (event.currentTarget as Element).getBoundingClientRect();
-      const barWidth = (event.currentTarget as Element).clientWidth;
-      const x = event.clientX - rect.left;
-      const percentPosition = x / barWidth;
-      if (this.playerLive && percentPosition * 100 >= this.percentLiveProgress) return;
-      const seekTime = this.playerTotal * percentPosition;
-      this.isSeekTo(audioPlayer, seekTime);
-    },
-    isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
-      if (this.playerPodcast || this.playerLive) {
-        this.playerUpdateSeekTime(seekTime);
-      } else {
-        audioPlayer.currentTime = seekTime;
-      }
-    },
-  },
+
+//Computed
+const percentProgress = computed(() => {
+  if (!playerStore.playerElapsed) {
+    return 0;
+  }
+  return playerStore.playerElapsed * 100;
 });
+
+
+//Methods
+function seekTo(event: MouseEvent): void {
+  const audioPlayer: HTMLAudioElement | null =
+    document.querySelector("#audio-player");
+  if (!audioPlayer || null === event.currentTarget) {
+    return;
+  }
+  const rect = (event.currentTarget as Element).getBoundingClientRect();
+  const barWidth = (event.currentTarget as Element).clientWidth;
+  const x = event.clientX - rect.left;
+  const percentPosition = x / barWidth;
+  if (playerStore.playerLive && percentPosition * 100 >= props.percentLiveProgress) return;
+  const seekTime = playerStore.playerTotal * percentPosition;
+  isSeekTo(audioPlayer, seekTime);
+}
+function isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
+  if (playerStore.playerPodcast || playerStore.playerLive) {
+    playerStore.playerUpdateSeekTime(seekTime);
+  } else {
+    audioPlayer.currentTime = seekTime;
+  }
+}
 </script>