Merge branch 'front-dev' of http://git.choozmo.com:3000/ai-anchor/video-maker

frontend/src/api.ts

@@ -15,14 +15,12 @@ export const api = {
     const params = new URLSearchParams();
     params.append("username", username);
     params.append("password", password);
-
     return axios.post(`${apiUrl}/api/v1/login/access-token`, params);
   },
   async qrLogInGetToken(username: string, password: string,ser_no: string) {
     const params = new URLSearchParams();
     params.append("username", username);
     params.append("password", password);
-
     return axios.post(`${apiUrl}/api/v1/login/access-token?add_time_code=${ser_no}`, params);
   },
   async googleLogin(username: string) {

frontend/src/interfaces/index.ts

@@ -39,6 +39,7 @@ export interface MainState {
   notifications: AppNotification[];
   videos: Video[];
   images: Image[];
+  videosWebSocket: WebSocket;
 };
 
 export interface Video {
@@ -71,4 +72,4 @@ export interface Image {
 export interface ImageDownload {
   file_name: string;
   stored_file_name: string;
-}
+}

frontend/src/stores/main.ts

@@ -18,6 +18,7 @@ const defaultState: MainState = {
   notifications: [],
   videos: [],
   images: [],
+  videosWebSocket: new WebSocket(`${wsUrl}/api/v1/videos`)
 };
 
 export const useMainStore = defineStore("MainStoreId", {

frontend/src/views/main/Dashboard.vue

@@ -11,7 +11,6 @@ const userProfile = mainStoreRef.readUserProfile;
 
 const greetedUser = computed(() => {
   const userProfile = mainStoreRef.readUserProfile;
-  console.log("userProfile", userProfile);
 
   if (userProfile.value) {
     if (userProfile.value!.full_name) {
@@ -26,7 +25,7 @@ const greetedUser = computed(() => {
 <template>
   <v-container fluid>
     <v-row dense>
-      <v-col cols="12">
+      <v-col cols="6">
         <v-card class="ma-3 pa-3">
           <v-card-title primary-title>
             <h3>Welcome {{ greetedUser }}</h3>
@@ -67,7 +66,7 @@ const greetedUser = computed(() => {
       </v-card-actions> -->
         </v-card>
       </v-col>
-      <v-col cols="6">
+      <!-- <v-col cols="6">
         <v-card class="ma-3 pa-3 second-item">
           <v-card-title primary-title>
             <h3>已使用秒數</h3>
@@ -86,16 +85,9 @@ const greetedUser = computed(() => {
             >
               查看詳情
             </v-btn>
-            <!-- <v-btn
-              to="/main/profile/password"
-              variant="flat"
-              color="primary"
-              style="padding: 0 15px"
-              >{{ t("changePassword") }}</v-btn
-            > -->
           </v-card-actions>
         </v-card>
-      </v-col>
+      </v-col> -->
       <v-col cols="6">
         <v-card class="ma-3 pa-3 second-item">
           <v-card-title primary-title>
@@ -142,6 +134,9 @@ h4 {
 }
 
 .second-item {
+  height: 255px;
+  display: flex;
+  flex-direction: column;
   strong {
     font-size: 30px;
     font-weight: 500;

frontend/src/views/main/Progress.vue

@@ -8,6 +8,7 @@ const { t } = useI18n();
 const mainStore = useMainStore();
 const mainStoreRef = storeToRefs(mainStore);
 const videos = mainStoreRef.readVideos;
+const WS = mainStore.videosWebSocket;
 
 const headers = [
   {
@@ -34,7 +35,20 @@ function previewVideo(name: String) {
 
 onMounted(async () => {
   await mainStore.actionGetVideos();
+  WS.onmessage = function (e) {
+    console.log('onmessage',e);
+    const data = e.data.split(':');
+    mainStore.videos.map(e=>{
+      if(e.stored_filename===data[0]) {
+        e.progress_state = data[1]; // 影片狀態
+        if (mainStore.userProfile && data[2]) {
+          mainStore.userProfile.available_time = mainStore.userProfile.available_time - parseInt(data[2]); // 使用秒數
+        }
+      }
+    })
+  };
 });
+
 </script>
 
 <template>
@@ -50,15 +64,15 @@ onMounted(async () => {
       :sort-by="[{ key: 'id', order: 'desc' }]"
     >
       <template v-slot:item.progress_state="{ item }">
-        <span v-if="item.raw.progress_state === 'completed'">
+        <span v-if="item.raw.progress_state === 'SUCCESS'">
           <v-icon icon="check_circle" color="success" />
           完成
         </span>
-        <span v-else-if="item.raw.progress_state === 'waiting'">
+        <span v-else-if="item.raw.progress_state === 'PENDING'">
           <v-icon icon="pending" color="warning" />
           等待中
         </span>
-        <span v-else-if="item.raw.progress_state === 'processing'">
+        <span v-else-if="item.raw.progress_state === 'STARTED'">
           <v-progress-circular
             indeterminate
             color="info"
@@ -74,8 +88,8 @@ onMounted(async () => {
       <template v-slot:item.id="{ item }">
         <v-btn
           flat
-          :disabled="item.raw.progress_state !== 'completed'"
-          @click="previewVideo(item.raw.stored_file_name)"
+          :disabled="item.raw.progress_state !== 'SUCCESS'"
+          @click="previewVideo(item.raw.stored_filename)"
         >
           <v-icon icon="play_circle" />
         </v-btn>

frontend/src/views/main/Upload.vue

@@ -3,6 +3,7 @@ import { ref, reactive, watch, computed } from "vue";
 import { useMainStore } from "@/stores/main";
 import { required } from "@/utils";
 import { useI18n } from "vue-i18n";
+import { wsUrl } from "@/env";
 import type { VideoCreate } from "@/interfaces";
 import router from "@/router";
 import Dialog from "@/components/Dialog.vue";
@@ -15,6 +16,8 @@ let dialog = reactive({
 });
 
 const { t } = useI18n();
+const mainStore = useMainStore();
+const WS = mainStore.videosWebSocket;
 const valid = ref(true);
 const title = ref("");
 const zipFiles = ref();
@@ -164,17 +167,16 @@ const getImageUrl = (imgFolder: string, name: string) => {
     .href;
 };
 
-const mainStore = useMainStore();
-
 watch(dialog, (newVal, oldVal) => {
   if (!newVal.show) {
     setTimeout(() => {
       router.push("/main/progress");
-    }, 500);
+    }, 1000);
   }
 });
 
 async function Submit() {
+  WS.send("subscribe");
   setTimeout(() => {
     dialog.show = true;
   }, 2000);
@@ -189,6 +191,7 @@ async function Submit() {
     };
 
     await mainStore.uploadPlot(video_data, zipFiles.value[0]);
+    valid.value = true;
     // (Form as any).value.reset();
   }
 }