@saooti/octopus-sdk 40.2.19 → 41.0.0-SNAPSHOT

package/src/components/pages/RadioPage.vue

@@ -3,7 +3,7 @@
     <template v-if="loaded && !error && radio">
       <PodcastmakerHeader
         v-if="isPodcastmaker"
-        :page-title="$t('Radio')"
+        :page-title="t('Radio')"
         :img-url="radio.imageUrl"
       />
       <div
@@ -35,24 +35,24 @@
       </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 { useGeneralStore } from "../../stores/GeneralStore";
-import { mapActions, mapState } from "pinia";
 import classicApi from "../../api/classicApi";
 import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
 import {useOrgaComputed} from "../composable/useOrgaComputed";
 import {useErrorHandler} from "../composable/useErrorHandler";
 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 { Canal } from "@/stores/class/radio/canal";
 import { useAuthStore } from "../../stores/AuthStore";
+import { useI18n } from "vue-i18n";
 const SharePlayerRadio = defineAsyncComponent(
   () => import("../display/sharing/SharePlayerRadio.vue"),
 );
@@ -75,70 +75,56 @@ const PodcastmakerHeader = defineAsyncComponent(
   () => import("../display/podcastmaker/PodcastmakerHeader.vue"),
 );
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
-export default defineComponent({
-  components: {
-    SharePlayerRadio,
-    ShareSocialsButtons,
-    EditBoxRadio,
-    ClassicLoading,
-    RadioCurrently,
-    RadioImage,
-    RadioPlanning,
-    PodcastmakerHeader,
-    ShareAnonymous
-  },
-  props: {
-    canalId: { default: undefined, type: Number },
-  },
-  setup(){
-    const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
-    const { updatePathParams } = useSeoTitleUrl();
-    const {handle403} = useErrorHandler();
-    return { isPodcastmaker, isEditRights, authOrgaId, updatePathParams, handle403}
-  },
-  data() {
-    return {
-      loaded: false as boolean,
-      radio: undefined as Canal | undefined,
-      error: false as boolean,
-    };
-  },
+ 
+//Props 
+const props = defineProps({
+  canalId: { default: undefined, type: Number },
+});
+
+
+//Data 
+const loaded = ref(false);
+const error = ref(false);
+const radio: Ref<Canal|undefined> = ref(undefined);
+
+
+//Composables
+const { t } = useI18n();
+const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+const { updatePathParams } = useSeoTitleUrl();
+const {handle403} = useErrorHandler();
+const authStore = useAuthStore();
+const generalStore = useGeneralStore();
+
 
-  computed: {
-    ...mapState(useAuthStore, ["isRoleRadio"]),
-    editRight(): boolean {
-      return this.isEditRights(this.radio?.organisationId, this.isRoleRadio);
-    },
-  },
-  watch: {
-    canalId: {
-      immediate: true,
-      handler() {
-        this.getRadioDetails();
-      },
-    },
-  },
-  beforeUnmount() {
-    this.contentToDisplayUpdate(null);
-  },
-  methods: {
-    ...mapActions(useGeneralStore, ["contentToDisplayUpdate"]),
-    async getRadioDetails(): Promise<void> {
-      this.loaded = false;
-      this.error = false;
-      try {
-        this.radio = await classicApi.fetchData<Canal>({
-          api: 14,
-          path: "canal/" + this.canalId,
-        });
-        this.contentToDisplayUpdate(this.radio);
-        this.updatePathParams(this.radio.name);
-      } catch (error) {
-        this.handle403(error as AxiosError);
-        this.error = true;
-      }
-      this.loaded = true;
-    },
-  },
+//Computed
+const editRight = computed(() =>isEditRights(radio.value?.organisationId, authStore.isRoleRadio));
+
+
+//Watch
+watch(()=>props.canalId, () => {getRadioDetails()}, {immediate: true});
+
+
+onBeforeUnmount(() => {
+  generalStore.contentToDisplayUpdate(null);
 });
+
+
+//Methods
+async function getRadioDetails(): Promise<void> {
+  loaded.value = false;
+  loaded.value = false;
+  try {
+    radio.value = await classicApi.fetchData<Canal>({
+      api: 14,
+      path: "canal/" + props.canalId,
+    });
+    generalStore.contentToDisplayUpdate(radio.value);
+    updatePathParams(radio.value.name);
+  } catch (error) {
+    handle403(error as AxiosError);
+    loaded.value = true;
+  }
+  loaded.value = true;
+}
 </script>

package/src/components/pages/RubriquePage.vue

@@ -27,6 +27,7 @@ const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
 
+//Props 
 const props = defineProps({
   pr: { default: 0, type: Number },
   ps: { default: 30, type: Number },
@@ -35,6 +36,10 @@ const props = defineProps({
   routeQuery: { default: "", type: String },
 });
 
+//Data 
+const title = ref("");
+
+//Composables
 const {
   searchPattern,
   organisationId,
@@ -42,11 +47,10 @@ const {
   paginateFirst,
   isInit
 } = useSimplePageParam(props);
-
 const { updatePathParams } = useSeoTitleUrl();
 
-const title = ref("");
 
+//Computed
 const orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);
 const sortOrder = computed(() =>{
   if(searchMinSize.value.length){
@@ -55,7 +59,7 @@ const sortOrder = computed(() =>{
   return undefined;
 });
 
-
+//Watch
 watch(()=>props.rubriqueId, async () => {
   const data = await classicApi.fetchData<Rubrique>({
     api: 0,

package/src/components/pages/SearchPage.vue

@@ -2,11 +2,10 @@
   <section class="page-box">
     <h1>{{ titlePage }}</h1>
     <ClassicSearch
-      v-if="!hideBar"
       v-model:text-init="rawQuery"
       :autofocus="true"
       id-search="search-page-input"
-      :label="$t('Please type at least three characters')"
+      :label="t('Please type at least three characters')"
     />
     <PodcastList
       v-if="!!query"
@@ -18,41 +17,37 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicSearch from "../form/ClassicSearch.vue";
 import PodcastList from "../display/podcasts/PodcastList.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "SearchPage",
-  components: {
-    PodcastList,
-    ClassicSearch,
-  },
-  props: {
-    queryRoute: { default: "", type: String },
-  },
-  data() {
-    return {
-      rawQuery: "" as string,
-      noResult: false as boolean,
-    };
-  },
-  computed: {
-    titlePage(): string {
-      const locale = !this.noResult ? "Search results" : "Search - no results";
-      return this.$t(locale, { query: this.rawQuery });
-    },
-    query(): string {
-      return this.rawQuery && this.rawQuery.length >= 3 ? this.rawQuery : "";
-    },
-  },
-  watch: {
-    queryRoute: {
-      immediate: true,
-      handler() {
-        this.rawQuery = this.queryRoute;
-      },
-    },
-  },
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+//Props 
+const props = defineProps({
+  queryRoute: { default: "", type: String },
 });
+
+//Data 
+const rawQuery = ref("");
+const noResult = ref(false);
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const titlePage = computed(() =>{
+  const locale = !noResult.value ? "Search results" : "Search - no results";
+  return t(locale, { query: rawQuery.value });
+});
+const query = computed(() =>{
+  return rawQuery.value && rawQuery.value.length >= 3 ? rawQuery.value : "";
+});
+
+
+//Watch
+watch(()=>props.queryRoute, () => {
+  rawQuery.value = props.queryRoute;
+}, {immediate: true});
 </script>

package/src/components/pages/TagPage.vue

@@ -1,13 +1,14 @@
 <template>
   <section v-if="isInit" class="page-box tag-page">
     <h1>
-      {{ $t("Search for keyword", {tag:titleDisplay})}}
+      {{ t("Search for keyword", {tag:titleDisplay})}}
       <img
         v-if="isOf"
         width="30"
         height="30"
         class="ouest-france-logo-tag-page"
-        role="presentation"
+        aria-hidden="true"
+        alt=""
         
         title="Ouest France"
         src="/img/ouest_france_logo.svg" 
@@ -39,6 +40,7 @@ const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
 
+//Props 
 const props = defineProps({
   pr: { default: 0, type: Number },
   ps: { default: 30, type: Number },
@@ -47,6 +49,11 @@ const props = defineProps({
   routeQuery: { default: "", type: String },
 });
 
+//Data 
+const titleDisplay = ref("");
+const isOf = ref(false);
+
+//Composables
 const {
   searchPattern,
   organisationId,
@@ -54,15 +61,11 @@ const {
   paginateFirst,
   isInit
 } = useSimplePageParam(props);
-
 const { isOuestFranceTag, formateOfTag } = useTagOf();
-
 const { updatePathParams } = useSeoTitleUrl();
-
-const titleDisplay = ref("");
-const isOf = ref(false);
 const {t} = useI18n();
 
+//Computed
 const orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);
 const sortOrder = computed(() =>{
   if(searchMinSize.value.length){
@@ -71,7 +74,7 @@ const sortOrder = computed(() =>{
   return undefined;
 });
 
-
+//Watch
 watch(()=>props.tag, async () => {
   const tagString = props.tag?? "";
   isOf.value = isOuestFranceTag(tagString);
@@ -79,7 +82,6 @@ watch(()=>props.tag, async () => {
   updatePathParams(t("Search for keyword", {tag:titleDisplay.value}));
 }, {immediate: true});
 
-
 </script>
 <style lang="scss">
 .octopus-app .tag-page{

package/src/components/pages/VideoPage.vue

@@ -7,9 +7,9 @@
           params: { podcastId: podcastId },
         }"
         class="mt-3 mb-3 w-fit-content d-flex align-items-center"
-        :title="$t('Episode name page', { name: podcast?.title })"
+        :title="t('Episode name page', { name: podcast?.title })"
       >
-        <ChevronLeftIcon />{{ $t("Episode page") }}
+        <ChevronLeftIcon />{{ t("Episode page") }}
       </router-link>
       <div
         v-if="videoId || isLiveReadyToRecord"
@@ -78,13 +78,13 @@
       v-if="!error && !videoId && !isLiveReadyToRecord"
       class="text-center text-danger h3"
     >
-      {{ $t("The episode does not have an associated video") }}
+      {{ t("The episode does not have an associated video") }}
     </div>
     <ClassicLoading
-      :loading-text="!loaded ? $t('Loading content ...') : undefined"
+      :loading-text="!loaded ? t('Loading content ...') : undefined"
       :error-text="
         error
-          ? $t(`This episode is not available for (re)listening`)
+          ? t(`This episode is not available for (re)listening`)
           : undefined
       "
     />
@@ -114,6 +114,7 @@ import { usePlayerStore } from "../../stores/PlayerStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
+import { useErrorHandler } from "../composable/useErrorHandler";
 const PlayerVideoDigiteka = defineAsyncComponent(
   () => import("../misc/player/video/PlayerVideoDigiteka.vue"),
 );
@@ -130,10 +131,12 @@ const CountdownOctopus = defineAsyncComponent(
   () => import("../display/live/CountdownOctopus.vue"),
 );
 
+//Props 
 const props = defineProps({
   podcastId:{ default: 0, type: Number },
 })
 
+//Data 
 const loaded = ref(false);
 const podcast: Ref<Podcast | undefined> = ref(undefined);
 const error = ref(false);
@@ -142,6 +145,7 @@ const configPodcast: Ref<CommentsConfig | undefined> = ref(undefined);
 const podcastConference: Ref<Conference | undefined> = ref(undefined);
 const intervalStatusConference: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
 
+//Composables
 const { 
   isLiveReadyToRecord,
   isCounter,
@@ -151,7 +155,7 @@ const {
   durationIso,
   editRight
 } = usePodcastView(podcast, podcastConference);
-
+const {handle403} = useErrorHandler();
 const { updatePathParams } = useSeoTitleUrl();
 const authStore = useAuthStore();
 const apiStore = useApiStore();
@@ -159,10 +163,10 @@ const generalStore = useGeneralStore();
 const playerStore = usePlayerStore();
 const filterStore = useFilterStore();
 const commentStore = useCommentStore();
-
 const {t} = useI18n();
 const route = useRoute();
 
+//Computed
 const videoId = computed(() => podcast.value?.video?.videoId);
 const canPostComment = computed(() => {
   return commentStore.getCanPostComment(
@@ -201,7 +205,7 @@ const overrideText = computed(() => {
   return t("In the process of being published");
 });
 
-
+//Watch
 watch(()=>props.podcastId, async () => {
   await getPodcastDetails();
   if (!podcast.value) {
@@ -216,6 +220,7 @@ onBeforeUnmount(() => {
   clearInterval(intervalStatusConference.value as unknown as number);
 })
 
+//Methods
 async function getPodcastDetails(): Promise<void> {
   loaded.value = false;
   error.value = false;
@@ -257,7 +262,7 @@ async function getPodcastDetails(): Promise<void> {
       }
     }
   } catch (errorCatched) {
-    this.handle403(errorCatched as AxiosError);
+    handle403(errorCatched as AxiosError);
     error.value = true;
   }
   loaded.value = true;
@@ -284,8 +289,6 @@ async function fetchConferenceStatus() {
 }
 </script>
 <style lang="scss">
-
-
 .octopus-app .video-page-container {
   align-items: stretch;
   flex-grow: 1;

package/src/helper/displayHelper.ts

@@ -4,7 +4,7 @@ export default {
     if (!text) return "";
     return text.replace(urlRegex, (url: string) => {
       return (
-        '<a href="' + url + '" target="_blank" rel="noreferrer noopener" :title="$t(\'New window\', {text: '+url+'})">' + url + "</a>"
+        '<a href="' + url + '" target="_blank" rel="noreferrer noopener" :title="t(\'New window\', {text: '+url+'})">' + url + "</a>"
       );
     });
   },

package/src/i18n.ts

@@ -7,14 +7,14 @@ import "dayjs/locale/fr";
 import "dayjs/locale/it";
 import "dayjs/locale/sl";
 
-export function setupI18n(options: { locale: string }, isAuthenticated: boolean, isEducation: boolean) {
+export function setupI18n(options: { [key:string]: string|boolean }, isAuthenticated: boolean, isEducation: boolean) {
   const i18n = createI18n(options);
   loadLocaleMessages(i18n.global, options.locale,  isAuthenticated, isEducation);
   return i18n;
 }
 
 export function setI18nLanguage(i18n: any, locale: string) {
-  i18n.locale = locale;
+  i18n.locale.value= locale;
   dayjs.locale(locale);
   const html = document.querySelector("html");
   if (html) {

package/src/main.ts

@@ -38,7 +38,7 @@ if (0 === language.length) {
   }
 }
 
-const i18n = setupI18n({ locale: language }, false, false);
+const i18n = setupI18n({legacy: false, locale: language }, false, false);
 
 paramStore.initialize({
   generalParameters: {},

package/src/stores/class/general/player.ts

@@ -11,6 +11,7 @@ export interface Radio {
   podcast?: Podcast;
   sessionId?: string;
   dateSessionId?: string;
+  secured?:boolean;
 }
 export interface MediaRadio {
   artist: string;