@saooti/octopus-sdk 40.2.19 → 41.0.1-SNAPSHOT

package/src/components/display/live/LiveList.vue

@@ -4,14 +4,14 @@
       class="d-flex justify-content-between flex-grow-1 mb-3 w-100 align-items-center"
     >
       <h2 class="mb-0">
-        {{ $t("Live") }}
+        {{ t("Live") }}
       </h2>
       <router-link
         v-if="liveRight && !isPodcastmaker"
         to="/main/priv/edit/live"
       >
         <button class="btn btn-primary">
-          {{ $t("Launch a new live") }}
+          {{ t("Launch a new live") }}
         </button>
       </router-link>
     </div>
@@ -19,14 +19,14 @@
       v-if="lives.length || 'ALL' !== selectedStatus"
       v-model:text-init="selectedStatus"
       id-select="status-live-chooser-select"
-      :label="$t('Selection by status')"
+      :label="t('Selection by status')"
       :display-label="false"
       :options="statusArraySelect"
       class="mb-3"
     />
     <ClassicLoading
-      :loading-text="loading ? $t('Loading lives...') : undefined"
-      :error-text="0 === lives.length ? $t('No live currently') : undefined"
+      :loading-text="loading ? t('Loading lives...') : undefined"
+      :error-text="0 === lives.length ? t('No live currently') : undefined"
     />
     <template v-if="lives.length">
       <SwiperList v-if="!loading" :list-object="lives">
@@ -42,7 +42,7 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import LiveItem from "./LiveItem.vue";
 import ClassicSelect from "../../form/ClassicSelect.vue";
@@ -52,85 +52,79 @@ import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import classicApi from "../../../api/classicApi";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapActions, mapState } from "pinia";
 import { Conference } from "@/stores/class/conference/conference";
-import { defineComponent } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
-export default defineComponent({
-  name: "LiveList",
-  components: {
-    LiveItem,
-    ClassicLoading,
-    SwiperList,
-    ClassicSelect,
-  },
+import { useI18n } from "vue-i18n";
 
-  props: {
-    organisationId: { default: undefined, type: String },
-    hideIfEmpty: { default: false, type: Boolean },
-  },
-  setup(){
-    const { isPodcastmaker, isEditRights } = useOrgaComputed();
-    const {handle403} = useErrorHandler();
-    return { isPodcastmaker, isEditRights, handle403 }
-  },
-  data() {
-    return {
-      loading: true as boolean,
-      loaded: true as boolean,
-      lives: [] as Array<Conference>,
-      isLiveAuthorized: false as boolean,
-      statusClassic: ["RECORDING", "PENDING", "PLANNED"] as Array<string>,
-      statusAdmin: ["DEBRIEFING", "ERROR", "PUBLISHING"] as Array<string>,
-      selectedStatus: "ALL" as string,
-    };
-  },
+//Props 
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
+  hideIfEmpty: { default: false, type: Boolean },
+})
 
