@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,226 +1,116 @@
 <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-0 float-start"
   >
+    <img
+      v-lazy="podcast.imageUrl"
+      class="img-box"
+      :alt="$t('Episode name image', {name:podcast.title})"
+    >
+    <div
+      v-if="isPodcastmaker"
+      :class="mainRubrique? 'mainRubrique' : 'notMainRubrique'"
+    />
     <div
+      v-if="fetchConference"
       class="live-image-status"
       :class="
-        fetchConference && 'null' !== fetchConference
+        fetchConference && 'null' !== fetchConference && fetchConference.status
           ? fetchConference.status.toLowerCase() + '-bg'
           : ''
       "
-      v-if="fetchConference"
     >
       {{ statusText }}
     </div>
-    <div class="live-image-status recording-bg" v-if="isRecordedInLive">
-      {{ 'Enregistré en live' }}
-    </div>
     <div
-      class="podcast-image-play-button"
-      v-on:click="play"
+      v-if="isRecordedInLive"
+      class="live-image-status recording-bg"
+    >
+      {{ $t('Recorded in live') }}
+    </div>
+    <button
       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
-          :aria-label="$t('Play')"
-          class="saooti-play2-bounty primary-color"
           v-show="!playingPodcast"
-        ></div>
+          :title="$t('Play')"
+          class="saooti-play primary-color"
+        />
         <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" />
+          <span class="paddle2" />
+          <span class="paddle3" />
         </div>
       </div>
-      <div class="icon-container error-icon" v-else>
+      <div
+        v-else
+        class="icon-container error-icon"
+      >
         <div
-          :aria-label="textVisible"
+          :title="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
-      class="background-icon saooti-arrow-up2"
-      :aria-label="$t('Show description')"
-      v-if="!isDescription && displayDescription && isMobile"
-      @click="showDescription"
-    ></div>
+    </button>
     <div
-      class="background-icon saooti-arrow-down2"
-      :aria-label="$t('Hide description')"
-      v-if="isDescription && displayDescription && isMobile"
+      v-if="displayDescription && isMobile"
+      class="background-icon primary-bg saooti-arrow-up"
+      :class="isDescription ? 'saooti-arrow-down':'saooti-arrow-up'"
+      :title="isDescription ? $t('Hide description'):$t('Show description')"
       @click="showDescription"
-    ></div>
+    />
   </div>
 </template>
 
