@saooti/octopus-sdk 37.0.10 → 37.0.12

package/package.json

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

package/src/components/form/ClassicDatePicker.vue

@@ -16,9 +16,10 @@
     :multi-calendars="columnNumber>1 ? columnNumber : false"
     :inline="columnNumber > 1"
     :enable-time-picker="!isTimePicker ?displayTimePicker : undefined"
-    :time-picker-inline="!isTimePicker ? true : undefined"
+    :aria-labels="ariaLabels"
     @update:model-value="$emit('updateDate', $event)"
-  />
+  >
+  </VueDatePicker>
 </template>
 
 <script lang="ts">
@@ -50,6 +51,12 @@ export default defineComponent({
     };
   },
   computed: {
+    ariaLabels(){
+      return {
+        input: this.date ? this.formatDate(this.date) : undefined,
+        day : (value: {value: Date}) => {return this.formatDate(value.value);}
+      }
+    },
     modelVal(){
       return this.time ?? this.range ?? this.date;
     },
@@ -71,7 +78,13 @@ export default defineComponent({
       return dayjs().toDate();
     },
   },
-});
+  methods:{
+    formatDate(value: Date): string{
+      const realMonth = value.getMonth() + 1;
+      return value.getDate()+'/'+(realMonth < 10 ? "0" : "") + realMonth+'/'+value.getFullYear();
+    }
+  }
+})
 </script>
 <style lang="scss">
 @import '@vuepic/vue-datepicker/dist/main.css';

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: {