@saooti/octopus-sdk 40.0.3 → 40.1.0

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

@@ -39,60 +39,49 @@
     </button>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import ChevronUpIcon from "vue-material-design-icons/ChevronUp.vue";
 import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";
-import { playerDisplayTime } from "../../mixins/player/playerDisplayTime";
-import imageProxy from "../../mixins/imageProxy";
+import {usePlayerDisplayTime} from "../../composable/player/usePlayerDisplayTime";
 import PlayerTitle from "./elements/PlayerTitle.vue";
 import PlayerChaptering from "./chaptering/PlayerChaptering.vue";
 import PlayerImage from "./elements/PlayerImage.vue";
 import PlayerPlayButton from "./elements/PlayerPlayButton.vue";
 import PlayerSpeedButton from "./elements/PlayerSpeedButton.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent} from "vue";
 const PlayerProgressBar = defineAsyncComponent(
   () => import("./progressbar/PlayerProgressBar.vue"),
 );
-export default defineComponent({
-  name: "PlayerCompact",
+//Props
+defineProps( {
+  playerError: { default: false, type: Boolean },
+  displayAlertBar: { default: false, type: Boolean },
+  percentLiveProgress: { default: 0, type: Number },
+  durationLivePosition: { default: 0, type: Number },
+  listenTime: { default: 0, type: Number },
+  hlsReady: { default: false, type: Boolean },
+});
 
-  components: {
-    PlayerProgressBar,
-    PlayerChaptering,
-    PlayerImage,
-    PlayerPlayButton,
-    PlayerTitle,
-    PlayerSpeedButton,
-    WindowCloseIcon,
-    ChevronUpIcon,
-    /* AdsSkipButton */
-  },
-  mixins: [playerDisplayTime, imageProxy],
+//Emits
+const emit = defineEmits(['stopPlayer', 'changePlayerLargeVersion']);
+
+//Composables
+const { 
+  transcriptText,
+  radioUrl,
+  isAdPlaying,
+  displayPlayTime,
+  displayTotalTime,
+ } = usePlayerDisplayTime();
+
+function stopPlayer() {
+  emit("stopPlayer");
+}
+function changePlayerLargeVersion() {
+  emit("changePlayerLargeVersion");
+}
 
-  props: {
-    playerError: { default: false, type: Boolean },
-    displayAlertBar: { default: false, type: Boolean },
-    percentLiveProgress: { default: 0, type: Number },
-    durationLivePosition: { default: 0, type: Number },
-    listenTime: { default: 0, type: Number },
-    hlsReady: { default: false, type: Boolean },
-  },
 
-  emits: ["stopPlayer", "changePlayerLargeVersion"],
-  data() {
-    return {
-      showTimeline: false as boolean,
-    };
-  },
-  methods: {
-    stopPlayer() {
-      this.$emit("stopPlayer");
-    },
-    changePlayerLargeVersion() {
-      this.$emit("changePlayerLargeVersion");
-    },
-  },
-});
 </script>
 
 <style lang="scss">

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

@@ -3,15 +3,15 @@
     id="octopus-player-component"
     class="player-container"
     :class="{ 
-      'player-video': playerVideo,
+      'player-video': playerStore.playerVideo,
       'overflow-hidden': !display
      }"
-    :style="{ height: playerHeight }"
+    :style="{ height: playerStore.playerHeight }"
     @transitionend="onHidden"
   >
     <audio
       id="audio-player"
-      :src="!playerLive && !playerRadio ? audioUrlToPlay : undefined"
+      :src="!playerStore.playerLive && !playerStore.playerRadio ? audioUrlToPlay : undefined"
       autoplay
       @timeupdate="onTimeUpdate"
       @ended="onFinished"
@@ -24,10 +24,10 @@
     />
     <div id="ad-container"></div>
     <template v-if="displayWithTimeout">
-      <PlayerVideo v-if="playerVideo && isNotVideoPage" />
-      <template v-else-if="!playerVideo">
+      <PlayerVideo v-if="playerStore.playerVideo && isNotVideoPage" />
+      <template v-else-if="!playerStore.playerVideo">
         <PlayerCompact
