@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,115 +1,242 @@
 <template>
-  <li
+  <div
     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
-        class="img-box no-border-round"
-        :style="{
-          'background-image':
-            'url(\'' + emission.imageUrl + '?dummy=' + dummyParam + '\')',
-        }"
-      ></div>
+        class="img-box rounded-0"
+      >
+        <img
+          v-lazy="emission.imageUrl"
+          :title="$t('Emission name image', {name:emission.name})"
+          :alt="$t('Emission name image', {name:emission.name})"
+          class="img-box rounded-0"
+        >
+        <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-truncate">
           {{ emission.name }}
         </div>
         <div
-          :id="'description-emission-container-' + emission.emissionId"
+          ref="descriptionEmissionContainer"
           class="emission-description html-wysiwyg-content"
         >
+          <!-- eslint-disable vue/no-v-html -->
           <div
-            :id="'description-emission-' + emission.emissionId"
+            ref="descriptionEmission"
             v-html="urlify(emission.description)"
-          ></div>
+          />
+          <!-- eslint-enable -->
         </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 flex-column"
     >
-      <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 },
-          }"
-          class="d-flex flex-column define-width text-dark"
-        >
-          <div class="font-weight-bold text-ellipsis">{{ p.title }}</div>
-          <div
-            :id="'description-podcast-container-' + p.podcastId"
-            class="emission-description html-wysiwyg-content"
+      <router-link
+        v-if="isProgressBar"
+        :to="{
+          name: 'podcast',
+          params: { podcastId: p.podcastId },
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="text-dark fw-bold two-line-clamp"
+      >
+        {{ p.title }}
+      </router-link>
+      <div class="d-flex justify-content-between flex-grow-1">
+        <div class="d-flex flex-column">
+          <router-link
+            v-if="!isProgressBar"
+            :to="{
+              name: 'podcast',
+              params: { podcastId: p.podcastId },
+              query: { productor: $store.state.filter.organisationId },
+            }"
+            class="d-flex flex-column define-width text-dark"
           >
+            <div class="fw-bold text-truncate">
+              {{ p.title }}
+            </div>
             <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)"
+              :ref="'descriptionPodcastContainer'+ p.podcastId"
+              class="emission-description html-wysiwyg-content"
+            >
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                :ref="'descriptionPodcast'+ p.podcastId"
+                v-html="urlify(p.description)"
+              />
+              <!-- eslint-enable -->
+            </div>
+          </router-link>
+          <PodcastPlayBar :podcast="p" />
+        </div>
+        <button
           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>
+            class="text-light saooti-play"
+            :title="$t('Play')"
+          />
+        </button>
+        <button
+          v-else
+          class="play-button-box bg-secondary"
+          @click="pause(p)"
+        >
           <div
-            class="text-light saooti-pause-bounty"
-            :aria-label="$t('Pause')"
-          ></div>
-        </div>
+            class="text-light saooti-pause"
+            :title="$t('Pause')"
+          />
+        </button>
       </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>
+  </div>
 </template>
 
