@saooti/octopus-sdk 40.1.14 → 40.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "40.1.14",
+  "version": "40.1.16",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -59,23 +59,11 @@
           </router-link>
           <PodcastPlayBar
             v-else
-            :podcast-id="p.podcastId"
-            :duration="p.duration"
+            :displayButonPlay="true"
+            :podcast="p"
           />
         </div>
-        <button
-          v-if="
-            playerPodcast !== p ||
-            (playerPodcast === p && 'PAUSED' === playerStatus)
-          "
-          class="play-button-box bg-secondary-light"
-          @click="play(p)"
-        >
-          <PlayIcon class="text-light" :title="$t('Play')" />
-        </button>
-        <button v-else class="play-button-box bg-secondary-light" @click="pause(p)">
-          <PauseIcon class="text-light" :title="$t('Pause')" />
-        </button>
+        <PodcastPlayBasicButton v-if="!isProgressBar"/>
       </div>
     </div>
     <div
@@ -96,28 +84,24 @@
 </template>
 
 <script lang="ts">
-import PlayIcon from "vue-material-design-icons/Play.vue";
-import PauseIcon from "vue-material-design-icons/Pause.vue";
 import classicApi from "../../../api/classicApi";
 import { Emission } from "@/stores/class/general/emission";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
 import {useImageProxy} from "../../composable/useImageProxy";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
-import { usePlayerStore } from "../../../stores/PlayerStore";
-import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 const PodcastPlayBar = defineAsyncComponent(
   () => import("../podcasts/PodcastPlayBar.vue"),
 );
