Fix suno task experience (#86)

Co-authored-by: Germey <germey@acedata.cloud>

change/@acedatacloud-nexior-f23d8358-3ea1-426d-9e84-9da19ec229c6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix suno task processing",
+  "packageName": "@acedatacloud/nexior",
+  "email": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}

src/components/suno/RecentPanel.vue

@@ -39,7 +39,6 @@ import { defineComponent } from 'vue';
 import TaskPreview from './task/Preview.vue';
 import Player from '@/components/suno/player/Player.vue';
 import { ElSkeleton, ElSkeletonItem } from 'element-plus';
-// import { ISunoAudio, ISunoAudioLyric, ISunoTask } from '@/models';
 
 export default defineComponent({
   name: 'RecentPanel',

src/components/suno/task/Preview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="task">
     <div v-for="(audio, audioIndex) in audios" :key="audioIndex" class="audio" @click="onClick(audio)">
-      <div v-loading="!audio?.audio_url" class="left">
+      <div v-loading="!audio?.audio_url || !audio?.video_url" class="left">
         <el-image :src="audio?.image_url" class="cover" fit="cover" />
         <div
           v-if="
@@ -41,7 +41,7 @@
 import { defineComponent } from 'vue';
 import { useFormatDuring } from '@/utils/number';
 import { ISunoAudio, ISunoTask } from '@/models';
-import { ElButton, ElImage, ElIcon } from 'element-plus';
+import { ElImage, ElIcon } from 'element-plus';
 import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 
 export default defineComponent({

src/pages/suno/Index.vue

@@ -79,6 +79,21 @@ export default defineComponent({
     },
     application() {
       return this.$store.state.suno.application;
+    },
+    tasks() {
+      return this.$store.state.suno.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() {
@@ -125,12 +140,12 @@ export default defineComponent({
     },
     async onScrollDown() {
       setTimeout(() => {
-        // scroll to bottom for `.tasks`
-        const el = document.querySelector('.tasks');
+        // scroll to bottom for `.recent`
+        const el = document.querySelector('.recent');
         if (el) {
           el.scrollTop = el.scrollHeight;
         }
-      }, 500);
+      }, 1000);
     },
     async onGetTasks() {
       if (this.loading) {