@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -1,17 +1,19 @@
 <template>
   <li
     class="emission-player-container shadow-element"
-    v-if="activeEmission || editRight"
   >
     <router-link
       :to="{
         name: 'emission',
         params: { emissionId: emission.emissionId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
       class="d-flex flex-column text-dark"
     >
-      <div class="emissionPlayerItem-info" v-if="rubriqueName">
+      <div
+        v-if="rubriqueName"
+        class="emissionPlayerItem-info"
+      >
         {{ rubriqueName }}
       </div>
       <div
@@ -20,9 +22,16 @@
           'background-image':
             'url(\'' + emission.imageUrl + '?dummy=' + dummyParam + '\')',
         }"
-      ></div>
+      >
+        <div
+          v-if="titleInImage"
+          class="titleInImage"
+        >
+          {{ emission.name }}
+        </div>
+      </div>
       <div class="d-flex flex-column p-2">
-        <div class="font-weight-bold text-uppercase text-ellipsis">
+        <div class="fw-bold text-uppercase text-ellipsis">
           {{ emission.name }}
         </div>
         <div
@@ -32,26 +41,28 @@
           <div
             :id="'description-emission-' + emission.emissionId"
             v-html="urlify(emission.description)"
-          ></div>
+          />
         </div>
         <!-- <div class="text-ellipsis html-wysiwyg-content" v-html="urlify(emission.description)"></div> -->
       </div>
     </router-link>
     <div
-      class="border-top emission-item-border-color p-2 secondary-bg d-flex"
       v-for="p in podcasts"
       :key="p.podcastId"
+      class="border-top emission-item-border-color p-2 secondary-bg d-flex"
     >
       <div class="d-flex justify-content-between flex-grow">
         <router-link
           :to="{
             name: 'podcast',
             params: { podcastId: p.podcastId },
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
           class="d-flex flex-column define-width text-dark"
         >
-          <div class="font-weight-bold text-ellipsis">{{ p.title }}</div>
+          <div class="fw-bold text-ellipsis">
+            {{ p.title }}
+          </div>
           <div
             :id="'description-podcast-container-' + p.podcastId"
             class="emission-description html-wysiwyg-content"
@@ -59,156 +70,91 @@
             <div
               :id="'description-podcast-' + p.podcastId"
               v-html="urlify(p.description)"
-            ></div>
+            />
           </div>
         </router-link>
         <div
-          class="play-button-box bg-secondary"
-          @click="play(p)"
           v-if="
-            this.$store.state.player.podcast !== p ||
-              (this.$store.state.player.podcast === p &&
-                'PAUSED' === this.$store.state.player.status)
+            $store.state.player.podcast !== p ||
+              ($store.state.player.podcast === p &&
+                'PAUSED' === $store.state.player.status)
           "
+          class="play-button-box bg-secondary"
+          @click="play(p)"
         >
           <div
             class="text-light saooti-play2-bounty"
             :aria-label="$t('Play')"
-          ></div>
+          />
         </div>
-        <div class="play-button-box bg-secondary" @click="pause(p)" v-else>
+        <div
+          v-else
+          class="play-button-box bg-secondary"
+          @click="pause(p)"
+        >
           <div
             class="text-light saooti-pause-bounty"
             :aria-label="$t('Pause')"
-          ></div>
+          />
         </div>
       </div>
     </div>
     <div
-      class="border-top emission-item-border-color p-2 secondary-bg d-flex justify-content-center"
       v-if="buttonMore && podcasts.length === nbPodcasts"
