@saooti/octopus-sdk 40.0.3 → 40.1.0

package/src/components/composable/useMetaTitleWatch.ts

@@ -0,0 +1,14 @@
+import { useRoute } from "vue-router";
+import { useMetaTitle } from "./useMetaTitle";
+import { watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+export const useMetaTitleWatch = ()=>{
+  const { updateMetaTitle } = useMetaTitle();
+
+  const route = useRoute();
+  const i18n = useI18n();
+
+  watch(route, () => updateMetaTitle(), {immediate:true});
+  watch(()=>i18n.locale, () => updateMetaTitle());
+}

package/src/components/composable/useOrgaComputed.ts

@@ -0,0 +1,23 @@
+import { computed } from "vue";
+import { useAuthStore } from "../../stores/AuthStore";
+import { state } from "../../stores/ParamSdkStore";
+export const useOrgaComputed = ()=>{
+
+  const authStore = useAuthStore();
+
+  const isPodcastmaker = computed(() =>state.generalParameters.podcastmaker as boolean);
+
+  function isEditRights(orgaId?: string, condition = true){
+    return (
+      (condition && undefined!==authStore.authOrgaId&&
+        authStore.authOrgaId === orgaId) ||
+        authStore.isRoleAdmin
+    );
+  }
+
+	return {
+    isPodcastmaker,
+    isEditRights,
+    authOrgaId: authStore.authOrgaId
+	}
+}

package/src/components/composable/useOrganisationFilter.ts

@@ -0,0 +1,65 @@
+import {useErrorHandler} from "./useErrorHandler";
+import { useFilterStore } from "../../stores/FilterStore";
+import { useSaveFetchStore } from "../../stores/SaveFetchStore";
+import { state } from "../../stores/ParamSdkStore";
+import classicApi from "../../api/classicApi";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { useRoute, useRouter } from "vue-router";
+import { AxiosError } from "axios";
+export const useOrganisationFilter= ()=>{
+
+  const {handle403} = useErrorHandler();
+
+  const filterStore = useFilterStore();
+  const saveFetchStore = useSaveFetchStore();
+
+  const route = useRoute();
+  const router = useRouter();
+ 
+  async function  selectOrganisation(organisationId: string): Promise<void> {
+    try {
+      const response = await saveFetchStore.getOrgaData(organisationId);
+      const data = await classicApi.fetchData<Array<Rubriquage>>({
+        api: 0,
+        path:"rubriquage/find/" + organisationId,
+        parameters:{
+          sort: "HOMEPAGEORDER",
+          homePageOrder: true,
+        },
+        specialTreatement:true
+      });
+      const isLive = await saveFetchStore.getOrgaLiveEnabled(organisationId);
+      filterStore.filterUpdateOrga({
+        orgaId: organisationId,
+        imgUrl: response.imageUrl,
+        name: response.name,
+        rubriquageArray: data.filter((element: Rubriquage) => {
+          return element.rubriques.length;
+        }),
+        isLive: isLive,
+      });
+      if(!state.generalParameters.podcastmaker){
+        const queries = route.query;
+        router.push({
+          query: { ...queries, ...{ productor: organisationId, o:undefined } },
+        });
+      }
+    } catch (error) {
+      handle403(error as AxiosError);
+    }
+  }
+
+  function removeSelectedOrga(): void {
+    if (route.query.productor) {
+      router.push({
+        query: { ...route.query, ...{ productor: undefined } },
+      });
+    }
+    filterStore.filterUpdateOrga({ orgaId: undefined });
+  }
+
+	return {
+    selectOrganisation,
+    removeSelectedOrga
+	}
+}

package/src/components/composable/useResizePhone.ts

@@ -0,0 +1,27 @@
+import debounce from '../../helper/debounceHelper';
+import {computed, onBeforeUnmount, onMounted, Ref, ref} from 'vue';
+export const useResizePhone = ()=>{
+	const windowWidth = ref(0);
+  const debounceResizeEvent : Ref<undefined|((...args: any[]) => void)> =ref(undefined);
+
+  const isPhone = computed(() => windowWidth.value < 960);
+
+  function handleResize() {
+    windowWidth.value = window.innerWidth;
+  }
+  onMounted(() => {
+    debounceResizeEvent.value = debounce(handleResize, 500);
+    window.addEventListener('resize', debounceResizeEvent.value);
+    handleResize();
+  })
+  
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', debounceResizeEvent.value);
+  })
+
+	return {
+    isPhone,
+		windowWidth,
+	}
+}
+