-          v-if="!playerLargeVersion"
+          v-if="!playerStore.playerLargeVersion"
           :player-error="playerError"
           :display-alert-bar="displayAlertBar"
           :percent-live-progress="percentLiveProgress"
@@ -35,7 +35,7 @@
           :listen-time="listenTime"
           :hls-ready="hlsReady"
           @stop-player="stopPlayer"
-          @change-player-large-version="playerUpdateLargeVersion(true)"
+          @change-player-large-version="playerStore.playerUpdateLargeVersion(true)"
         />
         <PlayerLarge
           v-else
@@ -46,17 +46,19 @@
           :listen-time="listenTime"
           :hls-ready="hlsReady"
           @stop-player="stopPlayer"
-          @change-player-large-version="playerUpdateLargeVersion(false)"
+          @change-player-large-version="playerStore.playerUpdateLargeVersion(false)"
         />
       </template>
     </template>
   </section>
 </template>
-<script lang="ts">
-import { playerLogic } from "../../mixins/player/playerLogic";
+<script setup lang="ts">
+import {usePlayerLogic} from "../../composable/player/usePlayerLogic";
 import { usePlayerStore } from "../../../stores/PlayerStore";
-import { mapState, mapActions } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, computed, watch } from "vue";
+import { useRoute } from "vue-router";
+
+//Components
 const PlayerVideo = defineAsyncComponent(
   () => import("./video/PlayerVideo.vue"),
 );
