Merge branch 'front-dev' of ai-anchor/video-maker into master

frontend/src/components/Dialog.vue

@@ -45,7 +45,7 @@ function close() {
         <section class="d-flex flex-column align-center">
           <v-icon style="font-size: 70px" :icon="icon" :color="state" />
           <!-- <p class="mt-3">{{ msg }}</p> -->
-          <p  v-html="msg" class="mt-3 text-center"></p>
+          <p v-html="msg" class="mt-3 text-center"></p>
         </section>
       </v-card-text>
       <v-card-actions class="d-flex justify-space-evenly">

frontend/src/components/NotificationsManager.vue

@@ -10,6 +10,7 @@ const show = ref(false);
 const showProgress = ref(false);
 const currentNotification = ref<AppNotification | false>(false);
 const currentNotificationFlag = ref(false);
+let state = ref<string | undefined>("");
 
 const mainStore = useMainStore();
 const mainStoreRef = storeToRefs(mainStore);
@@ -26,8 +27,6 @@ const currentNotificationColor = computed(() => {
 const firstNotification = mainStoreRef.readFirstNotification;
 
 async function hide() {
-  console.log('hide');
-  
   show.value = false;
   await new Promise<void>((resolve, reject) =>
     setTimeout(() => resolve(), 500)
@@ -60,7 +59,9 @@ async function setNotification(notification: AppNotification | false) {
   // if (show.value) {
   //   await hide();
   // }
+
   if (notification) {
+    state.value = notification.color;
     currentNotification.value = notification;
     showProgress.value = notification.showProgress || false;
     show.value = true;
@@ -72,7 +73,13 @@ async function setNotification(notification: AppNotification | false) {
 
 <template>
   <div>
-    <v-snackbar auto-height :color="currentNotificationColor" v-model="show">
+    <v-snackbar
+      auto-height
+      :color="currentNotificationColor"
+      v-model="show"
+      v-if="state !== 'error'"
+      timeout="-1"
+    >
       <v-progress-circular
         class="mx-3"
         indeterminate

frontend/src/language/en.json

@@ -54,6 +54,7 @@
     "sending": "sending",
     "fileInput": "File input",
     "fileReceived": "File received",
+    "uploadFailed": "Upload failed",
     "profileUpdated": "Profile successfully updated",
     "editUserProfile": "Edit User Profile",
     "incorrectUsername": "Incorrect username",

frontend/src/language/zh.json

@@ -54,6 +54,7 @@
     "sending": "上傳中",
     "fileInput": "上傳 ZIP 檔",
     "fileReceived": "上傳成功",
+    "uploadFailed": "上傳失敗",
     "profileUpdated": "更新成功",
     "editUserProfile": "編輯資料",
     "incorrectUsername": "使用者名稱不正確",

frontend/src/stores/main.ts

@@ -117,7 +117,7 @@ export const useMainStore = defineStore("MainStoreId", {
         const response = await api.qrAddTime(this.token, code);
         return response;
       } catch (error) {
-        console.log('error',error);
+        console.log('error', error);
         return error;
       }
     },
@@ -314,21 +314,33 @@ export const useMainStore = defineStore("MainStoreId", {
         mainStore.addNotification(loadingNotification);
         const response = (
           await Promise.all([
-            api.uploadPlot(mainStore.token, video_data, file),
+            await api.uploadPlot(mainStore.token, video_data, file),
             await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
           ])
         );
         mainStore.removeNotification(loadingNotification);
-        mainStore.addNotification({
-          content: i18n.global.t("fileReceived"),
-          color: "success",
-        })
+        if (response[0].data.accepted !== false) {
+          mainStore.addNotification({
+            content: i18n.global.t("fileReceived"),
+            color: "success",
+          })
+        } else {
+          mainStore.addNotification({
+            content: i18n.global.t("uploadFailed"),
+            color: "error",
+          })
+        }
+        // mainStore.removeNotification(loadingNotification);
+        // mainStore.addNotification({
+        //   content: i18n.global.t("fileReceived"),
+        //   color: "success",
+        // })
         this.actionGetVideos();
         return response[0].data;
       } catch (error) {
         await mainStore.checkApiError(error);
       }
-      const ret: VideoUploaded = {accepted:false, error_message:"api error", video_info: null}
+      const ret: VideoUploaded = { accepted: false, error_message: "api error", video_info: null }
       return ret
     },
     async uploadImage(file: File[]) {

frontend/src/views/main/Upload.vue

@@ -169,17 +169,15 @@ const getImageUrl = (imgFolder: string, name: string) => {
 };
 
 watch(dialog, (newVal, oldVal) => {
-  if (!newVal.show) {
-    console.log('show false')
+  if (!newVal.show && newVal.state === "error") {
+    return;
+  } else if (!newVal.show && newVal.state === "success") {
     router.push("/main/progress");
   }
 });
 
 async function Submit() {
   WS.send("subscribe");
-  // setTimeout(() => {
-  //   dialog.show = true;
-  // }, 2000);
   await (Form as any).value.validate();
   if (valid.value) {
     valid.value = false;
@@ -192,16 +190,17 @@ async function Submit() {
 
     const ret:VideoUploaded = await mainStore.uploadPlot(video_data, zipFiles.value[0]);
     if (ret.accepted) {
-      dialog.msg = t("acceptZipMessage")
+      dialog.msg = t("acceptZipMessage");
+      dialog.state = "success";
+      dialog.show = true;
     }
     else {
-      dialog.msg = ret.error_message!
+      dialog.msg = ret.error_message!;
+      dialog.state = "error";
+      dialog.show = true;
     }
-    setTimeout(() => {
-    dialog.show = true;
-  }, 2000);
     valid.value = true;
-    (Form as any).value.reset();
+    // (Form as any).value.reset();
   }
 }
 </script>