@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -0,0 +1,167 @@
+<template>
+  <div
+    class="d-flex flex-column p-3"
+  >
+    <div class="d-flex align-items-center mb-2">
+      <h2 class="mb-0">
+        {{ title }}
+      </h2>
+      <router-link
+        v-if="isButtonNextTitle"
+        class="btn admin-button m-1 fw-bold saooti-right"
+        :title="buttonText"
+        :to="refTo"
+        @click="handleSeeMoreButton"
+      />
+    </div>
+    <div class="d-flex justify-content-between">
+      <div class="d-flex">
+        <button
+          class="btn btn-underline"
+          :class="{ active: !popularSort }"
+          @click="sortChrono()"
+        >
+          {{ $t('Last added') }}
+        </button>
+        <button
+          class="btn btn-underline"
+          :class="{ active: popularSort }"
+          @click="sortPopular()"
+        >
+          {{ $t('Most popular') }}
+        </button>
+      </div>
+      <div
+        v-if="displayArrow"
+        class="hide-phone"
+      >
+        <button
+          class="btn admin-button m-1 saooti-left"
+          :class="{ disabled: !previousAvailable }"
+          :title="$t('Display previous')"
+          @click="displayPrevious()"
+        />
+        <button
+          class="btn admin-button m-1 saooti-right"
+          :class="{ disabled: !nextAvailable }"
+          :title="$t('Display next')"
+          @click="displayNext()"
+        />
+      </div>
+    </div>
+    <slot name="list-inline" />
+    <router-link
+      v-if="!isButtonNextTitle"
+      class="btn btn-primary align-self-center width-fit-content m-4"
+      :to="refTo"
+      @click="handleSeeMoreButton"
+    >
+      {{ buttonText }}
+      <div
+        v-if="buttonPlus"
+        class="ms-1 saooti-more"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent } from 'vue'
+import { RouteLocationRaw } from 'vue-router';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+export default defineComponent({
+  name: 'PodcastInlineListTemplate',
+  
+  components: {
+  },
+
+  props: {
+    displayArrow: { default: true, type: Boolean},
+    previousAvailable: { default: false, type: Boolean},
+    nextAvailable: { default: false, type: Boolean},
+    popularSort: { default: false, type: Boolean},
+    buttonText: { default: undefined, type: String},
+    buttonPlus: { default:false, type: Boolean},
+    title: { default: '', type: String},
+    href: { default: undefined, type: String},
+    iabId: { default: undefined, type: Number},
+    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
+    isButtonNextTitle: {default: false, type:Boolean}
+  },
+  emits:['sortChrono','sortPopular', 'displayPrevious', 'displayNext'],
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    rubriqueQueryParam(): string|undefined{
+      if(this.$store.state.filter?.rubriqueFilter?.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+    refTo(): string | RouteLocationRaw {
+      if (this.href) return this.href;
+      if(this.iabId){
+        return {
+          name: 'category',
+          params:{ 'iabId': this.iabId },
+          query: { productor: this.$store.state.filter.organisationId },
+        };
+      }
+      return {
+          name: 'podcasts',
+          query: { productor: this.$store.state.filter.organisationId, 
+                  iabId:this.$store.state.filter.iab?.id,
+                  rubriquesId: this.rubriqueQueryParam },
+        };
+    },
+  },
+
+  methods: {
+    sortChrono():void{
+      this.$emit('sortChrono');
+    },
+    sortPopular():void{
+      this.$emit('sortPopular');
+    },
+    displayPrevious():void{
+      this.$emit('displayPrevious');
+    },
+    displayNext():void{
+      this.$emit('displayNext');
+    },
+    handleSeeMoreButton(event: { preventDefault: () => void; }){
+      if(!this.rubriqueId || 0===this.rubriqueId.length || this.noRubriquageId.length){
+        return;
+      }
+      event.preventDefault();
+      const rubriqueChosenId = this.rubriqueId[this.rubriqueId.length - 1];
+      let filterToAdd: RubriquageFilter = {
+        rubriquageId: 0, 
+        rubriqueId: rubriqueChosenId, 
+        nameRubriquage:  '',
+        nameRubrique: ''
+      };
+      if(this.$store.state.filter.rubriquageArray.length){
+        const rubriqueChosen =  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
+        filterToAdd = {
+          rubriquageId: this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriquageId, 
+          rubriqueId: rubriqueChosenId, 
+          nameRubriquage:  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].title,
+          nameRubrique: rubriqueChosen.name
+        };
+      }
+      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      newFilter.push(filterToAdd);
+      this.$store.commit('filterRubrique', newFilter);
+      const queries = this.$route.query;
+      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
+      this.$router.push({ name: 'podcasts',query: { ...queries, ...{ rubriquesId: queryString }} });
+    },
+  },
+})
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="podcast-item-container m-0"
+    class="podcast-item-container"
     :class="[
       podcastShadow ? 'shadow-element' : '',
       podcastBorderBottom ? 'border-bottom' : '',
