@saooti/octopus-sdk 36.0.9 → 36.0.11

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

@@ -33,7 +33,7 @@
     </div>
     <button
       v-if="hidePlay || recordingLive"
-      class="podcast-image-play-button"
+      class="image-play-button"
       :class="classicPodcastPlay ? '' : 'transparent-background'"
       @click="play"
     >
@@ -65,7 +65,7 @@
       </div>
       <div
         v-else
-        class="icon-container error-icon"
+        class="icon-container play-button-error-icon"
       >
         <div
           :title="textVisible"
@@ -75,7 +75,7 @@
       </div>
       <div
         v-if="!classicPodcastPlay"
-        class="h6 mt-3 fw-bolder"
+        class="live-image-status bg-dark"
       >
         {{ textVisible }}
       </div>
@@ -321,59 +321,26 @@ export default defineComponent({
   .transparent-background {
     background-color: rgba(255, 255, 255, 0.5);
   }
-  .podcast-image-play-button{
-    position: absolute;
-    display: flex;
-    justify-content: flex-end;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    cursor: pointer;
-    flex-direction: column;
-    background: transparent;
-    border-width: 0;
-    width: 100%;
-    &:focus{
-      background: rgba(0, 0, 0, 0.5);
-    }
-
-    .icon-container {
-      background: $primaryColorLessTransparent !important;
-      border-radius: 2rem;
-      color: white;
-      padding: 0.5rem;
-      margin: 0.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
-      &.error-icon {
-        background: #00000050 !important;
-        cursor: default !important;
-      }
-      &:hover {
-        background: #00000030;
-      }
-      .saooti-play {
-        font-size: 1.2rem;
-        position: relative;
-        color: white;
-      }
-      .big-icon-error {
-        font-size: 1rem;
-        position: relative;
-      }
+  
+  .play-button-error-icon {
+    background: #0000009d !important;
+    cursor: default !important;
+    align-self: center;
+    margin-bottom: calc(50% - 1rem);
+    .big-icon-error {
+      font-size: 2rem;
+      position: relative;
     }
   }
   .special-icon-play-button {
     width: 30px;
     height: 30px;
     background-color: #ffd663;
+    color: black;
     border-radius: 50%;
     position: absolute;
-    left: 4.5rem;
-    bottom: 4rem;
+    left: 4.4rem;
+    bottom: 2.2rem;
     font-size: 0.9rem;
     font-weight: bold;
     display: flex;

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

@@ -12,6 +12,7 @@
       :hide-play="!podcastItemDescription || (podcastItemDescription && (!hoverDesc || !description))"
       :display-description="0!==description.length && podcastItemDescription"
       :arrow-direction="arrowDirection"
+      :fetchConference="fetchConference"
       @hideDescription="hideDescription"
       @showDescription="showDescription"
     />
@@ -55,6 +56,7 @@ import { state } from '../../../stores/ParamSdkStore';
 import dayjs from 'dayjs';
 import { Podcast } from '@/stores/class/general/podcast';
 import { defineComponent } from 'vue'
+import { Conference } from '@/stores/class/conference/conference';
 export default defineComponent({
   name: 'PodcastItem',
   
@@ -65,6 +67,7 @@ export default defineComponent({
 
   props: {
     podcast: { default: ()=>({}), type: Object as ()=> Podcast},
+    fetchConference: { default: undefined, type: Object as ()=>Conference},
   },
 
   data() {

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

@@ -18,24 +18,17 @@
         class="loading-size"
         :loading-text="loading?$t('Loading podcasts ...'):undefined"
       />
-      <swiper
+      <SwiperList
         v-if="!loading"
-        :slides-per-view="numberItem"
-        :space-between="0"
-        :loop="allPodcasts.length>=numberItem"
-        :navigation="true"
-        :modules="modules"
+        :listObject="allPodcasts"
       >
-        <swiper-slide
-          v-for="p in allPodcasts"
-          :key="p.podcastId"
-        >
+        <template #octopusSlide="{option}">
           <PodcastItem
             class="flex-shrink-0 item-phone-margin"
-            :podcast="p"
+            :podcast="option"
           />
-        </swiper-slide>
-      </swiper>
+        </template>
+      </SwiperList>
     </template>
   </PodcastInlineListTemplate>
 </template>
@@ -43,14 +36,9 @@
 <script lang="ts">
 import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
 import octopusApi from '@saooti/octopus-api';
-import domHelper from '../../../helper/dom';
 import PodcastItem from './PodcastItem.vue';
-import { state } from '../../../stores/ParamSdkStore';
 import ClassicLoading from '../../form/ClassicLoading.vue';
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Navigation } from "swiper";
-import "swiper/css";
-import "swiper/css/navigation";
+import SwiperList from '../list/SwiperList.vue';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState } from 'pinia';
 import { Podcast } from '@/stores/class/general/podcast';
@@ -62,8 +50,7 @@ export default defineComponent({
     PodcastInlineListTemplate,
     PodcastItem,
     ClassicLoading,
-    Swiper,
-    SwiperSlide,
+    SwiperList
   },
 
   props: {
@@ -88,8 +75,6 @@ export default defineComponent({
       loading: true as boolean,
       popularSort: false as boolean,
       allPodcasts: [] as Array<Podcast>,
-      modules: [Navigation],
-      numberItem: 5 as number
     };
   },
   computed: {
@@ -100,12 +85,6 @@ export default defineComponent({
     watchVariable():string{
       return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     },
-    sizeItem(): number {
-      if (window.innerWidth <= 450) {
-        return 12.5;
-      }
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 16.5;
-    },
   },
   watch: {
     watchVariable(): void {
@@ -121,24 +100,11 @@ export default defineComponent({
     if (undefined !== this.isArrow) {
       this.$emit('update:isArrow', true);
     }
-    window.addEventListener('resize', this.handleResize);
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
   },
-
-
   mounted() {
-    this.handleResize();
     this.fetchNext();
   },
   methods: {
-    handleResize(): void {
-      if (!this.$el) return;
-      const width = (this.$el as HTMLElement).offsetWidth - 95;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem+ 0.5);
-      this.numberItem = Math.max(1, Math.floor(width / sixteen));
-    },
     async fetchNext(): Promise<void> {
       const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
         first: 0,
@@ -176,41 +142,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-<style lang="scss">
-@import '@scss/_variables.scss';
-.swiper {
-  width: 100%;
-  height: 100%;
-}
-.swiper-button-next, .swiper-button-prev{
-  color: $octopus-primary-color !important;
-  height: 100%;
-  top: 0;
-  bottom: 0;
-  margin: 0;
-}
-.swiper-button-next{
-  right: 0;
-}
-.swiper-button-prev{
-  left: 0;
-}
-.swiper-slide-active{
-  padding-left:27px;
-  @media (max-width: 550px) {
-    padding-left:0;
-  }
-}
-.swiper-slide-next{
-  padding-right:27px;
-}
-.swiper-button-lock{
-  display: flex;
-}
-.swiper-slide {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
+</script>

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

@@ -41,6 +41,7 @@ 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,6 +32,7 @@
             :organisation-id="organisationId"
           />
           <SharePlayerColors
+            class="mt-3"
             v-model:color="color"
             v-model:theme="theme"
           />
@@ -126,7 +127,6 @@ export default defineComponent({
       isVisible: false as boolean,
       displayArticle: true as boolean,
       displayTranscript: true as boolean,
-      colors: ['#000000', '#ffffff'],
       orgaAttributes: undefined as{[key: string]:string|number|boolean|undefined}|undefined,
     };
   },
@@ -303,10 +303,8 @@ export default defineComponent({
 
 <style lang="scss">
 @import '@scss/_variables.scss';
+@import '../../../assets/iframe.scss';
 .octopus-app{
-  iframe{
-    border:0;
-  }
   .sticker {
     align-self: center;
     background: $octopus-primary-color;
@@ -324,11 +322,5 @@ export default defineComponent({
       color: $octopus-primary-color;
     }
   }
-  .max-iframe {
-    width: 500px;
-    @media (max-width: 960px){
-      width: calc(100% - 2rem);
-    }
-  }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex mt-3">
+  <div class="d-flex">
     <div class="d-flex flex-column align-items-center flex-shrink-0 me-4">
       <div class="h4 mb-2">
         {{ $t('Choose color') }}

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

@@ -0,0 +1,102 @@
+<template>
+  <div class="module-box overflow-visible">
+    <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">
+        <SharePlayerColors
+          v-model:color="color"
+          v-model:theme="theme"
+        />
+        <ShareModalPlayer
+          v-if="isShareModal"
+          :embed-link="iFrame"
+          :embedly-link="iFrameSrc"
+          @close="isShareModal = false"
+        />
+        <button
+          class="btn btn-primary width-fit-content mt-3"
+          @click="isShareModal = true"
+        >
+          {{ $t('Share the player') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { orgaComputed } from '../../mixins/orgaComputed';
+import { state } from '../../../stores/ParamSdkStore';
+import octopusApi from '@saooti/octopus-api';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { Canal } from '@/stores/class/radio/canal';
+const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
+const SharePlayerColors = defineAsyncComponent(() => import('./SharePlayerColors.vue'));
+export default defineComponent({
+  components: {
+    ShareModalPlayer,
+    SharePlayerColors
+  },
+  mixins:[orgaComputed],
+  props: {
+    canal: { default: undefined, type: Object as ()=> Canal},
+    organisationId: { default: undefined, type: String},
+  },
+
+  data() {
+    return {
+      isShareModal: false as boolean,
+      color: '#40a372' as string,
+      theme: '#000000' as string,
+      orgaAttributes: undefined as{[key: string]:string|number|boolean|undefined}|undefined,
+    };
+  },
+  
+  computed: {
+    ...mapState(useAuthStore, ['authOrganisation']),
+    iFrameSrc(): string{
+      return `${state.podcastPage.MiniplayerUri}miniplayer/radio/${this.canal?.id}?distributorId=${this.organisationId}&color=${this.color.substring(1)}&theme=${this.theme.substring(1)}`; 
+    },
+   
+    iFrame(): string {
+      return `<iframe src="${this.iFrameSrc}" width="100%" height="140px" scrolling="no" frameborder="0"></iframe>`;
+    },
+    
+  },
+  async created() {
+    await this.fetchOrgaAttributes();
+    this.initColor();
+  },
+  methods: {
+    async fetchOrgaAttributes(): Promise<void>{
+      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+        this.orgaAttributes = this.authOrganisation.attributes;
+      }else{
+        this.orgaAttributes= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+this.myOrganisationId);
+      }
+    },
+    initColor(): void {
+      if(!this.orgaAttributes){return;}
+      this.color = Object.prototype.hasOwnProperty.call(this.orgaAttributes,'COLOR') ? (this.orgaAttributes.COLOR as string) : '#40a372';
+      this.theme = Object.prototype.hasOwnProperty.call(this.orgaAttributes,'THEME') ? (this.orgaAttributes.THEME as string) : '#000000';
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+@import '@scss/_variables.scss';
+@import '../../../assets/iframe.scss';
+</style>

package/src/components/misc/LeftMenu.vue

@@ -78,7 +78,7 @@ export default defineComponent({
     routerLinkArray(){
       return [
         {title : this.$t('Home'), routeName: 'home', condition : true},
-        {title : this.$t('Live'), routeName: 'lives', condition : state.generalParameters.isLiveTab &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
+        {title : this.$t('Radio & Live'), routeName: 'lives', condition : state.generalParameters.isLiveTab &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
         {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
         {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrgaId || this.isEducation)},

package/src/components/misc/ProgressBar.vue

@@ -13,10 +13,12 @@
     />
     <template v-if="playerMedia">
       <div
+        v-if="mediaCueInPercent > 0"
         class="octopus-progress-bar bg-complementary"
         :style="{'width': + mediaCueInPercent + '%'}"
       />
       <div
+        v-if="mediaCueOutPercent < 100"
         class="octopus-progress-bar end-0 bg-complementary"
         :style="{'width': + 100- mediaCueOutPercent + '%'}"
       />
@@ -31,10 +33,12 @@
     />
     <template v-if="playerMedia">
       <div
+        v-if="mediaCueInPercent > 0"
         class="octopus-progress-bar octopus-progress-bar-duration bg-complementary"
         :style="{'left': + mediaCueInPercent + '%'}"
       />
       <div
+        v-if="mediaCueOutPercent < 100"
         class="octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary"
         :style="{'right': + 100- mediaCueOutPercent + '%'}"
       />

package/src/components/misc/TopBar.vue

@@ -138,7 +138,7 @@ export default defineComponent({
     ...mapState(useFilterStore, ['filterLive', 'filterOrgaId', 'filterImgUrl', 'filterIab', 'filterRubrique', 'filterName']),
     routerLinkArray(){
       return [
-        {title : this.$t('Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
+        {title : this.$t('Radio & Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
         {title : this.$t('Emissions'), routeName: 'emissions', condition : true}
       ]

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

@@ -27,8 +27,8 @@
         <template 
           #tab1
         >
-          <div class="d-flex flex-column">
-            <div class="d-flex">
+          <div class="d-flex flex-column flex-grow-1">
+            <div class="d-flex justify-content-between align-items-center">
               <p>{{ embedlyLink }}</p>
               <div
                 class="saooti-copy"

package/src/components/misc/player/PlayerCompact.vue

@@ -143,6 +143,7 @@ export default defineComponent({
     border-radius: $octopus-borderradius;
     height: 2.4rem;
     width: 2.4rem;
+    margin-right: 0.5rem;
     cursor: pointer;
     /** PHONES*/
     @media (max-width: 450px) {

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

@@ -1,15 +1,19 @@
 import { state } from '../../../stores/ParamSdkStore';
 import { defineComponent } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
-import { MetadataRadio } from '@/stores/class/general/player';
+import {fetchRadioData} from '../../mixins/radio/fetchRadioData';
+import { MediaRadio, MetadataRadio } from '@/stores/class/general/player';
 import { usePlayerStore } from '@/stores/PlayerStore';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState, mapActions } from 'pinia';
 import octopusApi from '@saooti/octopus-api';
+import dayjs from 'dayjs';
+import { Podcast } from '@/stores/class/general/podcast';
 export const playerDisplay = defineComponent({
 	props: {
     hlsReady: { default: false , type: Boolean},
   },
+  mixins: [fetchRadioData],
   data() {
     return {
       radioInterval: undefined as  ReturnType<typeof setTimeout>|undefined,
@@ -35,6 +39,13 @@ export const playerDisplay = defineComponent({
 			return (state.player.image as boolean);
 		},
 		podcastShareUrl(): RouteLocationRaw|string {
+      if(this.playerRadio?.podcast?.podcastId){
+        return {
+					name: 'podcast',
+					params: { podcastId: this.playerRadio?.podcast?.podcastId.toString() },
+					query: { productor: this.filterOrgaId },
+				};
+      }
 			if (this.playerPodcast) {
 				return {
 					name: 'podcast',
@@ -49,7 +60,10 @@ export const playerDisplay = defineComponent({
     },
 		podcastTitle(): string {
       if(this.playerRadio){
-        return this.playerRadio.metadata.title + " " + this.playerRadio.metadata.artist;
+        if(this.playerRadio.podcast){
+          return this.playerRadio.podcast.title;
+        }
+        return this.displayTitle(this.playerRadio.metadata);
       }
       if (this.playerPodcast) {
         if (this.isEmissionName)
@@ -69,12 +83,13 @@ export const playerDisplay = defineComponent({
     playerRadio: {
       deep: true,
       immediate:true,
-      handler(){
+      handler(newValue,oldValue){
+        if(oldValue && newValue && newValue.canalId === oldValue.canalId){return;}
         clearInterval((this.radioInterval as unknown as number));
         if(this.playerRadio){
-          this.fetchRadioMetadata();
+          this.fetchCurrentlyPlaying();
           this.radioInterval = setInterval(() => {
-            this.fetchRadioMetadata();
+            this.fetchCurrentlyPlaying();
           }, 2000);
         }
       }
@@ -85,13 +100,15 @@ export const playerDisplay = defineComponent({
   },
   beforeUnmount() {
     window.removeEventListener('keydown', this.addKeyboardControl);
-    clearInterval((this.radioInterval as unknown as number));
   },
   methods: {
-    ...mapActions(usePlayerStore, ['playerMetadata', 'playerChangeStatus']),
-    async fetchRadioMetadata(): Promise<void>{
-      const metadata = await octopusApi.fetchData<MetadataRadio>(14, 'player/playing/'+this.playerRadio?.canalId);
-      this.playerMetadata(metadata.currently);
+    ...mapActions(usePlayerStore, ['playerMetadata', 'playerChangeStatus', 'playerRadioPodcast']),
+    async fetchCurrentlyPlaying(): Promise<void>{
+      this.fetchRadioMetadata(this.playerRadio?.canalId??0,this.playerRadio?.metadata.title??"", this.updateMetadata);
+    },
+    updateMetadata(metadata: MediaRadio, podcast?:Podcast): void{
+      this.playerMetadata(metadata);
+      this.playerRadioPodcast(podcast);
     },
     addKeyboardControl(event: KeyboardEvent): void{
       if(!event || null ===event){return;}

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

@@ -0,0 +1,47 @@
+import { defineComponent } from 'vue';
+import { MediaRadio, MetadataRadio } from '@/stores/class/general/player';
+import octopusApi from '@saooti/octopus-api';
+import dayjs from 'dayjs';
+import { Podcast } from '@/stores/class/general/podcast';
+export const fetchRadioData = defineComponent({
+  data() {
+    return {
+      radioInterval: undefined as  ReturnType<typeof setTimeout>|undefined,
+    };
+  },
+  unmounted() {
+    clearInterval((this.radioInterval as unknown as number));
+  },
+  methods: {
+    async fetchRadioMetadata(canalId: number, previousTitle: string,  callbackMetadata: (metadata: MediaRadio, podcast?:Podcast) => void): Promise<void>{
+      const metadata = await octopusApi.fetchData<MetadataRadio>(14, 'player/playing/'+canalId);
+      const arrayMetadata = metadata.previously;
+      arrayMetadata.unshift(metadata.currently);
+      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);
+            }else{
+              callbackMetadata(arrayMetadata[i]);
+            }
+          }
+          return;
+        }
+      }
+    },
+    displayTitle(metadata: MediaRadio): string{
+      let title = "";
+      if(metadata.title){
+        title+=metadata.title;
+      }
+      if(metadata.artist){
+        title+=" - "+metadata.artist;
+      }
+      return title;
+    }
+	}
+});