@saooti/octopus-sdk 37.0.11 → 37.0.13

package/package.json

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

package/src/assets/share.scss

@@ -64,7 +64,8 @@
   }
   .page-element{
     margin-top: 12rem;
-    position: relative;
+    z-index: 1;
+    /* position: relative; */
   }
 
   .vue-swatches__trigger{

package/src/components/display/sharing/ShareButtons.vue

@@ -16,8 +16,6 @@
         target="popover-share-help"
         :title="$t('Help')"
         :content="$t('Share this page without edit and share blocks')"
-        relative-class="page-element"
-        :is-fixed="true"
       />
     </div>
     <ShareButtonsIntern

package/src/components/misc/ClassicPopover.vue

@@ -31,6 +31,8 @@ export default defineComponent({
     isFixed: { type: Boolean, default: false },
     relativeClass: { type: String, default: undefined },
     leftPos: { type: Boolean, default: false },
+    topPos: { type: Boolean, default: false },
+
   },
   data() {
     return {
@@ -123,12 +125,13 @@ export default defineComponent({
           parentRight -
           (this.$refs.popover as HTMLElement).clientWidth
         : rectElement.left - parentLeft;
-      this.posY =
-        rectElement.bottom +
+      const yPosParent = this.topPos ? rectElement.top:rectElement.bottom;
+      const yGap = this.topPos ? -5 - (this.$refs.popover as HTMLElement).clientHeight :5;
+      this.posY = yPosParent +
         parentScrollTop -
         parentTop +
         (this.isFixed ? 0 : window.scrollY) +
-        5;
+        yGap;
     },
     async clearDataBlur(e: FocusEvent) {
       if (!e.relatedTarget) {

package/src/components/misc/player/radio/RadioProgressBar.vue

@@ -5,6 +5,7 @@
   >
     <div
       class="octopus-progress-bar"
+      :class="isBack ? 'no-transition': ''"
       role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
@@ -27,6 +28,7 @@ export default defineComponent({
   data() {
     return {
       percentInterval: undefined as ReturnType<typeof setTimeout> | undefined,
+      isBack: false as boolean,
     };
   },
 
@@ -45,6 +47,9 @@ export default defineComponent({
   mounted() {
     this.handlePercentInterval();
   },
+  unmounted() {
+    clearInterval(this.percentInterval as unknown as number);
+  },
   methods: {
     ...mapActions(usePlayerStore, ["playerUpdateElapsed"]),
     handlePercentInterval(/* clear: boolean */): void {
@@ -66,10 +71,11 @@ export default defineComponent({
         .diff(dayjs(this.playerRadio.metadata.startDate));
       const percentPlayed =
         actualMilliSecondsPlayed /
-        (this.playerRadio?.metadata.mediaDuration * 1000);
+        (this.playerRadio?.metadata.playDuration * 1000);
+      this.isBack = percentPlayed < this.playerElapsed;
       this.playerUpdateElapsed(
         percentPlayed,
-        this.playerRadio?.metadata.mediaDuration,
+        this.playerRadio?.metadata.playDuration,
       );
     },
   },
@@ -83,6 +89,9 @@ export default defineComponent({
     .octopus-progress-bar {
       background-color: #747474;
     }
+    .no-transition{
+      transition: none !important;
+    }
   }
 }
 </style>

package/src/stores/PlayerStore.ts

@@ -83,8 +83,8 @@ export const usePlayerStore = defineStore("PlayerStore", {
     transcriptText(): string {
       return this.playerTranscript?.actualText ?? "";
     },
-    radioUrl(): string {
-      return this.playerRadio?.url ?? "";
+    radioUrl(): string|undefined {
+      return this.playerRadio?.url ?? undefined;
     },
   },
   actions: {