-  computed: {
-    ...mapState(useAuthStore, ["authOrganisation", "isRoleLive"]),
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    displayLiveList(): boolean {
-      return (
-        (undefined !== this.filterOrgaId ||
-          undefined !== this.organisationId) &&
-        (!this.hideIfEmpty || (this.hideIfEmpty && 0 !== this.lives.length))
-      );
-    },
-    filterOrgaUsed(): string | undefined {
-      return this.filterOrgaId ? this.filterOrgaId : this.organisationId;
-    },
-    editRight(): boolean {
-      return this.isEditRights(this.filterOrgaUsed);
-    },
-    liveRight(): boolean {
-      return (
-        this.isRoleLive &&
-        "true" === this.authOrganisation.attributes?.["live.active"]
-      );
-    },
-    statusArraySelect(): Array<{ title: string; value: string }> {
-      const statusArray = [{ title: this.$t("All lives"), value: "ALL" }];
-      for (const status of this.statusFetched) {
+//Data 
+const loading = ref(true);
+const loaded = ref(true);
+const lives: Ref<Array<Conference>> = ref([]);
+const isLiveAuthorized = ref(false);
+const statusClassic= ref(["RECORDING", "PENDING", "PLANNED"]);
+const statusAdmin = ref(["DEBRIEFING", "ERROR", "PUBLISHING"]);
+const selectedStatus = ref("ALL");
+
+
+//Composables
+const { t } = useI18n();
+const { isPodcastmaker, isEditRights } = useOrgaComputed();
+const {handle403} = useErrorHandler();
+const authStore = useAuthStore();
+const filterStore = useFilterStore();
+const saveFetchStore = useSaveFetchStore();
+
+
+//Computed
+const displayLiveList = computed(() => {
+  return (
+    (undefined !== filterStore.filterOrgaId ||
+      undefined !== props.organisationId) &&
+    (!props.hideIfEmpty || (props.hideIfEmpty && 0 !== lives.value.length))
+  );
+});
+const filterOrgaUsed = computed(() => {
+  return filterStore.filterOrgaId ? filterStore.filterOrgaId : props.organisationId;
+});
+const editRight = computed(() => {
+  return isEditRights(filterOrgaUsed.value);
+});
+const liveRight = computed(() => {
+  return (
+    authStore.isRoleLive &&
+    "true" === authStore.authOrganisation.attributes?.["live.active"]
+  );
+});
+const statusArraySelect = computed(() => {
+  const statusArray = [{ title: t("All lives"), value: "ALL" }];
+      for (const status of statusFetched.value) {
         let title = "";
         switch (status) {
           case "RECORDING":
-            title = this.$t("In live");
+            title = t("In live");
             break;
           case "PENDING":
-            title = this.$t("live upcoming");
+            title = t("live upcoming");
             break;
           case "PLANNED":
-            title = this.$t("live in few time");
+            title = t("live in few time");
             break;
           case "DEBRIEFING":
-            title = this.$t("In debriefing");
+            title = t("In debriefing");
             break;
           case "PUBLISHING":
-            title = this.$t("In the process of being published");
+            title = t("In the process of being published");
             break;
           case "ERROR":
-            title = this.$t("In error");
+            title = t("In error");
             break;
           default:
             break;
@@ -138,75 +132,69 @@ export default defineComponent({
         statusArray.push({ title: title, value: status });
       }
       return statusArray;
-    },
-    statusFetched(): Array<string> {
-      if (this.editRight) {
-        return this.statusClassic.concat(this.statusAdmin);
-      }
-      return this.statusClassic;
-    },
-  },
-  watch: {
-    filterOrgaUsed: {
-      async handler(): Promise<void> {
-        await this.checkIfLiveAuthorized();
-        this.fetchContent();
-      },
-      immediate: true,
-    },
-    selectedStatus() {
-      this.fetchContent();
-    },
-  },
-  methods: {
-    ...mapActions(useSaveFetchStore, ["getOrgaLiveEnabled"]),
-    async checkIfLiveAuthorized(): Promise<void> {
-      if (!this.filterOrgaUsed) {
-        return;
-      }
-      this.isLiveAuthorized = await this.getOrgaLiveEnabled(
-        this.filterOrgaUsed,
-      );
-    },
-    endLoading(): void {
-      this.loading = false;
-      this.loaded = true;
-    },
-    updateLive(live: Conference, index: number): void {
-      this.lives.splice(index, 1, live);
-    },
-    async fetchContent(): Promise<void> {
-      this.lives.length = 0;
-      if (!this.filterOrgaUsed || !this.isLiveAuthorized) {
-        this.endLoading();
-        return;
-      }
-      this.loading = true;
-      this.loaded = false;
-      try {
-        const dataLives = await classicApi.fetchData<Array<Conference>>({
-          api: 9,
-          path: "conference/list",
-          parameters: {
-            organisationId: this.filterOrgaUsed,
-            withPodcastId: true,
-            status:
-              "ALL" === this.selectedStatus
-                ? this.statusFetched
-                : this.selectedStatus,
-          },
-        });
-        this.lives = dataLives.filter((p: Conference | null) => {
-          return null !== p;
-        });
-      } catch (error) {
-        this.handle403(error as AxiosError);
-      }
-      this.endLoading();
-    },
-    deleteLive(index: number): void {
-      this.lives.splice(index, 1);
-    },
-  },
 });
+const statusFetched = computed(() => {
+  if (editRight.value) {
+    return statusClassic.value.concat(statusAdmin.value);
+  }
+  return statusClassic.value;
+});
+
+
+//Watch
+watch(filterOrgaUsed, async () => {
+  await checkIfLiveAuthorized();
+  fetchContent();
+}, {immediate: true});
+watch(selectedStatus, () => fetchContent());
+
+
+//Methods
+async function checkIfLiveAuthorized(): Promise<void> {
+  if (!filterOrgaUsed.value) {
+    return;
+  }
+  isLiveAuthorized.value = await saveFetchStore.getOrgaLiveEnabled(
+    filterOrgaUsed.value,
+  );
+}
+function endLoading(): void {
+  loading.value = false;
+  loaded.value = true;
+}
+function updateLive(live: Conference, index: number): void {
+  lives.value.splice(index, 1, live);
+}
+async function fetchContent(): Promise<void> {
+  lives.value.length = 0;
+  if (!filterOrgaUsed.value || !isLiveAuthorized.value) {
+    endLoading();
+    return;
+  }
+  loading.value = true;
+  loaded.value = false;
+  try {
+    const dataLives = await classicApi.fetchData<Array<Conference>>({
+      api: 9,
+      path: "conference/list",
+      parameters: {
+        organisationId: filterOrgaUsed.value,
+        withPodcastId: true,
+        status:
+          "ALL" === selectedStatus.value
+            ? statusFetched.value
+            : selectedStatus.value,
+      },
+    });
+    lives.value = dataLives.filter((p: Conference | null) => {
+      return null !== p;
+    });
+  } catch (error) {
+    handle403(error as AxiosError);
+  }
+  endLoading();
+}
+function deleteLive(index: number): void {
+  lives.value.splice(index, 1);
+}
 </script>

package/src/components/display/live/RadioCurrently.vue

@@ -4,7 +4,7 @@
       v-if="currentlyPlayingString.length || podcastRadio"
       class="me-2 fw-bold"
     >
-      {{ $t("Currently") + " : " }}
+      {{ t("Currently") + " : " }}
     </div>
     <router-link
       v-if="podcastRadio"
@@ -13,16 +13,17 @@
         name: 'podcast',
         params: { podcastId: podcastRadio.podcastId },
       }"
-      :title="$t('Episode name page', { name: podcastRadio.title })"
+      :title="t('Episode name page', { name: podcastRadio.title })"
     >
       <img
         v-lazy="useProxyImageUrl(podcastRadio.imageUrl, '80')"
         width="80"
         height="80"
         class="small-img-box"
-        role="presentation"
+        aria-hidden="true"
+        alt=""
         
-        :title="$t('Episode name image', { name: podcastRadio.title })"
+        :title="t('Episode name image', { name: podcastRadio.title })"
       />
       <div>{{ podcastRadio.title }}</div>
     </router-link>
@@ -32,87 +33,79 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {useFetchRadio} from "../../composable/radio/usefetchRadioData";
 import { usePlayerStore } from "../../../stores/PlayerStore";
-import { mapState } from "pinia";
 import {useImageProxy} from "../../composable/useImageProxy";
-import { defineComponent } from "vue";
+import { computed, onMounted, onUnmounted, ref, Ref } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
 import { MediaRadio } from "@/stores/class/general/player";
 import { Podcast } from "@/stores/class/general/podcast";
-export default defineComponent({
-  name: "RadioItem",
+import { useI18n } from "vue-i18n";
 
-  components: {},
+//Props 
+const props = defineProps({
+  radio: { default: undefined, type: Object as () => Canal },
+})
 
-  props: {
-    radio: { default: undefined, type: Object as () => Canal },
-  },
-  setup(){
-    const { fetchRadioMetadata, displayTitle } = useFetchRadio();
-    const { useProxyImageUrl } = useImageProxy();
-    return { fetchRadioMetadata, displayTitle, useProxyImageUrl };
-  },
+//Data 
+const currentMetadata: Ref<MediaRadio | undefined> = ref(undefined);
+const currentPodcast: Ref<Podcast | undefined> = ref(undefined);
+const radioInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
 
+  
+//Composables
+const { t } = useI18n();
+const { fetchRadioMetadata, displayTitle } = useFetchRadio();
+const { useProxyImageUrl } = useImageProxy();
+const playerStore = usePlayerStore();
 
-  data() {
-    return {
-      currentMetadata: undefined as undefined | MediaRadio,
-      currentPodcast: undefined as undefined | Podcast,
-      radioInterval: undefined as ReturnType<typeof setTimeout> | undefined,
-    };
-  },
+//Computed
+const playingRadio = computed(() => playerStore.playerRadio && playerStore.playerRadio.canalId === props.radio?.id);
+const podcastRadio = computed(() => {
+  if (playingRadio.value) {
+    return playerStore.playerRadio?.podcast;
+  }
+  return currentPodcast.value;
+});
+const currentlyPlayingString = computed(() => {
+  if (playingRadio.value && playerStore.playerRadio) {
+    return displayTitle(playerStore.playerRadio.metadata);
+  }
+  if (currentMetadata.value) {
+    return displayTitle(currentMetadata.value);
+  }
+  return "";
+});
 
-  computed: {
-    ...mapState(usePlayerStore, ["playerRadio"]),
-    playingRadio() {
-      return this.playerRadio && this.playerRadio.canalId === this.radio?.id;
-    },
-    podcastRadio(): Podcast | undefined {
-      if (this.playingRadio) {
-        return this.playerRadio?.podcast;
-      }
-      return this.currentPodcast;
-    },
-    currentlyPlayingString(): string {
-      if (this.playingRadio && this.playerRadio) {
-        return this.displayTitle(this.playerRadio.metadata);
-      }
-      if (this.currentMetadata) {
-        return this.displayTitle(this.currentMetadata);
-      }
-      return "";
-    },
-  },
+onMounted(()=>{
+  fetchCurrentlyPlaying();
+  radioInterval.value = setInterval(() => {
+    fetchCurrentlyPlaying();
+  }, 10000);
+})
 
-  mounted() {
-    this.fetchCurrentlyPlaying();
-    this.radioInterval = setInterval(() => {
-      this.fetchCurrentlyPlaying();
-    }, 10000);
-  },
-  unmounted(){
-    clearInterval(this.radioInterval as unknown as number);
-    this.radioInterval= undefined;
-  },
-  methods: {
-    async fetchCurrentlyPlaying(): Promise<void> {
-      if (!this.radio || this.playingRadio) {
-        return;
-      }
-      this.fetchRadioMetadata(
-        this.radio.id,
-        this.currentMetadata?.title ?? "",
-        this.updateMetadata,
-      );
-    },
-    updateMetadata(metadata: MediaRadio, podcast?: Podcast): void {
-      this.currentMetadata = metadata;
-      this.currentPodcast = podcast;
-    },
-  },
-});
+onUnmounted(()=>{
+  clearInterval(radioInterval.value as unknown as number);
+  radioInterval.value= undefined;
+})
+
+
+//Methods
+async function fetchCurrentlyPlaying(): Promise<void> {
+  if (!props.radio || playingRadio.value) {
+    return;
+  }
+  fetchRadioMetadata(
+    props.radio.id,
+    currentMetadata.value?.title ?? "",
+    updateMetadata,
+  );
+}
+function updateMetadata(metadata: MediaRadio, podcast?: Podcast): void {
+  currentMetadata.value = metadata;
+  currentPodcast.value = podcast;
+}
 </script>
 <style lang="scss">
 .octopus-app .small-img-box {

package/src/components/display/live/RadioImage.vue

@@ -10,13 +10,14 @@
       "
       width="270"
       height="270"
-      role="presentation"
+      aria-hidden="true"
+        alt=""
       
       class="img-box img-box-podcast"
-      :title="$t('Canal name image', { name: radio.name })"
+      :title="t('Canal name image', { name: radio.name })"
     />
     <button class="radio-play-button" @click="playRadio">
-      <PlayIcon v-if="!playingRadio" :title="$t('Play')" :size="40" />
+      <PlayIcon v-if="!playingRadio" :title="t('Play')" :size="40" />
       <PodcastIsPlaying v-else/>
       <div class="ms-2">
         {{ playText }}
@@ -25,62 +26,50 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PlayIcon from "vue-material-design-icons/Play.vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
-import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState, mapActions } from "pinia";
+import { useAuthStore } from "../../../stores/AuthStore";
 import {useImageProxy} from "../../composable/useImageProxy";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
+import { useI18n } from "vue-i18n";
 const PodcastIsPlaying = defineAsyncComponent(() => import("../podcasts/PodcastIsPlaying.vue"));
-export default defineComponent({
-  name: "RadioImage",
 
-  components: {
-    PlayIcon,
-    PodcastIsPlaying
-  },
+//Props 
+const props = defineProps({
+  radio: { default: undefined, type: Object as () => Canal },
+})
 
-  props: {
-    radio: { default: undefined, type: Object as () => Canal },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    return { useProxyImageUrl }
-  },
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const authStore = useAuthStore();
+const playerStore = usePlayerStore();
 
-  computed: {
-    ...mapState(usePlayerStore, ["playerRadio", "playerStatus"]),
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    playingRadio() {
-      return this.playerRadio && this.playerRadio.canalId === this.radio?.id;
-    },
-    playText(): string {
-      return this.playingRadio && "PLAYING" === this.playerStatus
-        ? this.$t("Pause")
-        : this.$t("Play");
-    },
-  },
-
-  methods: {
-    ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
-    playRadio(): void {
-      if (!this.radio) {
-        return;
-      }
-      if (this.playingRadio) {
-        this.playerChangeStatus("PLAYING" === this.playerStatus);
-      } else {
-        this.playerPlay({
-          canalId: this.radio.id,
-          url: "https://" + this.radio.url + "/live.m3u8",
-          metadata: "",
-        });
-      }
-    },
-  },
+//Computed
+const playingRadio = computed(() => playerStore.playerRadio && playerStore.playerRadio.canalId === props.radio?.id);
+const playText = computed(() => {
+  return playingRadio.value && "PLAYING" === playerStore.playerStatus? t("Pause") : t("Play");
 });
+
+
+//Methods
+function playRadio(): void {
+  if (!props.radio) {
+    return;
+  }
+  if (playingRadio.value) {
+    playerStore.playerChangeStatus("PLAYING" === playerStore.playerStatus);
+  } else {
+    playerStore.playerPlay({
+      canalId: props.radio.id,
+      url: "https://" + props.radio.url + "/live.m3u8",
+      metadata: "",
+      secured: props.radio.organisationId === authStore.authOrganisation?.id && "SECURED"===authStore.authOrganisation?.privacy
+    });
+  }
+}
 </script>
 <style lang="scss">
 .octopus-app .radio-play-button{

package/src/components/display/live/RadioItem.vue

@@ -7,7 +7,7 @@
         params: { canalId: radio.id },
       }"
       class="text-dark classic-element-text"
-      :title="$t('Radio name page', { name: radio.name })"
+      :title="t('Radio name page', { name: radio.name })"
     >
       <div class="element-name mb-2 basic-line-clamp">
         {{ radio.name }}
@@ -20,22 +20,17 @@
   </div>
 </template>
 
-<script lang="ts">
-
+<script setup lang="ts">
 import RadioImage from "./RadioImage.vue";
 import RadioCurrently from "./RadioCurrently.vue";
-import { defineComponent } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
-export default defineComponent({
-  name: "RadioItem",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    RadioCurrently,
-    RadioImage,
-  },
+//Props 
+defineProps({
+  radio: { default: undefined, type: Object as () => Canal },
+})
 
-  props: {
-    radio: { default: undefined, type: Object as () => Canal },
-  },
-});
+//Composables
+const { t } = useI18n();
 </script>