Add pika hailuo pagination

change/@acedatacloud-nexior-74d4f150-ff04-4c0d-af43-0d25c08af9d6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add pika hailuo pagination",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/components/hailuo/RecentPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel recent">
+  <div ref="panel" class="panel recent" @scroll="onHandleScroll">
     <div v-if="tasks?.items === undefined" class="tasks">
       <div v-for="_ in 3" :key="_" class="task placeholder">
         <div class="left">
@@ -40,6 +40,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
+  emits: ['reach-top'],
   data() {
     return {
       job: 0
@@ -50,9 +51,18 @@ export default defineComponent({
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.hailuo?.tasks,
-        items: this.$store.state.hailuo?.tasks?.items?.slice().reverse()
+        items: this.$store.state.hailuo?.tasks?.items?.slice()
       };
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
+      if (el.scrollTop === 0) {
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>

src/components/hailuo/task/Preview.vue

@@ -147,7 +147,6 @@ export default defineComponent({
           result.push(audio);
         });
       }
-      console.log('videos', result);
       return result;
     }
   },

src/components/pika/RecentPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel recent">
+  <div ref="panel" class="panel recent" @scroll="onHandleScroll">
     <div v-if="tasks?.items === undefined" class="tasks">
       <div v-for="_ in 3" :key="_" class="task placeholder">
         <div class="left">
@@ -40,6 +40,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
+  emits: ['reach-top'],
   data() {
     return {
       job: 0
@@ -50,9 +51,18 @@ export default defineComponent({
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.pika?.tasks,
-        items: this.$store.state.pika?.tasks?.items?.slice().reverse()
+        items: this.$store.state.pika?.tasks?.items?.slice()
       };
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
+      if (el.scrollTop === 0) {
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>

src/components/pika/task/Preview.vue

@@ -137,7 +137,6 @@ export default defineComponent({
           result.push(audio);
         });
       }
-      console.log('videos', result);
       return result;
     }
   },

src/models/hailuo.ts

@@ -35,7 +35,7 @@ export interface IHailuoGenerateResponse {
 
 export interface IHailuoTask {
   id: string;
-  created_at?: string;
+  created_at?: number;
   request?: IHailuoGenerateRequest;
   response?: IHailuoGenerateResponse;
 }

src/models/pika.ts

@@ -43,7 +43,7 @@ export interface IPikaGenerateResponse {
 
 export interface IPikaTask {
   id: string;
-  created_at?: string;
+  created_at?: number;
   request?: IPikaGenerateRequest;
   response?: IPikaGenerateResponse;
 }

src/operators/hailuo.ts

@@ -30,6 +30,8 @@ class HailuoOperator {
       type?: string;
       limit?: number;
       offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
     },
     options: { token: string }
   ): Promise<AxiosResponse<IHailuoTasksResponse>> {
@@ -66,6 +68,16 @@ class HailuoOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {

src/operators/pika.ts

@@ -30,6 +30,8 @@ class PikaOperator {
       type?: string;
       limit?: number;
       offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
     },
     options: { token: string }
   ): Promise<AxiosResponse<IPikaTasksResponse>> {
@@ -66,6 +68,16 @@ class PikaOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {

src/pages/hailuo/Index.vue

@@ -12,7 +12,7 @@
         class="mb-4"
         @refresh="onGetApplication"
       />
-      <recent-panel class="panel recent" />
+      <recent-panel class="panel recent" @reach-top="onReachTop" />
       <!-- <operation-panel class="panel operation" @generate="onGenerate" /> -->
     </template>
   </layout>
@@ -35,6 +35,7 @@ const CALLBACK_URL = 'https://webhook.acedata.cloud/hailuo';
 interface IData {
   task: IHailuoTask | undefined;
   job: number;
+  timer: NodeJS.Timer;
 }
 
 export default defineComponent({
@@ -48,7 +49,9 @@ export default defineComponent({
   data(): IData {
     return {
       task: undefined,
-      job: 0
+      job: 0,
+      // @ts-ignore
+      timer: undefined
     };
   },
   computed: {
@@ -72,6 +75,21 @@ export default defineComponent({
     },
     application() {
       return this.$store.state.hailuo.application;
+    },
+    tasks() {
+      return this.$store.state.hailuo.tasks;
+    }
+  },
+  watch: {
+    tasks: {
+      handler(value, oldValue) {
+        // scroll down if new tasks are added
+        if (value?.items?.length > oldValue?.items?.length) {
+          console.debug('new tasks detected');
+          // this.onScrollDown();
+        }
+      },
+      deep: true
     }
   },
   async mounted() {
@@ -87,8 +105,15 @@ export default defineComponent({
   },
   async unmounted() {
     clearInterval(this.job);
+    clearInterval(this.timer);
   },
   methods: {
+    async onReachTop() {
+      console.debug('reached top');
+      await this.onGetTasks({
+        createdAtMax: this.tasks?.items?.[0]?.created_at
+      });
+    },
     async onGetService() {
       console.debug('start onGetService');
       await this.$store.dispatch('hailuo/getService');
@@ -125,14 +150,18 @@ export default defineComponent({
         }
       }, 500);
     },
-    async onGetTasks() {
+    async onGetTasks(payload?: { limit?: number; createdAtMin?: number; createdAtMax?: number }) {
       if (this.loading) {
         console.debug('loading');
         return;
       }
+      console.debug('start onGetTasks', payload);
+      const { limit = 5, createdAtMin, createdAtMax } = payload || {};
+      console.debug('limit', limit, 'createdAtMin', createdAtMin, 'createdAtMax', createdAtMax);
       await this.$store.dispatch('hailuo/getTasks', {
-        limit: 30,
-        offset: 0
+        limit,
+        createdAtMin,
+        createdAtMax
       });
     },
     async onGenerateVideo() {
@@ -165,8 +194,10 @@ export default defineComponent({
           }
         })
         .finally(async () => {
-          await this.onGetTasks();
-          await this.onScrollDown();
+          setTimeout(async () => {
+            await this.onGetTasks();
+            await this.onScrollDown();
+          }, 1000);
         });
     }
   }

src/pages/pika/Index.vue

@@ -12,7 +12,7 @@
         class="mb-4"
         @refresh="onGetApplication"
       />
-      <recent-panel class="panel recent" />
+      <recent-panel class="panel recent" @reach-top="onReachTop" />
       <!-- <operation-panel class="panel operation" @generate="onGenerate" /> -->
     </template>
   </layout>
@@ -35,6 +35,7 @@ const CALLBACK_URL = 'https://webhook.acedata.cloud/pika';
 interface IData {
   task: IPikaTask | undefined;
   job: number;
+  timer: NodeJS.Timer;
 }
 
 export default defineComponent({
@@ -48,7 +49,9 @@ export default defineComponent({
   data(): IData {
     return {
       task: undefined,
-      job: 0
+      job: 0,
+      // @ts-ignore
+      timer: undefined
     };
   },
   computed: {
@@ -72,23 +75,45 @@ export default defineComponent({
     },
     application() {
       return this.$store.state.pika.application;
+    },
+    tasks() {
+      return this.$store.state.pika.tasks;
+    }
+  },
+  watch: {
+    tasks: {
+      handler(value, oldValue) {
+        // scroll down if new tasks are added
+        if (value?.items?.length > oldValue?.items?.length) {
+          console.debug('new tasks detected');
+          // this.onScrollDown();
+        }
+      },
+      deep: true
     }
   },
   async mounted() {
     await this.onGetService();
     await this.onGetApplication();
     await this.onScrollDown();
     await this.onGetTasks();
-    await this.onScrollDown();
+    // await this.onScrollDown();
     // @ts-ignore
     this.job = setInterval(() => {
       this.onGetTasks();
     }, 5000);
   },
   async unmounted() {
     clearInterval(this.job);
+    clearInterval(this.timer);
   },
   methods: {
+    async onReachTop() {
+      console.debug('reached top');
+      await this.onGetTasks({
+        createdAtMax: this.tasks?.items?.[0]?.created_at
+      });
+    },
     async onGetService() {
       console.debug('start onGetService');
       await this.$store.dispatch('pika/getService');
@@ -125,14 +150,18 @@ export default defineComponent({
         }
       }, 500);
     },
-    async onGetTasks() {
+    async onGetTasks(payload?: { limit?: number; createdAtMin?: number; createdAtMax?: number }) {
       if (this.loading) {
         console.debug('loading');
         return;
       }
+      console.debug('start onGetTasks', payload);
+      const { limit = 5, createdAtMin, createdAtMax } = payload || {};
+      console.debug('limit', limit, 'createdAtMin', createdAtMin, 'createdAtMax', createdAtMax);
       await this.$store.dispatch('pika/getTasks', {
-        limit: 30,
-        offset: 0
+        limit,
+        createdAtMin,
+        createdAtMax
       });
     },
     async onGenerateVideo() {
@@ -165,8 +194,10 @@ export default defineComponent({
           }
         })
         .finally(async () => {
-          await this.onGetTasks();
-          await this.onScrollDown();
+          setTimeout(async () => {
+            await this.onGetTasks();
+            await this.onScrollDown();
+          }, 1000);
         });
     }
   }

src/pages/suno/Index.vue

@@ -149,10 +149,8 @@ export default defineComponent({
       setTimeout(() => {
         // scroll to bottom for `.recent`
         const el = document.querySelector('.recent');
-        console.log('onScrollDown  ', el, el.scrollTop, el.scrollHeight);
         if (el) {
           el.scrollTop = el.scrollHeight;
-          console.log('onScrollDown  ', el.scrollTop, el.scrollHeight);
         }
       }, 1000);
     },