@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,75 +1,295 @@
 <template>
   <div
-    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink float-left"
-    :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
     v-if="podcast"
+    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink float-start"
+    :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
   >
+    <template v-if="isPodcastmaker">
+      <div
+        v-if="mainRubrique"
+        class="mainRubrique"
+      />
+      <div
+        v-else
+        class="notMainRubrique"
+      />
+    </template>
     <div
+      v-if="fetchConference"
       class="live-image-status"
       :class="
         fetchConference && 'null' !== fetchConference
           ? fetchConference.status.toLowerCase() + '-bg'
           : ''
       "
-      v-if="fetchConference"
     >
       {{ statusText }}
     </div>
-    <div class="live-image-status recording-bg" v-if="isRecordedInLive">
-      {{ 'Enregistré en live' }}
+    <div
+      v-if="isRecordedInLive"
+      class="live-image-status recording-bg"
+    >
+      {{ $t('Recorded in live') }}
     </div>
     <div
-      class="podcast-image-play-button"
-      v-on:click="play"
       v-if="hidePlay || recordingLive"
+      class="podcast-image-play-button"
       :class="classicPodcastPlay ? '' : 'transparent-background'"
+      @click="play"
     >
-      <div class="icon-container" v-if="!isLiveToBeRecorded">
+      <div
+        v-if="!isLiveToBeRecorded"
+        class="icon-container"
+      >
         <div
+          v-show="!playingPodcast"
           :aria-label="$t('Play')"
           class="saooti-play2-bounty primary-color"
-          v-show="!playingPodcast"
-        ></div>
+        />
         <div
+          v-if="!classicPodcastPlay"
           class="special-icon-play-button"
           :class="iconName"
-          v-if="!classicPodcastPlay"
-        ></div>
-        <div class="bloc-paddle" v-show="playingPodcast">
-          <span class="paddle1 primary-color"></span>
-          <span class="paddle2 primary-color"></span>
-          <span class="paddle3 primary-color"></span>
+        />
+        <div
+          v-show="playingPodcast"
+          class="bloc-paddle"
+        >
+          <span class="paddle1 primary-color" />
+          <span class="paddle2 primary-color" />
+          <span class="paddle3 primary-color" />
         </div>
       </div>
-      <div class="icon-container error-icon" v-else>
+      <div
+        v-else
+        class="icon-container error-icon"
+      >
         <div
           :aria-label="textVisible"
           class="big-icon-error"
           :class="iconName"
-        ></div>
+        />
       </div>
       <div
-        class="small-Text mt-3 font-weight-bolder"
         v-if="!classicPodcastPlay"
+        class="small-Text mt-3 fw-bolder"
       >
         {{ textVisible }}
       </div>
     </div>
     <div
+      v-if="!isDescription && displayDescription && isMobile"
       class="background-icon saooti-arrow-up2"
       :aria-label="$t('Show description')"
-      v-if="!isDescription && displayDescription && isMobile"
       @click="showDescription"
-    ></div>
+    />
     <div
+      v-if="isDescription && displayDescription && isMobile"
       class="background-icon saooti-arrow-down2"
       :aria-label="$t('Hide description')"
-      v-if="isDescription && displayDescription && isMobile"
       @click="showDescription"
-    ></div>
+    />
   </div>
 </template>
 
