@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/display/live/LiveItem.vue

@@ -1,15 +1,22 @@
 <template>
-  <div class="d-flex w-100" v-if="live">
+  <div
+    v-if="live"
+    class="d-flex w-100"
+  >
     <router-link
       class="live-date-box"
       :to="{
         name: 'podcast',
         params: { podcastId: live.podcastId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
     >
-      <div class="font-weight-bold">{{ date }}</div>
-      <div class="font-weight-bold">{{ hours }}</div>
+      <div class="fw-bold">
+        {{ date }}
+      </div>
+      <div class="fw-bold">
+        {{ hours }}
+      </div>
       <div class="font-size-smaller">
         {{ $t('Duration', { duration: duration }) }}
       </div>
@@ -18,23 +25,23 @@
       :to="{
         name: 'podcast',
         params: { podcastId: live.podcastId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
     >
       <PodcastImage
-        class="mr-3"
+        class="me-3"
         :class="
           fetchConference &&
-          'null' !== fetchConference &&
-          fetchConference.status
+            'null' !== fetchConference &&
+            fetchConference.status
             ? fetchConference.status.toLowerCase() + '-shadow'
             : ''
         "
-        v-bind:podcast="live"
-        :hidePlay="false"
-        :playingPodcast="false"
-        :fetchConference="fetchConference"
-        :isAnimatorLive="organisationRight"
+        :podcast="live"
+        :hide-play="false"
+        :playing-podcast="false"
+        :fetch-conference="fetchConference"
+        :is-animator-live="organisationRight"
       />
     </router-link>
     <div class="d-flex flex-column live-special-width">
@@ -43,19 +50,21 @@
         :to="{
           name: 'podcast',
           params: { podcastId: live.podcastId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        >{{ live.title }}</router-link
       >
+        {{ live.title }}
+      </router-link>
       <router-link
         class="link-info text-truncate"
         :to="{
           name: 'emission',
           params: { emissionId: live.emission.emissionId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        >{{ live.emission.name }}</router-link
       >
+        {{ live.emission.name }}
+      </router-link>
       <div
         :id="'description-live-container-' + live.podcastId"
         class="live-description-container html-wysiwyg-content"
@@ -63,22 +72,28 @@
         <div
           :id="'description-live-' + live.podcastId"
           v-html="urlify(description)"
-        ></div>
+        />
       </div>
-      <div class="comma" v-if="live.animators">
-        {{ $t('Animated by : ') }}
+      <div
+        v-if="live.animators"
+        class="comma"
+      >
+        {{ $t('Animated by') }}<div class="mx-1">
+          :
+        </div>
         <router-link
+          v-for="animator in live.animators"
+          :key="animator.participantId"
           :aria-label="$t('Participant')"
           class="link-info"
-          v-for="animator in live.animators"
-          v-bind:key="animator.participantId"
           :to="{
             name: 'participant',
             params: { participantId: animator.participantId },
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          >{{ getName(animator) }}</router-link
         >
+          {{ getName(animator) }}
+        </router-link>
       </div>
       <div v-if="!isPodcastmaker">
         {{ $t('Producted by : ') }}
@@ -87,192 +102,129 @@
           :to="{
             name: 'productor',
             params: { productorId: live.organisation.id },
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          >{{ live.organisation.name }}</router-link
         >
+          {{ live.organisation.name }}
+        </router-link>
       </div>
       <RecordingItemButton
+        v-if="fetchConference && organisationRight && isEditBox"
         :live="true"
         :recording="fetchConference"
         :podcast="live"
         @deleteItem="deleteItem"
         @validatePodcast="updatePodcast"
-        v-if="fetchConference && organisationRight && isEditBox"
-      ></RecordingItemButton>
+      />
     </div>
   </div>
 </template>
 
-<style lang="scss">
-.live-date-box {
-  width: 200px;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-}
-.font-size-smaller {
-  font-size: smaller;
-}
-.live-image-status {
-  text-align: center;
-  width: 100%;
-  font-size: 0.6rem;
-  padding: 0.2rem 0;
-  color: white;
-  text-transform: uppercase;
-}
-.live-description-container {
-  overflow: hidden;
-  margin-top: 0.5em;
-  word-break: break-word;
-  max-height: 6rem;
-  position: relative;
-  &.after-live-description:after {
-    content: '...';
-    position: absolute;
-    padding-left: 1rem;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: bolder;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
-  }
-}
-.live-special-width {
-  width: 0;
-  flex-grow: 1;
-}
-.planned-bg {
-  background: #f09653;
-}
-.pending-bg {
-  background: #f1643e;
-}
-.recording-bg {
-  background: #f34a4a;
-}
-.debriefing-bg {
-  background: #6ec66e;
-}
-.done-bg {
-  background: #679fe9;
-}
-.publishing-bg {
-  background: #7d7d7d;
-}
-.planned-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(240, 151, 83, 0.2);
-}
-.pending-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(241, 101, 62, 0.2);
-}
-.recording-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(243, 74, 74, 0.2);
-}
-.debriefing-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(110, 198, 110, 0.2);
-}
-.publishing-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(125, 125, 125, 0.2);
-}
-</style>
-
 <script lang="ts">
 import { state } from '../../../store/paramStore';
 const octopusApi = require('@saooti/octopus-api');
 import PodcastImage from '../podcasts/PodcastImage.vue';
 import studioApi from '@/api/studio';
