@saooti/octopus-sdk 40.0.3 → 40.1.0

package/src/components/display/podcasts/PodcastRawTranscript.vue

@@ -1,12 +1,22 @@
 <template>
   <div>
-    <button
-      class="btn btn-transcript"
-      :class="{ open: isOpen }"
-      @click="isOpen = !isOpen"
-    >
-      {{ buttonText }}
-    </button>
+    <AccessibilityModal
+      v-if="isAccessibilityModal"
+      @save="saveAccessibility"
+      @close="isAccessibilityModal = false"
+    />
+    <div class="transcription-section-buttons">
+      <button v-if="isOpen" class="btn btn-primary m-0" @click="isAccessibilityModal = true">
+        <EyeOutlineIcon class="me-1"/> {{ $t('Transcript Accessibility') }}
+      </button>
+      <button
+        class="btn btn-transcript"
+        :class="{ open: isOpen }"
+        @click="isOpen = !isOpen"
+      >
+        {{ buttonText }}
+      </button>
+    </div>
     <div v-if="isOpen" class="transcription-body">
       <ClassicLoading
         :loading-text="!firstLoaded ? $t('Loading content ...') : undefined"
@@ -24,14 +34,21 @@
 </template>
 
 <script lang="ts">
+import cookiesHelper from "../../../helper/cookiesHelper";
+import EyeOutlineIcon from "vue-material-design-icons/EyeOutline.vue";
 import classicApi from "../../../api/classicApi";
 import ClassicLoading from "../../form/ClassicLoading.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const AccessibilityModal = defineAsyncComponent(