+<script lang="ts">
+import { mapState } from 'vuex';
+import { state } from '../../../store/paramStore';
+import {StoreState} from '@/store/typeAppStore';
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastImage',
+  props: {
+    podcast: { default: ()=>({}), type: Object as ()=>Podcast},
+    hidePlay: { default: false, type: Boolean},
+    displayDescription: { default: undefined, type: String},
+    arrowDirection: { default: 'up', type: String},
+    isAnimatorLive: { default: false, type: Boolean},
+    fetchConference: { default: undefined, type: Object as ()=>Conference},
+  },
+  emits: ['hideDescription', 'showDescription'],
+  data() {
+    return {
+      isDescription: false as boolean,
+    };
+  },
+  computed: {
+    ...mapState({
+      playingPodcast(state: StoreState) {
+        return (
+          (state.player.podcast &&
+            state.player.podcast.podcastId === this.podcast.podcastId) ||
+          (this.fetchConference &&
+            'null' !== this.fetchConference &&
+            state.player.live &&
+            state.player.live.conferenceId ===
+              this.fetchConference.conferenceId)
+        );
+      },
+    }),
+    mainRubrique(): boolean{
+      if(this.podcast && this.podcast.rubriqueIds && this.podcast.rubriqueIds.includes(state.podcastPage.mainRubrique)){
+        return true;
+      }else{
+        return false;
+      }
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    isMobile(): boolean {
+      return window.matchMedia('(hover: none)').matches;
+    },
+    isRecordedInLive(): boolean {
+      return (
+        undefined === this.fetchConference &&
+        undefined !== this.podcast.conferenceId &&
+        'READY_TO_RECORD' !== this.podcast.processingStatus
+      );
+    },
+    isLiveToBeRecorded(): boolean {
+      return (
+        undefined === this.fetchConference &&
+        undefined !== this.podcast.conferenceId &&
+        'READY_TO_RECORD' === this.podcast.processingStatus
+      );
+    },
+    classicPodcastPlay(): boolean {
+      return (
+        undefined!==this.podcast &&
+        false !== this.podcast.valid &&
+          ('READY_TO_RECORD' === this.podcast.processingStatus ||
+            'READY' === this.podcast.processingStatus) &&
+        !this.isLiveToBeRecorded && undefined!==this.podcast.availability.visibility 
+        && this.podcast.availability.visibility
+      );
+    },
+    iconName(): string {
+      if (this.isLiveToBeRecorded) return 'saooti-clock';
+      if ('READY' === this.podcast.processingStatus || this.fetchConference) {
+        if (false == this.podcast.valid) return 'saooti-checkmark';
+        if (
+          !this.podcast.availability.visibility &&
+          this.podcast.availability.date
+        )
+          return 'saooti-clock';
+        return 'saooti-eye-blocked';
+      }
+      if (
+        'PLANNED' === this.podcast.processingStatus ||
+        'PROCESSING' === this.podcast.processingStatus
+      )
+        return 'saooti-hourglass';
+      if ('CANCELED' === this.podcast.processingStatus)
+        return 'saooti-cancel-circle';
+      return 'saooti-warning';
+    },
+    textVisible(): string {
+      if (this.isLiveToBeRecorded)
+        return this.$t('Podcast linked to waiting live').toString();
+      if ('READY' === this.podcast.processingStatus || this.fetchConference) {
+        if (false == this.podcast.valid) return this.$t('Podcast to validate').toString();
+        if (
+          !this.podcast.availability.visibility &&
+          this.podcast.availability.date
+        )
+          return this.$t('Podcast publish in future').toString();
+        return this.$t('Podcast no visible').toString();
+      }
+      if (
+        'PLANNED' === this.podcast.processingStatus ||
+        'PROCESSING' === this.podcast.processingStatus
+      )
+        return this.$t('Podcast in process').toString();
+      if ('CANCELED' === this.podcast.processingStatus)
+        return this.$t('Podcast in cancelled status').toString();
+      return this.$t('Podcast in error').toString();
+    },
+    statusText(): string {
+      if (!this.fetchConference) return '';
+      switch (this.fetchConference.status) {
+        case 'PLANNED':
+          return this.$t('live in few time').toString();
+        case 'PENDING':
+          if (this.isAnimatorLive) return this.$t('Open studio').toString();
+          return this.$t('live upcoming').toString();
+        case 'RECORDING':
+          return this.$t('In live').toString();
+        case 'DEBRIEFING':
+          if (!this.isAnimatorLive) return '';
+          if ('READY_TO_RECORD' === this.podcast.processingStatus)
+            return this.$t('Not recording').toString();
+          return this.$t('Debriefing').toString();
+        case 'ERROR':
+          return this.$t('In error').toString();
+        case 'PUBLISHING':
+          return this.$t('Publishing').toString();
+        default:
+          return '';
+      }
+    },
+    recordingLive(): boolean {
+      return (
+        undefined !== this.fetchConference &&
+         -1 !== this.fetchConference.conferenceId &&
+        ('RECORDING' === this.fetchConference.status ||
+          'PENDING' === this.fetchConference.status)
+      );
+    },
+  },
+  watch: {
+    arrowDirection(): void {
+      if ('up' === this.arrowDirection) {
+        this.isDescription = true;
+        this.showDescription();
+      } else {
+        this.isDescription = false;
+        this.showDescription();
+      }
+    },
+  },
+ 
+  methods: {
+    play(): void {
+      if (this.isLiveToBeRecorded) {
+        return;
+      }
+      if(this.playingPodcast){
+        if("PLAYING"===this.$store.state.player.status){
+          this.$store.commit('playerPause', true);
+        }else{
+          this.$store.commit('playerPause', false);
+        }
+        return;
+      }
+      if (!this.recordingLive) {
+        this.$store.commit('playerPlayPodcast', this.podcast);
+        return;
+      }
+      this.$store.commit('playerPlayPodcast', {
+        title: this.podcast.title,
+        audioUrl: this.podcast.audioUrl,
+        duration: this.podcast.duration,
+        conferenceId: this.fetchConference ? this.fetchConference.conferenceId : undefined,
+        livePodcastId: this.podcast.podcastId,
+        organisation: this.podcast.organisation.id,
+      });
+    },
+    showDescription(): void {
+      if (this.isDescription) {
+        this.$emit('hideDescription');
+      } else {
+        this.$emit('showDescription');
+      }
+      this.isDescription = !this.isDescription;
+    },
+  },
+})
+</script>
+
+
 <style lang="scss">
 .no-visible-img {
   width: 3rem;
@@ -200,188 +420,4 @@
     }
   }
 }