@@ -66,82 +68,65 @@ const PlayerCompact = defineAsyncComponent(
 const PlayerLarge = defineAsyncComponent(
   () => import("../player/PlayerLarge.vue"),
 );
-export default defineComponent({
-  name: "PlayerComponent",
+// Define stores
+const playerStore = usePlayerStore();
+const route = useRoute();
 
-  components: {
-    PlayerCompact,
-    PlayerLarge,
-    PlayerVideo,
-  },
-  mixins: [playerLogic],
-  emits: ["hide"],
-  data() {
-    return {
-      forceHide: false as boolean,
-      listenTime: 0 as number,
-      notListenTime: 0 as number,
-      lastSend: 0 as number,
-      downloadId: null as string | null,
-      playerError: false as boolean,
-      listenError: false as boolean,
-      percentLiveProgress: 0 as number,
-      durationLivePosition: 0 as number,
-      displayAlertBar: false as boolean,
-      audioUrlToPlay: "" as string,
-      hlsReady: false as boolean,
-      displayWithTimeout: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerStatus",
-      "playerHeight",
-      "playerLargeVersion",
-      "playerVideo",
-    ]),
-    display() {
-      return "STOPPED" !== this.playerStatus;
-    },
-    isNotVideoPage() {
-      return "video" !== this.$route.name;
-    },
-  },
+// Variables
+const displayWithTimeout= ref(false);
+const forceHide= ref(false);
 
-  watch: {
-    playerHeight(): void {
-      this.$emit("hide", 0 === this.playerHeight);
-    },
-    display(): void {
-      if (this.display) {
-        this.displayWithTimeout = this.display;
-      } else {
-        setTimeout(() => {
-          this.displayWithTimeout = this.display;
-        }, 3000);
-      }
-    },
-  },
+//Composable
+const {
+  audioUrlToPlay,
+  listenTime,
+  playerError,
+  percentLiveProgress, 
+  durationLivePosition,
+  displayAlertBar,
+  hlsReady, 
+  checkDelaytWithStitching, 
+  stopPlayer, 
+  onError, 
+  onTimeUpdate, 
+  onSeeked, 
+  onFinished, 
+  onPlay
+} = usePlayerLogic(forceHide);
 
-  methods: {
-    ...mapActions(usePlayerStore, [
-      "playerPlay",
-      "playerUpdateLargeVersion",
-      "playerChangeStatus",
-    ]),
-    onHidden(): void {
-      if (this.forceHide) {
-        this.playerPlay();
-        this.forceHide = false;
-      }
-    },
-    onPause() {
-      if ("PLAYING" === this.playerStatus) {
-        this.playerChangeStatus(true);
-      }
-    },
-  },
+// Emits
+const emit = defineEmits(['hide']);
+
+// Computed
+const display = computed(() => { return "STOPPED" !== playerStore.playerStatus;});
+const isNotVideoPage = computed(() => { return "video" !== route.name});
+
+// Watch
+watch(()=>playerStore.playerHeight, async () => {
+  emit("hide", 0 === playerStore.playerHeight);
 });
+watch(display, async () => {
+  if (display.value) {
+    displayWithTimeout.value = display.value;
+  } else {
+    setTimeout(() => {
+      displayWithTimeout.value = display.value;
+    }, 3000);
+  }
+});
+
+// Functions
+function onHidden(): void {
+  if (forceHide.value) {
+    playerStore.playerPlay();
+    forceHide.value = false;
+  }
+}
+function onPause() {
+  if ("PLAYING" === playerStore.playerStatus) {
+    playerStore.playerChangeStatus(true);
+  }
+}
 </script>
 
 <style lang="scss">

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

@@ -66,18 +66,17 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
 import Rewind15Icon from "vue-material-design-icons/Rewind15.vue";
 import FastForward15Icon from "vue-material-design-icons/FastForward15.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
-import { playerDisplayTime } from "../../mixins/player/playerDisplayTime";
-import imageProxy from "../../mixins/imageProxy";
+import {usePlayerDisplayTime} from "../../composable/player/usePlayerDisplayTime";
 import PlayerChaptering from "./chaptering/PlayerChaptering.vue";
 import PlayerImage from "./elements/PlayerImage.vue";
 import PlayerTitle from "./elements/PlayerTitle.vue";
 import PlayerPlayButton from "./elements/PlayerPlayButton.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
-import { mapState, mapActions } from "pinia";
+import { defineAsyncComponent } from "vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 const RadioHistory = defineAsyncComponent(
   () => import("./radio/RadioHistory.vue"),
@@ -85,62 +84,48 @@ const RadioHistory = defineAsyncComponent(
 const PlayerProgressBar = defineAsyncComponent(
   () => import("./progressbar/PlayerProgressBar.vue"),
 );
-export default defineComponent({
-  name: "PlayerLarge",
 
-  components: {
-    PlayerProgressBar,
-    RadioHistory,
-    PlayerChaptering,
-    PlayerImage,
-    PlayerPlayButton,
-    PlayerTitle,
-    ChevronDownIcon,
-    Rewind15Icon,
-    FastForward15Icon,
-  },
-  mixins: [playerDisplayTime, imageProxy],
+//Props
+defineProps( {
+  playerError: { default: false, type: Boolean },
+  displayAlertBar: { default: false, type: Boolean },
+  percentLiveProgress: { default: 0, type: Number },
+  durationLivePosition: { default: 0, type: Number },
+  listenTime: { default: 0, type: Number },
+  hlsReady: { default: false, type: Boolean },
+});
 
-  props: {
-    playerError: { default: false, type: Boolean },
-    displayAlertBar: { default: false, type: Boolean },
-    percentLiveProgress: { default: 0, type: Number },
-    durationLivePosition: { default: 0, type: Number },
-    listenTime: { default: 0, type: Number },
-    hlsReady: { default: false, type: Boolean },
-  },
+//Emits
+const emit = defineEmits(['changePlayerLargeVersion']);
 
-  emits: ["stopPlayer", "changePlayerLargeVersion"],
-  data() {
-    return {
-      showTimeline: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, ["playerPodcast", "playerLive"]),
-  },
-  methods: {
-    ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
-    stopPlayer() {
-      this.$emit("stopPlayer");
-    },
-    changePlayerLargeVersion() {
-      this.$emit("changePlayerLargeVersion");
-    },
-    seekClick(addTime: number): void {
-      const audioPlayer: HTMLAudioElement | null =
-        document.querySelector("#audio-player");
-      if (!audioPlayer) {
-        return;
-      }
-      const seekTo = audioPlayer.currentTime + addTime;
-      if (this.playerPodcast || this.playerLive) {
-        this.playerUpdateSeekTime(seekTo > 0 ? seekTo : 0);
-      }
-      audioPlayer.currentTime = seekTo > 0 ? seekTo : 0;
-    },
-  },
-});
+const playerStore = usePlayerStore();
+
+//Composables
+const { 
+  transcriptText,
+  radioUrl,
+  isAdPlaying,
+  displayPlayTime,
+  displayTotalTime,
+ } = usePlayerDisplayTime();
+
+  function changePlayerLargeVersion() {
+    emit("changePlayerLargeVersion");
+  }
+
+
+ function seekClick(addTime: number): void {
+  const audioPlayer: HTMLAudioElement | null =
+    document.querySelector("#audio-player");
+  if (!audioPlayer) {
+    return;
+  }
+  const seekTo = audioPlayer.currentTime + addTime;
+  if (playerStore.playerPodcast || playerStore.playerLive) {
+    playerStore.playerUpdateSeekTime(seekTo > 0 ? seekTo : 0);
+  }
+  audioPlayer.currentTime = seekTo > 0 ? seekTo : 0;
+}
 </script>
 
 <style lang="scss">

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

@@ -17,7 +17,7 @@
       :title="$t('Episode name page', { name: podcastDisplay?.title })"
     >
       <img
-        v-lazy="proxyImageUrl(podcastImage, imageWidth)"
+        v-lazy="useProxyImageUrl(podcastImage, imageWidth)"
         :width="imageWidth"
         :height="imageWidth"
         role="presentation"
@@ -31,7 +31,7 @@
 </template>
 <script lang="ts">
 import LinkVariantIcon from "vue-material-design-icons/LinkVariant.vue";
-import imageProxy from "../../../mixins/imageProxy";
+import {useImageProxy} from "../../../composable/useImageProxy";
 import { defineComponent } from "vue";
 import { RouteLocationRaw } from "vue-router";
 import { mapState } from "pinia";
@@ -43,10 +43,13 @@ export default defineComponent({
 
   components: { LinkVariantIcon },
 
-  mixins: [imageProxy],
   props: {
     imageWidth: { default: 48, type: Number },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    return { useProxyImageUrl }
+  },
   computed: {
     ...mapState(usePlayerStore, [
       "playerPodcast",

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

@@ -15,7 +15,7 @@
   </component>
 </template>
 <script lang="ts">
-import { fetchRadioData } from "../../../mixins/radio/fetchRadioData";
+import {useFetchRadio} from "../../../composable/radio/usefetchRadioData";
 import { state } from "../../../../stores/ParamSdkStore";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useVastStore } from "../../../../stores/VastStore";
@@ -25,7 +25,6 @@ import { MediaRadio, NextAdvertising } from "@/stores/class/general/player";
 import { Podcast } from "@/stores/class/general/podcast";
 export default defineComponent({
   name: "PlayerTitle",
-  mixins: [fetchRadioData],
 
   props: {
     playerError: { default: false, type: Boolean },
@@ -33,6 +32,11 @@ export default defineComponent({
     titleClass: { default: "", type: String },
   },
 
+  setup(){
+    const { fetchRadioMetadata, displayTitle } = useFetchRadio();
+    return { fetchRadioMetadata, displayTitle };
+  },
+
   data() {
     return {
       radioInterval: undefined as ReturnType<typeof setTimeout> | undefined,

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

@@ -41,7 +41,7 @@ import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { mapState } from "pinia";
 import dayjs from "dayjs";
-import { fetchRadioData } from "../../../mixins/radio/fetchRadioData";
+import radioHelper from "../../../../helper/radio/radioHelper";
 import { defineComponent } from "vue";
 import { MediaRadio } from "@/stores/class/general/player";
 export default defineComponent({
@@ -51,8 +51,6 @@ export default defineComponent({
     ChevronLeftIcon,
     ChevronRightIcon,
   },
-
-  mixins: [fetchRadioData],
   emits: ["updateNotListenTime"],
   data() {
     return {
@@ -138,7 +136,7 @@ export default defineComponent({
       if (item.podcastId) {
         return item.title;
       }
-      return this.displayTitle(item);
+      return radioHelper.displayTitle(item);
     },
   },
 });

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

@@ -16,7 +16,7 @@
 <script lang="ts">
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { mapActions } from "pinia";
-import { playerLogicProgress } from "../../../mixins/player/playerLogicProgress";
+import {usePlayerLogicProgress} from "../../../composable/player/usePlayerLogicProgress";
 import videojs, { VideoJsPlayer } from "video.js";
 import qualitySelectorHls from "videojs-quality-selector-hls";
 if (undefined === videojs.getPlugin("qualitySelectorHls")) {
@@ -25,13 +25,17 @@ if (undefined === videojs.getPlugin("qualitySelectorHls")) {
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlayerVideoHls",
-  mixins: [playerLogicProgress],
 
   props: {
     hlsUrl: { default: "", type: String },
     responsive: { default: false, type: Boolean },
   },
   emits: ["changeValid"],
+
+  setup(){
+    const { downloadId, initLiveDownloadId, onTimeUpdateProgress} = usePlayerLogicProgress();
+    return { downloadId, initLiveDownloadId, onTimeUpdateProgress }
+  },
   data() {
     return {
       errorPlay: "" as string,
@@ -40,11 +44,6 @@ export default defineComponent({
       playing: false as boolean,
       isPaused: false as boolean,
       stalledTimout: undefined as ReturnType<typeof setTimeout> | undefined,
-      //playerLive mixins
-      downloadId: null as string | null,
-      listenTime: 0 as number,
-      notListenTime: 0 as number,
-      lastSend: 0 as number,
     };
   },
   computed: {

package/src/components/pages/EmissionPage.vue

@@ -14,7 +14,7 @@
           <div class="d-flex mb-2">
             <div class="w-100">
               <img
-                v-lazy="proxyImageUrl(emission.imageUrl, '250')"
+                v-lazy="useProxyImageUrl(emission.imageUrl, '250')"
                 width="250"
                 height="250"
                 role="presentation"
@@ -97,11 +97,11 @@
 <script lang="ts">
 import classicApi from "../../api/classicApi";
 import { state } from "../../stores/ParamSdkStore";
-import displayMethods from "../mixins/displayMethods";
-import imageProxy from "../mixins/imageProxy";
-import { orgaComputed } from "../mixins/orgaComputed";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
-import { handle403 } from "../mixins/handle403";
+import displayHelper from "../../helper/displayHelper";
+import {useImageProxy} from "../composable/useImageProxy";
+import {useOrgaComputed} from "../composable/useOrgaComputed";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
+import {useErrorHandler} from "../composable/useErrorHandler";
 import { Emission } from "@/stores/class/general/emission";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import { defineComponent, defineAsyncComponent } from "vue";
@@ -109,6 +109,7 @@ import { AxiosError } from "axios";
 import { mapActions, mapState } from "pinia";
 import { useAuthStore } from "../../stores/AuthStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
+import { useFilterStore } from "../../stores/FilterStore";
 import { useApiStore } from "../../stores/ApiStore";
 import { Podcast } from "@/stores/class/general/podcast";
 const PodcastFilterList = defineAsyncComponent(
@@ -151,11 +152,18 @@ export default defineComponent({
     PodcastPlayButton,
     PodcastmakerHeader,
   },
-  mixins: [displayMethods, handle403, orgaComputed, imageProxy, seoTitleUrl],
   props: {
     emissionId: { default: undefined, type: Number },
   },
 
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+    const { updatePathParams } = useSeoTitleUrl();
+    const {handle403} = useErrorHandler();
+    return { useProxyImageUrl, isPodcastmaker, isEditRights, authOrgaId, updatePathParams, handle403 }
+  },
+
   data() {
     return {
       loaded: false as boolean,
@@ -172,6 +180,7 @@ export default defineComponent({
   computed: {
     ...mapState(useAuthStore, ["isGarRole"]),
     ...mapState(useApiStore, ["apiUrl"]),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     pageParameters() {
       return {
         isShareButtons: state.podcastPage.ShareButtons as boolean,
@@ -211,6 +220,9 @@ export default defineComponent({
 
   methods: {
     ...mapActions(useGeneralStore, ["contentToDisplayUpdate"]),
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
     initError(): void {
       this.error = true;
       this.loaded = true;