@saooti/octopus-sdk 37.0.3 → 37.0.4

package/package.json

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

package/src/assets/bootstrap.scss

@@ -146,14 +146,15 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 							background: transparent;
 							border-color: white !important;
 					}
-					&:disabled{
+					&:not(.btn-on-dark):disabled,
+					&.btn-on-dark:disabled{
 							background-color: #cccccc;
 							border: 1px solid black;
 							cursor: default;
 							color: gray !important;
 					}
 					@media (max-width: 500px){
-					margin: 0.3rem;
+						margin: 0.3rem;
 					}
 			}
 

package/src/components/display/list/SwiperList.vue

@@ -37,6 +37,7 @@ export default defineComponent({
 
   props: {
     listObject: { default: ()=>[], type: Array as ()=> Array<unknown>},
+    sizeItemOverload:{default: undefined, type: Number}
   },
 
   data() {
@@ -47,6 +48,9 @@ export default defineComponent({
   },
   computed: {
     sizeItem(): number {
+      if(this.sizeItemOverload){
+        return this.sizeItemOverload;
+      }
       if (window.innerWidth <= 450) {
         return 12.5;
       }

package/src/components/form/ClassicDatePicker.vue

@@ -12,6 +12,7 @@
     :is-inline="columnNumber>1"
     :update-on-input="conditionEdit"
     :masks="isMask ? masks : undefined"
+    :time-accuracy="timeAccuracy"
     @update:modelValue="$emit('updateDate', $event)"
   >
     <template
@@ -41,6 +42,7 @@ export default defineComponent({
     isMaxDate:{ default: false, type:  Boolean},
     isMinDate:{ default: false, type:  Boolean},
     columnNumber:{default:1, type: Number},
+    timeAccuracy:{default:2, type: Number},
     templateClass:{default: undefined,  type: String},
     mode:{default:"dateTime", type: String},
     isMask:{default: false,  type: Boolean},
@@ -66,6 +68,9 @@ export default defineComponent({
 @import '@scss/_variables.scss';
 @import 'v-calendar/dist/style.css';
 .octopus-app{
+  .vc-base-select select{
+    border: 0 !important;
+  }
 	.vc-select select{
 		padding: 0 !important;
 	}

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

@@ -1,19 +1,37 @@
 <template>
   <div 
-    v-if="playerRadio.history.length"
-    class="d-flex align-items-center flex-wrap mt-3"
+    v-if="playerRadioHistory.length"
+    class="d-flex align-items-center mt-3"
   >
     <div class="fw-bold me-3">
       {{ $t('Previously') +':' }}
     </div>
-    <div 
-      v-for="pastItem in playerRadio.history" 
-      :key="pastItem.title"
-      class="me-3"
+    <button
+      v-if="indexStart!==0"
+      class="btn btn-transparent text-light saooti-left"
+      @click="handleResize(0)"
+    />
+    <div
+      ref="historyListContainer"
+      class="history-list-container"
     >
-      <span class="me-2 hour-past-item">{{ displayTimeItem(pastItem) }}</span>
-      <span>{{ displayPreviousItem(pastItem) }}</span>
+      <div 
+        v-for="(pastItem, index) in playerRadioHistory" 
+        :key="pastItem.title"
+        :ref="'history' + index"
+        class="d-flex flex-shrink-0"
+      >
+        <div class="d-flex flex-shrink-0 align-items-end">
+          <span class="me-2 hour-past-item">{{ displayTimeItem(pastItem) }}</span>
+          <span class="me-3">{{ displayPreviousItem(pastItem) }}</span>
+        </div>
+      </div>
     </div>
+    <button
+      v-if="indexNotDisplay<=playerRadioHistory.length-1"
+      class="btn btn-transparent text-light saooti-right"
+      @click="handleResize(indexNotDisplay)"
+    />
   </div>
 </template>
 
@@ -34,16 +52,70 @@ export default defineComponent({
   emits: ['updateNotListenTime'],
   data() {
     return {
+      indexStart: 0 as number,
+      indexNotDisplay: 100 as number,
     };
   },
   
   computed: {
     ...mapState(usePlayerStore, ['playerRadio']),
+    playerRadioHistory(){
+      return this.playerRadio?.history ?? [];
+    }
+  },
+  watch:{
+    playerRadioHistory: {
+      deep: true,
+      immediate:true,
+      handler(){
+        this.$nextTick(() => {
+          this.handleResize(0);
+        });
+      }
+    },
+  },
+  created() {
+    window.addEventListener('resize', ()=>{this.handleResize(0);});
+  },
+  unmounted() {
+    window.removeEventListener('resize', ()=>{this.handleResize(0);});
   },
-  mounted(){
-    console.log(this.playerRadio);
+  mounted() {
+    this.handleResize(0);
   },
   methods:{
+    handleResize(indexAsked:number): void {
+      const historyList = (this.$refs.historyListContainer as HTMLElement);
+      if(null === historyList ||!historyList){
+        return;
+      }
+      this.indexStart = indexAsked;
+      this.indexNotDisplay = this.playerRadioHistory.length;
+      for (let index = 0; index < this.playerRadioHistory.length; index++) {
+        const el = (this.$refs['history' +index] as Array<HTMLElement>)[0];
+        if (!el) continue;
+        if(index < this.indexStart && !el.classList.contains('hid')){
+          el.classList.add('hid');
+          continue;
+        }
+        if (index >= this.indexStart && el.classList.contains('hid')) {
+          el.classList.remove('hid');
+        }
+      }
+      for (let index = this.indexStart + 1; index < this.playerRadioHistory.length; index++) {
+        const el = (this.$refs['history' +index] as Array<HTMLElement>)[0];
+        if (!el) continue;
+        if (index > this.indexNotDisplay && !el.classList.contains('hid')) {
+          el.classList.add('hid');
+          continue;
+        }
+        const parent = el.parentElement;
+        if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth ) {
+          this.indexNotDisplay = index;
+          el.classList.add('hid');
+        }
+      }
+    },
     displayTimeItem(item: MediaRadio):string{
       return dayjs(item.startDate).format('HH:mm');
     },
@@ -58,6 +130,14 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .octopus-app{
+  .history-list-container {
+    display: inline-flex;
+    justify-content: flex-start;
+    overflow: hidden;
+    flex-grow: 1;
+    width: 0;
+    position: relative;
+  }
   .hour-past-item{
     font-size: 0.8rem;
     color: #dbdbdb;

package/src/components/mixins/radio/fetchRadioData.ts

@@ -20,11 +20,13 @@ export const fetchRadioData = defineComponent({
       for (let index = 0, len = arrayMetadata.length; index < len; index++) {
         if(dayjs().valueOf()-18000 > dayjs(arrayMetadata[index].startDate).valueOf()){
           if(previousTitle !== arrayMetadata[index].title){
+            const historyIndex = index+1 < len ? index+1 : index;
+            const history = arrayMetadata.slice(historyIndex, len);
             if(arrayMetadata[index].podcastId){
               const data : Podcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+arrayMetadata[index].podcastId); 
-              callbackMetadata(arrayMetadata[index], data, arrayMetadata.slice(index, len));
+              callbackMetadata(arrayMetadata[index], data, history);
             }else{
-              callbackMetadata(arrayMetadata[index], undefined, arrayMetadata.slice(index, len));
+              callbackMetadata(arrayMetadata[index], undefined, history);
             }
           }
           return;