-</style>
-
-<script lang="ts">
-import { mapState } from 'vuex';
-
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: 'PodcastImage',
-
-  props: [
-    'podcast',
-    'hidePlay',
-    'displayDescription',
-    'arrowDirection',
-    'fetchConference',
-    'isAnimatorLive',
-  ],
-  emits: ['hideDescription', 'showDescription'],
-  computed: {
-    ...mapState({
-      playingPodcast(state:any) {
-        return (
-          (state.player.podcast &&
-            state.player.podcast.podcastId === this.podcast.podcastId) ||
-          (this.fetchConference &&
-            'null' !== this.fetchConference &&
-            state.player.live &&
-            state.player.live.conferenceId ===
-              this.fetchConference.conferenceId)
-        );
-      },
-    }),
-
-    isMobile() {
-      return window.matchMedia('(hover: none)').matches;
-    },
-
-    isRecordedInLive():boolean {
-      return (
-        undefined === this.fetchConference &&
-        undefined !== this.podcast.conferenceId &&
-        'READY_TO_RECORD' !== this.podcast.processingStatus
-      );
-    },
-
-    isLiveToBeRecorded():boolean {
-      return (
-        undefined === this.fetchConference &&
-        undefined !== this.podcast.conferenceId &&
-        'READY_TO_RECORD' === this.podcast.processingStatus
-      );
-    },
-    classicPodcastPlay():boolean {
-      return (
-        this.podcast &&
-        false !== this.podcast.valid &&
-          ('READY_TO_RECORD' === this.podcast.processingStatus ||
-            'READY' === this.podcast.processingStatus) &&
-        !this.isLiveToBeRecorded &&
-        this.podcast.availability.visibility
-      );
-    },
-    iconName() {
-      if (this.isLiveToBeRecorded) return 'saooti-clock';
-      if ('READY' === this.podcast.processingStatus || this.fetchConference) {
-        if (false == this.podcast.valid) return 'saooti-checkmark';
-        if (
-          !this.podcast.availability.visibility &&
-          this.podcast.availability.date
-        )
-          return 'saooti-clock';
-        return 'saooti-eye-blocked';
-      }
-      if (
-        'PLANNED' === this.podcast.processingStatus ||
-        'PROCESSING' === this.podcast.processingStatus
-      )
-        return 'saooti-hourglass';
-      if ('CANCELED' === this.podcast.processingStatus)
-        return 'saooti-cancel-circle';
-      return 'saooti-warning';
-    },
-    textVisible():string {
-      if (this.isLiveToBeRecorded)
-        return this.$t('Podcast linked to waiting live');
-      if ('READY' === this.podcast.processingStatus || this.fetchConference) {
-        if (false == this.podcast.valid) return this.$t('Podcast to validate');
-        if (
-          !this.podcast.availability.visibility &&
-          this.podcast.availability.date
-        )
-          return this.$t('Podcast publish in future');
-        return this.$t('Podcast no visible');
-      }
-      if (
-        'PLANNED' === this.podcast.processingStatus ||
-        'PROCESSING' === this.podcast.processingStatus
-      )
-        return this.$t('Podcast in process');
-      if ('CANCELED' === this.podcast.processingStatus)
-        return this.$t('Podcast in cancelled status');
-      return this.$t('Podcast in error');
-    },
-
-    statusText():string {
-      if (!this.fetchConference) return '';
-      switch (this.fetchConference.status) {
-        case 'PLANNED':
-          return this.$t('live in few time');
-        case 'PENDING':
-          if (this.isAnimatorLive) return this.$t('Open studio');
-          return this.$t('live upcoming');
-        case 'RECORDING':
-          return this.$t('In live');
-        case 'DEBRIEFING':
-          if (!this.isAnimatorLive) return '';
-          if ('READY_TO_RECORD' === this.podcast.processingStatus)
-            return this.$t('Not recording');
-          return this.$t('Debriefing');
-        case 'ERROR':
-          return this.$t('In error');
-        case 'PUBLISHING':
-          return this.$t('Publishing');
-        default:
-          return '';
-      }
-    },
-
-    recordingLive():boolean {
-      return (
-        this.fetchConference &&
-        'null' !== this.fetchConference &&
-        ('RECORDING' === this.fetchConference.status ||
-          'PENDING' === this.fetchConference.status)
-      );
-    },
-  },
-
-  data() {
-    return {
-      isDescription: false,
-    };
-  },
-
-  methods: {
-    play() {
-      if (this.isLiveToBeRecorded) {
-        return;
-      }
-      if (!this.recordingLive) {
-        this.$store.commit('playerPlayPodcast', this.podcast);
-        return;
-      }
-      this.$store.commit('playerPlayPodcast', {
-        title: this.podcast.title,
-        audioUrl: this.podcast.audioUrl,
-        duration: this.podcast.duration,
-        conferenceId: this.fetchConference.conferenceId,
-        livePodcastId: this.podcast.podcastId,
-        organisation: this.podcast.organisation.id,
-      });
-    },
-    showDescription() {
-      if (this.isDescription) {
-        this.$emit('hideDescription');
-      } else {
-        this.$emit('showDescription');
-      }
-      this.isDescription = !this.isDescription;
-    },
-  },
-
-  watch: {
-    arrowDirection(newValue) {
-      if ('up' === newValue) {
-        this.isDescription = true;
-        this.showDescription();
-      } else {
-        this.isDescription = false;
-        this.showDescription();
-      }
-    },
-  },
-});
-</script>
+</style>