+  () => import("../accessibility/AccessibilityModal.vue"),
+);
 export default defineComponent({
   name: "PodcastRawTranscript",
 
   components: {
     ClassicLoading,
+    EyeOutlineIcon,
+    AccessibilityModal
   },
 
   props: {
@@ -42,6 +59,7 @@ export default defineComponent({
       isOpen: false as boolean,
       firstLoaded: false as boolean,
       transcript: undefined as string | undefined,
+      isAccessibilityModal : false as boolean,
     };
   },
 
@@ -56,10 +74,37 @@ export default defineComponent({
     async isOpen() {
       if (this.isOpen && !this.firstLoaded) {
         this.fetchTranscript();
+        this.getAccessibility();
       }
     },
   },
   methods: {
+    getAccessibility(){
+      let fontSize = cookiesHelper.getCookie("octopus-font-size");
+      if (null !== fontSize) {
+        this.setCssProperty('--octopus-accessibility-font-size', fontSize);
+      }
+      let background = cookiesHelper.getCookie("octopus-background");
+      if (null !== background) {
+        this.setCssProperty('--octopus-accessibility-background', background);
+      }
+      let color = cookiesHelper.getCookie("octopus-color");
+      if (null !== color) {
+        this.setCssProperty('--octopus-accessibility-color', color);
+      }
+    },
+    setCssProperty(name: string, value: string){
+      document.documentElement.style.setProperty(name,value);
+    },
+    saveAccessibility(accessibility: {fontSize: number,background: string,color: string}){
+      this.setCssProperty('--octopus-accessibility-font-size', accessibility.fontSize+'px');
+      cookiesHelper.setCookie("octopus-font-size", accessibility.fontSize+'px');
+      this.setCssProperty('--octopus-accessibility-background', accessibility.background);
+      cookiesHelper.setCookie("octopus-background",accessibility.background);
+      this.setCssProperty('--octopus-accessibility-color', accessibility.color);
+      cookiesHelper.setCookie("octopus-color",accessibility.color);
+      this.isAccessibilityModal = false;
+    },
     async fetchTranscript() {
       if (!this.podcastId) {
         return;
@@ -78,15 +123,36 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-
-
+:root {
+  --octopus-accessibility-font-size: 16px;
+  --octopus-accessibility-background: var(--octopus-background);
+  --octopus-accessibility-color: var(--octopus-color-text);
+}
 .octopus-app {
+  .transcription-section-buttons{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    @media (width <= 625px) {
+      flex-direction: column;
+    }
+  }
   .btn-transcript {
     position: relative;
     border-radius: var(--octopus-border-radius);
     overflow: hidden;
     background: var(--octopus-secondary);
     transition: all 0.2s linear 0s;
+    
+    &.open{
+      margin-left:auto;
+      @media (width <= 625px) {
+        margin-top: 0.5rem;
+      }
+    }
+    &:not(.open){
+      margin-right: auto;
+    }
 
     &:not(.open)::before,
     &.open::after {
@@ -137,12 +203,15 @@ export default defineComponent({
   }
 
   .transcription-body {
+    font-size: var(--octopus-accessibility-font-size);
     position: relative;
     padding: 1rem;
     max-height: 250px;
     display: flex;
     justify-content: center;
     white-space: pre-wrap;
+    background: var(--octopus-accessibility-background);
+    color: var(--octopus-accessibility-color);
 
     .transcription-text {
       overflow: hidden auto;

package/src/components/display/podcasts/PodcastRubriqueList.vue

@@ -41,9 +41,7 @@ export default defineComponent({
       init: false as boolean,
     };
   },
-  created() {
-    this.fetchRubriquages();
-  },
+
   computed:{
     ...mapState(useFilterStore, ["filterOrgaId"]),
     organisationQuery(){
@@ -53,6 +51,9 @@ export default defineComponent({
       return { o: this.orgaId};
     }
   },
+  created() {
+    this.fetchRubriquages();
+  },
   methods:{
     ...mapActions(useSaveFetchStore, ["getOrgaRubriques"]),
     async fetchRubriquages(){

package/src/components/display/podcasts/TagList.vue

@@ -44,13 +44,12 @@ import { defineAsyncComponent, defineComponent } from "vue";
 const ClassicPopover = defineAsyncComponent(
   () => import("../../misc/ClassicPopover.vue"),
 );
-import tagOfMixins from "../../mixins/tagOfMixins";
+import {useTagOf} from "../../composable/useTagOf";
 export default defineComponent({
   name: "TagList",
   components: {
     ClassicPopover,
   },
-  mixins: [tagOfMixins],
   props: {
     tagList: { default: () => [], type: Array as () => Array<string> },
     podcastAnnotations: {
@@ -60,6 +59,10 @@ export default defineComponent({
       },
     },
   },
+  setup(){
+    const { isOuestFranceTag, formateOfTag } = useTagOf();
+    return { isOuestFranceTag, formateOfTag }
+  },
   computed: {
     ouestFranceMainTag(): string | undefined {
       if (this.podcastAnnotations?.["mainOfTag"]) {

package/src/components/display/podcasts/VideoModuleBox.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { Podcast } from "@/stores/class/general/podcast";
-import displayMethods from "../../mixins/displayMethods";
+import displayHelper from "../../../helper/displayHelper";
 import PodcastRawTranscript from "./PodcastRawTranscript.vue";
 import { defineAsyncComponent, defineComponent } from "vue";
 const ParticipantDescription = defineAsyncComponent(
@@ -37,8 +37,6 @@ export default defineComponent({
     PodcastRawTranscript,
   },
 
-  mixins: [displayMethods],
-
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
     date: { default: "", type: String },
@@ -50,5 +48,10 @@ export default defineComponent({
     return {};
   },
   computed: {},
+  methods: {
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
+  }
 });
 </script>

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script lang="ts">
-import selenium from "../../mixins/selenium";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
 import { defineComponent } from "vue";
@@ -29,7 +28,6 @@ export default defineComponent({
   components: {
     ClassicMultiselect,
   },
-  mixins: [selenium],
   props: {
     defaultanswer: { default: "", type: String },
     width: { default: "100%", type: String },

package/src/components/display/rubriques/RubriqueList.vue

@@ -51,7 +51,7 @@
 
 <script lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
-import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
+import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
@@ -70,12 +70,15 @@ export default defineComponent({
     PlusIcon,
   },
 
-  mixins: [rubriquesFilterParam],
-
   props: {
     rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },
   },
 
+  setup(){
+    const { modifyRubriquesFilter } = useRubriquesFilterParam();
+    return { modifyRubriquesFilter }
+  },
+
   data() {
     return {
       hidenRubriques: [] as Array<Rubrique>,
@@ -104,8 +107,7 @@ export default defineComponent({
           return !rubriquageIdToNotShow.includes(element.rubriquageId);
         });
       }
-      const rubriquagesOrdered = Array.from(this.rubriquages);
-      return rubriquagesOrdered.sort((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0));
+      return Array.from(this.rubriquages).toSorted((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0));
     },
   },
   watch: {

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

@@ -143,7 +143,7 @@ import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
 import { useAuthStore } from "../../../stores/AuthStore";
 import classicApi from "../../../api/classicApi";
-import displayMethods from "../../mixins/displayMethods";
+import displayHelper from "../../../helper/displayHelper";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { Playlist } from "@/stores/class/general/playlist";
 const ClipboardModal = defineAsyncComponent(
@@ -172,7 +172,6 @@ export default defineComponent({
     XIcon,
     CreationIcon,
   },
-  mixins: [displayMethods],
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
     emission: { default: undefined, type: Object as () => Emission },
@@ -283,6 +282,9 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    onCopyCode(link: string, callback: () => void){
+      displayHelper.onCopyCode(link, callback);
+    },
     async initShareButtons() {
       if (undefined !== this.participantId) {
         this.displayRss = await classicApi.fetchData<boolean>({

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

@@ -50,7 +50,7 @@ import SpotifyIcon from "vue-material-design-icons/Spotify.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import classicApi from "../../../api/classicApi";
 import SnackBar from "../../misc/SnackBar.vue";
-import displayMethods from "../../mixins/displayMethods";
+import displayHelper from "../../../helper/displayHelper";
 import { Emission } from "@/stores/class/general/emission";
 
 import { defineComponent, defineAsyncComponent } from "vue";
@@ -74,7 +74,6 @@ export default defineComponent({
     TuninIcon,
     RadiolineIcon,
   },
-  mixins: [displayMethods],
   props: {
     emissionId: { default: undefined, type: Number },
   },
@@ -160,6 +159,9 @@ export default defineComponent({
   },
 
   methods: {
+    onCopyCode(link: string, callback: () => void){
+      displayHelper.onCopyCode(link, callback);
+    },
     getUrl(platform: string): string {
       return `/main/priv/distribution/${platform}/${this.emissionId}`;
     },

package/src/components/form/ClassicEmojiPicker.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import resizePhone from "../mixins/resizePhone";
+import {useResizePhone} from "../composable/useResizePhone";
 import EmoticonExcitedOutlineIcon from "vue-material-design-icons/EmoticonExcitedOutline.vue";
 import ClassicPopover from "../misc/ClassicPopover.vue";
 import data from "emoji-mart-vue-fast/data/all.json";
@@ -43,18 +43,20 @@ export default defineComponent({
     ClassicPopover,
     EmoticonExcitedOutlineIcon,
   },
-  mixins:[resizePhone],
   props: {
     popoverRelativeClass: { default: undefined, type: String },
     isTopPosition: { default: false, type: Boolean },
     id: { default: "", type: String },
   },
   emits: ["emojiSelected"],
+  setup(){
+    const { isPhone } = useResizePhone();
+    return { isPhone }
+  },
 
   data() {
     return {
       emojiIndex: emojiIndex,
-      isPhone: false as boolean,
     };
   },
 });

package/src/components/misc/ClassicLazy.vue

@@ -45,7 +45,7 @@ export default {
     setTimeout(() => {
       waitBeforeInit.value = false;
     }, props.initRenderDelay);
-    const { isActive, pause, resume } = useIntersectionObserver(
+    const { pause, resume } = useIntersectionObserver(
       targetEl,
       ([{ isIntersecting }]) => {
         if (waitBeforeInit.value) {
@@ -91,7 +91,7 @@ export default {
     }
     watch(
       () => props.unrender,
-      (newValue, _) => {
+      (newValue) => {
         if (newValue) {
           clearTimeout(renderTimer);
           unrenderTimer = setTimeout(() => {

package/src/components/misc/FooterGarSection.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import download from "../mixins/download";
+import downloadHelper from "../../helper/downloadHelper";
 import classicApi from "../../api/classicApi";
 import { Contract } from "../../stores/class/contract/contract";
 import { defineAsyncComponent, defineComponent } from "vue";
@@ -32,7 +32,6 @@ export default defineComponent({
   components: {
     ContractPreviewModal,
   },
-  mixins: [download],
   props: {
     authOrgaId: { default: undefined, type: String },
   },
@@ -62,7 +61,7 @@ export default defineComponent({
     downloadContract(contract: Contract) {
       if (contract) {
         const url = this.keycloakUrl + "contract/" + contract.id;
-        this.onDownload(url, "download" + contract.name + ".pdf");
+        downloadHelper.onDownload(url, "download" + contract.name + ".pdf");
       }
     },
   },

package/src/components/misc/FooterSection.vue

@@ -73,9 +73,9 @@
 </template>
 
 <script lang="ts">
-import cookies from "../mixins/cookies";
-import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
-import orgaFilter from "../mixins/organisationFilter";
+import cookiesHelper from "../../helper/cookiesHelper";
+import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
+import { useOrganisationFilter } from "../composable/useOrganisationFilter";
 import ClassicSelect from "../form/ClassicSelect.vue";
 import AcpmImage from "./AcpmImage.vue";
 import { state } from "../../stores/ParamSdkStore";
@@ -103,7 +103,11 @@ export default defineComponent({
     FooterGarSection,
   },
 
-  mixins: [cookies, orgaFilter, rubriquesFilterComputed],
+  setup(){
+    const { rubriqueQueryParam } = useRubriquesFilterComputed();
+    const {selectOrganisation, removeSelectedOrga} = useOrganisationFilter();
+    return { rubriqueQueryParam , selectOrganisation, removeSelectedOrga}
+  },
   data() {
     return {
       language: this.$i18n.locale,
@@ -170,7 +174,7 @@ export default defineComponent({
       };
     },
     changeLanguage(): void {
-      this.setCookie("octopus-language", this.language);
+      cookiesHelper.setCookie("octopus-language", this.language);
       loadLocaleMessages(
         this.$i18n,
         this.language,

package/src/components/misc/MobileMenu.vue

@@ -58,9 +58,8 @@
 
 <script lang="ts">
 import MenuIcon from "vue-material-design-icons/Menu.vue";
-import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
+import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import { state } from "../../stores/ParamSdkStore";
-import orgaFilter from "../mixins/organisationFilter";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useAuthStore } from "../../stores/AuthStore";
@@ -74,13 +73,16 @@ export default defineComponent({
     ClassicPopover,
     MenuIcon,
   },
-  mixins: [orgaFilter, rubriquesFilterComputed],
   props: {
     isEducation: { default: false, type: Boolean },
     show: { default: false, type: Boolean },
     notPodcastAndEmission: { default: false, type: Boolean },
     scrolled: { default: false, type: Boolean },
   },
+  setup(){
+    const { rubriqueQueryParam } = useRubriquesFilterComputed();
+    return { rubriqueQueryParam }
+  },
   data() {
     return {
       firstLoaded: false as boolean,

package/src/components/misc/TopBar.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import imageProxy from "../mixins/imageProxy";
+import {useImageProxy} from "../composable/useImageProxy";
 import TopBarMainContent from "./TopBarMainContent.vue";
 import { mapState } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
@@ -35,7 +35,7 @@ import { useAuthStore } from "../../stores/AuthStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Emission } from "@/stores/class/general/emission";
-import resizePhone from "../mixins/resizePhone";
+import {useResizePhone} from "../composable/useResizePhone";
 import { Playlist } from "@/stores/class/general/playlist";
 import { Canal } from "@/stores/class/radio/canal";
 const SubscribeButtons = defineAsyncComponent(
@@ -47,15 +47,17 @@ export default defineComponent({
     TopBarMainContent,
     SubscribeButtons,
   },
+  setup(){
+    const { isPhone, windowWidth } = useResizePhone();
+    const { useProxyImageUrl } = useImageProxy();
+    return { isPhone, windowWidth, useProxyImageUrl }
+  },
 
-  mixins: [imageProxy, resizePhone],
   data() {
     return {
       scrolled: false as boolean,
       oldScrollY: 0 as number,
       minScroll: 0 as number,
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -73,7 +75,7 @@ export default defineComponent({
       if (!this.contentToDisplay) {
         return "";
       }
-      return `background-image: url('${this.proxyImageUrl(
+      return `background-image: url('${this.useProxyImageUrl(
         this.contentToDisplay.imageUrl,
         "270",
       )}');`;

package/src/components/misc/TopBarMainContent.vue

@@ -22,7 +22,7 @@
       />
       <img
         v-else
-        :src="proxyImageUrl(imgUrl, '', '80')"
+        :src="useProxyImageUrl(imgUrl, '', '80')"
         role="presentation"
         alt=""
         class="client-logo"
@@ -157,10 +157,10 @@
 <script lang="ts">
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import MagnifyIcon from "vue-material-design-icons/Magnify.vue";
-import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
+import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import { state } from "../../stores/ParamSdkStore";
 import HomeDropdown from "./HomeDropdown.vue";
-import imageProxy from "../mixins/imageProxy";
+import {useImageProxy} from "../composable/useImageProxy";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { mapState } from "pinia";
@@ -177,12 +177,16 @@ export default defineComponent({
     MagnifyIcon,
     ChevronDownIcon,
   },
-  mixins: [imageProxy, rubriquesFilterComputed],
   props: {
     isPhone: { default: false, type: Boolean },
     titleDisplay: { default: "", type: String },
     scrolled: { default: false, type: Boolean },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const { rubriqueQueryParam } = useRubriquesFilterComputed();
+    return { useProxyImageUrl, rubriqueQueryParam }
+  },
   data() {
     return {};
   },

package/src/components/misc/modal/ClassicModalInBody.vue

@@ -89,8 +89,8 @@ export default defineComponent({
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100dvh;
+    width: 100%;
+    height: 100%;
     background-color: black;
   }
 
@@ -110,7 +110,6 @@ export default defineComponent({
 
     @media (width <= 500px) {
       width: 95%;
-      margin: 2.5% !important;
     }
   }
 

package/src/components/misc/modal/ClipboardModal.vue

@@ -23,7 +23,7 @@
 <script lang="ts">
 import ClassicModal from "../modal/ClassicModal.vue";
 import { Emission } from "@/stores/class/general/emission";
-import displayMethods from "../../mixins/displayMethods";
+import displayHelper from "../../../helper/displayHelper";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { mapState } from "pinia";
@@ -36,8 +36,6 @@ export default defineComponent({
     RssSection,
     ClassicModal,
   },
-  mixins: [displayMethods],
-
   props: {
     link: { default: "", type: String },
     emission: { default: undefined, type: Object as () => Emission },
@@ -47,6 +45,9 @@ export default defineComponent({
     ...mapState(useAuthStore, ["authOrgaId"]),
   },
   methods: {
+    onCopyCode(link: string, callback: () => void){
+      displayHelper.onCopyCode(link, callback);
+    },
     closePopup(): void {
       this.$emit("close");
     },

package/src/components/misc/modal/NewsletterModal.vue

@@ -62,7 +62,7 @@ import ClassicModal from "../modal/ClassicModal.vue";
 import SnackBar from "../../misc/SnackBar.vue";
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
-import displayMethods from "../../mixins/displayMethods";
+import displayHelper from "../../../helper/displayHelper";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineComponent } from "vue";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
@@ -80,8 +80,6 @@ export default defineComponent({
     ContentCopyIcon,
   },
 
-  mixins: [displayMethods],
-
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
     emission: { default: undefined, type: Object as () => Emission },
@@ -207,6 +205,9 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    onCopyCode(link: string, callback: () => void){
+      displayHelper.onCopyCode(link, callback);
+    },
     closePopup(): void {
       this.$emit("close");
     },

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -58,7 +58,7 @@
 <script lang="ts">
 import ContentCopyIcon from "vue-material-design-icons/ContentCopy.vue";
 import SnackBar from "../SnackBar.vue";
-import displayMethods from "../../mixins/displayMethods";
+import displayHelper from "../../../helper/displayHelper";
 import ClassicModal from "../modal/ClassicModal.vue";
 import ClassicNav from "../ClassicNav.vue";
 import QrCode from "../../display/sharing/QrCode.vue";
@@ -74,7 +74,6 @@ export default defineComponent({
     ClassicNav,
     ContentCopyIcon,
   },
-  mixins: [displayMethods],
   props: {
     embedLink: { default: undefined, type: String },
     embedlyLink: { default: undefined, type: String },
@@ -99,6 +98,9 @@ export default defineComponent({
     },
   },
   methods: {
+    onCopyCode(link: string, callback: () => void){
+      displayHelper.onCopyCode(link, callback);
+    },
     closePopup(): void {
       this.$emit("close");
     },