@@ -9,70 +9,114 @@
     :data-count="podcast.downloadCount"
   >
     <PodcastImage
-      v-bind:podcast="podcast"
-      :hidePlay="!hover || !description"
-      :displayDescription="description"
-      :arrowDirection="arrowDirection"
+      :podcast="podcast"
+      :hide-play="!podcastItemDescription || (podcastItemDescription && (!hover || !description))"
+      :display-description="0!==description.length && podcastItemDescription"
+      :arrow-direction="arrowDirection"
       @hideDescription="hideDescription"
       @showDescription="showDescription"
     />
     <div
-      :id="'description-podcast-container-' + podcast.podcastId"
+      v-if="podcastItemDescription"
+      ref="descriptionPodcastContainer"
       class="description-podcast-item html-wysiwyg-content"
       :class="[
-        hover && description ? 'visible' : 'invisible',
+        hover && ''!==description ? 'visible' : 'invisible',
         isDescriptionBig ? 'after-podcast-description' : '',
       ]"
     >
+      <!-- eslint-disable vue/no-v-html -->
       <div
-        :id="'description-podcast-' + podcast.podcastId"
+        ref="descriptionPodcast"
         v-html="description"
-      ></div>
+      />
+    <!-- eslint-enable -->
     </div>
-    <div
-      class="d-contents"
+    <PodcastItemInfo
+      :podcast-id="podcast.podcastId"
+      :title="podcast.title"
+      :pub-date="podcast.pubDate"
+      :podcast-organisation-id="podcast.organisation.id"
+      :podcast-organisation-name="podcast.organisation.name"
+      :podcast-order="podcast.order"
+      :duration="podcast.duration"
+      :animators="podcast.animators"
       @mouseenter="showDescription"
       @mouseleave="hideDescription"
-    >
-      <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-        <div class="mr-3 small-Text">{{ date }}</div>
-        <div class="small-Text" v-if="0 !== duration.length">
-          <!-- <span class="saooti-clock3"></span> -->{{ duration }}
-        </div>
-      </div>
-      <AnimatorsItem v-bind:animators="podcast.animators" />
-      <router-link
-        :to="{
-          name: 'podcast',
-          params: { podcastId: podcast.podcastId },
-          query: { productor: this.$store.state.filter.organisationId },
-        }"
-        class="text-dark d-flex flex-column flex-grow"
-      >
-        <div class="title-podcast-item">{{ title }}</div>
-      </router-link>
-      <div class="d-flex justify-content-between">
-        <router-link
-          v-if="!isPodcastmaker"
-          :to="{
-            name: 'productor',
-            params: { productorId: podcast.organisation.id },
-            query: { productor: this.$store.state.filter.organisationId },
-          }"
-          class="text-dark producer-podcast-item"
-        >
-          <div>{{ '© ' + podcast.organisation.name }}</div>
-        </router-link>
-        <span
-          class="saooti-star-bounty text-danger pr-2"
-          v-if="editRight && podcast.order && podcast.order > 1"
-        ></span>
-      </div>
-    </div>
+    />
   </li>
 </template>
 
+<script lang="ts">
+import PodcastItemInfo from './PodcastItemInfo.vue';
+import PodcastImage from './PodcastImage.vue';
+import { state } from '../../../store/paramStore';
+import moment from 'moment';
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastItem',
+  
+  components: {
+    PodcastItemInfo,
+    PodcastImage,
+  },
+
+  props: {
+    podcast: { default: ()=>({}), type: Object as ()=> Podcast},
+  },
+
+  data() {
+    return {
+      hover: false as boolean,
+      arrowDirection: 'up' as string,
+      isDescriptionBig: false as boolean,
+    };
+  },
+
+  computed: {
+    podcastShadow(): boolean {
+      return (state.podcastsPage.podcastShadow as boolean);
+    },
+    podcastBorderBottom(): boolean {
+      return (state.podcastsPage.podcastBorderBottom as boolean);
+    },
+    podcastItemDescription(): boolean {
+      return (state.podcastPage.podcastItemDescription as boolean);
+    },
+    displayDate(): string {
+      return moment(this.podcast.pubDate).format('X');
+    },
+    description(): string {
+      return this.podcast.description ?? '';
+    },
+  },
+
+  mounted() {
+    if(!this.podcastItemDescription){return}
+    const podcastDesc = (this.$refs.descriptionPodcast as HTMLElement);
+    const podcastDescContainer = (this.$refs.descriptionPodcastContainer as HTMLElement);
+    if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
+      this.isDescriptionBig = true;
+    }
+  },
+  methods: {
+    showDescription(): void {
+      if(!this.podcastItemDescription){return}
+      this.arrowDirection = 'down';
+      this.hover = true;
+    },
+    hideDescription(): void {
+      if(!this.podcastItemDescription){return}
+      this.arrowDirection = 'up';
+      this.hover = false;
+    },
+  },
+})
+</script>
+
 <style lang="scss">