-import RecordingItemButton from '@/components/display/studio/RecordingItemButton.vue';
 const moment = require('moment');
 const humanizeDuration = require('humanize-duration');
 import { displayMethods } from '../../mixins/functions';
+import { Podcast } from '@/store/class/podcast';
+import { Participant } from '@/store/class/participant';
 
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
 export default defineComponent({
   name: 'LiveItem',
 
-  props: ['fetchConference', 'index'],
-  emits: ['deleteItem'],
-  mixins: [displayMethods],
-
   components: {
     RecordingItemButton,
     PodcastImage,
   },
-
-  async created() {
-    this.fetchPodcastData();
+  mixins: [displayMethods],
+  props: {
+    fetchConference: { default: undefined, type: Object as ()=>Podcast},
+    index: { default: undefined, type: Number},
   },
+  emits: ['deleteItem'],
 
   data() {
     return {
-      live: undefined as any,
+      live: undefined as Podcast|undefined,
     };
   },
-
+  
   computed: {
-    isEditBox() {
+    isEditBox(): boolean {
       return state.podcastPage.EditBox;
     },
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    hours():string {
+    hours(): string {
+      if(!this.live){ return ''; }
       return moment(this.live.pubDate).format('À HH[H]mm');
     },
-    date():string {
+    date(): string {
+      if(!this.live){ return ''; }
       return moment(this.live.pubDate).format('D/MM/YYYY');
     },
-    displayDate():string {
+    displayDate(): string {
+      if(!this.live){ return ''; }
       return moment(this.live.pubDate).format('X');
     },
-    description():string {
-      if (this.live.description) return this.live.description;
+    description(): string {
+      if (this.live && this.live.description) return this.live.description;
       return '';
     },
-    myOrganisationId() {
+    myOrganisationId(): string {
       return state.generalParameters.organisationId;
     },
-    organisationRight() {
+    organisationRight(): boolean {
       if (
-        this.isRoleLive &&
+        this.isRoleLive && this.live && 
         this.myOrganisationId === this.live.organisation.id
       )
         return true;
       return false;
     },
-    isRoleLive() {
+    isRoleLive(): boolean {
       return state.generalParameters.isRoleLive;
     },
-
-    duration():string {
-      if (this.live.duration <= 1) return '';
+    duration(): string {
+      if (!this.live || this.live.duration <= 1) return '';
       if (this.live.duration > 600000) {
         return humanizeDuration(this.live.duration, {
-          language: 'fr',
+          language: this.$i18n.locale,
           largest: 1,
           round: true,
         });
       }
       return humanizeDuration(this.live.duration, {
-        language: 'fr',
+        language: this.$i18n.locale,
         largest: 2,
         round: true,
       });
     },
   },
+  watch: {
+    live(): void {
+      this.handleDescription();
+    },
+  },
+
+  async created() {
+    this.fetchPodcastData();
+  },
   methods: {
-    updatePodcast(podcastUpdated: any) {
+    updatePodcast(podcastUpdated: Podcast): void {
       this.live = podcastUpdated;
     },
-    getName(person: any) {
+    getName(person: Participant): string {
       const first = person.firstName || '';
       const last = person.lastName || '';
       return (first + ' ' + last).trim();
     },
-    async fetchPodcastData() {
+    async fetchPodcastData(): Promise<void> {
       if (!this.fetchConference || !this.fetchConference.podcastId) return;
       try {
         this.live = await octopusApi.fetchPodcast(
@@ -280,35 +232,71 @@ export default defineComponent({
         );
       } catch {
         this.$emit('deleteItem', this.index);
-        studioApi.deleteConference(
-          this.$store,
-          this.fetchConference.conferenceId
-        );
+        if(this.fetchConference.conferenceId){
+          studioApi.deleteConference(
+            this.$store.state,
+            this.fetchConference.conferenceId.toString()
+          );
+        }
       }
     },
-    async handleDescription() {
-      await nextTick();
-      let liveDesc = document.getElementById(
-        'description-live-' + this.live.podcastId
-      );
-      let liveDescContainer:any = document.getElementById(
-        'description-live-container-' + this.live.podcastId
-      );
-      if (
-        null !== liveDesc &&
-        liveDesc.clientHeight > liveDescContainer.clientHeight
-      ) {
-        liveDescContainer.classList.add('after-live-description');
-      }
+    async handleDescription(): Promise<void> {
+      this.$nextTick(() => {
+        if(!this.live){
+          return;
+        }
+        const liveDesc = document.getElementById(
+          'description-live-' + this.live.podcastId
+        );
+        const liveDescContainer = document.getElementById(
+          'description-live-container-' + this.live.podcastId
+        );
+        if (
+          null !== liveDesc && null !== liveDescContainer && 
+          liveDesc.clientHeight > liveDescContainer.clientHeight
+        ) {
+          liveDescContainer.classList.add('after-live-description');
+        }
+      });
     },
-    deleteItem() {
+    deleteItem(): void {
       this.$emit('deleteItem', this.index);
     },
   },
-  watch: {
-    live() {
-      this.handleDescription();
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.live-date-box {
+  width: 200px;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+.font-size-smaller {
+  font-size: smaller;
+}
+.live-description-container {
+  overflow: hidden;
+  margin-top: 0.5em;
+  word-break: break-word;
+  max-height: 6rem;
+  position: relative;
+  &.after-live-description:after {
+    content: '...';
+    position: absolute;
+    padding-left: 1rem;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: bolder;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
+  }
+}
+.live-special-width {
+  width: 0;
+  flex-grow: 1;
+}
+
+</style>