@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

package/src/components/display/sharing/SharePlayerColors.vue

@@ -2,7 +2,7 @@
   <div class="d-flex">
     <div class="d-flex flex-column align-items-center flex-shrink-0 me-4">
       <div class="h4 mb-2">
-        {{ $t("Choose color") }}
+        {{ t("Choose color") }}
       </div>
       <VSwatches
         :model-value="color"
@@ -12,12 +12,12 @@
         colors="text-advanced"
         popover-to="right"
         :data-color="color"
-        @update:model-value="$emit('update:color', $event)"
+        @update:model-value="emitColor($event)"
       />
     </div>
     <div class="d-flex flex-column align-items-center">
       <div class="h4 mb-2">
-        {{ $t("Choose theme") }}
+        {{ t("Choose theme") }}
       </div>
       <VSwatches
         :model-value="theme"
@@ -27,25 +27,34 @@
         colors="text-advanced"
         popover-to="right"
         :data-color="theme"
-        @update:model-value="$emit('update:theme', $event)"
+        @update:model-value="emitTheme($event)"
       />
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    VSwatches,
-  },
+import { useI18n } from "vue-i18n";
 
-  props: {
-    color: { default: "#40a372", type: String },
-    theme: { default: "#000000", type: String },
-  },
-  emits: ["update:color", "update:theme"],
-});
+//Props 
+defineProps({
+  color: { default: "#40a372", type: String },
+  theme: { default: "#000000", type: String },
+})
+
+//Emits
+const emit = defineEmits(["update:color", "update:theme"]);
+
+//Composables
+const { t } = useI18n();
+
+//Methods
+function emitColor(color: string){
+  emit('update:color', color);
+}
+function emitTheme(theme: string){
+  emit('update:theme', theme);
+}
 </script>

package/src/components/display/sharing/SharePlayerRadio.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="module-box overflow-visible">
     <h2 class="mb-3">
-      {{ $t("Embed") }}
+      {{ t("Embed") }}
     </h2>
     <div class="d-flex">
       <iframe
@@ -16,7 +16,7 @@
       />
       <div class="d-flex flex-column">
         <SharePlayerColors v-model:color="color" v-model:theme="theme" />
-        <div class="h4 mb-2 mt-3">{{ $t("player parameters") }}</div>
+        <div class="h4 mb-2 mt-3">{{ t("player parameters") }}</div>
         <PlayerCommonParameters
           v-if="displayInsertCode"
           v-model:insert-code="insertCode"
@@ -31,20 +31,20 @@
           class="btn btn-primary w-fit-content mt-3"
           @click="isShareModal = true"
         >
-          {{ $t("Share the player") }}
+          {{ t("Share the player") }}
         </button>
       </div>
     </div>
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
 import { useApiStore } from "../../../stores/ApiStore";
 import { useAuthStore } from "../../../stores/AuthStore";
-import { mapState, mapActions } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import {  defineAsyncComponent, ref, Ref, computed, onBeforeMount } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
+import { useI18n } from "vue-i18n";
 const ShareModalPlayer = defineAsyncComponent(
   () => import("../../misc/modal/ShareModalPlayer.vue"),
 );