+.octopus-app{
 .podcast-item-container {
   border-radius: 0.8rem;
   list-style: none;
@@ -84,26 +128,7 @@
   text-align: left;
   background: #fff;
   flex-shrink: 0;
-  .text-secondary {
-    margin: 0.5rem !important;
-  }
-  .saooti-star-bounty {
-    font-size: 22px;
-  }
-
-  .title-podcast-item {
-    font-weight: 700;
-    margin: 0.25rem 0.5rem 0.5rem;
-    overflow: hidden;
-    display: -webkit-box;
-    flex-grow: 1;
-    font-size: 0.7rem;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    min-height: 3rem;
-    line-height: 1rem;
-    word-break: break-word;
-  }
+ 
   .description-podcast-item {
     padding: 1rem;
     color: #333;
@@ -128,158 +153,9 @@
       background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
     }
   }
-  .producer-podcast-item {
-    margin: 0.2rem 0.5rem 0.5rem;
-    font-size: 0.55rem;
-    color: #666;
-  }
-
   @media (max-width: 960px) {
     margin: 0.5rem !important;
   }
 }
-</style>
-
-<script lang="ts">
-import AnimatorsItem from './AnimatorsItem.vue';
-import PodcastImage from './PodcastImage.vue';
-import { state } from '../../../store/paramStore';
-const moment = require('moment');
-const humanizeDuration = require('humanize-duration');
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'PodcastItem',
-
-  props: ['podcast'],
-
-  components: {
-    AnimatorsItem,
-    PodcastImage,
-  },
-
-  mounted() {
-    let podcastDesc = document.getElementById(
-      'description-podcast-' + this.podcast.podcastId
-    );
-    let podcastDescContainer:any = document.getElementById(
-      'description-podcast-container-' + this.podcast.podcastId
-    );
-    if (
-      null !== podcastDesc &&
-      podcastDesc.clientHeight > podcastDescContainer.clientHeight
-    ) {
-      this.isDescriptionBig = true;
-    }
-  },
-
-  data() {
-    return {
-      hover: false,
-      arrowDirection: 'up',
-      isDescriptionBig: false,
-    };
-  },
-
-  computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-    podcastShadow() {
-      return state.podcastsPage.podcastShadow;
-    },
-    podcastBorderBottom() {
-      return state.podcastsPage.podcastBorderBottom;
-    },
-    date():string {
-      return moment(this.podcast.pubDate).format('D/MM/YYYY [à] HH[h]mm');
-    },
-    displayDate():string {
-      return moment(this.podcast.pubDate).format('X');
-    },
-    category() {
-      const catIds = this.podcast.emission.iabIds;
-      return state.generalParameters.allCategories
-        .filter((c:any) => {
-          return catIds.includes(c.id);
-        })
-        .map((c:any) => {
-          return c.name;
-        })
-        .join(', ');
-    },
-
-    description():any {
-      if (!this.podcast.description) return null;
-      return this.podcast.description;
-    },
-
-    title():string {
-      if (state.generalParameters.isIE11)
-        return this.podcast.title.substring(0, 50) + '...';
-      return this.podcast.title;
-    },
-    organisationId() {
-      return state.generalParameters.organisationId;
-    },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-    editRight() {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.podcast.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-
-    duration():string {
-      if (this.podcast.duration <= 1) return '';
-
-      if (this.podcast.duration > 600000) {
-        return humanizeDuration(this.podcast.duration, {
-          language: 'shortFr',
-          largest: 1,
-          round: true,
-          languages: {
-            shortFr: {
-              y: () => 'années',
-              mo: () => 'mois',
-              w: () => 'semaines',
-              d: () => 'jours',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-          },
-        });
-      }
-      return humanizeDuration(this.podcast.duration, {
-        language: 'shortFr',
-        largest: 2,
-        round: true,
-        languages: {
-          shortFr: {
-            m: () => 'min',
-            s: () => 'sec',
-            ms: () => 'ms',
-          },
-        },
-      });
-    },
-  },
-  methods: {
-    showDescription() {
-      this.arrowDirection = 'down';
-      this.hover = true;
-    },
-    hideDescription() {
-      this.arrowDirection = 'up';
-      this.hover = false;
-    },
-  },
-});
-</script>
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="d-contents podcast-item-info">
+    <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
+      <div class="me-3 small-text">
+        {{ date }}
+      </div>
+      <div
+        v-if="0 !== durationString.length"
+        class="small-text"
+      >
+        {{ durationString }}
+      </div>
+    </div>
+    <AnimatorsItem
+      v-if="animators && 0!==animators.length"
+      :animator="animators[0]"
+    />
+    <router-link
+      :to="{
+        name: 'podcast',
+        params: { podcastId: podcastId },
+        query: { productor: filterOrga },
+      }"
+      class="text-dark d-flex flex-column flex-grow-1"
+    >
+      <div class="title-podcast-item">
+        {{ title }}
+      </div>
+    </router-link>
+    <PodcastPlayBar
+      :podcast-id="podcastId"
+      :duration="duration"
+      class="mx-2"
+    />
+    <div class="d-flex justify-content-between">
+      <div class="useless-div-for-podcastmaker" />
+      <router-link
+        v-if="!isPodcastmaker"
+        :to="{
+          name: 'productor',
+          params: { productorId: podcastOrganisationId },
+          query: { productor: filterOrga },
+        }"
+        class="text-dark producer-podcast-item"
+      >
+        <div>{{ '© ' + podcastOrganisationName }}</div>
+      </router-link>
+      <span
+        v-if="editRight && podcastOrder && podcastOrder > 1"
+        class="saooti-pin text-danger pe-2"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import AnimatorsItem from './AnimatorsItem.vue';
+import { state } from '../../../store/paramStore';
+import { orgaComputed } from '../../mixins/orgaComputed';
+import moment from 'moment';
+// @ts-ignore
+import humanizeDuration from 'humanize-duration';
+import PodcastPlayBar from './PodcastPlayBar.vue';
+import { defineComponent } from 'vue'
+import { Participant } from '@/store/class/general/participant';
+export default defineComponent({
+  name: 'PodcastItemInfo',
+  
+  components: {
+    AnimatorsItem,
+    PodcastPlayBar
+  },
+
+  mixins:[orgaComputed],
+
+  props: {
+    podcastId: { default: undefined, type: Number},
+    title: { default: "", type: String},
+    pubDate: { default: "", type: String},
+    podcastOrganisationId: { default: "", type: String},
+    podcastOrganisationName: { default: "", type: String},
+    podcastOrder: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
+    animators: { default: undefined, type: Object as ()=> Array<Participant>},
+  },
+  
+  computed: {
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+    date(): string {
+      return moment(this.pubDate).format('D MMMM YYYY, HH[h]mm');
+    },
+    editRight(): boolean {
+      return (true===this.authenticated && this.myOrganisationId === this.podcastOrganisationId) ||
+        true===state.generalParameters.isAdmin
+    },
+    durationString(): string {
+      if (this.duration <= 1) return '';
+      if (this.duration > 600000) {
+        return humanizeDuration(this.duration, {
+          language: 'short',
+          largest: 1,
+          round: true,
+          languages: {
+            short: {
+              y: () => 'years',
+              mo: () => 'months',
+              w: () => 'weeks',
+              d: () => 'days',
+              h: () => 'h',
+              m: () => 'min',
+              s: () => 'sec',
+              ms: () => 'ms',
+            },
+          },
+        });
+      }
+      return humanizeDuration(this.duration, {
+        language: 'short',
+        largest: 2,
+        round: true,
+        languages: {
+          short: {
+            m: () => 'min',
+            s: () => 'sec',
+            ms: () => 'ms',
+          },
+        },
+      });
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.podcast-item-info {
+  .text-secondary {
+    margin: 0.5rem !important;
+  }
+  .saooti-pin {
+    font-size: 22px;
+  }
+  .title-podcast-item {
+    font-weight: 700;
+    margin: 0.25rem 0.5rem 0.5rem;
+    overflow: hidden;
+    display: -webkit-box;
+    flex-grow: 1;
+    font-size: 0.7rem;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    min-height: 3rem;
+    line-height: 1rem;
+    word-break: break-word;
+  }
+
+  .producer-podcast-item {
+    margin: 0.2rem 0.5rem 0.5rem;
+    font-size: 0.55rem;
+    color: #666;
+  }
+}
+}
+</style>