@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -1,37 +1,37 @@
 <template>
   <PodcastItem
-    v-if="live && 0!==live.podcastId"
+    v-if="live && 0 !== live.podcastId"
     :podcast="live"
     :fetch-conference="fetchConference"
   />
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import PodcastItem from '../podcasts/PodcastItem.vue';
-import crudApi from '@/api/classicCrud';
-import displayMethods from '../../mixins/displayMethods';
-import { Podcast } from '@/stores/class/general/podcast';
-import { defineComponent } from 'vue';
-import { Conference } from '@/stores/class/conference/conference';
+import octopusApi from "@saooti/octopus-api";
+import PodcastItem from "../podcasts/PodcastItem.vue";
+import crudApi from "@/api/classicCrud";
+import displayMethods from "../../mixins/displayMethods";
+import { Podcast } from "@/stores/class/general/podcast";
+import { defineComponent } from "vue";
+import { Conference } from "@/stores/class/conference/conference";
 export default defineComponent({
-  name: 'LiveItem',
+  name: "LiveItem",
 
   components: {
     PodcastItem,
   },
   mixins: [displayMethods],
   props: {
-    fetchConference: { default: undefined, type: Object as ()=>Conference},
+    fetchConference: { default: undefined, type: Object as () => Conference },
   },
-  emits: ['deleteItem', 'updateItem'],
+  emits: ["deleteItem", "updateItem"],
 
   data() {
     return {
-      live: undefined as Podcast|undefined,
+      live: undefined as Podcast | undefined,
     };
   },
-  
+
   async created() {
     this.fetchPodcastData();
     this.watchStatus();
@@ -40,28 +40,44 @@ export default defineComponent({
     async fetchPodcastData(): Promise<void> {
       if (!this.fetchConference || !this.fetchConference.podcastId) return;
       try {
-        this.live = await octopusApi.fetchData<Podcast>(0, 'podcast/'+this.fetchConference.podcastId);
+        this.live = await octopusApi.fetchData<Podcast>(
+          0,
+          "podcast/" + this.fetchConference.podcastId,
+        );
       } catch {
-        this.$emit('deleteItem');
-        if(this.fetchConference.conferenceId){
-          await crudApi.deleteData(9 ,'conference/'+this.fetchConference.conferenceId);
+        this.$emit("deleteItem");
+        if (this.fetchConference.conferenceId) {
+          await crudApi.deleteData(
+            9,
+            "conference/" + this.fetchConference.conferenceId,
+          );
         }
       }
     },
-    async watchStatus():Promise<void>{
-      if(!this.fetchConference || ("PLANNED"!==this.fetchConference.status && "PENDING"!==this.fetchConference.status && "RECORDING"!==this.fetchConference.status)){
+    async watchStatus(): Promise<void> {
+      if (
+        !this.fetchConference ||
+        ("PLANNED" !== this.fetchConference.status &&
+          "PENDING" !== this.fetchConference.status &&
+          "RECORDING" !== this.fetchConference.status)
+      ) {
         return;
       }
-      const newStatus = await octopusApi.fetchData<string>(9, 'conference/realstatus/'+this.fetchConference.conferenceId);
-      if(newStatus !== this.fetchConference.status){
-        this.$emit('updateItem', {...this.fetchConference, ...{status: newStatus}});
-      }else{
+      const newStatus = await octopusApi.fetchData<string>(
+        9,
+        "conference/realstatus/" + this.fetchConference.conferenceId,
+      );
+      if (newStatus !== this.fetchConference.status) {
+        this.$emit("updateItem", {
+          ...this.fetchConference,
+          ...{ status: newStatus },
+        });
+      } else {
         setTimeout(() => {
           this.watchStatus();
         }, 5000);
       }
-    }
+    },
   },
-})
+});
 </script>
-

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

@@ -3,21 +3,23 @@
     v-if="filterOrgaId || organisationId"
     class="d-flex flex-column align-items-start mt-3"
   >
-    <div class="d-flex justify-content-between flex-grow-1 mb-3 w-100 align-items-center">
+    <div
+      class="d-flex justify-content-between flex-grow-1 mb-3 w-100 align-items-center"
+    >
       <h2 class="mb-0 big-h2">
-        {{ $t('Live') }}
+        {{ $t("Live") }}
       </h2>
       <router-link
         v-if="liveRight && !isPodcastmaker"
         to="/main/priv/edit/live"
       >
         <button class="btn btn-primary">
-          {{ $t('Launch a new live') }}
+          {{ $t("Launch a new live") }}
         </button>
       </router-link>
     </div>
     <ClassicSelect
-      v-if="lives.length || 'ALL'!==selectedStatus"
+      v-if="lives.length || 'ALL' !== selectedStatus"
       v-model:textInit="selectedStatus"
       id-select="status-live-chooser-select"
       :label="$t('Selection by status')"
@@ -26,19 +28,16 @@
       class="mb-3"
     />
     <ClassicLoading
-      :loading-text="loading?$t('Loading lives...'):undefined"
-      :error-text="0===lives.length?$t('No live currently'):undefined"
+      :loading-text="loading ? $t('Loading lives...') : undefined"
+      :error-text="0 === lives.length ? $t('No live currently') : undefined"
     />
     <template v-if="lives.length">
-      <SwiperList
-        v-if="!loading"
-        :list-object="lives"
-      >
-        <template #octopusSlide="{option, index}">
+      <SwiperList v-if="!loading" :list-object="lives">
+        <template #octopusSlide="{ option, index }">
           <LiveItem
             :fetch-conference="option"
-            @deleteItem="deleteLive(index)"
-            @updateItem="updateLive($event, index)"
+            @delete-item="deleteLive(index)"
+            @update-item="updateLive($event, index)"
           />
         </template>
       </SwiperList>
@@ -47,33 +46,33 @@
 </template>
 
 <script lang="ts">
-import ClassicLoading from '../../form/ClassicLoading.vue';
-import LiveItem from './LiveItem.vue';
-import ClassicSelect from '../../form/ClassicSelect.vue';
-import SwiperList from '../list/SwiperList.vue';
-import { handle403 } from '../../mixins/handle403';
-import { orgaComputed } from '../../mixins/orgaComputed';
-import octopusApi from '@saooti/octopus-api';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { state } from '../../../stores/ParamSdkStore';
-import { Conference } from '@/stores/class/conference/conference';
-import { defineComponent } from 'vue'
-import { AxiosError } from 'axios';
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import LiveItem from "./LiveItem.vue";
+import ClassicSelect from "../../form/ClassicSelect.vue";
+import SwiperList from "../list/SwiperList.vue";
+import { handle403 } from "../../mixins/handle403";
+import { orgaComputed } from "../../mixins/orgaComputed";
+import octopusApi from "@saooti/octopus-api";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { state } from "../../../stores/ParamSdkStore";
+import { Conference } from "@/stores/class/conference/conference";
+import { defineComponent } from "vue";
+import { AxiosError } from "axios";
 export default defineComponent({
-  name: 'LiveList',
+  name: "LiveList",
   components: {
     LiveItem,
     ClassicLoading,
     SwiperList,
-    ClassicSelect
+    ClassicSelect,
   },
 
   mixins: [handle403, orgaComputed],
 
   props: {
-    organisationId: { default: undefined, type: String},
+    organisationId: { default: undefined, type: String },
   },
   data() {
     return {
@@ -83,48 +82,68 @@ export default defineComponent({
       isLiveAuthorized: false as boolean,
       statusClassic: ["RECORDING", "PENDING", "PLANNED"] as Array<string>,
       statusAdmin: ["DEBRIEFING", "ERROR", "PUBLISHING"] as Array<string>,
-      selectedStatus: "ALL" as string
+      selectedStatus: "ALL" as string,
     };
   },
-  
+
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    ...mapState(useAuthStore, ['authOrganisation']),
-    filterOrgaUsed(): string|undefined {
-      return this.filterOrgaId?this.filterOrgaId:this.organisationId;
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    ...mapState(useAuthStore, ["authOrganisation"]),
+    filterOrgaUsed(): string | undefined {
+      return this.filterOrgaId ? this.filterOrgaId : this.organisationId;
     },
     editRight(): boolean {
-      return (true ===this.authenticated && this.myOrganisationId === this.filterOrgaUsed) ||true===state.generalParameters.isAdmin;
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.filterOrgaUsed) ||
+        true === state.generalParameters.isAdmin
+      );
     },
     liveRight(): boolean {
-      return (state.generalParameters.isRoleLive as boolean)&& "true"===this.authOrganisation.attributes?.['live.active'];
+      return (
+        (state.generalParameters.isRoleLive as boolean) &&
+        "true" === this.authOrganisation.attributes?.["live.active"]
+      );
     },
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
-    statusArraySelect(): Array<{title: string, value:string}>{
-      const statusArray =[{title: this.$t('All lives'), value:'ALL'}];
-      for(let status of this.statusFetched){
-        let title ="";
+    statusArraySelect(): Array<{ title: string; value: string }> {
+      const statusArray = [{ title: this.$t("All lives"), value: "ALL" }];
+      for (let status of this.statusFetched) {
+        let title = "";
         switch (status) {
-          case "RECORDING": title = this.$t('In live'); break;
-          case "PENDING": title = this.$t('live upcoming'); break;
-          case "PLANNED": title = this.$t('live in few time'); break;
-          case "DEBRIEFING": title = this.$t('In debriefing'); break;
-          case "PUBLISHING": title = this.$t('In the process of being published'); break;
-          case "ERROR": title = this.$t('In error'); break;
-          default: break;
+          case "RECORDING":
+            title = this.$t("In live");
+            break;
+          case "PENDING":
+            title = this.$t("live upcoming");
+            break;
+          case "PLANNED":
+            title = this.$t("live in few time");
+            break;
+          case "DEBRIEFING":
+            title = this.$t("In debriefing");
+            break;
+          case "PUBLISHING":
+            title = this.$t("In the process of being published");
+            break;
+          case "ERROR":
+            title = this.$t("In error");
+            break;
+          default:
+            break;
         }
-        statusArray.push({title: title, value: status});
+        statusArray.push({ title: title, value: status });
       }
       return statusArray;
     },
-    statusFetched(): Array<string>{
-      if(this.editRight){
+    statusFetched(): Array<string> {
+      if (this.editRight) {
         return this.statusClassic.concat(this.statusAdmin);
       }
       return this.statusClassic;
-    }
+    },
   },
   watch: {
     filterOrgaUsed: {
@@ -134,22 +153,25 @@ export default defineComponent({
       },
       immediate: true,
     },
-    selectedStatus(){
+    selectedStatus() {
       this.fetchContent();
-    }
+    },
   },
   methods: {
-    async checkIfLiveAuthorized(): Promise<void>{
-      if(!this.filterOrgaUsed){
+    async checkIfLiveAuthorized(): Promise<void> {
+      if (!this.filterOrgaUsed) {
         return;
       }
-      this.isLiveAuthorized = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+this.filterOrgaUsed);
+      this.isLiveAuthorized = await octopusApi.fetchData<boolean>(
+        0,
+        "organisation/liveEnabled/" + this.filterOrgaUsed,
+      );
     },
-    endLoading():void{
+    endLoading(): void {
       this.loading = false;
       this.loaded = true;
     },
-    updateLive(live: Conference, index:number):void{
+    updateLive(live: Conference, index: number): void {
       this.lives.splice(index, 1, live);
     },
     async fetchContent(): Promise<void> {
@@ -161,16 +183,21 @@ export default defineComponent({
       this.loading = true;
       this.loaded = false;
       try {
-        const dataLives = await octopusApi.fetchDataWithParams<Array<Conference>>(9, 'conference/list',{
+        const dataLives = await octopusApi.fetchDataWithParams<
+          Array<Conference>
+        >(9, "conference/list", {
           organisationId: this.filterOrgaUsed,
           withPodcastId: true,
-          status: "ALL"===this.selectedStatus ? this.statusFetched : this.selectedStatus,
+          status:
+            "ALL" === this.selectedStatus
+              ? this.statusFetched
+              : this.selectedStatus,
         });
         this.lives = dataLives.filter((p: Conference | null) => {
           return null !== p;
         });
       } catch (error) {
-        this.handle403((error as AxiosError));
+        this.handle403(error as AxiosError);
       }
       this.endLoading();
     },
@@ -178,5 +205,5 @@ export default defineComponent({
       this.lives.splice(index, 1);
     },
   },
-})
+});
 </script>

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

@@ -4,9 +4,9 @@
       v-if="currentlyPlayingString.length || podcastRadio"
       class="me-2 fw-bold"
     >
-      {{ $t('Currently') +' : ' }}
+      {{ $t("Currently") + " : " }}
     </div>
-    <router-link 
+    <router-link
       v-if="podcastRadio"
       class="d-flex align-items-center"
       :to="{
@@ -20,9 +20,9 @@
         width="80"
         height="80"
         class="small-img-box"
-        :title="$t('Episode name image', {name:podcastRadio.title})"
-        :alt="$t('Episode name image', {name:podcastRadio.title})"
-      >
+        :title="$t('Episode name image', { name: podcastRadio.title })"
+        :alt="$t('Episode name image', { name: podcastRadio.title })"
+      />
       <div>{{ podcastRadio.title }}</div>
     </router-link>
     <div v-else-if="currentlyPlayingString.length">
@@ -32,58 +32,57 @@
 </template>
 
 <script lang="ts">
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import imageProxy from '../../mixins/imageProxy';
-import {fetchRadioData} from '../../mixins/radio/fetchRadioData';
-import { defineComponent } from 'vue';
-import { Canal } from '@/stores/class/radio/canal';
-import { MediaRadio } from '@/stores/class/general/player';
-import { Podcast } from '@/stores/class/general/podcast';
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import imageProxy from "../../mixins/imageProxy";
+import { fetchRadioData } from "../../mixins/radio/fetchRadioData";
+import { defineComponent } from "vue";
+import { Canal } from "@/stores/class/radio/canal";
+import { MediaRadio } from "@/stores/class/general/player";
+import { Podcast } from "@/stores/class/general/podcast";
 export default defineComponent({
-  name: 'RadioItem',
+  name: "RadioItem",
 
-  components: {
-  },
+  components: {},
 
   mixins: [imageProxy, fetchRadioData],
 
   props: {
-    radio: { default: undefined, type: Object as ()=>Canal},
+    radio: { default: undefined, type: Object as () => Canal },
   },
 
   data() {
     return {
-      currentMetadata: undefined as undefined|MediaRadio,
-      currentPodcast: undefined as undefined|Podcast,
-      radioInterval: undefined as  ReturnType<typeof setTimeout>|undefined,
+      currentMetadata: undefined as undefined | MediaRadio,
+      currentPodcast: undefined as undefined | Podcast,
+      radioInterval: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
 
-  computed:{
-    ...mapState(usePlayerStore, ['playerRadio']),
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    playingRadio(){
+  computed: {
+    ...mapState(usePlayerStore, ["playerRadio"]),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    playingRadio() {
       return this.playerRadio && this.playerRadio.canalId === this.radio?.id;
     },
-    podcastRadio():Podcast|undefined{
-      if(this.playingRadio){
+    podcastRadio(): Podcast | undefined {
+      if (this.playingRadio) {
         return this.playerRadio?.podcast;
       }
       return this.currentPodcast;
     },
-    currentlyPlayingString(): string{
-      if(this.playingRadio && this.playerRadio){
+    currentlyPlayingString(): string {
+      if (this.playingRadio && this.playerRadio) {
         return this.displayTitle(this.playerRadio.metadata);
       }
-      if(this.currentMetadata){
+      if (this.currentMetadata) {
         return this.displayTitle(this.currentMetadata);
       }
       return "";
-    }
+    },
   },
-  
+
   mounted() {
     this.fetchCurrentlyPlaying();
     this.radioInterval = setInterval(() => {
@@ -91,20 +90,26 @@ export default defineComponent({
     }, 10000);
   },
   methods: {
-    async fetchCurrentlyPlaying(): Promise<void>{
-      if(!this.radio || this.playingRadio){return;}
-      this.fetchRadioMetadata(this.radio.id,this.currentMetadata?.title??"", this.updateMetadata);
+    async fetchCurrentlyPlaying(): Promise<void> {
+      if (!this.radio || this.playingRadio) {
+        return;
+      }
+      this.fetchRadioMetadata(
+        this.radio.id,
+        this.currentMetadata?.title ?? "",
+        this.updateMetadata,
+      );
     },
-    updateMetadata(metadata: MediaRadio, podcast?:Podcast): void{
-      this.currentMetadata=metadata;
-      this.currentPodcast=podcast;
+    updateMetadata(metadata: MediaRadio, podcast?: Podcast): void {
+      this.currentMetadata = metadata;
+      this.currentPodcast = podcast;
     },
   },
-})
+});
 </script>
 <style lang="scss">
-.octopus-app{
-  .small-img-box{
+.octopus-app {
+  .small-img-box {
     height: 80px;
     width: 80px;
     border-radius: 0.2rem;
@@ -113,4 +118,4 @@ export default defineComponent({
     margin: 0.5rem;
   }
 }
-</style>
+</style>

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

@@ -1,27 +1,23 @@
 <template>
-  <div class="img-box img-box-podcast position-relative flex-shrink-0 mb-3 me-3 float-start">
+  <div
+    class="img-box img-box-podcast position-relative flex-shrink-0 mb-3 me-3 float-start"
+  >
     <img
-      v-lazy="radio.imageUrl ?proxyImageUrl(radio.imageUrl, '330') :'/img/emptyradio.webp'"
+      v-lazy="
+        radio.imageUrl
+          ? proxyImageUrl(radio.imageUrl, '330')
+          : '/img/emptyradio.webp'
+      "
       width="330"
       height="330"
       class="img-box img-box-podcast"
-      :title="$t('Canal name image',{name:radio.name})"
-      :alt="$t('Canal name image',{name:radio.name})"
-    >
-    <button
-      class="image-play-button"
-      @click="playRadio"
-    >
+      :title="$t('Canal name image', { name: radio.name })"
+      :alt="$t('Canal name image', { name: radio.name })"
+    />
+    <button class="image-play-button" @click="playRadio">
       <div class="icon-container">
-        <div
-          v-if="!playingRadio"
-          :title="$t('Play')"
-          class="saooti-play"
-        />
-        <div
-          v-else
-          class="bloc-paddle"
-        >
+        <div v-if="!playingRadio" :title="$t('Play')" class="saooti-play" />
+        <div v-else class="bloc-paddle">
           <span class="paddle1" />
           <span class="paddle2" />
           <span class="paddle3" />
@@ -35,50 +31,52 @@
 </template>
 
 <script lang="ts">
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import imageProxy from '../../mixins/imageProxy';
-import { defineComponent } from 'vue';
-import { Canal } from '@/stores/class/radio/canal';
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import imageProxy from "../../mixins/imageProxy";
+import { defineComponent } from "vue";
+import { Canal } from "@/stores/class/radio/canal";
 export default defineComponent({
-  name: 'RadioImage',
+  name: "RadioImage",
 
-  components: {
-  },
+  components: {},
 
   mixins: [imageProxy],
 
   props: {
-    radio: { default: undefined, type: Object as ()=>Canal},
+    radio: { default: undefined, type: Object as () => Canal },
   },
 
-  computed:{
-    ...mapState(usePlayerStore, ['playerRadio', 'playerStatus']),
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    playingRadio(){
+  computed: {
+    ...mapState(usePlayerStore, ["playerRadio", "playerStatus"]),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    playingRadio() {
       return this.playerRadio && this.playerRadio.canalId === this.radio?.id;
     },
     playText(): string {
-      return this.playingRadio && "PLAYING"===this.playerStatus ? this.$t('Pause'):this.$t('Play');
+      return this.playingRadio && "PLAYING" === this.playerStatus
+        ? this.$t("Pause")
+        : this.$t("Play");
     },
   },
 
   methods: {
-    ...mapActions(usePlayerStore, ['playerPlay', 'playerChangeStatus']),
-    playRadio(): void{
-      if(!this.radio){return;}
+    ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
+    playRadio(): void {
+      if (!this.radio) {
+        return;
+      }
       if (this.playingRadio) {
-        this.playerChangeStatus("PLAYING"===this.playerStatus);
+        this.playerChangeStatus("PLAYING" === this.playerStatus);
       } else {
         this.playerPlay({
           canalId: this.radio.id,
-          url: "https://"+this.radio.url + "/live.m3u8",
-          metadata : ""
+          url: "https://" + this.radio.url + "/live.m3u8",
+          metadata: "",
         });
       }
-    }
+    },
   },
-})
+});
 </script>
-