@@ -54,72 +54,64 @@ const SharePlayerColors = defineAsyncComponent(
 const PlayerCommonParameters = defineAsyncComponent(
   () => import("./PlayerCommonParameters.vue"),
 );
-export default defineComponent({
-  components: {
-    ShareModalPlayer,
-    SharePlayerColors,
-    PlayerCommonParameters,
-  },
-  props: {
-    canal: { default: undefined, type: Object as () => Canal },
-    organisationId: { default: undefined, type: String },
-  },
 
-  data() {
-    return {
-      isShareModal: false as boolean,
-      color: "#40a372" as string,
-      theme: "#000000" as string,
-      orgaAttributes: undefined as
-        | { [key: string]: string | number | boolean | undefined }
-        | undefined,
-      insertCode: false as boolean,
-    };
-  },
+//Props 
+const props = defineProps({
+  canal: { default: undefined, type: Object as () => Canal },
+  organisationId: { default: undefined, type: String },
+})
 
-  computed: {
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    ...mapState(useApiStore, ["miniplayerUrl"]),
-    displayInsertCode(): boolean {
-      return this.canal?.organisationId === this.authOrgaId;
-    },
-    iFrameSrc(): string {
-      let url = `${this.miniplayerUrl}miniplayer/radio/${
-        this.canal?.id
-      }?distributorId=${this.organisationId}&color=${this.color.substring(
-        1,
-      )}&theme=${this.theme.substring(1)}`;
-      if (this.insertCode) {
-        url += "&insertCode=true";
-      }
-      return url;
-    },
-    iFrame(): string {
-      return `<iframe src="${this.iFrameSrc}" width="100%" height="140px" scrolling="no" allow="clipboard-read; clipboard-write; autoplay" frameborder="0"></iframe>`;
-    },
-  },
-  created() {
-    this.initSharePlayer();
-  },
-  methods: {
-    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
-    async initSharePlayer() {
-      this.orgaAttributes = await this.getOrgaAttributes(this.authOrgaId ?? "");
-      this.initColor();
-    },
-    initColor(): void {
-      if (!this.orgaAttributes) {
-        return;
-      }
-      this.color = Object.hasOwn(this.orgaAttributes, "COLOR")
-        ? (this.orgaAttributes.COLOR as string)
-        : "#40a372";
-      this.theme = Object.hasOwn(this.orgaAttributes, "THEME")
-        ? (this.orgaAttributes.THEME as string)
-        : "#000000";
-    },
-  },
+//Data 
+const isShareModal = ref(false);
+const color = ref("#40a372");
+const theme = ref("#000000");
+const insertCode = ref(false);
+const orgaAttributes: Ref<{[key: string]: string | number | boolean | undefined }| undefined> = ref(undefined);
+  
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+const saveFetchStore = useSaveFetchStore();
+
+
+//Computed
+const displayInsertCode = computed(() => props.canal?.organisationId === authStore.authOrgaId);
+const iFrameSrc = computed(() => {
+  let url = `${apiStore.miniplayerUrl}miniplayer/radio/${
+    props.canal?.id
+  }?distributorId=${props.organisationId}&color=${color.value.substring(
+    1,
+  )}&theme=${theme.value.substring(1)}`;
+  if (insertCode.value) {
+    url += "&insertCode=true";
+  }
+  return url;
+});
+const iFrame = computed(() => {
+  return `<iframe src="${iFrameSrc.value}" width="100%" height="140px" scrolling="no" allow="clipboard-read; clipboard-write; autoplay"></iframe>`;
 });
+
+
+onBeforeMount(()=>initSharePlayer())
+
+//Methods
+async function initSharePlayer() {
+  orgaAttributes.value = await saveFetchStore.getOrgaAttributes(authStore.authOrgaId ?? "");
+  initColor();
+}
+function initColor(): void {
+  if (!orgaAttributes.value) {
+    return;
+  }
+  color.value = Object.hasOwn(orgaAttributes.value, "COLOR")
+    ? (orgaAttributes.value.COLOR as string)
+    : "#40a372";
+  theme.value = Object.hasOwn(orgaAttributes.value, "THEME")
+    ? (orgaAttributes.value.THEME as string)
+    : "#000000";
+}
 </script>
 
 <style lang="scss">

package/src/components/display/sharing/SharePlayerTypes.vue

@@ -5,7 +5,7 @@
       :value="iFrameModel"
       @change="selectChange($event)"
     >
-      <optgroup v-show="isCustomPlayer" id="player-default-opt-group" :label="$t('Default version')"></optgroup>
+      <optgroup v-show="isCustomPlayer" id="player-default-opt-group" :label="t('Default version')"></optgroup>
       <Teleport defer :disabled="!isCustomPlayer" to="#player-default-opt-group">
         <template v-for="option in optionsSelect" :key="option.value">
           <option v-if="option.condition" :value="option.value">
@@ -14,206 +14,206 @@
         </template>
       </Teleport>
       
-      <optgroup v-if="isCustomPlayer" :label="$t('Custom version')">
+      <optgroup v-if="isCustomPlayer" :label="t('Custom version')">
         <option
           v-for="player in customPlayersDisplay"
           :key="player.customId"
           :value="player.customId"
         >
-          {{ $t("Custom version") + " «" + player.name + "»" }}
+          {{ t("Custom version") + " «" + player.name + "»" }}
         </option>
       </optgroup>
     </select>
   </label>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../../api/classicApi";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { CustomPlayer } from "@/stores/class/general/customPlayer";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, onMounted, Ref, ref } from "vue";
 import { Emission } from "@/stores/class/general/emission";
 import { Playlist } from "@/stores/class/general/playlist";
 import { InterfacePageable } from "@/stores/class/general/interfacePageable";
-import { mapState } from "pinia";
-export default defineComponent({
-  props: {
-    podcast: { default: undefined, type: Object as () => Podcast },
-    emission: { default: undefined, type: Object as () => Emission },
-    playlist: { default: undefined, type: Object as () => Playlist },
-    iFrameModel: { default: "default", type: String },
-    typeCustomPlayer: { default: "", type: String },
-    organisationId: { default: undefined, type: String },
-    isLive: { default: false, type: Boolean },
-  },
-  emits: ["update:iFrameModel", "update:typeCustomPlayer"],
+import { useI18n } from "vue-i18n";
 
-  data() {
-    return {
-      customPlayers: [] as Array<CustomPlayer>,
-    };
-  },
-  computed: {
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    isCustomPlayer(){
-      return 1<=this.customPlayersDisplay.length;
+//Props 
+const props = defineProps({
+  podcast: { default: undefined, type: Object as () => Podcast },
+  emission: { default: undefined, type: Object as () => Emission },
+  playlist: { default: undefined, type: Object as () => Playlist },
+  iFrameModel: { default: "default", type: String },
+  typeCustomPlayer: { default: "", type: String },
+  organisationId: { default: undefined, type: String },
+  isLive: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["update:iFrameModel", "update:typeCustomPlayer"]);
+
+//Data 
+const customPlayers: Ref<Array<CustomPlayer>> = ref([]);
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+
+//Computed
+const isCustomPlayer = computed(() => 1<=customPlayersDisplay.value.length);
+const isVideoPodcast = computed(() => undefined !== props.podcast?.video?.videoId);
+const optionsSelectLive = computed(() => {
+  return [
+    { name: t("Large version"), value: "large", condition: true },
+    {
+      name: t("High version"),
+      value: "videoLive",
+      condition: props.podcast?.podcastId,
     },
-    isVideoPodcast(): boolean {
-      return (
-        undefined !== this.podcast && undefined !== this.podcast.video?.videoId
-      );
+  ];
+});
+const optionsSelect = computed(() => {
+  if (props.isLive) {
+    return optionsSelectLive.value;
+  }
+  return [
+    {
+      name: t("Video Version"),
+      value: "video",
+      condition: isVideoPodcast.value,
     },
-    optionsSelectLive() {
-      return [
-        { name: this.$t("Large version"), value: "large", condition: true },
-        {
-          name: this.$t("High version"),
-          value: "videoLive",
-          condition: this.podcast?.podcastId,
-        },
-      ];
+    { name: t("Default version"), value: "default", condition: true },
+    { name: t("Large version"), value: "largeMore", condition: props.podcast?.podcastId, },
+    {
+      name: t("Minimalist length version"),
+      value: "large",
+      condition: props.podcast?.podcastId,
     },
-    optionsSelect() {
-      if (this.isLive) {
-        return this.optionsSelectLive;
-      }
-      return [
-        {
-          name: this.$t("Video Version"),
-          value: "video",
-          condition: this.isVideoPodcast,
-        },
-        { name: this.$t("Default version"), value: "default", condition: true },
-        { name: this.$t("Large version"), value: "largeMore", condition: this.podcast?.podcastId, },
-        {
-          name: this.$t("Minimalist length version"),
-          value: "large",
-          condition: this.podcast?.podcastId,
-        },
-        {
-          name: this.$t("Emission version"),
-          value: "emission",
-          condition: this.podcast?.podcastId,
-        },
-        {
-          name: this.$t("Large emission version"),
-          value: "emissionLarge",
-          condition: this.podcast?.podcastId,
-        },
-      ];
+    {
+      name: t("Emission version"),
+      value: "emission",
+      condition: props.podcast?.podcastId,
     },
-    customPlayersDisplay(): Array<CustomPlayer> {
-      return this.customPlayers.filter((player: CustomPlayer) => {
-        return (
-          (("EPISODE" === player.typePlayer) &&
-            this.podcast?.podcastId) ||
-          ("EMISSION" === player.typePlayer &&
-            this.emission &&
-            !this.podcast) ||
-          ("PLAYLIST" === player.typePlayer && this.playlist)
-        );
-      }).sort((a,b) => {
-        if(a.name > b.name){
-          return 1;
-        }
-        return (b.name > a.name) ? -1 : 0;
-      });
+    {
+      name: t("Large emission version"),
+      value: "emissionLarge",
+      condition: props.podcast?.podcastId,
     },
-  },
-  created() {
-    if (this.isLive) {
-      return;
+  ];
+});
+const customPlayersDisplay = computed(() => {
+  return customPlayers.value.filter((player: CustomPlayer) => {
+    return (
+      (("EPISODE" === player.typePlayer) &&
+        props.podcast?.podcastId) ||
+      ("EMISSION" === player.typePlayer &&
+      props.emission &&
+        !props.podcast) ||
+      ("PLAYLIST" === player.typePlayer && props.playlist)
+    );
+  }).sort((a,b) => {
+    if(a.name > b.name){
+      return 1;
     }
-    this.initCustomPlayers();
-  },
-  mounted(){
-    if (this.isVideoPodcast) {
-      this.$emit("update:iFrameModel", "video");
+    return (b.name > a.name) ? -1 : 0;
+  });
+});
+
+
+onBeforeMount(()=>{
+  if (props.isLive) {
+    return;
+  }
+  initCustomPlayers();
+})
+onMounted(()=>{
+  if (isVideoPodcast.value) {
+    emit("update:iFrameModel", "video");
+  }
+})
+ 
+
+//Methods
+function isNumeric(value: string): boolean {
+  return /^-?\d+$/.test(value);
+}
+function selectChange($event: any) {
+  const val = $event.target.value;
+  if (!val) {
+    return;
+  }
+  if (isNumeric(val)) {
+    const customPlayer = customPlayersDisplay.value.find((p) => {
+      return p.customId.toString() === val;
+    });
+    if (customPlayer) {
+      selectCustomPlayer(customPlayer);
     }
-  },
-  methods: {
-    isNumeric(value: string): boolean {
-      return /^-?\d+$/.test(value);
-    },
-    selectChange($event: any) {
-      const val = $event.target.value;
-      if (!val) {
-        return;
-      }
-      if (this.isNumeric(val)) {
-        const customPlayer = this.customPlayersDisplay.find((p) => {
-          return p.customId.toString() === val;
-        });
-        if (customPlayer) {
-          this.selectCustomPlayer(customPlayer);
-        }
-      } else {
-        this.$emit("update:iFrameModel", val);
-      }
-    },
-    async fetchPlayerPaginate(type: string): Promise<CustomPlayer[]> {
-      let players = await classicApi.fetchData<InterfacePageable<CustomPlayer>>(
-        {
-          api: 6,
-          path: "customPlayer/type/" + this.organisationId + "/" + type,
-          isNotAuth: true,
-        },
-      );
-      let playersContent = players.content;
-      const totalCount = players.totalElements;
-      let index = 1;
-      while (totalCount > playersContent.length) {
-        players = await classicApi.fetchData<InterfacePageable<CustomPlayer>>({
-          api: 6,
-          path:
-            "customPlayer/type/" +
-            this.organisationId +
-            "/" +
-            type +
-            "?start=" +
-            index,
-          isNotAuth: true,
-        });
-        playersContent = playersContent.concat(players.content);
-        ++index;
-      }
-      return playersContent;
-    },
-    selectCustomPlayer(customPlayer: CustomPlayer) {
-      this.$emit("update:typeCustomPlayer", customPlayer.typePlayer);
-      this.$emit("update:iFrameModel", customPlayer.customId.toString());
+  } else {
+    emit("update:iFrameModel", val);
+  }
+}
+async function fetchPlayerPaginate(type: string): Promise<CustomPlayer[]> {
+  let players = await classicApi.fetchData<InterfacePageable<CustomPlayer>>(
+    {
+      api: 6,
+      path: "customPlayer/type/" + props.organisationId + "/" + type,
+      isNotAuth: true,
     },
-    async fetchCustomPlayers(
-      type: string,
-      selectIfPossible = true,
-    ): Promise<boolean> {
-      const customPlayersForType = await this.fetchPlayerPaginate(type);
-      this.customPlayers = this.customPlayers.concat(customPlayersForType);
-      if (
-        !this.isVideoPodcast &&
-        selectIfPossible &&
-        customPlayersForType?.[0]?.selected
-      ) {
-        this.selectCustomPlayer(this.customPlayers[0]);
-        return true;
-      }
-      return false;
-    },
-    async initCustomPlayers(): Promise<void> {
-      if (undefined === this.authOrgaId) return;
-      if (this.playlist) {
-        this.fetchCustomPlayers("PLAYLIST");
-      } else if (this.emission && !this.podcast) {
-        this.fetchCustomPlayers("EMISSION");
-      } else {
-        const episodeSelected = await this.fetchCustomPlayers("EPISODE");
-        await this.fetchCustomPlayers(
-          "EMISSION",
-          !episodeSelected,
-        );
-      }
-    },
-  },
-});
+  );
+  let playersContent = players.content;
+  const totalCount = players.totalElements;
+  let index = 1;
+  while (totalCount > playersContent.length) {
+    players = await classicApi.fetchData<InterfacePageable<CustomPlayer>>({
+      api: 6,
+      path:
+        "customPlayer/type/" +
+        props.organisationId +
+        "/" +
+        type +
+        "?start=" +
+        index,
+      isNotAuth: true,
+    });
+    playersContent = playersContent.concat(players.content);
+    ++index;
+  }
+  return playersContent;
+}
+function selectCustomPlayer(customPlayer: CustomPlayer) {
+  emit("update:typeCustomPlayer", customPlayer.typePlayer);
+  emit("update:iFrameModel", customPlayer.customId.toString());
+}
+
+async function fetchCustomPlayers(
+  type: string,
+  selectIfPossible = true,
+): Promise<boolean> {
+  const customPlayersForType = await fetchPlayerPaginate(type);
+  customPlayers.value = customPlayers.value.concat(customPlayersForType);
+  if (
+    !isVideoPodcast.value &&
+    selectIfPossible &&
+    customPlayersForType?.[0]?.selected
+  ) {
+    selectCustomPlayer(customPlayers.value[0]);
+    return true;
+  }
+  return false;
+}
+async function initCustomPlayers(): Promise<void> {
+  if (undefined === authStore.authOrgaId) return;
+  if (props.playlist) {
+    fetchCustomPlayers("PLAYLIST");
+  } else if (props.emission && !props.podcast) {
+    fetchCustomPlayers("EMISSION");
+  } else {
+    const episodeSelected = await fetchCustomPlayers("EPISODE");
+    await fetchCustomPlayers(
+      "EMISSION",
+      !episodeSelected,
+    );
+  }
+}
 </script>