+      class="border-top emission-item-border-color p-2 secondary-bg d-flex justify-content-center"
     >
       <router-link
         :to="{
           name: 'emission',
           params: { emissionId: emission.emissionId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
         class="btn"
-        >{{ $t('More episodes') }}</router-link
       >
+        {{ $t('More episodes') }}
+      </router-link>
     </div>
   </li>
 </template>
 
-<style lang="scss">
-.no-border-round {
-  border-radius: 0;
-}
-.text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.emission-player-container {
-  list-style: none;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 13rem;
-  height: min-content;
-  border-radius: 0.8rem;
-  overflow: hidden;
-  .emission-description {
-    overflow: hidden;
-    margin-top: 0.5em;
-    word-break: break-word;
-    max-height: 3.5rem;
-    position: relative;
-    &.after-emission-description:after {
-      content: '...';
-      position: absolute;
-      padding-left: 1rem;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      font-size: 1rem;
-      font-weight: bolder;
-      text-align: center;
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
-    }
-  }
-  .define-width {
-    width: 9rem;
-  }
-  @media (max-width: 960px) {
-    .d-flex:not(.flex-column) {
-      flex-wrap: nowrap;
-    }
-  }
-}
-.two-line-clamp {
-  display: block;
-  max-width: 100%;
-  height: 29px;
-  font-size: 14px;
-  line-height: 1;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.emission-item-border-color {
-  border-color: #ddd;
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
+import { Emission } from '@/store/class/emission';
+import { Podcast } from '@/store/class/podcast';
 import { state } from '../../../store/paramStore';
 import { displayMethods } from '../../mixins/functions';
-
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'EmissionPlayerItem',
-
-  props: ['emission', 'nbPodcasts', 'rubriqueName'],
-  emits: ['emissionNotVisible'],
-
   mixins: [displayMethods],
-
-  created() {
-    this.loadPodcasts();
-  },
-  mounted() {
-    let emissionDesc = document.getElementById(
-      'description-emission-' + this.emission.emissionId
-    );
-    let emissionDescContainer:any = document.getElementById(
-      'description-emission-container-' + this.emission.emissionId
-    );
-    if (
-      null !== emissionDesc &&
-      emissionDesc.clientHeight > emissionDescContainer.clientHeight
-    ) {
-      emissionDescContainer.classList.add('after-emission-description');
-    }
+  props: {
+    emission: { default: ()=>({}), type: Object as ()=>Emission },
+    nbPodcasts: { default: undefined, type: Number },
+    rubriqueName: { default: undefined, type: String},
   },
 
   data() {
     return {
-      activeEmission: true,
-      podcasts: [] as any,
-      dummyParam: new Date().getTime().toString(),
+      activeEmission: true as boolean,
+      podcasts: [] as Array<Podcast>,
+      dummyParam: new Date().getTime().toString() as string,
     };
   },
-
+  
   computed: {
-    buttonMore() {
+    buttonMore(): boolean {
       return state.emissionsPage.buttonMore;
     },
-    editRight() {
+    titleInImage(): boolean {
+      return state.emissionsPage.titleInImage;
+    },
+    authenticated(): boolean {
+      return this.$store.state.authentication.isAuthenticated;
+    },
+    organisationId(): string {
+      return state.generalParameters.organisationId;
+    },
+    editRight(): boolean {
       if (
         (this.authenticated && this.organisationId === this.emission.orga.id) ||
         state.generalParameters.isAdmin
@@ -218,9 +164,26 @@ export default defineComponent({
     },
   },
 
+  created() {
+    this.loadPodcasts();
+  },
+  mounted() {
+    const emissionDesc = document.getElementById(
+      'description-emission-' + this.emission.emissionId
+    );
+    const emissionDescContainer = document.getElementById(
+      'description-emission-container-' + this.emission.emissionId
+    );
+    if (
+      null !== emissionDesc && null !== emissionDescContainer &&
+      emissionDesc.clientHeight > emissionDescContainer.clientHeight
+    ) {
+      emissionDescContainer.classList.add('after-emission-description');
+    }
+  },
   methods: {
-    async loadPodcasts() {
-      let nb = this.nbPodcasts ? this.nbPodcasts : 2;
+    async loadPodcasts(): Promise<void> {
+      const nb = this.nbPodcasts ? this.nbPodcasts : 2;
       const data = await octopusApi.fetchPodcasts({
         emissionId: this.emission.emissionId,
         size: nb,
@@ -229,36 +192,78 @@ export default defineComponent({
         this.activeEmission = false;
       }
       this.podcasts = data.result;
-      if (this.editRight || this.activeEmission) {
-        return;
-      }
-      this.$emit('emissionNotVisible');
-      await nextTick();
+      this.$nextTick(() => {
       for (let index = 0, len = this.podcasts.length; index < len; index++) {
-        let podcastDesc = document.getElementById(
+        const podcastDesc = document.getElementById(
           'description-podcast-' + this.podcasts[index].podcastId
         );
-        let podcastDescContainer:any = document.getElementById(
+        const podcastDescContainer = document.getElementById(
           'description-podcast-container-' + this.podcasts[index].podcastId
         );
         if (
-          null !== podcastDesc &&
+          null !== podcastDesc && null !== podcastDescContainer &&
           podcastDesc.clientHeight > podcastDescContainer.clientHeight
         ) {
           podcastDescContainer.classList.add('after-emission-description');
         }
       }
+      });
     },
-    play(podcast: any) {
+    play(podcast: Podcast): void {
       if (podcast === this.$store.state.player.podcast) {
         this.$store.commit('playerPause', false);
       } else {
         this.$store.commit('playerPlayPodcast', podcast);
       }
     },
-    pause() {
+    pause(): void {
       this.$store.commit('playerPause', true);
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+
+.emission-player-container {
+  list-style: none;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 13rem;
+  height: min-content;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  .emission-description {
+    overflow: hidden;
+    margin-top: 0.5em;
+    word-break: break-word;
+    max-height: 3.5rem;
+    position: relative;
+    &.after-emission-description:after {
+      content: '...';
+      position: absolute;
+      padding-left: 1rem;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      font-size: 1rem;
+      font-weight: bolder;
+      text-align: center;
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
+    }
+  }
+  .define-width {
+    width: 9rem;
+  }
+  @media (max-width: 960px) {
+    .d-flex:not(.flex-column) {
+      flex-wrap: nowrap;
+    }
+  }
+}
+.emission-item-border-color {
+  border-color: #ddd;
+}
+</style>