package/src/components/composable/useSelenium.ts

@@ -0,0 +1,10 @@
+export const useSelenium = ()=>{
+
+  function seleniumFormat(string: string): string {
+    return string.toLowerCase().replace(/\s/g, "");
+  }
+  
+	return {
+    seleniumFormat
+	}
+}

package/src/components/composable/useTagOf.ts

@@ -0,0 +1,21 @@
+export const useTagOf = ()=>{
+
+  function isOuestFranceTag(tag: string): boolean {
+    return "[of]" === tag.substring(0, 4);
+  }
+  function formateOfTag(tag: string): string {
+    if (!isOuestFranceTag(tag)) {
+      return tag;
+    }
+    const lastSlash = tag.lastIndexOf("/");
+    if (-1 !== lastSlash) {
+      return tag.substring(lastSlash + 1, tag.length);
+    }
+    return tag.substring(4, tag.length);
+  }
+  
+	return {
+    isOuestFranceTag,
+    formateOfTag
+	}
+}

package/src/components/display/accessibility/AccessibilityModal.vue

@@ -0,0 +1,136 @@
+<template>
+  <ClassicModalInBody
+    id-modal="accessibility-modal"
+    :title-modal="$t('Transcript Accessibility')"
+    @close="closePopup"
+  >
+    <template #body>
+      <div class="d-flex gap-3 flex-wrap mb-3">
+        <div class="d-flex flex-nowrap align-items-center flex-grow-1">
+          <div class="form-label me-3">{{ $t('Choose background color') }}</div>
+          <VSwatches
+            v-model:model-value="background"
+            class="c-hand"
+            show-fallback
+            fallback-input-type="color"
+            colors="text-advanced"
+            popover-x="left"
+            :data-color="color"
+          />
+        </div>
+        <div class="d-flex flex-nowrap align-items-center flex-grow-1">
+          <div class="form-label me-3">{{ $t('Choose text color') }}</div> 
+          <VSwatches
+            v-model:model-value="color"
+            class="c-hand"
+            show-fallback
+            fallback-input-type="color"
+            colors="text-advanced"
+            popover-x="left"
+            :data-color="color"
+          />
+        </div>
+      </div>
+
+      <div class="d-flex align-items-center flex-nowrap mb-3">
+        <label class="form-label me-3" for="accessibility-font-size">{{ $t('Font size') }}</label> 
+        <button class="btn me-3" :disabled="isMinSize" @click="decreaseFontSize"><FormatFontSizeDecreaseIcon :size="44"/></button>
+        <button class="btn" :disabled="isMaxSize" @click="increaseFontSize"><FormatFontSizeIncreaseIcon :size="44"/></button>
+      </div>
+    
+      <div class="form-label mt-3">{{ $t('Preview') }}</div>
+      <div class="border p-2 mb-3" :style="stylePreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+    </template>
+    <template #footer>
+      <button class="btn m-1" @click="closePopup">
+        {{ $t("No") }}
+      </button>
+      <button
+        class="btn btn-primary m-1"
+        @click="saveData"
+      >
+        {{ $t("Save") }}
+      </button>
+    </template>
+  </ClassicModalInBody>
+</template>
+
+<script lang="ts">
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
+import FormatFontSizeIncreaseIcon from "vue-material-design-icons/FormatFontSizeIncrease.vue";
+import FormatFontSizeDecreaseIcon from "vue-material-design-icons/FormatFontSizeDecrease.vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ClassicModalInBody = defineAsyncComponent(
+  () => import("../../misc/modal/ClassicModalInBody.vue"),
+);
+export default defineComponent({
+  name: "AccessibilityModal",
+
+  components: {
+    ClassicModalInBody,
+    FormatFontSizeIncreaseIcon,
+    FormatFontSizeDecreaseIcon,
+    VSwatches
+  },
+
+  emits: ["close", "save"],
+  computed:{
+    isMaxSize(){
+      return this.fontSize>=30;
+    },
+    isMinSize(){
+      return this.fontSize<=16;
+    },
+    stylePreview(){
+      return 'font-size:'+this.fontSize+'px; background:'+this.background+'; color:'+this.color;
+    }
+  },
+  data() {
+    return {
+      fontSize :16 as number,
+      background: "white" as string,
+      color: "black" as string,
+    };
+  },
+  created(){
+    this.initAccessibility();
+  },
+  methods: {
+    initAccessibility(){
+      const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');
+      this.fontSize = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);
+      this.background = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');
+      this.color = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');
+    },
+    closePopup() {
+      this.$emit("close");
+    },
+    decreaseFontSize(){
+      if(!this.isMinSize){
+        this.fontSize -=2;
+      }
+    },
+    increaseFontSize(){
+      if(!this.isMaxSize){
+        this.fontSize +=2;
+      }
+    },
+    saveData(){
+      this.$emit('save', {
+        fontSize: this.fontSize,
+        background: this.background,
+        color: this.color,
+      });
+    }
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app #accessibility-modal .octopus-modal-body{
+  min-height: 400px;
+  .gap-3{
+    gap:1rem;
+  }
+}
+</style>

package/src/components/display/aggregator/RssSection.vue

@@ -2,7 +2,4 @@
   <div />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({});
-</script>
+<script setup lang="ts"></script>

package/src/components/display/categories/CategoryChooser.vue

@@ -75,7 +75,7 @@ export default defineComponent({
       return this.storedCategories;
     },
     categoriesOrdered(): Array<Category> {
-      let allCategoriesOrdered = [...this.categoriesChosen].sort(
+      let allCategoriesOrdered = this.categoriesChosen.toSorted(
         (a: Category, b: Category) => (a.name > b.name ? 1 : -1),
       );
       if (!this.displayAllCategories) {

package/src/components/display/categories/CategoryFilter.vue

@@ -67,8 +67,8 @@
 </template>
 
 <script lang="ts">
-import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
-import { routeParams } from "../../mixins/routeParam/routeParams";
+import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
+import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
@@ -91,7 +91,11 @@ export default defineComponent({
     RubriqueList,
     RubriqueChooser,
   },
-  mixins: [routeParams, rubriquesFilterParam],
+  setup(){
+    const { updateFiltersParam } = useRouteUpdateParams();
+    const { modifyRubriquesFilter } = useRubriquesFilterParam();
+    return {updateFiltersParam, modifyRubriquesFilter }
+  },
   data() {
     return {
       isCategories: false as boolean,

package/src/components/display/categories/CategoryList.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
-import { routeParams } from "../../mixins/routeParam/routeParams";
+import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
 import classicApi from "../../../api/classicApi";
 import { state } from "../../../stores/ParamSdkStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
@@ -57,13 +57,16 @@ export default defineComponent({
     ClassicPopover,
     PlusIcon,
   },
-  mixins: [routeParams],
 
   props: {
     isFilter: { default: false, type: Boolean },
     isDisplay: { default: false, type: Boolean },
   },
   emits: ["categoriesLength"],
+  setup(){
+    const { updateFiltersParam } = useRouteUpdateParams();
+    return {updateFiltersParam }
+  },
 
   data() {
     return {

package/src/components/display/comments/CommentInput.vue

@@ -51,7 +51,6 @@
 
 <script lang="ts">
 import classicApi from "../../../api/classicApi";
-import cookies from "../../mixins/cookies";
 import { Podcast } from "@/stores/class/general/podcast";
 import { CommentCreate, CommentPodcast } from "@/stores/class/general/comment";
 import Constants from "../../../../public/config";
@@ -82,8 +81,6 @@ export default defineComponent({
     ClassicContentEditable,
     CommentName,
   },
-  mixins: [cookies],
-
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
     focus: { default: false, type: Boolean },

package/src/components/display/comments/CommentList.vue

@@ -64,7 +64,7 @@
 import SortVariantIcon from "vue-material-design-icons/SortVariant.vue";
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import ClassicLoading from "../../form/ClassicLoading.vue";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { AxiosError } from "axios";
@@ -91,7 +91,6 @@ export default defineComponent({
     PlusIcon,
     SortVariantIcon,
   },
-  mixins: [handle403],
 
   props: {
     size: { default: 10, type: Number },
@@ -107,6 +106,11 @@ export default defineComponent({
   },
   emits: ["update:nbComments", "commentDeleted"],
 
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
+
   data() {
     return {
       loading: false as boolean,

package/src/components/display/comments/CommentPlayer.vue

@@ -34,14 +34,17 @@
 
 <script lang="ts">
 import { CommentPodcast } from "@/stores/class/general/comment";
-import selenium from "../../mixins/selenium";
+import {useSelenium} from "../../composable/useSelenium";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent } from "vue";
 import { useCommentStore } from "../../../stores/CommentStore";
 export default defineComponent({
   name: "CommentPlayer",
-  mixins: [selenium],
+  setup(){
+    const { seleniumFormat } = useSelenium();
+    return { seleniumFormat }
+  },
   data() {
     return {
       displayContent: undefined as CommentPodcast | undefined,

package/src/components/display/comments/CommentSection.vue

@@ -28,7 +28,6 @@
 
 <script lang="ts">
 import RefreshIcon from "vue-material-design-icons/Refresh.vue";
-import cookies from "../../mixins/cookies";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
@@ -48,7 +47,6 @@ export default defineComponent({
     CommentInput,
     RefreshIcon,
   },
-  mixins: [cookies],
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
   },

package/src/components/display/comments/item/CommentBasicView.vue

@@ -40,8 +40,7 @@ import AlertIcon from "vue-material-design-icons/Alert.vue";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
-import selenium from "../../../mixins/selenium";
-import displayMethods from "../../../mixins/displayMethods";
+import displayHelper from "../../../../helper/displayHelper";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import ClassicPopover from "../../../misc/ClassicPopover.vue";
 import { defineComponent } from "vue";
@@ -53,8 +52,6 @@ export default defineComponent({
     AlertIcon,
   },
 
-  mixins: [displayMethods, selenium],
-
   props: {
     comment: { default: () => ({}), type: Object as () => CommentPodcast },
     editRight: { default: false, type: Boolean },
@@ -96,6 +93,9 @@ export default defineComponent({
     clearInterval(this.dateInterval as unknown as number);
   },
   methods: {
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
     defineDateFromNow() {
       if (!this.comment.date) {
         this.date = "";

package/src/components/display/comments/item/CommentItem.vue

@@ -79,8 +79,6 @@
 
 <script lang="ts">
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
-import selenium from "../../../mixins/selenium";
-import displayMethods from "../../../mixins/displayMethods";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "../../../../stores/class/general/podcast";
 import CommentBasicView from "./CommentBasicView.vue";
@@ -116,8 +114,6 @@ export default defineComponent({
     ChevronDownIcon,
   },
 
-  mixins: [displayMethods, selenium],
-
   props: {
     comment: { default: () => ({}), type: Object as () => CommentPodcast },
     podcast: { default: undefined, type: Object as () => Podcast },

package/src/components/display/comments/item/CommentMoreActions.vue

@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import DotsVerticalIcon from "vue-material-design-icons/DotsVertical.vue";
-import selenium from "../../../mixins/selenium";
+import {useSelenium} from "../../../composable/useSelenium";
 import classicApi from "../../../../api/classicApi";
 import CommentMoreActionsAdmin from "@/components/display/comments/item/CommentMoreActionsAdmin.vue";
 import { useAuthStore } from "../../../../stores/AuthStore";
@@ -92,7 +92,6 @@ export default defineComponent({
     MessageModal,
     DotsVerticalIcon,
   },
-  mixins: [selenium],
 
   props: {
     comment: { default: () => ({}), type: Object as () => CommentPodcast },
@@ -102,6 +101,11 @@ export default defineComponent({
   },
 
   emits: ["update:comment", "deleteComment"],
+
+  setup(){
+    const { seleniumFormat } = useSelenium();
+    return { seleniumFormat }
+  },
   data() {
     return {
       isEdit: false as boolean,

package/src/components/display/emission/EmissionInlineList.vue

@@ -32,14 +32,12 @@ import SwiperList from "../list/SwiperList.vue";
 import classicApi from "../../../api/classicApi";
 import EmissionPlayerItem from "./EmissionPlayerItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
-import imageProxy from "../../mixins/imageProxy";
-import resizePhone from "../../mixins/resizePhone";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 export default defineComponent({
@@ -50,9 +48,6 @@ export default defineComponent({
     ClassicLoading,
     SwiperList,
   },
-
-  mixins: [handle403, imageProxy, resizePhone],
-
   props: {
     organisationId: { default: undefined, type: String },
     href: { default: undefined, type: String },
@@ -63,6 +58,11 @@ export default defineComponent({
     itemSize: { default: undefined, type: Number },
   },
 
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
+
   data() {
     return {
       loading: true as boolean,

package/src/components/display/emission/EmissionItem.vue

@@ -9,7 +9,7 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
-        v-lazy="proxyImageUrl(emission.imageUrl, '250')"
+        v-lazy="useProxyImageUrl(emission.imageUrl, '250')"
         width="250"
         height="250"
         class="img-box"
@@ -55,11 +55,11 @@
 
 <script lang="ts">
 import AlertIcon from "vue-material-design-icons/Alert.vue";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import { Emission } from "@/stores/class/general/emission";
 import classicApi from "../../../api/classicApi";
-import imageProxy from "../../mixins/imageProxy";
-import displayMethods from "../../mixins/displayMethods";
+import {useImageProxy} from "../../composable/useImageProxy";
+import displayHelper from "../../../helper/displayHelper";
 import { defineComponent } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
@@ -69,12 +69,16 @@ export default defineComponent({
     AlertIcon,
   },
 
-  mixins: [displayMethods, orgaComputed, imageProxy],
-
   props: {
     emission: { default: () => ({}), type: Object as () => Emission },
   },
 
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const { isPodcastmaker, isEditRights } = useOrgaComputed();
+    return { useProxyImageUrl, isPodcastmaker, isEditRights }
+  },
+
   data() {
     return {
       activeEmission: true as boolean,
@@ -107,6 +111,9 @@ export default defineComponent({
     }
   },
   methods: {
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
     async hasPodcast(): Promise<void> {
       const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
         api: 0,

package/src/components/display/emission/EmissionList.vue

@@ -60,7 +60,7 @@
 import ListPaginate from "../list/ListPaginate.vue";
 import classicApi from "../../../api/classicApi";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import { state } from "../../../stores/ParamSdkStore";
 import { Emission, emptyEmissionData } from "@/stores/class/general/emission";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
@@ -85,7 +85,6 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [handle403],
 
   props: {
     first: { default: 0, type: Number },
@@ -104,6 +103,10 @@ export default defineComponent({
     noRubriquageId: { default: () => [], type: Array as () => Array<number> },
     nbPodcasts: { default: undefined, type: Number },
   },
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
 
   data() {
     return {