@saooti/octopus-sdk 40.2.19 → 41.0.0-SNAPSHOT

package/src/components/misc/player/PlayerLarge.vue

@@ -3,7 +3,7 @@
     class="d-flex flex-column align-items-center my-2 flex-grow-1 text-light position-relative overflow-y-auto"
   >
     <button
-      :title="$t('Reduce')"
+      :title="t('Reduce')"
       class="player-reduce-button btn bg-transparent text-light"
       @click="changePlayerLargeVersion"
     >
@@ -78,6 +78,7 @@ import PlayerTitle from "./elements/PlayerTitle.vue";
 import PlayerPlayButton from "./elements/PlayerPlayButton.vue";
 import { defineAsyncComponent } from "vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
+import { useI18n } from "vue-i18n";
 const RadioHistory = defineAsyncComponent(
   () => import("./radio/RadioHistory.vue"),
 );
@@ -98,7 +99,6 @@ defineProps( {
 //Emits
 const emit = defineEmits(['changePlayerLargeVersion']);
 
-const playerStore = usePlayerStore();
 
 //Composables
 const { 
@@ -108,13 +108,14 @@ const {
   displayPlayTime,
   displayTotalTime,
  } = usePlayerDisplayTime();
+const { t } = useI18n();
+const playerStore = usePlayerStore();
 
-  function changePlayerLargeVersion() {
-    emit("changePlayerLargeVersion");
-  }
-
-
- function seekClick(addTime: number): void {
+//Methods
+function changePlayerLargeVersion() {
+  emit("changePlayerLargeVersion");
+}
+function seekClick(addTime: number): void {
   const audioPlayer: HTMLAudioElement | null =
     document.querySelector("#audio-player");
   if (!audioPlayer) {

package/src/components/misc/player/ads/AdsProgressBar.vue

@@ -3,19 +3,16 @@
     class="ambiance-progress c-hand-auto mt-1"
     min="0"
     max="100"
-    :value="adPercentProgress"
-    :aria-label="$t('Advertising')"
+    :value="vastStore.adPercentProgress"
+    :aria-label="t('Advertising')"
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useVastStore } from "../../../../stores/VastStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "AdsProgressBar",
-  computed: {
-    ...mapState(useVastStore, ["adPercentProgress"]),
-  },
-});
+import { useI18n } from "vue-i18n";
+
+//Composables
+const { t } = useI18n();
+const vastStore = useVastStore();
 </script>

package/src/components/misc/player/ads/AdsSkipButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    v-if="isAdPlaying && isAdSkippable"
-    :disabled="!isSkipCurrentlyAllowed"
+    v-if="vastStore.isAdPlaying && vastStore.isAdSkippable"
+    :disabled="!vastStore.isSkipCurrentlyAllowed"
     class="btn skip-ad-btn"
     @click="skipAd"
   >
@@ -9,36 +9,30 @@
   </button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+// see if it has more solutions on https://groups.google.com/g/ima-sdk/c/ky-Q_pUXrIA/m/-P2TsMuABwAJ
 import { useVastStore } from "../../../../stores/VastStore";
-import { mapActions, mapState } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  // see if it has more solutions on https://groups.google.com/g/ima-sdk/c/ky-Q_pUXrIA/m/-P2TsMuABwAJ
-  name: "AdsSkipButton",
-  computed: {
-    ...mapState(useVastStore, [
-      "isAdPlaying",
-      "isAdSkippable",
-      "isSkipCurrentlyAllowed",
-      "timeTillSkipInSeconds",
-    ]),
-    buttonText(): string {
-      if (this.isSkipCurrentlyAllowed) {
-        return this.$t("Skip ad");
-      }
-      return this.$t("Skip ad in seconds", {
-        seconds: this.timeTillSkipInSeconds,
-      });
-    },
-  },
-  methods: {
-    ...mapActions(useVastStore, ["updateIsAdSkipped"]),
-    skipAd(): void {
-      this.updateIsAdSkipped(true);
-    },
-  },
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+//Composables
+const { t } = useI18n();
+const vastStore = useVastStore();
+
+//Computed
+const buttonText = computed(() => {
+  if (vastStore.isSkipCurrentlyAllowed) {
+    return t("Skip ad");
+  }
+  return t("Skip ad in seconds", {
+    seconds: vastStore.timeTillSkipInSeconds,
+  });
 });
+
+//Methods
+function skipAd(): void {
+  vastStore.updateIsAdSkipped(true);
+}
 </script>
 <style lang="scss">
 .octopus-app {

package/src/components/misc/player/chaptering/ChapteringModal.vue

@@ -1,13 +1,13 @@
 <template>
   <ClassicModal
     id-modal="chaptering-modal"
-    :title-modal="$t('Chaptering')"
+    :title-modal="t('Chaptering')"
     @close="closePopup"
   >
     <template #body>
       <div class="d-flex flex-column">
         <button
-          v-for="(chapter, index) in playerChapteringPercent"
+          v-for="(chapter, index) in playerStore.playerChapteringPercent"
           :key="chapter"
           class="btn d-flex flex-nowrap align-items-center p-2 mt-1 c-hand text-truncate mb-1"
           :class="actualChapter === index ? 'chapter-selected' : 'border'"
@@ -24,66 +24,56 @@
     </template>
     <template #footer>
       <button class="btn m-1" @click="closePopup">
-        {{ $t("Close") }}
+        {{ t("Close") }}
       </button>
     </template>
   </ClassicModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import WaveformIcon from "vue-material-design-icons/Waveform.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
-import { mapState, mapActions } from "pinia";
 import ClassicModal from "../../modal/ClassicModal.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ChapteringModal",
-  components: {
-    ClassicModal,
-    WaveformIcon,
-  },
-  props: { actualChapter: { default: -1, type: Number } },
-  emits: ["close"],
-  data() {
-    return {
-      audioPlayer: null as HTMLAudioElement | null,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerPodcast",
-      "playerLive",
-      "playerChapteringPercent",
-      "playerTotal",
-      "playerElapsed",
-    ]),
-  },
-  created() {
-    this.audioPlayer = document.querySelector("#audio-player");
-  },
-  methods: {
-    ...mapActions(usePlayerStore, [
-      "playerUpdateSeekTime",
-      "playerUpdateElapsed",
-    ]),
-    closePopup(): void {
-      this.$emit("close");
-    },
-    goToChapter(index: number) {
-      if (!this.playerChapteringPercent || !this.audioPlayer) {
-        return;
-      }
-      const seekTime =
-        this.playerTotal *
-        (this.playerChapteringPercent[index].startPercent / 100);
-      this.playerUpdateSeekTime(seekTime);
-      if (0 === seekTime) {
-        this.playerUpdateElapsed(0);
-      }
-      this.audioPlayer.currentTime = seekTime;
-    },
-  },
-});
+import { onMounted, Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+//Props 
+defineProps({
+  actualChapter: { default: -1, type: Number }
+})
+
+//Emits
+const emit = defineEmits(["close"]);
+
+//Data 
+const audioPlayer : Ref<HTMLAudioElement | null>= ref(null);
+
+//Composables
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+
+onMounted(()=>{
+  audioPlayer.value = document.querySelector("#audio-player");
+})
+
+//Methods
+function closePopup(): void {
+  emit("close");
+}
+function goToChapter(index: number) {
+  if (!playerStore.playerChapteringPercent || !audioPlayer.value) {
+    return;
+  }
+  const seekTime =
+  playerStore.playerTotal *
+    (playerStore.playerChapteringPercent[index].startPercent / 100);
+  playerStore.playerUpdateSeekTime(seekTime);
+  if (0 === seekTime) {
+    playerStore.playerUpdateElapsed(0);
+  }
+  audioPlayer.value.currentTime = seekTime;
+}
 </script>
 <style lang="scss">
 

package/src/components/misc/player/chaptering/PlayerChaptering.vue

@@ -15,76 +15,64 @@
       @close="showChaptering = false"
     />
   </div>
-  <div v-else-if="playerChapteringPercent" class="margin-chaptering"></div>
+  <div v-else-if="playerStore.playerChapteringPercent" class="margin-chaptering"></div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
 import { ChapterPercent } from "@/stores/class/chaptering/chaptering";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
-import { mapState } from "pinia";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent, Ref, ref, watch } from "vue";
 const ChapteringModal = defineAsyncComponent(
   () => import("./ChapteringModal.vue"),
 );
-export default defineComponent({
-  name: "PlayerChaptering",
 
-  components: {
-    ChapteringModal,
-    ChevronRightIcon,
-  },
-  data() {
-    return {
-      actualChapter: undefined as ChapterPercent | undefined,
-      actualIndex: -1 as number,
-      showChaptering: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, ["playerChapteringPercent", "playerElapsed"]),
-  },
-  watch: {
-    playerElapsed: {
-      immediate: true,
-      handler() {
-        if (!this.playerChapteringPercent) {
-          this.actualChapter = undefined;
-          return;
-        }
-        const progressPercent = (this.playerElapsed ?? 0) * 100;
-        if (
-          this.actualChapter &&
-          this.isInChapter(progressPercent, this.actualChapter)
-        ) {
-          return;
-        }
-        for (
-          let i = 0, len = this.playerChapteringPercent.length;
-          i < len;
-          i++
-        ) {
-          if (
-            this.isInChapter(progressPercent, this.playerChapteringPercent[i])
-          ) {
-            this.actualChapter = this.playerChapteringPercent[i];
-            this.actualIndex = i;
-            return;
-          }
-        }
-        this.actualChapter = undefined;
-        this.actualIndex = -1;
-      },
-    },
-  },
-  methods: {
-    isInChapter(val: number, chapter: ChapterPercent) {
-      return (
-        Math.floor(chapter.startPercent) <= val &&
-        val < Math.floor(chapter.endPercent)
-      );
-    },
-  },
-});
+//Data 
+const actualChapter : Ref<ChapterPercent | undefined>= ref(undefined);
+const actualIndex = ref(-1);
+const showChaptering = ref(false);
+
+
+//Composables
+const playerStore = usePlayerStore();
+
+//Watch
+watch(()=>playerStore.playerElapsed, () => {
+  if (!playerStore.playerChapteringPercent) {
+    actualChapter.value = undefined;
+    return;
+  }
+  const progressPercent = (playerStore.playerElapsed ?? 0) * 100;
+  if (
+    actualChapter.value &&
+    isInChapter(progressPercent, actualChapter.value)
+  ) {
+    return;
+  }
+  for (
+    let i = 0, len = playerStore.playerChapteringPercent.length;
+    i < len;
+    i++
+  ) {
+    if (
+      isInChapter(progressPercent, playerStore.playerChapteringPercent[i])
+    ) {
+      actualChapter.value = playerStore.playerChapteringPercent[i];
+      actualIndex.value = i;
+      return;
+    }
+  }
+  actualChapter.value = undefined;
+  actualIndex.value = -1;
+}, {immediate: true});
+
+
+//Methods
+function isInChapter(val: number, chapter: ChapterPercent) {
+  return (
+    Math.floor(chapter.startPercent) <= val &&
+    val < Math.floor(chapter.endPercent)
+  );
+}
 </script>
 <style lang="scss">
 .octopus-app .margin-chaptering {

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

@@ -1,90 +1,84 @@
 <template>
   <div>
     <a
-      v-if="linkAdvertising"
+      v-if="vastStore.linkAdvertising"
       rel="noreferrer noopener"
       target="_blank"
-      :href="linkAdvertising"
+      :href="vastStore.linkAdvertising"
       class="player-image link-image"
       :class="imageWidth > 50 ? 'big-player-image' : ''"
-      :title="$t('New window', {text: $t('Advertising')})"
+      :title="t('New window', {text: t('Advertising')})"
     >
       <LinkVariantIcon />
     </a>
     <router-link
-      v-else-if="podcastImage"
+      v-else-if="playerStore.podcastImage"
       :to="podcastShareUrl"
-      :title="$t('Episode name page', { name: podcastDisplay?.title })"
+      :title="t('Episode name page', { name: podcastDisplay?.title })"
     >
       <img
-        v-lazy="useProxyImageUrl(podcastImage, imageWidth)"
+        v-lazy="useProxyImageUrl(playerStore.podcastImage, imageWidth)"
         :width="imageWidth"
         :height="imageWidth"
-        role="presentation"
+        aria-hidden="true"
+        alt=""
         
-        :title="$t('Episode name image', { name: podcastDisplay?.title })"
+        :title="t('Episode name image', { name: podcastDisplay?.title })"
         class="player-image"
         :class="imageWidth > 50 ? 'big-player-image' : ''"
       />
     </router-link>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import LinkVariantIcon from "vue-material-design-icons/LinkVariant.vue";
 import {useImageProxy} from "../../../composable/useImageProxy";
-import { defineComponent } from "vue";
-import { RouteLocationRaw } from "vue-router";
-import { mapState } from "pinia";
+import { computed } from "vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useVastStore } from "../../../../stores/VastStore";
-import { Podcast } from "@/stores/class/general/podcast";
-export default defineComponent({
-  name: "PlayerImage",
+import { useI18n } from "vue-i18n";
 
-  components: { LinkVariantIcon },
 
-  props: {
-    imageWidth: { default: 48, type: Number },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    return { useProxyImageUrl }
-  },
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerPodcast",
-      "playerRadio",
-      "podcastImage",
-    ]),
-    ...mapState(useVastStore, ["linkAdvertising"]),
-    podcastDisplay(): Podcast | undefined {
-      if (this.playerRadio?.podcast) {
-        return this.playerRadio?.podcast;
-      }
-      if (this.playerPodcast) {
-        return this.playerPodcast;
-      }
-      return undefined;
-    },
-    podcastShareUrl(): RouteLocationRaw | string {
-      if (this.playerRadio?.podcast?.podcastId) {
-        return {
-          name: "podcast",
-          params: {
-            podcastId: this.playerRadio?.podcast?.podcastId.toString(),
-          },
-        };
-      }
-      if (this.playerPodcast) {
-        return {
-          name: "podcast",
-          params: { podcastId: this.playerPodcast.podcastId.toString() },
-        };
-      }
-      return "";
-    },
-  },
+//Props 
+defineProps({
+  imageWidth: { default: 48, type: Number },
+})
+
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const playerStore = usePlayerStore();
+const vastStore = useVastStore();
+
+
+//Computed
+const podcastDisplay = computed(() => {
+  if (playerStore.playerRadio?.podcast) {
+    return playerStore.playerRadio?.podcast;
+  }
+  if (playerStore.playerPodcast) {
+    return playerStore.playerPodcast;
+  }
+  return undefined;
 });
+const podcastShareUrl = computed(() => {
+  if (playerStore.playerRadio?.podcast?.podcastId) {
+    return {
+      name: "podcast",
+      params: {
+        podcastId: playerStore.playerRadio?.podcast?.podcastId.toString(),
+      },
+    };
+  }
+  if (playerStore.playerPodcast) {
+    return {
+      name: "podcast",
+      params: { podcastId: playerStore.playerPodcast.podcastId.toString() },
+    };
+  }
+  return "";
+});
+
 </script>
 
 <style lang="scss">