@saooti/octopus-sdk 36.0.42 → 36.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.42",
+  "version": "36.0.44",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -25,6 +25,7 @@
     "@tiptap/vue-3": "^2.0.3",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
+    "@vuepic/vue-datepicker": "^5.4.0",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "dayjs": "^1.11.8",
@@ -36,9 +37,8 @@
     "qrcode.vue": "^3.4.0",
     "sass": "^1.63.4",
     "sonarqube-scanner": "^3.0.0",
-    "swiper": "^9.3.2",
-    "v-calendar": "^3.0.3",
-    "vite": "^4.3.9",
+    "swiper": "^10.0.4",
+    "vite": "^4.4.4",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-recaptcha": "^2.0.3",

package/src/components/display/filter/DateFilter.vue

@@ -15,8 +15,11 @@
       />
       <ClassicDatePicker
         :date="fromDate"
-        template-class="mx-2 px-2 py-1 border rounded focus:border-blue-300"
-        @updateDate="fromDate=$event;updateFromDate"
+        class="mx-2"
+        @update-date="
+          fromDate = $event;
+          updateFromDate();
+        "
       />
     </div>
     <div class="d-flex align-items-center">
@@ -28,8 +31,11 @@
       />
       <ClassicDatePicker
         :date="toDate"
-        template-class="ms-2 px-2 py-1 border rounded focus:border-blue-300"
-        @updateDate="toDate=$event;updateToDate"
+        class="mx-2"
+        @update-date="
+          toDate = $event;
+          updateToDate();
+        "
       />
     </div>
   </div>

package/src/components/form/ClassicDatePicker.vue

@@ -1,61 +1,72 @@
 <template>
-  <DatePicker
-    ref="datePicker"
-    :model-value="undefined!==range ? range : date"
-    :mode="mode"
-    color="green"
-    is24hr
-    :is-range="undefined!==range"
-    :max-date="isMaxDate ? now : undefined"
-    :min-date="isMinDate ? now : undefined"
-    :columns="columnNumber"
-    :is-inline="columnNumber>1"
-    :update-on-input="conditionEdit"
-    :masks="isMask ? masks : undefined"
-    @update:modelValue="$emit('updateDate', $event)"
-  >
-    <template
-      v-if="templateClass"
-      #default="{ inputValue, inputEvents }"
-    >
-      <input
-        :class="templateClass"
-        :value="inputValue"
-        v-on="inputEvents"
-      >
-    </template>
-  </DatePicker>
+  <VueDatePicker
+    :model-value="modelVal"
+    :time-picker="isTimePicker"
+    :input-class-name="templateClass"
+    :clearable="false"
+    :readonly="readonly"
+    :teleport="useTeleport"
+    :locale="formatLocale"
+    :format="format"
+    :auto-apply="true"
+    :enable-seconds="displaySeconds"
+    :max-date="isMaxDate && !isTimePicker ? now : undefined"
+    :min-date="isMinDate && !isTimePicker ? now : undefined"
+    :range="undefined !== range"
+    :multi-calendars="columnNumber>1 ? columnNumber : false"
+    :inline="columnNumber > 1"
+    :enable-time-picker="!isTimePicker ?displayTimePicker : undefined"
+    :time-picker-inline="!isTimePicker ? true : undefined"
+    @update:model-value="$emit('updateDate', $event)"
+  />
 </template>
 
 <script lang="ts">
