add green screen

frontend/src/language/en.json

@@ -70,5 +70,6 @@
     "required": "This field is required.",
     "emailRules": "Must be a valid e-mail.",
     "phoneNumber": "Phone Number (optional)",
-    "feedback": "Feedback"
+    "feedback": "Feedback",
+    "green_screen": "Green Screen"
 }

frontend/src/language/zh.json

@@ -70,5 +70,6 @@
     "required": "此為必填欄位",
     "emailRules": "請輸入有效的電子郵件格式",
     "phoneNumber": "手機號碼（非必填）",
-    "feedback": "意見回饋"
+    "feedback": "意見回饋",
+    "green_screen": "綠幕"
 }

frontend/src/views/main/Progress.vue

@@ -27,6 +27,10 @@ const headers = [
     title: t("preview"),
     key: "id",
   },
+  {
+    title: t("green_screen"),
+    key: "green_screen",
+  },
 ];
 
 function previewVideo(name: String) {
@@ -36,19 +40,19 @@ 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]) {
+    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]); // 使用秒數
+          mainStore.userProfile.available_time =
+            mainStore.userProfile.available_time - parseInt(data[2]); // 使用秒數
         }
       }
-    })
+    });
   };
 });
-
 </script>
 
 <template>
@@ -94,6 +98,14 @@ onMounted(async () => {
           <v-icon icon="play_circle" />
         </v-btn>
       </template>
+      <template v-slot:item.green_screen="{ item }">
+        <a
+          :href="`http://172.104.93.163:30080/${item.raw.stored_filename}_bg.mp4`"
+          target="_blank"
+        >
+          <v-icon icon="file_download" />
+        </a>
+      </template>
     </v-data-table>
   </div>
 </template>