+const PodcastPlayBasicButton = defineAsyncComponent(() => import("./PodcastPlayBasicButton.vue"));
 export default defineComponent({
   name: "EmissionPlayerItem",
 
   components: {
     PodcastPlayBar,
-    PlayIcon,
-    PauseIcon,
+    PodcastPlayBasicButton
   },
   props: {
     emission: { default: () => ({}), type: Object as () => Emission },
@@ -138,7 +122,6 @@ export default defineComponent({
   },
 
   computed: {
-    ...mapState(usePlayerStore, ["playerPodcast", "playerStatus"]),
     isProgressBar(): boolean {
       return state.emissionsPage.progressBar as boolean;
     },
@@ -154,17 +137,6 @@ export default defineComponent({
     this.loadPodcasts();
   },
   methods: {
-    ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
-    play(podcast: Podcast): void {
-      if (podcast === this.playerPodcast) {
-        this.playerChangeStatus(false);
-      } else {
-        this.playerPlay(podcast);
-      }
-    },
-    pause(): void {
-      this.playerChangeStatus(true);
-    },
     async loadPodcasts(): Promise<void> {
       const nb = this.nbPodcasts ? this.nbPodcasts : 2;
       const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({

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

@@ -31,13 +31,7 @@
       @mouseleave="debounceHideDescriptionEvent"
     >
       <PodcastItemInfo
-        :podcast-id="podcast.podcastId"
-        :title="podcast.title"
-        :pub-date="podcast.pubDate"
-        :podcast-organisation-id="podcast.organisation.id"
-        :podcast-organisation-name="podcast.organisation.name"
-        :duration="podcast.duration"
-        :animators="podcast.animators"
+        :podcast="podcast"
       />
     </div>
   </article>

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

@@ -1,39 +1,39 @@
 <template>
   <div>
     <time 
-      :datetime="pubDate"
+      :datetime="podcast.pubDate"
       class="text-secondary h6 ms-2">
       {{ date }}
     </time>
     <router-link
       :to="{
         name: 'podcast',
-        params: { podcastId: podcastId },
+        params: { podcastId: podcast.podcastId },
       }"
-      class="text-dark flex-grow-1 title-podcast-item basic-line-clamp three-line"
-      :title="$t('Episode name page', { name: title })"
+      class="text-dark flex-grow-1 podcast.title-podcast-item basic-line-clamp three-line"
+      :podcast.title="$t('Episode name page', { name: podcast.title })"
     >
-      {{ title }}
+      {{ podcast.title }}
     </router-link>
     <PodcastPlayBar
       v-if="isProgressBar"
-      :podcast-id="podcastId"
-      :duration="duration"
-      class="mx-2"
+      :display-buton-play="true"
+      :podcast="podcast"
+      class="me-2"
     />
 
     <div class="mx-2 d-flex align-items-center justify-content-between mt-2">
       <div v-if="isPodcastmaker" class="useless-div-for-podcastmaker" />
       <AnimatorsItem
-        v-if="animators && 0 !== animators.length"
+        v-if="podcast.animators && 0 !== podcast.animators.length"
         class="w-0 flex-grow-1"
-        :animator="animators[0]"
+        :animator="podcast.animators[0]"
       />
       <router-link
         v-if="!isPodcastmaker"
         :to="{
           name: 'productor',
-          params: { productorId: podcastOrganisationId },
+          params: { productorId: podcast.organisation.id },
         }"
         class="text-dark producer-podcast-item"
       >
@@ -45,11 +45,10 @@
 
 <script lang="ts">
 import AnimatorsItem from "./AnimatorsItem.vue";
-import { state } from "../../../stores/ParamSdkStore";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import dayjs from "dayjs";
 import { defineAsyncComponent, defineComponent } from "vue";
-import { Participant } from "@/stores/class/general/participant";
+import { Podcast } from "@/stores/class/general/podcast";
 const PodcastPlayBar = defineAsyncComponent(
   () => import("./PodcastPlayBar.vue"),
 );
@@ -62,13 +61,7 @@ export default defineComponent({
   },
 
   props: {
-    podcastId: { default: undefined, type: Number },
-    title: { default: "", type: String },
-    pubDate: { default: "", type: String },
-    podcastOrganisationId: { default: "", type: String },
-    podcastOrganisationName: { default: "", type: String },
-    duration: { default: 0, type: Number },
-    animators: { default: undefined, type: Object as () => Array<Participant> },
+    podcast: { default: () => ({}), type: Object as () => Podcast },
   },
 
   setup(){
@@ -81,16 +74,16 @@ export default defineComponent({
       return state.emissionsPage.progressBar as boolean;
     },
     date(): string {
-      return dayjs(this.pubDate).format("D MMMM YYYY");
+      return dayjs(this.podcast.pubDate).format("D MMMM YYYY");
     },
     editRight(): boolean {
-      return this.isEditRights(this.podcastOrganisationId);
+      return this.isEditRights(this.podcast.organisation.id);
     },
     orgaNameDisplay(): string {
-      if (this.podcastOrganisationName.length > 30) {
-        return this.podcastOrganisationName.substring(0, 30) + "...";
+      if (this.podcast.organisation.name.length > 30) {
+        return this.podcast.organisation.name.substring(0, 30) + "...";
       }
-      return this.podcastOrganisationName;
+      return this.podcast.organisation.name;
     },
   },
 });
@@ -98,7 +91,7 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app {
-  .title-podcast-item {
+  .podcast.title-podcast-item {
     font-weight: 700;
     margin: 0.25rem 0.5rem 0.5rem;
     flex-grow: 1;

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

@@ -93,8 +93,7 @@
           </a>
           <PodcastPlayBar
             v-if="isProgressBar"
-            :podcast-id="podcast.podcastId"
-            :duration="podcast.duration"
+            :podcast="podcast"
           />
           <div v-if="editRight && !isPodcastmaker">
             <div

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

@@ -1,17 +1,20 @@
 <template>
-  <div class="d-flex align-items-center podcast-play-bar">
-    <div class="me-2">
-      {{ playedTime }}
-    </div>
-    <div class="position-relative flex-grow-1">
-      <ProgressBar
-        :main-progress="percentProgress"
-        class="medium"
-        @mouseup="seekTo"
-      />
-    </div>
-    <div class="ms-2">
-      {{ totalTime }}
+  <div class="d-flex align-items-center">
+    <PodcastPlayBasicButton v-if="displayButonPlay" :podcast="podcast"/>
+    <div class="d-flex align-items-center podcast-play-bar flex-grow-1">
+      <div class="me-2">
+        {{ playedTime }}
+      </div>
+      <div class="position-relative flex-grow-1">
+        <ProgressBar
+          :main-progress="percentProgress"
+          class="medium"
+          @mouseup="seekTo"
+        />
+      </div>
+      <div class="ms-2">
+        {{ totalTime }}
+      </div>
     </div>
   </div>
 </template>
@@ -21,30 +24,34 @@ import ProgressBar from "../../misc/ProgressBar.vue";
 import DurationHelper from "../../../helper/durationHelper";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+import { Podcast } from "@/stores/class/general/podcast";
+const PodcastPlayBasicButton = defineAsyncComponent(() => import("./PodcastPlayBasicButton.vue"));
 export default defineComponent({
   name: "PodcastPlayBar",
   components: {
     ProgressBar,
+    PodcastPlayBasicButton
   },
   props: {
-    podcastId: { default: undefined, type: Number },
-    duration: { default: 0, type: Number },
+    podcast: { default: () => ({}), type: Object as () => Podcast },
+    displayButonPlay:{ default: false, type: Boolean },
   },
   computed: {
     ...mapState(usePlayerStore, [
       "playerPodcast",
       "playerElapsed",
       "playerTotal",
+      "playerStatus"
     ]),
     percentProgress(): number {
-      if (this.podcastId !== this.playerPodcast?.podcastId) {
+      if (this.podcast?.podcastId !== this.playerPodcast?.podcastId) {
         return 0;
       }
       return !this.playerElapsed ? 0 : this.playerElapsed * 100;
     },
     playedTime(): string {
-      if (this.podcastId === this.playerPodcast?.podcastId) {
+      if (this.podcast?.podcastId === this.playerPodcast?.podcastId) {
         if (
           this.playerElapsed &&
           this.playerElapsed > 0 &&
@@ -59,7 +66,7 @@ export default defineComponent({
       return "00:00";
     },
     totalTime(): string {
-      return DurationHelper.formatDuration(Math.round(this.duration / 1000));
+      return DurationHelper.formatDuration(Math.round(this.podcast.duration / 1000));
     },
   },
   methods: {
@@ -67,7 +74,7 @@ export default defineComponent({
     seekTo(event: MouseEvent): void {
       if (
         !this.playerPodcast ||
-        this.podcastId !== this.playerPodcast.podcastId
+        this.podcast?.podcastId !== this.playerPodcast.podcastId
       ) {
         return;
       }
@@ -75,9 +82,8 @@ export default defineComponent({
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;
       const percentPosition = x / barWidth;
-      if (percentPosition * 100 >= this.percentLiveProgress) return;
       this.playerUpdateSeekTime(this.playerTotal * percentPosition);
     },
   },
 });
-</script>
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <button
+    class="btn play-button-box bg-primary"
+    @click="clickBtn(podcast)"
+  >
+    <PlayIcon v-if="btnPlay" class="text-light" :title="$t('Play')" />
+    <PauseIcon v-else class="text-light" :title="$t('Pause')" />
+  </button>
+</template>
+
+<script lang="ts">
+import PlayIcon from "vue-material-design-icons/Play.vue";
+import PauseIcon from "vue-material-design-icons/Pause.vue";
+import { usePlayerStore } from "../../../stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent } from "vue";
+import { Podcast } from "@/stores/class/general/podcast";
+export default defineComponent({
+  name: "PodcastPlayBasicButton",
+  components: {
+    PlayIcon,
+    PauseIcon
+  },
+  props: {
+    podcast: { default: () => ({}), type: Object as () => Podcast },
+  },
+  computed: {
+    ...mapState(usePlayerStore, ["playerPodcast", "playerStatus"]),
+    btnPlay(){
+      return this.playerPodcast !== this.podcast || (this.playerPodcast === this.podcast && 'PAUSED' === this.playerStatus);
+    }
+  },
+  methods: {
+    ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
+    clickBtn(podcast: Podcast){
+      if(this.btnPlay){
+        this.play(podcast);
+        return;
+      }
+      this.pause();
+    },
+    play(podcast: Podcast): void {
+      if (podcast === this.playerPodcast) {
+        this.playerChangeStatus(false);
+      } else {
+        this.playerPlay(podcast);
+      }
+    },
+    pause(): void {
+      this.playerChangeStatus(true);
+    },
+  },
+});
+</script>
+<style lang="scss">
+@use "../../../style/playButton";
+</style>

package/src/components/misc/player/elements/PlayerPlayButton.vue

@@ -119,23 +119,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@use "../../../../style/playButton";
 .octopus-app {
-  .play-button-box {
-    height: 2.2rem;
-    width: 2.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0.5rem;
-    border-radius: 50% !important;
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-
   .play-button-box:not(.small-font) {
     font-size: 1rem !important;
   }
-
   .play-big-button-box {
     height: 5rem;
     width: 5rem;

package/src/style/playButton.scss

@@ -0,0 +1,14 @@
+.octopus-app{
+    .play-button-box {
+        height: 2.2rem;
+        width: 2.2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 0.5rem;
+        border-radius: 50% !important;
+        flex-shrink: 0;
+        cursor: pointer;
+      }
+    
+}