@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -0,0 +1,101 @@
+<template>
+  <div
+    v-if="isProgressBar"
+    class="d-flex align-items-center podcast-play-bar"
+  >
+    <div class="me-2">
+      {{ playedTime }}
+    </div>
+    <div class="position-relative flex-grow-1">
+      <div
+        class="progress flex-grow-1 c-hand"
+        @mouseup="seekTo"
+      >
+        <div
+          class="progress-bar primary-bg"
+          role="progressbar"
+          aria-valuenow="0"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :style="'width: ' + percentProgress + '%'"
+        />
+        <div
+          class="progress-bar-cursor"
+          :style="'left:' + percentProgress + '%'"
+        />
+      </div>
+    </div>
+    <div class="ms-2">
+      {{ totalTime }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import DurationHelper from '../../../helper/duration';
+import { displayMethods } from '../../mixins/functions';
+import { state } from '../../../store/paramStore';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastPlayBar',
+  mixins: [displayMethods],
+  props: {
+    podcastId: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
+  },
+  computed: {
+    isProgressBar(): boolean{
+      return (state.emissionsPage.progressBar as boolean);
+    },
+    percentProgress(): number{
+      if(this.podcastId !== this.$store.state.player.podcast?.podcastId){
+        return 0;
+      }
+      return !this.$store.state.player.elapsed ? 0 : this.$store.state.player.elapsed * 100;
+    },
+    playedTime(): string{
+      if(this.podcastId === this.$store.state.player.podcast?.podcastId){
+        if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
+          return DurationHelper.formatDuration(
+            Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
+          );
+        }
+      }
+      return '00:00';
+    },
+    totalTime(): string {
+      return DurationHelper.formatDuration(Math.round(this.duration/1000));
+    },
+  },
+  methods: {
+    seekTo(event: MouseEvent): void {
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      const rect = (event.currentTarget as Element).getBoundingClientRect();
+      const barWidth = (event.currentTarget as Element).clientWidth;
+      const x = event.clientX - rect.left;
+      const percentPosition = x / barWidth;
+      if (percentPosition * 100 >= this.percentLiveProgress) return;
+      const seekTime = this.$store.state.player.total * percentPosition;
+      this.$store.commit("playerSeekTime", seekTime);
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.podcast-play-bar {
+  .progress{
+    height: 6px;
+  }
+  .progress-bar-cursor{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: black;
+    align-self: center;
+    position: absolute;
+  }
+}
+}
+</style>

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

@@ -0,0 +1,204 @@
+<template>
+  <PodcastInlineListTemplate
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    :display-arrow="false"
+    :popular-sort="popularSort"
+    :button-text="buttonText"
+    :button-plus="buttonPlus"
+    :title="title"
+    :href="href"
+    :iab-id="iabId"
+    :rubrique-id="rubriqueId"
+    :no-rubriquage-id="noRubriquageId"
+    :is-button-next-title="true"
+    @sortChrono="sortChrono"
+    @sortPopular="sortPopular"
+  >
+    <template #list-inline>
+      <ClassicLoading
+        :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      />
+      <swiper
+        v-if="!loading"
+        :slides-per-view="numberItem"
+        :space-between="10"
+        :loop="allPodcasts.length>=numberItem"
+        :navigation="true"
+        :modules="modules"
+      >
+        <swiper-slide
+          v-for="p in allPodcasts"
+          :key="p.podcastId"
+        >
+          <PodcastItem
+            class="flex-shrink-0 item-phone-margin"
+            :podcast="p"
+          />
+        </swiper-slide>
+      </swiper>
+    </template>
+  </PodcastInlineListTemplate>
+</template>
+
+<script lang="ts">
+import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from './PodcastItem.vue';
+import { state } from '../../../store/paramStore';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation } from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastSwiperList',
+  
+  components: {
+    PodcastInlineListTemplate,
+    PodcastItem,
+    ClassicLoading,
+    Swiper,
+    SwiperSlide,
+  },
+
+  props: {
+    organisationId: { default: undefined, type: String},
+    emissionId: { default: undefined, type: Number},
+    iabId: { default: undefined, type: Number},
+    title: { default: '', type: String},
+    href: { default: undefined, type: String},
+    buttonText: { default: undefined, type: String},
+    isArrow: { default: false, type: Boolean},
+    requirePopularSort: { default:undefined, type: Boolean},
+    buttonPlus: { default:false, type: Boolean},
+    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
+    rubriquageId:{ default: () => [], type: Array as ()=> Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
+    query: { default: undefined, type: String},
+  },
+  emits: ['update:isArrow'],
+
+  data() {
+    return {
+      loading: true as boolean,
+      popularSort: false as boolean,
+      allPodcasts: [] as Array<Podcast>,
+      modules: [Navigation],
+      numberItem: 5 as number
+    };
+  },
+  computed: {
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    organisation(): string|undefined {
+      return this.organisationId ?? this.filterOrga;
+    },
+    watchVariable():string{
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+    },
+    sizeItem(): number {
+      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
+    },
+  },
+  watch: {
+    watchVariable(): void {
+      this.reset();
+      this.fetchNext();
+    },
+  },
+  
+  created() {
+    if (undefined !== this.requirePopularSort) {
+      this.popularSort = this.requirePopularSort;
+    }
+    if (undefined !== this.isArrow) {
+      this.$emit('update:isArrow', true);
+    }
+    window.addEventListener('resize', this.handleResize);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+  },
+  methods: {
+    handleResize(): void {
+      if (!this.$el) return;
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
+      this.numberItem = Math.floor(width / sixteen);
+    },
+    async fetchNext(): Promise<void> {
+      const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
+        first: 0,
+        size: 10,
+        organisationId: this.organisation,
+        emissionId: this.emissionId,
+        iabId: this.iabId,
+        rubriqueId: this.rubriqueId.length ?this.rubriqueId:undefined,
+        rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
+        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
+        sort: this.popularSort ? 'POPULARITY' : 'DATE',
+        query: this.query,
+      }, true);
+      this.allPodcasts = this.allPodcasts.concat(
+        data.result.filter((pod: Podcast|null) => null !== pod)
+      );
+      this.loading = false;
+    },
+    sortPopular(): void {
+      if (this.popularSort) return;
+      this.popularSort = true;
+      this.reset();
+      this.fetchNext();
+    },
+    sortChrono(): void {
+      if (!this.popularSort) return;
+      this.popularSort = false;
+      this.reset();
+      this.fetchNext();
+    },
+    reset(): void {
+      this.loading = true;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.swiper-button-next, .swiper-button-prev{
+  color: $octopus-primary-color !important;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  width: 50px;
+}
+.swiper-button-next{
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,#fafafa 50%, #fafafa 100%);
+  right: 0;
+}
+.swiper-button-prev{
+  background: linear-gradient(90deg, #fafafa 0%,#fafafa 50%, rgba(255, 255, 255, 0) 100%);
+  left: 0;
+}
+
+.swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

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

@@ -1,48 +1,70 @@
 <template>
-  <div v-if="undefined !== tagList">
-    <ul class="d-flex flex-wrap">
-      <li class="tagListElement" v-for="tag in tagList" :key="tag">
-        <router-link
-          :to="{
-            name: 'search',
-            query: {
-              query: tag,
-              productor: this.$store.state.filter.organisationId,
-            },
-          }"
-          class="tagListLink"
-          >{{ tag }}</router-link
+  <div
+    v-if="undefined !== tagList && 0!==tagList.length"
+    class="tag-list-component d-flex align-items-center flex-wrap"
+  >
+    <div class="fw-bold">
+      {{ $t('Podcast tags') + ": " }}
+    </div>
+    <div
+      v-for="(tag, index) in tagList"
+      :key="tag"
+      class="tag-list-element"
+    >
+      <div
+        :id="'tag-list-from-podcast-page'+index"
+        role="button"
+      >
+        <img
+          v-if="isOuestFranceTag(tag)"
+          class="ouest-france-logo"
+          alt="Ouest France Logo"
+          src="/img/ouest_france_logo.svg"
         >
-      </li>
-    </ul>
+        {{ formateOfTag(tag) }}
+      </div>
+      <Popover
+        v-if="isOuestFranceTag(tag)"
+        :target="'tag-list-from-podcast-page'+index"
+        triggers="hover"
+        :content="tag.substring(4,tag.length)"
+        placement="bottom"
+      />
+    </div>
   </div>
 </template>
-<style lang="scss">
-.tagListElement {
-  display: flex;
-  margin: 0.4rem;
-  padding: 0.8rem;
-  border: 1px solid #999;
-  cursor: pointer;
-}
-.tagListLink {
-  font-weight: 700;
-  font-size: 1.2rem;
-  color: #666;
-  &:hover {
-    color: #666;
-  }
-}
-</style>
 
 <script lang="ts">
+import Popover from '../../misc/Popover.vue';
+import { tagOfMixins } from '../../mixins/tagOfMixins';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'TagList',
-  components: {},
-
-  props: ['tagList'],
-
-  methods: {},
-});
+  components: {
+    Popover
+  },
+  mixins:[tagOfMixins],
+  props: {
+    tagList: { default: () => [], type: Array as ()=>Array<string>},
+  },
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+.tag-list-component{
+  .ouest-france-logo{
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+  .tag-list-element {
+    display: flex;
+    margin: 0.4rem;
+    padding: 0.2rem;
+    border: 1px solid #999;
+    border-radius: 0.5rem;
+  }
+}
+}
+</style>