+<script lang="ts">
+import octopusApi from '@saooti/octopus-api';
+import { Emission } from '@/store/class/general/emission';
+import { Podcast } from '@/store/class/general/podcast';
+import { state } from '../../../store/paramStore';
+import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
+import { displayMethods } from '../../mixins/functions';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'EmissionPlayerItem',
+
+  components:{
+    PodcastPlayBar
+  },
+  mixins: [displayMethods],
+  props: {
+    emission: { default: ()=>({}), type: Object as ()=>Emission },
+    nbPodcasts: { default: undefined, type: Number },
+    rubriqueName: { default: undefined, type: String},
+  },
+
+  data() {
+    return {
+      activeEmission: true as boolean,
+      podcasts: [] as Array<Podcast>,
+      dummyParam: new Date().getTime().toString() as string,
+    };
+  },
+  
+  computed: {
+    isProgressBar(): boolean{
+      return (state.emissionsPage.progressBar as boolean);
+    },
+    buttonMore(): boolean {
+      return (state.emissionsPage.buttonMore as boolean);
+    },
+    titleInImage(): boolean {
+      return (state.emissionsPage.titleInImage as boolean);
+    },
+    authenticated(): boolean {
+      return this.$store.state.authentication.isAuthenticated;
+    },
+    organisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+    editRight(): boolean {
+      return (true===this.authenticated && this.organisationId === this.emission.orga.id) ||
+        true === state.generalParameters.isAdmin
+    },
+  },
+
+  created() {
+    this.loadPodcasts();
+  },
+  mounted() {
+    const emissionDesc = (this.$refs.descriptionEmission as HTMLElement);
+    const emissionDescContainer = (this.$refs.descriptionEmissionContainer as HTMLElement);
+    if (
+      null !== emissionDesc && null !== emissionDescContainer &&
+      emissionDesc.clientHeight > emissionDescContainer.clientHeight
+    ) {
+      emissionDescContainer.classList.add('after-emission-description');
+    }
+  },
+  methods: {
+    async loadPodcasts(): Promise<void> {
+      const nb = this.nbPodcasts ? this.nbPodcasts : 2;
+      const data =  await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
+        emissionId: this.emission.emissionId,
+        size: nb,
+      }, true);
+      if (0 === data.count) {
+        this.activeEmission = false;
+      }
+      this.podcasts = data.result;
+      this.$nextTick(() => {
+      for (let index = 0, len = this.podcasts.length; index < len; index++) {
+        const podcastDesc = (this.$refs['descriptionPodcast'+this.podcasts[index].podcastId] as Array<HTMLElement>)[0];
+        const podcastDescContainer = (this.$refs['descriptionPodcastContainer'+this.podcasts[index].podcastId] as Array<HTMLElement>)[0];
+        if (
+          null !== podcastDesc && null !== podcastDescContainer &&
+          podcastDesc.clientHeight > podcastDescContainer.clientHeight
+        ) {
+          podcastDescContainer.classList.add('after-emission-description');
+        }
+      }
+      });
+    },
+    play(podcast: Podcast): void {
+      this.$store.commit('playerPause', podcast === this.$store.state.player.podcast? false: podcast);
+    },
+    pause(): void {
+      this.$store.commit('playerPause', true);
+    },
+  },
+})
+</script>
+
 <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;
@@ -120,6 +247,20 @@
   height: min-content;
   border-radius: 0.8rem;
   overflow: hidden;
+  .progress{
+    height: 6px;
+  }
+  .progress-bar-cursor{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: black;
+    align-self: center;
+    position: absolute;
+  }
+  .emission-item-border-color {
+    border-color: #ddd;
+  }
   .emission-description {
     overflow: hidden;
     margin-top: 0.5em;
@@ -148,117 +289,5 @@
     }
   }
 }
-.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 { state } from '../../../store/paramStore';
-import { displayMethods } from '../../mixins/functions';
-
-import { defineComponent, nextTick } 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');
-    }
-  },
-
-  data() {
-    return {
-      activeEmission: true,
-      podcasts: [] as any,
-      dummyParam: new Date().getTime().toString(),
-    };
-  },
-
-  computed: {
-    buttonMore() {
-      return state.emissionsPage.buttonMore;
-    },
-    editRight() {
-      if (
-        (this.authenticated && this.organisationId === this.emission.orga.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-  },
-
-  methods: {
-    async loadPodcasts() {
-      let nb = this.nbPodcasts ? this.nbPodcasts : 2;
-      const data = await octopusApi.fetchPodcasts({
-        emissionId: this.emission.emissionId,
-        size: nb,
-      });
-      if (0 === data.count) {
-        this.activeEmission = false;
-      }
-      this.podcasts = data.result;
-      if (this.editRight || this.activeEmission) {
-        return;
-      }
-      this.$emit('emissionNotVisible');
-      await nextTick();
-      for (let index = 0, len = this.podcasts.length; index < len; index++) {
-        let podcastDesc = document.getElementById(
-          'description-podcast-' + this.podcasts[index].podcastId
-        );
-        let podcastDescContainer:any = document.getElementById(
-          'description-podcast-container-' + this.podcasts[index].podcastId
-        );
-        if (
-          null !== podcastDesc &&
-          podcastDesc.clientHeight > podcastDescContainer.clientHeight
-        ) {
-          podcastDescContainer.classList.add('after-emission-description');
-        }
-      }
-    },
-    play(podcast: any) {
-      if (podcast === this.$store.state.player.podcast) {
-        this.$store.commit('playerPause', false);
-      } else {
-        this.$store.commit('playerPlayPodcast', podcast);
-      }
-    },
-    pause() {
-      this.$store.commit('playerPause', true);
-    },
-  },
-});
-</script>
+</style>