@saooti/octopus-sdk 36.0.11 → 36.0.13

package/index.ts

@@ -13,6 +13,7 @@ export const getHome = () => import("./src/components/pages/Home.vue");
 export const getCategory = () => import("./src/components/pages/Category.vue");
 export const getRubrique = () => import("./src/components/pages/Rubrique.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
+export const getRadio = () => import("./src/components/pages/Radio.vue");
 
 //Misc
 export const getAccordion = () => import("./src/components/misc/Accordion.vue");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.11",
+  "version": "36.0.13",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -244,7 +244,7 @@ export default defineComponent({
       if (
         undefined !== this.podcast &&(
         (this.playerPodcast?.podcastId ===this.podcast.podcastId) ||
-        (this.playerLive?.livePodcastId ===this.podcast.podcastId))
+        (this.playerLive?.podcastId ===this.podcast.podcastId))
       ) {
         timeline = Math.round(
           this.playerElapsed * this.playerTotal

package/src/components/display/list/SwiperList.vue

@@ -10,7 +10,11 @@
       v-for="(obj, index) in listObject"
       :key="obj"
     >
-      <slot name="octopusSlide" :option="obj" :index="index"/>
+      <slot
+        name="octopusSlide"
+        :option="obj"
+        :index="index"
+      />
     </swiper-slide>
   </swiper>
 </template>

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

@@ -2,7 +2,7 @@
   <PodcastItem
     v-if="live && 0!==live.podcastId"
     :podcast="live"
-    :fetchConference="fetchConference"
+    :fetch-conference="fetchConference"
   />
 </template>
 

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

@@ -4,7 +4,9 @@
     class="d-flex flex-column align-items-start mt-3"
   >
     <div class="d-flex justify-content-between amlign-items-center">
-      <h2 class="mb-0 big-h2 mb-3">{{ $t('Live') }}</h2>
+      <h2 class="mb-0 big-h2 mb-3">
+        {{ $t('Live') }}
+      </h2>
       <router-link
         v-if="liveRight && !isPodcastmaker"
         to="/main/priv/edit/live"
@@ -19,7 +21,7 @@
       v-model:textInit="selectedStatus"
       id-select="status-live-chooser-select"
       :label="$t('Selection by status')"
-      :displayLabel="false"
+      :display-label="false"
       :options="statusArraySelect"
       class="mb-3"
     />
@@ -30,7 +32,7 @@
     <template v-if="lives.length">
       <SwiperList
         v-if="!loading"
-        :listObject="lives"
+        :list-object="lives"
       >
         <template #octopusSlide="{option, index}">
           <LiveItem

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

@@ -1,6 +1,11 @@
 <template>
   <div class="d-flex align-items-center">
-    <div v-if="currentlyPlayingString.length || podcastRadio" class="me-2 fw-bold">{{$t('Currently') +' : '}}</div>
+    <div
+      v-if="currentlyPlayingString.length || podcastRadio"
+      class="me-2 fw-bold"
+    >
+      {{ $t('Currently') +' : ' }}
+    </div>
     <router-link 
       v-if="podcastRadio"
       class="d-flex align-items-center"
@@ -8,18 +13,21 @@
         name: 'podcast',
         params: { podcastId: podcastRadio.podcastId },
         query: { productor: filterOrgaId },
-      }">
-        <img
-          v-lazy="proxyImageUrl(podcastRadio.imageUrl, '80')"
-          width="80"
-          height="80"
-          class="small-img-box"
-          :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">{{currentlyPlayingString}}</div>
+      }"
+    >
+      <img
+        v-lazy="proxyImageUrl(podcastRadio.imageUrl, '80')"
+        width="80"
+        height="80"
+        class="small-img-box"
+        :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">
+      {{ currentlyPlayingString }}
+    </div>
   </div>
 </template>
 
@@ -80,7 +88,7 @@ export default defineComponent({
     this.fetchCurrentlyPlaying();
     this.radioInterval = setInterval(() => {
       this.fetchCurrentlyPlaying();
-    }, 1000);
+    }, 5000);
   },
   methods: {
     async fetchCurrentlyPlaying(): Promise<void>{

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

@@ -12,7 +12,7 @@
       class="image-play-button"
       @click="playRadio"
     >
-    <div class="icon-container">
+      <div class="icon-container">
         <div
           v-if="!playingRadio"
           :title="$t('Play')"
@@ -29,7 +29,7 @@
         <div class="ms-2">
           {{ playText }}
         </div>
-    </div>
+      </div>
     </button>
   </div>
 </template>

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

@@ -1,6 +1,9 @@
 <template>
-  <div v-if="radio" class="d-flex border w-100 p-3">
-    <RadioImage :radio="radio"/>
+  <div
+    v-if="radio"
+    class="d-flex border w-100 p-3"
+  >
+    <RadioImage :radio="radio" />
     <router-link
       :to="{
         name: 'radio',
@@ -9,9 +12,16 @@
       }"
       class="text-dark emission-item-text"
     >
-      <div class="emission-name mb-2">{{ radio.name }}</div>
-      <div v-if="radio.description" class="ten-line-clamp">{{ radio.description }}</div>
-      <RadioCurrently :radio="radio"/>
+      <div class="emission-name mb-2">
+        {{ radio.name }}
+      </div>
+      <div
+        v-if="radio.description"
+        class="ten-line-clamp"
+      >
+        {{ radio.description }}
+      </div>
+      <RadioCurrently :radio="radio" />
     </router-link>
   </div>
 </template>

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

@@ -3,7 +3,9 @@
     v-if="(filterOrgaId || organisationId) && radio.length"
     class="d-flex flex-column align-items-start mt-3"
   >
-    <h2 class="mb-0 big-h2 mb-3">{{ $t('Radio') }}</h2>
+    <h2 class="mb-0 big-h2 mb-3">
+      {{ $t('Radio') }}
+    </h2>
     <template v-if="radio.length">
       <RadioItem
         v-for="radioItem in radio"
@@ -25,7 +27,7 @@ import { Canal } from '@/stores/class/radio/canal';
 import { defineComponent } from 'vue'
 import { AxiosError } from 'axios';
 export default defineComponent({
-  name: 'ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c',
+  name: 'Ecbd98d979bd4312Ad5eFc7c1c4a191c',
   components: {
     RadioItem,
   },

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="module-box">
+    <h2 class="big-h2 mb-3 height-40">{{ $t('Program') }}</h2>
+    <div class="border">
+      <div class="d-flex align-items-center w-100">
+        <button
+          v-for="day in arrayDays"
+          :key="day.date"
+          class="d-flex flex-column align-items-center flex-grow-1"
+          :class="day.date==daySelected?'bg-primary text-white':''"
+          @click="changeDate(day.date)"
+        >
+          <span class="text-capitalize">{{day.dayOfWeek}}</span>
+          <span>{{day.title}}</span>
+        </button>
+      </div>
+      <div class="d-flex flex-column p-3">
+        <ClassicLoading
+          :loading-text="loading?$t('Loading content ...'):undefined"
+          :error-text="error?$t(`Error`):undefined"
+        />
+        <template v-if="!loading && !error">
+          <div v-if="!planning[daySelected].length" class="text-center">{{$t('No programming')}}</div>
+          <div 
+            v-else
+            v-for="planningItem in planning[daySelected]"
+            :key="planningItem.occurrence.occurrenceId"
+            class="d-flex align-items-center mb-3"
+          >
+            <div class="program-item-date fw-bold flex-shrink-0">{{dateDisplay(planningItem.occurrence.startDate)}}</div>
+            <component
+              :is="planningItem.podcast.availability.visibility ? 'router-link' : 'div'"
+              class="d-flex align-items-center text-dark"
+              :to="{
+                name: 'podcast',
+                params: { podcastId: planningItem.podcast.podcastId },
+                query: { productor: filterOrgaId },
+              }"
+            >
+              <img
+                v-lazy="proxyImageUrl(planningItem.podcast.imageUrl, '150')"
+                width="150"
+                height="150"
+                class="m-2"
+                :title="$t('Episode name image', {name:planningItem.podcast.title})"
+                :alt="$t('Episode name image', {name:planningItem.podcast.title})"
+              >
+              <div class="d-flex flex-column">
+                <div class="flex-grow-1 text-truncate mb-2">{{planningItem.occurrence.podcastData.title}}</div>
+                <ParticipantDescription
+                  :participants="planningItem.podcast.animators"
+                />
+              </div>
+            </component>
+           
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+import octopusApi from '@saooti/octopus-api';
+import imageProxy from '../../mixins/imageProxy';
+import ParticipantDescription from '../podcasts/ParticipantDescription.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { defineComponent } from 'vue';
+import { Canal } from '@/stores/class/radio/canal';
+import { PlanningOccurrence } from '@/stores/class/radio/recurrence';
+import { Podcast } from '@/stores/class/general/podcast';
+export default defineComponent({
+  name: 'RadioPlanning',
+
+  components: {
+    ClassicLoading,
+    ParticipantDescription
+  },
+
+  props: {
+    radio: { default: undefined, type: Object as ()=>Canal},
+  },
+
+  mixins: [imageProxy],
+
+  data() {
+    return {
+      planning: {} as {[key: number]:Array<{podcast: Podcast, occurrence: PlanningOccurrence}>},
+      daySelected: dayjs().valueOf(),
+      arrayDays: [] as Array<{title: string, date: number, dayOfWeek: string }>,
+      loading: true as boolean,
+      error: false as boolean,
+    };
+  },
+
+  computed:{
+    ...mapState(useFilterStore, ['filterOrgaId']),
+    startOfDay(): number{
+      return dayjs(this.daySelected).utcOffset(0).startOf('date').valueOf();
+    },
+    endOfDay(): number{
+      return dayjs(this.daySelected).utcOffset(0).endOf('date').valueOf();
+    },
+  },
+
+  mounted(){
+    this.createArrayDays();
+    this.fetchOccurrences();
+  },
+  
+  methods: {
+    createArrayDays(){
+      for (let index = -7; index < 3; index++) {
+        const dayToAdd = dayjs().add(index, 'day');
+        if(0===index){
+          this.daySelected = dayToAdd.valueOf();
+        }
+        this.arrayDays.push({title: dayToAdd.format('D/MM'), dayOfWeek:dayToAdd.format('dddd'),  date : dayToAdd.valueOf()});
+      }
+    },
+    async fetchOccurrences(): Promise<void>{
+      if(this.planning[this.daySelected]){return;}
+      this.loading = true;
+      this.error = false;
+      try {
+        const occurrences = await octopusApi.fetchDataWithParams<Array<PlanningOccurrence>>( 14, 'planning/occurrence/list',{
+          canalId: this.radio?.id,
+          from: this.startOfDay,
+          to: this.endOfDay
+        });
+        this.planning[this.daySelected] = [];
+        for (let oc of occurrences) {
+          if(oc.podcastId){
+            const data : Podcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+oc.podcastId);
+            this.planning[this.daySelected].push({podcast: data, occurrence:oc});
+          }
+        }
+      } catch {
+        this.error = true;
+      }
+      this.loading = false;
+    },
+    changeDate(date: number){
+      this.daySelected = date;
+      this.fetchOccurrences();
+    },
+    dateDisplay(date: Date): string{
+      return dayjs(date).format('HH:mm:ss');
+    }
+  },
+})
+</script>
+<style lang="scss">
+.octopus-app{
+  .program-item-date{
+    width: 100px;
+  }
+}
+</style>

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

@@ -113,7 +113,7 @@ export default defineComponent({
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
-        ambiance:"NONE",
+        ambianceType:"NONE",
         sort: this.sort,
       };
       try {

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

@@ -266,14 +266,7 @@ export default defineComponent({
       if (!this.recordingLive) {
         this.playerPlay(this.podcast);
       }else{
-        this.playerPlay({
-          title: this.podcast.title,
-          audioUrl: this.podcast.audioUrl,
-          duration: this.podcast.duration,
-          conferenceId: this.fetchConference?.conferenceId,
-          livePodcastId: this.podcast.podcastId,
-          organisation: this.podcast.organisation,
-        });
+        this.playerPlay({...this.podcast, ...{conferenceId:this.fetchConference?.conferenceId}});
       }
       if(this.clickPlayGoPage){
         this.$router.push('/main/pub/podcast/'+this.podcast.podcastId);
@@ -322,7 +315,7 @@ export default defineComponent({
     background-color: rgba(255, 255, 255, 0.5);
   }
   
-  .play-button-error-icon {
+  .image-play-button .play-button-error-icon {
     background: #0000009d !important;
     cursor: default !important;
     align-self: center;

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

@@ -12,7 +12,7 @@
       :hide-play="!podcastItemDescription || (podcastItemDescription && (!hoverDesc || !description))"
       :display-description="0!==description.length && podcastItemDescription"
       :arrow-direction="arrowDirection"
-      :fetchConference="fetchConference"
+      :fetch-conference="fetchConference"
       @hideDescription="hideDescription"
       @showDescription="showDescription"
     />

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

@@ -20,7 +20,7 @@
       />
       <SwiperList
         v-if="!loading"
-        :listObject="allPodcasts"
+        :list-object="allPodcasts"
       >
         <template #octopusSlide="{option}">
           <PodcastItem

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

@@ -41,7 +41,6 @@ import Popover from '../../misc/Popover.vue';
 import ShareButtonsIntern from './ShareButtonsIntern.vue';
 import { defineComponent } from 'vue';
 import { Playlist } from '@/stores/class/general/playlist';
-import { Canal } from '@/stores/class/radio/canal';
 export default defineComponent({
   components: {
     ShareButtonsIntern,

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

@@ -32,9 +32,9 @@
             :organisation-id="organisationId"
           />
           <SharePlayerColors
-            class="mt-3"
             v-model:color="color"
             v-model:theme="theme"
+            class="mt-3"
           />
           <ClassicCheckbox
             v-if="isPodcastNotVisible || playlist"

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

@@ -3,16 +3,16 @@
     <h2 class="big-h2 mb-3 height-40">
       {{ $t('Embed') }}
     </h2>
-      <div class="d-flex">
-        <iframe
-          id="miniplayerIframeRadio"
-          title="miniplayer"
-          :src="iFrameSrc"
-          width="100%"
-          height="140px"
-          class="max-iframe mx-3 flex-grow-1"
-        />
-        <div class="d-flex flex-column flex-grow-1 align-items-center">
+    <div class="d-flex">
+      <iframe
+        id="miniplayerIframeRadio"
+        title="miniplayer"
+        :src="iFrameSrc"
+        width="100%"
+        height="140px"
+        class="max-iframe mx-3 flex-grow-1"
+      />
+      <div class="d-flex flex-column flex-grow-1 align-items-center">
         <SharePlayerColors
           v-model:color="color"
           v-model:theme="theme"

package/src/components/mixins/player/playerComment.ts

@@ -70,7 +70,7 @@ export const playerComment = defineComponent({
         podcastId = this.playerPodcast.podcastId;
         organisation = this.playerPodcast.organisation.id;
       } else if (this.playerLive) {
-        podcastId = this.playerLive.livePodcastId;
+        podcastId = this.playerLive.podcastId;
         organisation = this.playerLive.organisation.id;
       }
       if (

package/src/components/mixins/player/playerLive.ts

@@ -61,17 +61,17 @@ export const playerLive = defineComponent({
       }
     },
     async initLiveDownloadId(){
-      if(!this.playerLive){ return;}
-      let downloadId = null;
+      if(!this.playerLive || this.downloadId){ return;}
       try {
-        downloadId = await octopusApi.putDataPublic<string | null>(0, 'podcast/prepare/live/'+this.playerLive.livePodcastId, undefined);
-        await octopusApi.fetchDataPublicWithParams<string | null>(0,'podcast/download/live/' + this.playerLive.livePodcastId+".m3u8",{
+        let downloadId = await octopusApi.putDataPublic<string | null>(0, 'podcast/prepare/live/'+this.playerLive.podcastId, undefined);
+        await octopusApi.fetchDataPublicWithParams<string | null>(0,'podcast/download/live/' +this.playerLive.podcastId +".m3u8",{
           'downloadId': null!==downloadId ? downloadId : undefined,
           'origin':'octopus',
           'distributorId':this.authOrgaId
         });
         this.setDownloadId(downloadId);
       } catch (error) {
+        this.downloadId = null;
         console.log('ERROR downloadId');
       }
       this.hlsReady = true;

package/src/components/mixins/radio/fetchRadioData.ts

@@ -20,8 +20,6 @@ export const fetchRadioData = defineComponent({
       for(let i = 0; i < arrayMetadata.length; i++){
         if(dayjs().valueOf()-29000 > dayjs(arrayMetadata[i].startDate).valueOf()){
           if(previousTitle !== arrayMetadata[i].title){
-            //todo 
-            arrayMetadata[i].podcastId = 98619;
             if(arrayMetadata[i].podcastId){
               const data : Podcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+arrayMetadata[i].podcastId); 
               callbackMetadata(arrayMetadata[i], data);

package/src/components/pages/Lives.vue

@@ -10,9 +10,9 @@
       />
     </template>
     <template v-if="filterOrgaId || organisationId">
-     <!--  <LiveList
+      <LiveList
         :organisation-id="organisationId"
-      /> -->
+      />
       <RadioList
         :organisation-id="organisationId"
       />

package/src/components/pages/Playlist.vue

@@ -105,7 +105,7 @@ export default defineComponent({
       return this.playlistRadio ? this.$t('Mix of episodes'):this.$t('Playlist');
     },
     playlistRadio(): boolean{
-      return "AMBIANCE"===this.playlist?.ambiance || "PROGRAMMED"===this.playlist?.ambiance
+      return "AMBIANCE"===this.playlist?.ambianceType || "AMBIANCE_PROGRAMMED"===this.playlist?.ambianceType
     },
     name(): string {
       return this.playlist?.title ??'';

package/src/components/pages/Radio.vue

@@ -10,25 +10,33 @@
           :style="backgroundDisplay"
         />
       </div>
-      <div v-if="radio" class="d-flex flex-column page-element">
+      <div
+        v-if="radio"
+        class="d-flex flex-column page-element"
+      >
         <div class="module-box">
           <div class="mb-5 descriptionText">
-            <RadioImage :radio="radio"/>
+            <RadioImage :radio="radio" />
             <h2>{{ radio.name }}</h2>
-            <div v-if="radio.description">{{radio.description}}</div>
+            <div v-if="radio.description">
+              {{ radio.description }}
+            </div>
           </div>
-          <RadioCurrently :radio="radio"/>
+          <RadioCurrently :radio="radio" />
           <EditBoxRadio
             v-if="editRight"
             :radio="radio"
           />
         </div>
-         <SharePlayerRadio
+        <RadioPlanning
+          :radio="radio"
+        />
+        <SharePlayerRadio
           v-if="authenticated"
           :canal="radio"
           :organisation-id="myOrganisationId"
         />
-        <ShareButtons/>
+        <ShareButtons />
       </div>
     </template>
     <ClassicLoading
@@ -54,6 +62,7 @@ const ShareButtons = defineAsyncComponent(() => import('../display/sharing/Share
 const EditBoxRadio = defineAsyncComponent(() => import('@/components/display/edit/EditBoxRadio.vue'));
 const RadioCurrently = defineAsyncComponent(() => import('../display/live/RadioCurrently.vue'));
 const RadioImage = defineAsyncComponent(() => import('../display/live/RadioImage.vue'));
+const RadioPlanning = defineAsyncComponent(() => import('../display/live/RadioPlanning.vue'));
 export default defineComponent({
   components: {
     SharePlayerRadio,
@@ -61,7 +70,8 @@ export default defineComponent({
     EditBoxRadio,
     ClassicLoading,
     RadioCurrently,
-    RadioImage
+    RadioImage,
+    RadioPlanning
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {

package/src/locale/fr.ts

@@ -329,4 +329,7 @@ export default{
   'In the process of being published': 'En cours de publication',
   "Radio":"Radio",
   "Currently":"Actuellement",
+
+  "Program":"Programme",
+  "No programming":"Aucune programmation",
 };

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

@@ -4,7 +4,7 @@ import { FetchParam } from './fetchParam';
 
 
 export interface Playlist {
-  ambiance?: string; //#11919 "NONE", "AMBIANCE", "PROGRAMMED"
+  ambianceType?: string; //#11919 "NONE", "AMBIANCE", "PROGRAMMED"
   imageUrl?: string;
   description: string;
   organisation?: Organisation;
@@ -19,7 +19,7 @@ export interface Playlist {
 
 export function emptyPlaylistData(): Playlist{
   return {
-    ambiance:"NONE",
+    ambianceType:"NONE",
     description: '',
     playlistId: 0,
     podcasts: undefined,

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

@@ -39,7 +39,6 @@ export interface Podcast {
   title: string;
   weekDownloadCount?: number;
   order?: number;
-  livePodcastId?: number
 }
 export function emptyPodcastData(): Podcast {
   return {