@saooti/octopus-sdk 36.0.12 → 36.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.12",
+  "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/live/RadioCurrently.vue

@@ -88,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/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/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/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/pages/Radio.vue

@@ -28,6 +28,9 @@
             :radio="radio"
           />
         </div>
+        <RadioPlanning
+          :radio="radio"
+        />
         <SharePlayerRadio
           v-if="authenticated"
           :canal="radio"
@@ -59,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,
@@ -66,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/podcast.ts

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