@saooti/octopus-sdk 40.1.13 → 40.1.15

package/package.json

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

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

@@ -59,8 +59,7 @@
           </router-link>
           <PodcastPlayBar
             v-else
-            :podcast-id="p.podcastId"
-            :duration="p.duration"
+            :podcast="p"
           />
         </div>
         <button
@@ -73,7 +72,7 @@
         >
           <PlayIcon class="text-light" :title="$t('Play')" />
         </button>
-        <button v-else class="play-button-box bg-secondary-light" @click="pause(p)">
+        <button v-else class="play-button-box bg-secondary-light" @click="pause()">
           <PauseIcon class="text-light" :title="$t('Pause')" />
         </button>
       </div>

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-btn="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,50 +1,71 @@
 <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">
+    <button
+      v-if="
+        playerPodcast !== podcast ||
+        (playerPodcast === podcast && 'PAUSED' === playerStatus)
+      "
+      class="btn play-button-box bg-primary"
+      @click="play(podcast)"
+    >
+      <PlayIcon class="text-light" :title="$t('Play')" />
+    </button>
+    <button v-else class="btn play-button-box bg-primary" @click="pause()">
+      <PauseIcon class="text-light" :title="$t('Pause')" />
+    </button>
+    <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>
 
 <script lang="ts">
+import PlayIcon from "vue-material-design-icons/Play.vue";
+import PauseIcon from "vue-material-design-icons/Pause.vue";
 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 { Podcast } from "@/stores/class/general/podcast";
 export default defineComponent({
   name: "PodcastPlayBar",
   components: {
     ProgressBar,
+    PlayIcon,
+    PauseIcon
   },
   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,15 +80,26 @@ 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: {
+    ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
     ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
+    play(podcast: Podcast): void {
+      if (podcast === this.playerPodcast) {
+        this.playerChangeStatus(false);
+      } else {
+        this.playerPlay(podcast);
+      }
+    },
+    pause(): void {
+      this.playerChangeStatus(true);
+    },
     seekTo(event: MouseEvent): void {
       if (
         !this.playerPodcast ||
-        this.podcastId !== this.playerPodcast.podcastId
+        this.podcast?.podcastId !== this.playerPodcast.podcastId
       ) {
         return;
       }
@@ -81,3 +113,6 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="scss">
+@use "../../../style/playButton";
+</style>

package/src/components/misc/ClassicPopover.vue

@@ -245,7 +245,8 @@ export default defineComponent({
         return;
       }
       //Exception timepicker in popover
-      if (e?.target?.classList?.contains("dp__time_display")) {
+      var result = Array.from(e?.target?.classList ?? []).findIndex((val) => { return val.startsWith("dp__");});
+      if (-1!==result) {
         return;
       }
       if (!e.relatedTarget) {

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;
+      }
+    
+}