@saooti/octopus-sdk 40.0.3 → 40.1.0

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

@@ -77,7 +77,7 @@
                 >
                   <img
                     v-lazy="
-                      proxyImageUrl(planningItem.podcastData.imageUrl, '150')
+                      useProxyImageUrl(planningItem.podcastData.imageUrl, '150')
                     "
                     width="150"
                     height="150"
@@ -118,8 +118,8 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
 import classicApi from "../../../api/classicApi";
-import imageProxy from "../../mixins/imageProxy";
-import resizePhone from "../../mixins/resizePhone";
+import {useImageProxy} from "../../composable/useImageProxy";
+import {useResizePhone} from "../../composable/useResizePhone";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { defineComponent } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
@@ -132,12 +132,17 @@ export default defineComponent({
     ClassicLoading,
   },
 
-  mixins: [imageProxy,resizePhone],
-
   props: {
     radio: { default: undefined, type: Object as () => Canal },
   },
 
+
+  setup(){
+    const { isPhone } = useResizePhone();
+    const { useProxyImageUrl } = useImageProxy();
+    return { isPhone, useProxyImageUrl }
+  },
+
   data() {
     return {
       planning: {} as {
@@ -157,8 +162,6 @@ export default defineComponent({
       }>,
       loading: true as boolean,
       error: false as boolean,
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
       showAllDays: false as boolean
     };
   },

package/src/components/display/organisation/OrganisationChooser.vue

@@ -22,7 +22,7 @@
         :data-selenium="'organisation-chooser-' + seleniumFormat(option.name)"
       >
         <img
-          v-lazy="proxyImageUrl(option.imageUrl, '32')"
+          v-lazy="useProxyImageUrl(option.imageUrl, '32')"
           width="32"
           height="32"
           class="me-2"
@@ -41,8 +41,8 @@
 <script lang="ts">
 import { useAuthStore } from "../../../stores/AuthStore";
 import { mapActions, mapState } from "pinia";
-import imageProxy from "../../mixins/imageProxy";
-import selenium from "../../mixins/selenium";
+import {useImageProxy} from "../../composable/useImageProxy";
+import {useSelenium} from "../../composable/useSelenium";
 import classicApi from "../../../api/classicApi";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
 import { defineComponent } from "vue";
@@ -56,7 +56,6 @@ export default defineComponent({
   components: {
     ClassicMultiselect,
   },
-  mixins: [selenium, imageProxy],
   props: {
     defaultanswer: { default: "", type: String },
     orgaIdSelected: { default: undefined, type: String },
@@ -69,6 +68,11 @@ export default defineComponent({
     displayLabel: { default: false, type: Boolean },
   },
   emits: ["selected"],
+  setup(){
+    const { seleniumFormat } = useSelenium();
+    const { useProxyImageUrl } = useImageProxy();
+    return { seleniumFormat, useProxyImageUrl }
+  },
   data() {
     return {
       maxElement: 50 as number,

package/src/components/display/participant/ParticipantInlineList.vue

@@ -29,12 +29,10 @@
 import ParticipantItem from "./ParticipantItem.vue";
 import SwiperList from "../list/SwiperList.vue";
 import classicApi from "../../../api/classicApi";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
-import imageProxy from "../../mixins/imageProxy";
-import resizePhone from "../../mixins/resizePhone";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 import { Participant } from "@/stores/class/general/participant";
 export default defineComponent({
@@ -46,8 +44,6 @@ export default defineComponent({
     SwiperList,
   },
 
-  mixins: [handle403, imageProxy, resizePhone],
-
   props: {
     organisationId: { default: undefined, type: String },
     href: { default: undefined, type: String },
@@ -55,6 +51,10 @@ export default defineComponent({
     itemSize: { default: undefined, type: Number },
     title: { default: "", type: String },
   },
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
 
   data() {
     return {

package/src/components/display/participant/ParticipantItem.vue

@@ -9,7 +9,7 @@
       :title="$t('Participant name page', { name: name })"
     >
       <img
-        v-lazy="proxyImageUrl(participant.imageUrl, '200')"
+        v-lazy="useProxyImageUrl(participant.imageUrl, '200')"
         width="200"
         height="200"
         role="presentation"
@@ -55,9 +55,9 @@
 import AlertIcon from "vue-material-design-icons/Alert.vue";
 import classicApi from "../../../api/classicApi";
 import { Participant } from "@/stores/class/general/participant";
-import imageProxy from "../../mixins/imageProxy";
-import displayMethods from "../../mixins/displayMethods";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import {useImageProxy} from "../../composable/useImageProxy";
+import displayHelper from "../../../helper/displayHelper";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import { defineComponent } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
@@ -66,10 +66,15 @@ export default defineComponent({
   components: {
     AlertIcon,
   },
-  mixins: [displayMethods, orgaComputed, imageProxy],
   props: {
     participant: { default: () => ({}), type: Object as () => Participant },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const { isPodcastmaker, isEditRights } = useOrgaComputed();
+    return { useProxyImageUrl, isPodcastmaker, isEditRights }
+  },
+
   data() {
     return {
       activeParticipant: true as boolean,
@@ -106,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/participant/ParticipantList.vue

@@ -44,7 +44,7 @@
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import ParticipantItem from "./ParticipantItem.vue";
 import { useFilterStore } from "../../../stores/FilterStore";
@@ -65,8 +65,6 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [handle403],
-
   props: {
     first: { default: 0, type: Number },
     size: { default: 30, type: Number },
@@ -75,6 +73,11 @@ export default defineComponent({
     showCount: { default: false, type: Boolean },
   },
 
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
+
   data() {
     return {
       loading: true as boolean,

package/src/components/display/playlist/PlaylistItem.vue

@@ -35,7 +35,7 @@
         </router-link>
       </div>
       <img
-        v-lazy="proxyImageUrl(playlist.imageUrl, '250')"
+        v-lazy="useProxyImageUrl(playlist.imageUrl, '250')"
         width="250"
         height="250"
         role="presentation"
@@ -50,17 +50,19 @@
 <script lang="ts">
 import { Playlist } from "@/stores/class/general/playlist";
 import { state } from "../../../stores/ParamSdkStore";
-import imageProxy from "../../mixins/imageProxy";
-import displayMethods from "../../mixins/displayMethods";
+import {useImageProxy} from "../../composable/useImageProxy";
+import displayHelper from "../../../helper/displayHelper";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlaylistItem",
 
-  mixins: [displayMethods, imageProxy],
-
   props: {
     playlist: { default: () => ({}), type: Object as () => Playlist },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    return { useProxyImageUrl }
+  },
 
   computed: {
     isPodcastmaker(): boolean {
@@ -87,6 +89,11 @@ export default defineComponent({
       playlistDescContainer.classList.add("after-element-description");
     }
   },
+  methods:{
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
+  }
 });
 </script>
 <style lang="scss">

package/src/components/display/playlist/PlaylistList.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import ClassicLazy from "../../misc/ClassicLazy.vue";
 import ListPaginate from "../list/ListPaginate.vue";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import PlaylistItem from "./PlaylistItem.vue";
 import { Playlist, emptyPlaylistData } from "@/stores/class/general/playlist";
@@ -61,8 +61,6 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [handle403],
-
   props: {
     first: { default: 0, type: Number },
     size: { default: 30, type: Number },
@@ -70,6 +68,11 @@ export default defineComponent({
     organisationId: { default: undefined, type: String },
   },
 
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
+
   data() {
     return {
       loading: true as boolean,

package/src/components/display/playlist/PodcastList.vue

@@ -58,8 +58,8 @@
 
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
-import { handle403 } from "../../mixins/handle403";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import {useErrorHandler} from "../../composable/useErrorHandler";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import classicApi from "../../../api/classicApi";
 import PodcastItem from "../podcasts/PodcastItem.vue";
 import ClassicSearch from "../../form/ClassicSearch.vue";
@@ -78,12 +78,16 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [handle403, orgaComputed],
-
   props: {
     playlist: { default: () => ({}), type: Object as () => Playlist },
   },
 
+  setup(){
+    const {handle403} = useErrorHandler();
+    const { isEditRights } = useOrgaComputed();
+    return { handle403, isEditRights }
+  },
+
   data() {
     return {
       loading: true as boolean,

package/src/components/display/podcastmaker/PodcastmakerHeader.vue

@@ -8,21 +8,24 @@
 </template>
 
 <script lang="ts">
-import imageProxy from "../../mixins/imageProxy";
+import {useImageProxy} from "../../composable/useImageProxy";
 import { defineComponent } from "vue";
 export default defineComponent({
-  mixins: [imageProxy],
 
   props: {
     pageTitle: { default: undefined, type: String },
     imgUrl: { default: undefined, type: String },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    return { useProxyImageUrl }
+  },
   computed: {
     backgroundDisplay(): string {
       if (!this.imgUrl) {
         return "";
       }
-      return `background-image: url('${this.proxyImageUrl(
+      return `background-image: url('${this.useProxyImageUrl(
         this.imgUrl,
         "250",
       )}');`;

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

@@ -13,7 +13,7 @@
 <script lang="ts">
 import DownloadIcon from "vue-material-design-icons/Download.vue";
 import { Podcast } from "@/stores/class/general/podcast";
-import download from "../../mixins/download";
+import downloadHelper from "../../../helper/downloadHelper";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "DownloadPodcastButton",
@@ -21,8 +21,6 @@ export default defineComponent({
     DownloadIcon,
   },
 
-  mixins: [download],
-
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
   },
@@ -34,7 +32,7 @@ export default defineComponent({
 
   methods: {
     downloadPodcast() {
-      this.onDownload(
+      downloadHelper.onDownload(
         "/download/podcast/" + this.podcast?.podcastId,
         this.podcast?.title + ".mp3",
         false,

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

@@ -4,7 +4,7 @@
     class="img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start"
   >
     <img
-      v-lazy="proxyImageUrl(podcast.imageUrl, '270')"
+      v-lazy="useProxyImageUrl(podcast.imageUrl, '270')"
       width="270"
       height="270"
       role="presentation"
@@ -52,7 +52,7 @@ import PodcastPlayButton from "./PodcastPlayButton.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Conference } from "@/stores/class/conference/conference";
-import imageProxy from "../../mixins/imageProxy";
+import {useImageProxy} from "../../composable/useImageProxy";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PodcastImage",
@@ -60,7 +60,6 @@ export default defineComponent({
     PodcastPlayButton,
     ChevronDownIcon,
   },
-  mixins: [imageProxy],
   props: {
     podcast: { default: () => ({}), type: Object as () => Podcast },
     hidePlay: { default: false, type: Boolean },
@@ -70,6 +69,10 @@ export default defineComponent({
     fetchConference: { default: undefined, type: Object as () => Conference },
   },
   emits: ["hideDescription", "showDescription"],
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    return { useProxyImageUrl }
+  },
   data() {
     return {
       isDescription: false as boolean,

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

@@ -58,8 +58,8 @@
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import ChevronLeftIcon from "vue-material-design-icons/ChevronLeft.vue";
 import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
-import { rubriquesFilterComputed } from "../../mixins/routeParam/rubriquesFilterComputed";
-import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
+import { useRubriquesFilterComputed } from "../../composable/route/useRubriquesFilterComputed";
+import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { defineComponent } from "vue";
 import { RouteLocationRaw } from "vue-router";
@@ -74,8 +74,6 @@ export default defineComponent({
     PlusIcon,
   },
 
-  mixins: [rubriquesFilterParam, rubriquesFilterComputed],
-
   props: {
     displayArrow: { default: true, type: Boolean },
     previousAvailable: { default: false, type: Boolean },
@@ -92,6 +90,11 @@ export default defineComponent({
     titleTag: { default: "h2", type: String },
   },
   emits: ["sortChrono", "sortPopular", "displayPrevious", "displayNext"],
+  setup(){
+    const { modifyRubriquesFilter } = useRubriquesFilterParam();
+    const { rubriqueQueryParam } = useRubriquesFilterComputed();
+    return { modifyRubriquesFilter, rubriqueQueryParam }
+  },
   data() {
     return {};
   },

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

@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import debounce from "../../mixins/debounce";
+import debounce from '../../../helper/debounceHelper';
 import PodcastItemInfo from "./PodcastItemInfo.vue";
 import PodcastImage from "./PodcastImage.vue";
 import dayjs from "dayjs";

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

@@ -46,7 +46,7 @@
 <script lang="ts">
 import AnimatorsItem from "./AnimatorsItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import dayjs from "dayjs";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { Participant } from "@/stores/class/general/participant";
@@ -61,8 +61,6 @@ export default defineComponent({
     PodcastPlayBar,
   },
 
-  mixins: [orgaComputed],
-
   props: {
     podcastId: { default: undefined, type: Number },
     title: { default: "", type: String },
@@ -73,6 +71,11 @@ export default defineComponent({
     animators: { default: undefined, type: Object as () => Array<Participant> },
   },
 
+  setup(){
+    const { isPodcastmaker, isEditRights } = useOrgaComputed();
+    return { isPodcastmaker, isEditRights }
+  },
+
   computed: {
     isProgressBar(): boolean {
       return state.emissionsPage.progressBar as boolean;

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

@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import PodcastItem from "./PodcastItem.vue";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
@@ -68,8 +68,6 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [handle403],
-
   props: {
     first: { default: 0, type: Number },
     size: { default: 30, type: Number },
@@ -96,6 +94,11 @@ export default defineComponent({
   },
   emits: ["fetch", "emptyList"],
 
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
+
   data() {
     return {
       loading: true as boolean,

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

@@ -156,13 +156,12 @@ import ParticipantDescription from "./ParticipantDescription.vue";
 import PodcastRawTranscript from "./PodcastRawTranscript.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { useAuthStore } from "../../../stores/AuthStore";
-import displayMethods from "../../mixins/displayMethods";
-import podcastView from "../../mixins/podcast/podcastView";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import displayHelper from "../../../helper/displayHelper";
+import {usePodcastView} from "../../composable/podcasts/usePodcastView";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Conference } from "@/stores/class/conference/conference";
 
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineComponent, defineAsyncComponent, toRefs } from "vue";
 const ErrorMessage = defineAsyncComponent(
   () => import("../../misc/ErrorMessage.vue"),
 );
@@ -211,8 +210,6 @@ export default defineComponent({
     PodcastRubriqueList
   },
 
-  mixins: [displayMethods, orgaComputed, podcastView],
-
   props: {
     playingPodcast: { default: undefined, type: Object as () => Podcast },
     podcast: { default: undefined, type: Object as () => Podcast },
@@ -221,6 +218,22 @@ export default defineComponent({
 
   emits: ["updatePodcast"],
 
+  setup(props){
+    const propsRef = toRefs(props);
+    const { 
+      isLiveReadyToRecord,
+      isCounter,
+      timeRemaining,
+      isPlannedInProcessor,
+      date,
+      duration,
+      durationIso,
+      isPodcastmaker,
+      editRight
+    } = usePodcastView(propsRef.podcast, propsRef.podcastConference);
+    return { isPodcastmaker, editRight, isLiveReadyToRecord, isCounter, timeRemaining, isPlannedInProcessor, date, duration, durationIso }
+  },
+
   data() {
     return {
     };
@@ -247,9 +260,6 @@ export default defineComponent({
     isProgressBar(): boolean {
       return state.emissionsPage.progressBar as boolean;
     },
-    editRight(): boolean {
-      return this.isEditRights(this.podcast?.organisation.id);
-    },
     isLiveReady(): boolean {
       return (
         undefined !== this.podcast?.conferenceId &&
@@ -289,6 +299,9 @@ export default defineComponent({
     },
   },
   methods: {
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
     removeDeleted(): void {
       if (this.isLiveReadyToRecord) {
         this.$router.push("/main/pub/lives");

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

@@ -18,8 +18,7 @@
 
 <script lang="ts">
 import ProgressBar from "../../misc/ProgressBar.vue";
-import DurationHelper from "../../../helper/duration";
-import displayMethods from "../../mixins/displayMethods";
+import DurationHelper from "../../../helper/durationHelper";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent } from "vue";
@@ -28,7 +27,6 @@ export default defineComponent({
   components: {
     ProgressBar,
   },
-  mixins: [displayMethods],
   props: {
     podcastId: { default: undefined, type: Number },
     duration: { default: 0, type: Number },

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

@@ -49,11 +49,10 @@ import TimerSandEmptyIcon from "vue-material-design-icons/TimerSandEmpty.vue";
 import EyeOffOutlineIcon from "vue-material-design-icons/EyeOffOutline.vue";
 import CancelIcon from "vue-material-design-icons/Cancel.vue";
 import AlertIcon from "vue-material-design-icons/Alert.vue";
-import DurationHelper from "../../../helper/duration";
+import DurationHelper from "../../../helper/durationHelper";
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Conference } from "@/stores/class/conference/conference";
-import imageProxy from "../../mixins/imageProxy";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
@@ -75,7 +74,6 @@ export default defineComponent({
     PlayVideoIcon,
     PodcastIsPlaying
   },
-  mixins: [imageProxy],
   props: {
     podcast: { default: () => ({}), type: Object as () => Podcast },
     hidePlay: { default: false, type: Boolean },