-import dayjs from 'dayjs';
-import { DatePicker } from 'v-calendar';
-import { defineComponent } from 'vue';
+import dayjs from "dayjs";
+import VueDatePicker from '@vuepic/vue-datepicker';
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
-    DatePicker,
+    VueDatePicker,
   },
   props: {
-    date: { default: undefined, type: Date},
-    range: {default: undefined, type: Object as ()=>{ start: Date; end: Date }},
-    isMaxDate:{ default: false, type:  Boolean},
-    isMinDate:{ default: false, type:  Boolean},
-    columnNumber:{default:1, type: Number},
-    templateClass:{default: undefined,  type: String},
-    mode:{default:"dateTime", type: String},
-    isMask:{default: false,  type: Boolean},
-    conditionEdit:{default: true,  type: Boolean},
+    time: { default:undefined, type: Object as () => {hours:number, minutes:number, seconds:number} },
+    date: { default: undefined, type: Date },
+    range: {default: undefined,type: Array as () => Array<Date>},
+    isMaxDate: { default: false, type: Boolean },
+    isMinDate: { default: false, type: Boolean },
+    columnNumber: { default: 1, type: Number },
+    displaySeconds: { default: false, type: Boolean },
+    displayTimePicker:{ default: true, type: Boolean },
+    isTimePicker:{ default: false, type: Boolean },
+    useTeleport:{ default: false, type: Boolean },
+    templateClass: { default: undefined, type: String },
+    readonly: { default: false, type: Boolean },
   },
 
   emits: ['updateDate', 'update:date'],
   data() {
     return {
-      masks: {
-        input: 'YYYY-MM-DD',
-      },
     };
   },
   computed: {
+    modelVal(){
+      return this.time ?? this.range ?? this.date;
+    },
+    formatLocale(){
+      return this.$i18n.locale;
+    },
+    format(){
+      let timeString = '';
+      if(this.displayTimePicker || this.isTimePicker){
+        timeString ='HH:mm';
+        if(this.displaySeconds){
+          timeString ='HH:mm:ss';
+        } 
+      }
+      const dayString = this.isTimePicker ? timeString : 'dd/MM/yyyy '+timeString;
+      return this.range ? dayString+' - '+dayString : dayString;
+    },
     now(): Date {
       return dayjs().toDate();
     },
@@ -63,22 +74,9 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-@import 'v-calendar/dist/style.css';
-.octopus-app{
-	.vc-select select{
-		padding: 0 !important;
-	}
-	.vc-date{
-		.vc-month,.vc-day,.vc-year{
-			color: $octopus-primary-color !important;
-		}
-	}
-	.vc-highlight{
-		background-color: $octopus-primary-color !important;
-	}
-	.vc-select select:focus{
-		border-color: $octopus-primary-color !important;
-	}
+@import '@vuepic/vue-datepicker/dist/main.css';
+.dp__theme_light {
+   --dp-primary-color: #1a8658;
+   --dp-time-font-size: 1rem;
 }
 </style>

package/src/components/misc/player/Player.vue

@@ -26,6 +26,7 @@
         :percent-live-progress="percentLiveProgress"
         :duration-live-position="durationLivePosition"
         :listen-time="listenTime"
+        :hlsReady="hlsReady"
         @stopPlayer="stopPlayer"
         @changePlayerLargeVersion="playerUpdateLargeVersion(true)"
       />
@@ -38,6 +39,7 @@
         :percent-live-progress="percentLiveProgress"
         :duration-live-position="durationLivePosition"
         :listen-time="listenTime"
+        :hlsReady="hlsReady"
         @stopPlayer="stopPlayer"
         @changePlayerLargeVersion="playerUpdateLargeVersion(false)"
       />
@@ -74,7 +76,8 @@ export default defineComponent({
       durationLivePosition: 0 as number,
       displayAlertBar: false as boolean,
       comments: [] as Array<CommentPodcast>,
-      audioUrlToPlay: "" as string
+      audioUrlToPlay: "" as string,
+      hlsReady: false as boolean,
     };
   },
   computed: {

package/src/components/misc/player/PlayerCompact.vue

@@ -106,6 +106,7 @@ export default defineComponent({
     percentLiveProgress: { default: 0 , type: Number},
     durationLivePosition: { default: 0 , type: Number},
     listenTime: { default: 0 , type: Number},
+    hlsReady: { default: false , type: Boolean},
   },
 
   emits: ['stopPlayer', 'update:notListenTime', 'changePlayerLargeVersion'],

package/src/components/misc/player/PlayerLarge.vue

@@ -115,6 +115,7 @@ export default defineComponent({
     percentLiveProgress: { default: 0 , type: Number},
     durationLivePosition: { default: 0 , type: Number},
     listenTime: { default: 0 , type: Number},
+    hlsReady: { default: false , type: Boolean},
   },
 
   emits: ['stopPlayer', 'update:notListenTime', 'changePlayerLargeVersion'],

package/src/components/misc/player/PlayerProgressBar.vue

@@ -30,7 +30,6 @@ export default defineComponent({
   },
   props: {
     classProgress:{ default: "", type: String},
-    hlsReady: { default: false, type: Boolean},
     showTimeline: { default: false, type: Boolean},
     comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
     displayAlertBar: { default: false, type: Boolean},

package/src/stores/ParamSdkStore.ts

@@ -12,7 +12,7 @@ const state:ParamStore = {
     isPlaylist: false,
     isProduction: false,
     isContribution: true,
-    ApiUri: 'https://api.staging.saooti.org/',
+    ApiUri: 'https://api.preprod.saooti.org/',
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -26,8 +26,8 @@ const state:ParamStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: 'https://playerbeta.staging.saooti.org/',
-    hlsUri: 'https://hls.staging.saooti.org/',
+    MiniplayerUri: 'https://playerbeta.preprod.saooti.org/',
+    hlsUri: 'https://hls.live.preprod.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
@@ -79,13 +79,13 @@ const state:ParamStore = {
     userName: '',
   },
   octopusApi: {
-    url: 'https://api.staging.saooti.org/',
-    commentsUrl: 'https://comments.staging.saooti.org/',
-    imageUrl:'https://imageproxy.staging.saooti.org/',
-    studioUrl: 'https://studio.staging.saooti.org/',
-    playerUrl: 'https://playerbeta.staging.saooti.org/',
-    speechToTextUrl:'https://speech2text.staging.saooti.org/',
-    recoUrl: 'https://reco.staging.saooti.org/',
+    url: 'https://api.preprod.saooti.org/',
+    commentsUrl: 'https://comments.preprod.saooti.org/',
+    imageUrl:'https://imageproxy.preprod.saooti.org/',
+    studioUrl: 'https://studio.preprod.saooti.org/',
+    playerUrl: 'https://playerbeta.preprod.saooti.org/',
+    speechToTextUrl:'https://speech2text.preprod.saooti.org/',
+    recoUrl: 'https://reco.preprod.saooti.org/',
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },