@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

package/src/components/pages/EmissionPage.vue

@@ -3,7 +3,7 @@
     <template v-if="loaded && !error && emission">
       <PodcastmakerHeader
         v-if="isPodcastmaker"
-        :page-title="$t('Emission')"
+        :page-title="t('Emission')"
         :img-url="emission.imageUrl"
       />
       <div
@@ -21,9 +21,9 @@
               v-lazy="useProxyImageUrl(emission.imageUrl, '250')"
               width="250"
               height="250"
-              role="presentation"
+              aria-hidden="true"
               alt=""
-              :title="$t('Emission name image', { name: name })"
+              :title="t('Emission name image', { name: name })"
               class="img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start me-3"
             />
             <div class="d-flex align-items-center justify-content-between">
@@ -42,7 +42,7 @@
                 :just-buttons="true"
               />
               <div class="ms-2 fw-bold">
-                {{ $t("Listen to the latest episode") }}
+                {{ t("Listen to the latest episode") }}
               </div>
             </div>
             <SubscribeButtons
@@ -55,7 +55,7 @@
           </div>
         </section>
         <ShareSocialsButtons
-          v-if="pageParameters.isShareButtons"
+          v-if="state.podcastPage.ShareButtons"
           :organisation-id="emission.orga.id"
         />
         <SharePlayer
@@ -80,19 +80,19 @@
           />
         </section>
         <ShareDistribution
-          v-if="editRight && !isPodcastmaker && securityRight && !isGarRole"
+          v-if="editRight && !isPodcastmaker && securityRight && !authStore.isGarRole"
           :emission-id="emissionId"
         />
       </div>
     </template>
     <ClassicLoading
-      :loading-text="!loaded ? $t('Loading content ...') : undefined"
-      :error-text="error ? $t(`Emission doesn't exist`) : undefined"
+      :loading-text="!loaded ? t('Loading content ...') : undefined"
+      :error-text="error ? t(`Emission doesn't exist`) : undefined"
     />
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../api/classicApi";
 import { state } from "../../stores/ParamSdkStore";
 import displayHelper from "../../helper/displayHelper";
@@ -102,14 +102,14 @@ 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";
+import { defineAsyncComponent, ref, Ref, computed, watch, onBeforeUnmount } from "vue";
 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";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
 const PodcastFilterList = defineAsyncComponent(
   () => import("../display/podcasts/PodcastFilterList.vue"),
@@ -138,128 +138,95 @@ const PodcastPlayButton = defineAsyncComponent(
 const PodcastmakerHeader = defineAsyncComponent(
   () => import("../display/podcastmaker/PodcastmakerHeader.vue"),
 );
-export default defineComponent({
-  components: {
-    PodcastFilterList,
-    SharePlayer,
-    ShareSocialsButtons,
-    ShareDistribution,
-    EditBox,
-    SubscribeButtons,
-    LiveHorizontalList,
-    ClassicLoading,
-    PodcastPlayButton,
-    PodcastmakerHeader,
-    ShareAnonymous
-  },
-  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,
-      title: "" as string,
-      emission: undefined as Emission | undefined,
-      error: false as boolean,
-      fetchLive: true as boolean,
-      lastPodcast: undefined as Podcast | undefined,
-    };
-  },
+//Props 
+const props = defineProps({
+  emissionId: { default: undefined, type: Number },
+})
 
-  computed: {
-    ...mapState(useAuthStore, ["isGarRole"]),
-    ...mapState(useApiStore, ["apiUrl"]),
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    pageParameters() {
-      return {
-        isShareButtons: state.podcastPage.ShareButtons as boolean,
-      };
-    },
-    rssUrl(): string {
-      return `${this.apiUrl}rss/emission/${this.emissionId}`;
-    },
-    name(): string {
-      return this.emission?.name ?? "";
-    },
-    description(): string {
-      return this.emission?.description ?? "";
-    },
-    editRight(): boolean {
-      return this.isEditRights(this.emission?.orga.id);
-    },
-    securityRight() {
-      return (
-        "PUBLIC" === this.emission?.orga?.privacy ||
-        ("PRIVATE" === this.emission?.orga?.privacy &&
-          ![null, undefined, "PRIVATE"].includes(this.emission?.privateRssType))
-      );
-    },
-  },
-  watch: {
-    emissionId: {
-      immediate: true,
-      handler() {
-        this.getEmissionDetails();
-      },
-    },
-  },
-  beforeUnmount() {
-    this.contentToDisplayUpdate(null);
-  },
 
-  methods: {
-    ...mapActions(useGeneralStore, ["contentToDisplayUpdate"]),
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
-    initError(): void {
-      this.error = true;
-      this.loaded = true;
-    },
-    async getEmissionDetails(): Promise<void> {
-      this.loaded = false;
-      this.error = false;
-      try {
-        this.emission = await classicApi.fetchData<Emission>({
-          api: 0,
-          path: "emission/" + this.emissionId,
-        });
-        if (
-          "PUBLIC" !== this.emission.orga.privacy &&
-          this.filterOrgaId !== this.emission.orga.id &&
-          this.$route.query.productor !== this.emission.orga.id
-        ) {
-          this.initError();
-          return;
-        }
-        this.contentToDisplayUpdate(this.emission);
-        this.updatePathParams(this.name);
-        this.loaded = true;
-      } catch (error) {
-        this.handle403(error as AxiosError);
-        this.initError();
-      }
-    },
-    podcastsFetched(podcasts: Array<Podcast>) {
-      for (const podcast of podcasts) {
-        if (
-          "READY" === podcast.processingStatus &&
-          podcast.availability.visibility
-        ) {
-          this.lastPodcast = podcast;
-          return;
-        }
-      }
-    },
-  },
+//Data 
+const loaded = ref(false);
+const error = ref(false);
+const emission: Ref<Emission | undefined> = ref(undefined);
+const lastPodcast: Ref<Podcast | undefined> = ref(undefined);
+
+
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+const { updatePathParams } = useSeoTitleUrl();
+const {handle403} = useErrorHandler();
+const authStore = useAuthStore();
+const filterStore = useFilterStore();
+const generalStore= useGeneralStore();
+const route= useRoute();
+
+
+//Computed
+const name = computed(() => emission.value?.name ?? "");
+const description = computed(() => emission.value?.description ?? "");
+const editRight = computed(() => isEditRights(emission.value?.orga.id));
+const securityRight = computed(() =>{
+  return (
+    "PUBLIC" === emission.value?.orga?.privacy ||
+    ("PRIVATE" === emission.value?.orga?.privacy &&
+      ![null, undefined, "PRIVATE"].includes(emission.value?.privateRssType))
+  );
 });
+
+
+//Watch
+watch(()=>props.emissionId, () => {getEmissionDetails()}, {immediate: true});
+
+
+onBeforeUnmount(() => {
+  generalStore.contentToDisplayUpdate(null);
+})
+
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
+function initError(): void {
+  error.value = true;
+  loaded.value = true;
+}
+async function getEmissionDetails(): Promise<void> {
+  loaded.value = false;
+  error.value = false;
+  try {
+    emission.value = await classicApi.fetchData<Emission>({
+      api: 0,
+      path: "emission/" + props.emissionId,
+    });
+    if (
+      "PUBLIC" !== emission.value.orga.privacy &&
+      filterStore.filterOrgaId !== emission.value.orga.id &&
+      route.query.productor !== emission.value.orga.id
+    ) {
+      initError();
+      return;
+    }
+    generalStore.contentToDisplayUpdate(emission.value);
+    updatePathParams(name.value);
+    loaded.value = true;
+  } catch (error) {
+    handle403(error as AxiosError);
+    initError();
+  }
+}
+function podcastsFetched(podcasts: Array<Podcast>) {
+  for (const podcast of podcasts) {
+    if (
+      "READY" === podcast.processingStatus &&
+      podcast.availability.visibility
+    ) {
+      lastPodcast.value = podcast;
+      return;
+    }
+  }
+}
 </script>

package/src/components/pages/EmissionsPage.vue

@@ -46,6 +46,7 @@ const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
 
+//Props
 const props = defineProps({
   pr: { default: 0, type: Number },
   ps: { default: 30, type: Number },
@@ -60,6 +61,7 @@ const props = defineProps({
   routeRubriques: { default: "", type: String },
 });
 
+//Composables
 const {
   organisationId,
   searchPattern,

package/src/components/pages/Error403Page.vue

@@ -7,48 +7,49 @@
           height="auto"
           class="logo-octopus"
           src="/img/logo_saooti_play_black.svg"
-          role="presentation"
+          aria-hidden="true"
+        alt=""
           title="Saooti"
-          alt=""
+          
         />
-        <h2>{{ $t("You do not have the right to access this page") }}</h2>
+        <h2>{{ t("You do not have the right to access this page") }}</h2>
       </div>
       <img
         width="600"
         height="auto"
         class="stop-octopus-img"
         src="/img/403.webp"
-        role="presentation"
+        aria-hidden="true"
         alt=""
+        
         title="403"
       />
     </div>
 
-    <a v-if="authOrgaId" class="btn btn-primary" href="/logout">
+    <a v-if="authStore.authOrgaId" class="btn btn-primary" href="/logout">
       {{ authText }}
     </a>
     <a v-else class="btn btn-primary" :href="pathLogin">{{ authText }}</a>
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { useApiStore } from "../../stores/ApiStore";
 import { useAuthStore } from "../../stores/AuthStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "Error403Page",
-  computed: {
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    ...mapState(useApiStore, ["frontendUrl"]),
-    authText(): string {
-      return this.authOrgaId ? this.$t("Logout") : this.$t("Login");
-    },
-    pathLogin(){
-      return "/sso/login?redirect_url="+encodeURI(this.frontendUrl + this.$route.fullPath);
-    },
-  },
-});
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+//Composables
+const { t } = useI18n();
+const authStore= useAuthStore();
+const apiStore= useApiStore();
+const route = useRoute()
+
+//Computed
+const authText = computed(() => authStore.authOrgaId ? t("Logout") : t("Login"));
+const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
+
 </script>
 <style lang="scss">
 .octopus-app .not-auth-content {

package/src/components/pages/HomePage.vue

@@ -11,7 +11,7 @@
           style="min-height: 650px"
           :iab-id="c.id"
           :title="c.name"
-          :button-text="$t('All podcast button', { name: c.name })"
+          :button-text="t('All podcast button', { name: c.name })"
         />
         <template #preview>
           <div style="min-height: 650px"></div>
@@ -30,7 +30,7 @@
           :rubrique-id="rubriqueId.concat(r.rubriqueId)"
           :title="r.name"
           :href="rubriqueMorePath? rubriqueMorePath+r.rubriqueId: undefined"
-          :button-text="$t('All podcast button', { name: r.name })"
+          :button-text="t('All podcast button', { name: r.name })"
         />
         <template #preview>
           <div style="min-height: 650px"></div>
@@ -42,22 +42,22 @@
           :to="{
             name: 'podcasts',
             query: {
-              iabId: filterIab?.id,
-              rubriquesId: rubriqueQueryParam,
-              productor: filterOrgaId
+              iabId: filterStore.filterIab?.id,
+              rubriquesId: rubriqueQueryParam.value,
+              productor: filterStore.filterOrgaId
             },
           }"
           class="btn btn-primary align-self-center w-fit-content mt-5 m-auto"
         >
-          {{ $t("See more") }}
+          {{ t("See more") }}
         </router-link>
         <PodcastInlineList
           v-else-if="displayWithoutRubriques"
           :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
           :rubrique-id="rubriqueId"
-          :title="$t('Without rubric')"
+          :title="t('Without rubric')"
           :button-text="
-            $t('All podcast button', { name: $t('Without rubric') })
+            t('All podcast button', { name: t('Without rubric') })
           "
         />
       </template>
@@ -65,105 +65,96 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import ClassicLazy from "../misc/ClassicLazy.vue";
 import { state } from "../../stores/ParamSdkStore";
-import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import { Category } from "@/stores/class/general/category";
-export default defineComponent({
-  name: "HomePage",
-  components: {
-    PodcastInlineList,
-    ClassicLazy,
-  },
-  props: {
-    displayWithoutRubriques: { default: true, type: Boolean },
-    rubriqueMorePath: { default: undefined, type: String },
-  },
-  emits: ["categoriesLength"],
-  setup(){
-    const { rubriqueQueryParam } = useRubriquesFilterComputed();
-    return { rubriqueQueryParam }
-  },
-  data() {
-    return {
-      rubriqueId: [] as Array<number>,
-      rubriqueMaxDisplay: 20 as number,
-    };
-  },
-  computed: {
-    ...mapState(useGeneralStore, ["storedCategories", "storedCategoriesOrga"]),
-    ...mapState(useFilterStore, [
-      "filterRubriquage",
-      "filterOrgaId",
-      "filterRubrique",
-      "filterRubriqueDisplay",
-      "filterIab",
-    ]),
-    rubriqueDisplay(): Array<Rubrique> {
-      return this.filterRubriqueDisplay.filter(
-        (rubrique: Rubrique) => 0 !== rubrique.podcastCount,
-      );
-    },
-    rubriqueToShow(): Array<Rubrique> {
-      if (
-        !this.rubriqueDisplay ||
-        this.rubriqueDisplay.length < this.rubriqueMaxDisplay
-      ) {
-        return this.rubriqueDisplay ?? [];
-      }
-      return this.rubriqueDisplay.slice(0, this.rubriqueMaxDisplay);
-    },
-    rubriquageFilter(): Array<Rubriquage> {
-      return this.filterOrgaId ? this.filterRubriquage : [];
-    },
-    categories(): Array<Category> {
-      let arrayCategories: Array<Category> = [];
-      if (this.filterIab) {
-        return [this.filterIab];
-      }
-      if (this.filterOrgaId) {
-        arrayCategories = this.storedCategoriesOrga.filter((c: Category) => {
-          return c.podcastOrganisationCount;
-        });
-      } else {
-        arrayCategories = this.storedCategories.filter((c: Category) => {
-          if (state.generalParameters.podcastmaker)
-            return c.podcastOrganisationCount;
-          return c.podcastCount;
-        });
-      }
-      this.$emit("categoriesLength", arrayCategories.length);
-      return arrayCategories;
-    },
-  },
-  watch: {
-    filterRubrique: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.updateRubriquageFilter();
-      },
-    },
-  },
-  methods: {
-    updateRubriquageFilter() {
-      const length = this.filterRubrique.length;
-      const rubriqueId: Array<number> = [];
-      for (let index = 0; index < length; index++) {
-        if (0 < this.filterRubrique[index].rubriqueId) {
-          rubriqueId.push(this.filterRubrique[index].rubriqueId);
-        }
-      }
-      this.rubriqueId = rubriqueId;
-    },
-  },
+import { useI18n } from "vue-i18n";
+
+//Props
+defineProps({
+  displayWithoutRubriques: { default: true, type: Boolean },
+  rubriqueMorePath: { default: undefined, type: String },
+})
+
+//Data
+const rubriqueId: Ref<Array<number>> = ref([]);
+const rubriqueMaxDisplay = ref(20);
+
+
+//Emits
+const emit = defineEmits(["categoriesLength"]);
+  
+
+//Composables
+const { t } = useI18n();
+const { rubriqueQueryParam } = useRubriquesFilterComputed();
+const generalStore = useGeneralStore();
+const filterStore = useFilterStore();
+
+
+
+//Computed
+const rubriqueDisplay = computed(() => {
+  return filterStore.filterRubriqueDisplay.filter(
+    (rubrique: Rubrique) => 0 !== rubrique.podcastCount,
+  );
 });
+const rubriqueToShow = computed(() => {
+  if (
+    !rubriqueDisplay.value ||
+    rubriqueDisplay.value.length < rubriqueMaxDisplay.value
+  ) {
+    return rubriqueDisplay.value ?? [];
+  }
+  return rubriqueDisplay.value.slice(0, rubriqueMaxDisplay.value);
+});
+const rubriquageFilter = computed(() => {
+  return filterStore.filterOrgaId ? filterStore.filterRubriquage : [];
+});
+const categories = computed(() => {
+  let arrayCategories: Array<Category> = [];
+  if (filterStore.filterIab) {
+    return [filterStore.filterIab];
+  }
+  if (filterStore.filterOrgaId) {
+    arrayCategories = generalStore.storedCategoriesOrga.filter((c: Category) => {
+      return c.podcastOrganisationCount;
+    });
+  } else {
+    arrayCategories = generalStore.storedCategories.filter((c: Category) => {
+      if (state.generalParameters.podcastmaker)
+        return c.podcastOrganisationCount;
+      return c.podcastCount;
+    });
+  }
+  emit("categoriesLength", arrayCategories.length);
+  return arrayCategories;
+});
+
+
+//Watch
+watch(()=>filterStore.filterRubrique, () => {
+  updateRubriquageFilter();
+}, {deep: true, immediate: true});
+
+
+//Methods
+function updateRubriquageFilter() {
+  const length = filterStore.filterRubrique.length;
+  const rubriquesId: Array<number> = [];
+  for (let index = 0; index < length; index++) {
+    if (0 < filterStore.filterRubrique[index].rubriqueId) {
+      rubriquesId.push(filterStore.filterRubrique[index].rubriqueId);
+    }
+  }
+  rubriqueId.value = rubriquesId;
+}
+
 </script>