-<style lang="scss">
-.no-visible-img {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  padding: 0.7em;
-  background: rgba(0, 0, 0, 0.31);
-}
-.special-icon-play-button {
-  width: 30px;
-  height: 30px;
-  background-color: #ffd663;
-  border-radius: 50%;
-  position: absolute;
-  right: 4.5rem;
-  top: 6rem;
-  font-size: 0.9rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.transparent-background {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-.podcast-image-play-button {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  cursor: pointer;
-  flex-direction: column;
-
-  .icon-container {
-    background: #00000050;
-    border-radius: 50%;
-    height: 3rem;
-    width: 3rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.error-icon {
-      background: #00000050 !important;
-      cursor: default !important;
-    }
-
-    &:hover {
-      background: #00000030;
-    }
-
-    > .saooti-play2-bounty {
-      font-size: 2em;
-      position: relative;
-      right: -0.2rem;
-    }
-    .big-icon-error {
-      font-size: 2em;
-      position: relative;
-    }
-    z-index: 2;
-  }
-}
-.bloc-paddle {
-  align-items: flex-end;
-  display: flex;
-  width: 2rem;
-  height: 2.6rem;
-  padding: 0.7rem;
-  justify-content: space-around;
-  align-content: flex-start;
-  border-radius: 50%;
-  background: transparent !important;
-
-  > span {
-    width: 0.1rem;
-    background: #fff;
-  }
-
-  .paddle1 {
-    animation-duration: 0.6s;
-    animation-name: slidein;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  .paddle2 {
-    animation-duration: 0.3s;
-    animation-name: slidein2;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  .paddle3 {
-    animation-duration: 0.5s;
-    animation-name: slidein3;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-  @keyframes slidein {
-    0% {
-      height: 0;
-    }
-    100% {
-      height: 1rem;
-    }
-  }
-
-  @keyframes slidein2 {
-    0% {
-      height: 0.3rem;
-    }
-    100% {
-      height: 1.2rem;
-    }
-  }
-
-  @keyframes slidein3 {
-    0% {
-      height: 1.2rem;
-    }
-    100% {
-      height: 0;
-    }
-  }
-}
-</style>
-
 <script lang="ts">
 import { mapState } from 'vuex';
-
-import { defineComponent } from 'vue';
+import { state } from '../../../store/paramStore';
+import {StoreState} from '@/store/typeAppStore';
+import { Podcast } from '@/store/class/general/podcast';
+import { Conference } from '@/store/class/conference/conference';
+import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastImage',
-
-  props: [
-    'podcast',
-    'hidePlay',
-    'displayDescription',
-    'arrowDirection',
-    'fetchConference',
-    'isAnimatorLive',
-  ],
+  props: {
+    podcast: { default: ()=>({}), type: Object as ()=>Podcast},
+    hidePlay: { default: false, type: Boolean},
+    displayDescription: { default: false, type: Boolean},
+    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:any) {
+      playingPodcast(state: StoreState) {
         return (
           (state.player.podcast &&
             state.player.podcast.podcastId === this.podcast.podcastId) ||
@@ -232,37 +122,40 @@ export default defineComponent({
         );
       },
     }),
-
-    isMobile() {
+    mainRubrique(): boolean{
+      return undefined!==state.podcastPage.mainRubrique && 0!==state.podcastPage.mainRubrique && true==this.podcast?.rubriqueIds?.includes(state.podcastPage.mainRubrique);
+    },
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+    isMobile(): boolean {
       return window.matchMedia('(hover: none)').matches;
     },
-
-    isRecordedInLive():boolean {
+    isRecordedInLive(): boolean {
       return (
         undefined === this.fetchConference &&
         undefined !== this.podcast.conferenceId &&
         'READY_TO_RECORD' !== this.podcast.processingStatus
       );
     },
-
-    isLiveToBeRecorded():boolean {
+    isLiveToBeRecorded(): boolean {
       return (
         undefined === this.fetchConference &&
         undefined !== this.podcast.conferenceId &&
         'READY_TO_RECORD' === this.podcast.processingStatus
       );
     },
-    classicPodcastPlay():boolean {
+    classicPodcastPlay(): boolean {
       return (
-        this.podcast &&
+        undefined!==this.podcast &&
         false !== this.podcast.valid &&
           ('READY_TO_RECORD' === this.podcast.processingStatus ||
             'READY' === this.podcast.processingStatus) &&
-        !this.isLiveToBeRecorded &&
-        this.podcast.availability.visibility
+        !this.isLiveToBeRecorded && undefined!==this.podcast.availability.visibility 
+        && this.podcast.availability.visibility
       );
     },
-    iconName() {
+    iconName(): string {
       if (this.isLiveToBeRecorded) return 'saooti-clock';
       if ('READY' === this.podcast.processingStatus || this.fetchConference) {
         if (false == this.podcast.valid) return 'saooti-checkmark';
@@ -282,7 +175,7 @@ export default defineComponent({
         return 'saooti-cancel-circle';
       return 'saooti-warning';
     },
-    textVisible():string {
+    textVisible(): string {
       if (this.isLiveToBeRecorded)
         return this.$t('Podcast linked to waiting live');
       if ('READY' === this.podcast.processingStatus || this.fetchConference) {
@@ -303,8 +196,7 @@ export default defineComponent({
         return this.$t('Podcast in cancelled status');
       return this.$t('Podcast in error');
     },
-
-    statusText():string {
+    statusText(): string {
       if (!this.fetchConference) return '';
       switch (this.fetchConference.status) {
         case 'PLANNED':
@@ -327,42 +219,56 @@ export default defineComponent({
           return '';
       }
     },
-
-    recordingLive():boolean {
+    recordingLive(): boolean {
       return (
-        this.fetchConference &&
-        'null' !== this.fetchConference &&
+        undefined !== this.fetchConference &&
+         -1 !== this.fetchConference.conferenceId &&
         ('RECORDING' === this.fetchConference.status ||
           'PENDING' === this.fetchConference.status)
       );
     },
+    clickPlayGoPage():boolean{
+      return (state.podcastPage.clickPlayGoPage as boolean);
+    },
   },
-
-  data() {
-    return {
-      isDescription: false,
-    };
+  watch: {
+    arrowDirection(): void {
+      if ('up' === this.arrowDirection) {
+        this.isDescription = true;
+        this.showDescription();
+      } else {
+        this.isDescription = false;
+        this.showDescription();
+      }
+    },
   },
-
+ 
   methods: {
-    play() {
+    play(): void {
       if (this.isLiveToBeRecorded) {
         return;
       }
+      if(this.playingPodcast){
+        this.$store.commit('playerPause', "PLAYING"===this.$store.state.player.status);
+        return;
+      }
       if (!this.recordingLive) {
         this.$store.commit('playerPlayPodcast', this.podcast);
-        return;
+      }else{
+        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,
+        });
+      }
+      if(this.clickPlayGoPage){
+        this.$router.push('/main/pub/podcast/'+this.podcast.podcastId);
       }
-      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() {
+    showDescription(): void {
       if (this.isDescription) {
         this.$emit('hideDescription');
       } else {
@@ -371,17 +277,94 @@ export default defineComponent({
       this.isDescription = !this.isDescription;
     },
   },
+})
+</script>
 
-  watch: {
-    arrowDirection(newValue) {
-      if ('up' === newValue) {
-        this.isDescription = true;
-        this.showDescription();
-      } else {
-        this.isDescription = false;
-        this.showDescription();
+
+<style lang="scss">
+.octopus-app{
+  .live-image-status {
+    text-align: center;
+    width: 100%;
+    font-size: 0.6rem;
+    padding: 0.2rem 0;
+    color: white;
+    text-transform: uppercase;
+    position: absolute;
+  }
+
+  .background-icon{
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+    right: 0;
+    bottom: 0;
+    margin: 5px;
+    position: absolute;
+    cursor: pointer;
+    z-index: 3;
+  }
+  .special-icon-play-button {
+    width: 30px;
+    height: 30px;
+    background-color: #ffd663;
+    border-radius: 50%;
+    position: absolute;
+    right: 4.5rem;
+    top: 6rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .transparent-background {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .podcast-image-play-button{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+    flex-direction: column;
+    background: transparent;
+    border-width: 0;
+    &:focus{
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .icon-container {
+      background: #00000050;
+      border-radius: 50%;
+      height: 3rem;
+      width: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &.error-icon {
+        background: #00000050 !important;
+        cursor: default !important;
       }
-    },
-  },
-});
-</script>
+      &:hover {
+        background: #00000030;
+      }
+      > .saooti-play {
+        font-size: 2em;
+        position: relative;
+        right: -0.2rem;
+      }
+      .big-icon-error {
+        font-size: 2em;
+        position: relative;
+      }
+      z-index: 2;
+    }
+  }
+}
+</style>