@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -1,230 +1,109 @@
 <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"
   >
-    <template v-if="isPodcastmaker">
-      <div v-if="mainRubrique" class="mainRubrique"></div>
-      <div v-else class="notMainRubrique"></div>
-    </template>
+    <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">
+    <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"
+    <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>
+    </button>
     <div
-      class="background-icon saooti-arrow-up2"
-      :aria-label="$t('Show 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
-      class="background-icon saooti-arrow-down2"
-      :aria-label="$t('Hide description')"
-      v-if="isDescription && displayDescription && isMobile"
-      @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 Vue from 'vue';
 import { state } from '../../../store/paramStore';
 import {StoreState} from '@/store/typeAppStore';
-import { Podcast } from '@/store/class/podcast';
-import { Conference } from '@/store/class/conference';
-export default Vue.extend({
+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: { default: undefined as Podcast|undefined},
-    hidePlay: { default: false as boolean},
-    displayDescription: { default: false as boolean},
-    arrowDirection: { default: 'up' as string},
-    isAnimatorLive: { default: false as boolean},
-    fetchConference: { default: undefined as Conference|undefined},
+    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},
   },
-
-   data() {
+  emits: ['hideDescription', 'showDescription'],
+  data() {
     return {
       isDescription: false as boolean,
     };
@@ -244,14 +123,10 @@ export default Vue.extend({
       },
     }),
     mainRubrique(): boolean{
-      if(this.podcast && this.podcast.rubriqueIds && this.podcast.rubriqueIds.includes(state.podcastPage.mainRubrique)){
-        return true;
-      }else{
-        return false;
-      }
+      return undefined!==state.podcastPage.mainRubrique && 0!==state.podcastPage.mainRubrique && true==this.podcast?.rubriqueIds?.includes(state.podcastPage.mainRubrique);
     },
     isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
+      return (state.generalParameters.podcastmaker as boolean);
     },
     isMobile(): boolean {
       return window.matchMedia('(hover: none)').matches;
@@ -302,56 +177,70 @@ export default Vue.extend({
     },
     textVisible(): string {
       if (this.isLiveToBeRecorded)
-        return this.$t('Podcast linked to waiting live').toString();
+        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').toString();
+        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').toString();
-        return this.$t('Podcast no visible').toString();
+          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').toString();
+        return this.$t('Podcast in process');
       if ('CANCELED' === this.podcast.processingStatus)
-        return this.$t('Podcast in cancelled status').toString();
-      return this.$t('Podcast in error').toString();
+        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').toString();
+          return this.$t('live in few time');
         case 'PENDING':
-          if (this.isAnimatorLive) return this.$t('Open studio').toString();
-          return this.$t('live upcoming').toString();
+          if (this.isAnimatorLive) return this.$t('Open studio');
+          return this.$t('live upcoming');
         case 'RECORDING':
-          return this.$t('In live').toString();
+          return this.$t('In live');
         case 'DEBRIEFING':
           if (!this.isAnimatorLive) return '';
           if ('READY_TO_RECORD' === this.podcast.processingStatus)
-            return this.$t('Not recording').toString();
-          return this.$t('Debriefing').toString();
+            return this.$t('Not recording');
+          return this.$t('Debriefing');
         case 'ERROR':
-          return this.$t('In error').toString();
+          return this.$t('In error');
         case 'PUBLISHING':
-          return this.$t('Publishing').toString();
+          return this.$t('Publishing');
         default:
           return '';
       }
     },
     recordingLive(): boolean {
       return (
-        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);
+    },
+  },
+  watch: {
+    arrowDirection(): void {
+      if ('up' === this.arrowDirection) {
+        this.isDescription = true;
+        this.showDescription();
+      } else {
+        this.isDescription = false;
+        this.showDescription();
+      }
+    },
   },
  
   methods: {
@@ -360,25 +249,24 @@ export default Vue.extend({
         return;
       }
       if(this.playingPodcast){
-        if("PLAYING"===this.$store.state.player.status){
-          this.$store.commit('playerPause', true);
-        }else{
-          this.$store.commit('playerPause', false);
-        }
+        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(): void {
       if (this.isDescription) {
@@ -389,16 +277,94 @@ export default Vue.extend({
       this.isDescription = !this.isDescription;
     },
   },
-  watch: {
-    arrowDirection(): void {
-      if ('up' === this.arrowDirection) {
-        this.isDescription = true;
-        this.showDescription();
-      } else {
-        this.isDescription = false;
-        this.showDescription();
-      }
-    },
-  },
-});
+})
 </script>
+
+
+<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;
+      }
+      &: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>