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

frontend/src/stores/main.ts

@@ -4,7 +4,7 @@ import { api } from "@/api"
 import router from "@/router"
 import { getLocalToken, removeLocalToken, saveLocalToken } from "@/utils";
 import type { AppNotification } from '@/interfaces';
-import type { IUserProfile, IUserProfileCreate, IUserProfileUpdate, MainState, Video } from '@/interfaces';
+import type { IUserProfile, IUserProfileCreate, IUserProfileUpdate, MainState, Video, VideoCreate } from '@/interfaces';
 import i18n from '@/plugins/i18n'
 
 const defaultState: MainState = {
@@ -233,14 +233,14 @@ export const useMainStore = defineStore("MainStoreId", {
         });
       }
     },
-    async uploadPlot(title: string, file: File) {
+    async uploadPlot(video_data: VideoCreate, file: File) {
       const mainStore = useMainStore();
       try {
         const loadingNotification = { content: i18n.global.t("sending"), showProgress: true };
         mainStore.addNotification(loadingNotification);
         const response = (
           await Promise.all([
-            api.uploadPlot(mainStore.token, title, file),
+            api.uploadPlot(mainStore.token, video_data, file),
             await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 0)),
           ])
         );

frontend/src/views/main/Upload.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useMainStore } from "@/stores/main";
 import { required } from "@/utils";
 import { useI18n } from "vue-i18n";
+import type { VideoCreate } from "@/interfaces";
 import router from "@/router";
 
 const { t } = useI18n();
@@ -11,6 +12,40 @@ const dialog = ref(false);
 const title = ref("");
 const zipFiles = ref();
 const Form = ref();
+let anchor = ref(0);
+const anchorList = reactive([
+  {
+    anchor_id: 0,
+    language_id: 1,
+    name: "Angela",
+  },
+  {
+    anchor_id: 1,
+    language_id: 1,
+    name: "Peggy",
+  },
+  {
+    anchor_id: 2,
+    language_id: 1,
+    name: "Jocelyn",
+  },
+  {
+    anchor_id: 3,
+    language_id: 1,
+    name: "Summer",
+  },
+]);
+
+let anchorLang = ref("中文");
+let items = reactive([
+  { lang: "中文", id: 0 },
+  { lang: "英文", id: 1 },
+]);
+
+// 取得圖片路徑
+const getImageUrl = (name: string) => {
+  return new URL(`../../assets/img/anchor/${name}.webp`, import.meta.url).href;
+};
 
 const mainStore = useMainStore();
 
@@ -27,7 +62,14 @@ async function Submit() {
   await (Form as any).value.validate();
   if (valid.value) {
     valid.value = false;
-    await mainStore.uploadPlot(title.value, zipFiles.value[0]);
+
+    const video_data: VideoCreate = {
+      title: title.value,
+      anchor_id: anchor.value,
+      lang_id: 0,
+    };
+
+    await mainStore.uploadPlot(video_data, zipFiles.value[0]);
     // (Form as any).value.reset();
   }
 }
@@ -55,7 +97,45 @@ async function Submit() {
             :label="$t('fileInput')"
             prepend-icon="folder_zip"
           ></v-file-input>
+
+          <!-- <v-select
+            v-model="anchorLang"
+            :items="items"
+            item-title="lang"
+            item-value="id"
+            prepend-icon="language"
+            label="選擇語言"
+          ></v-select> -->
         </v-form>
+
+        <v-expansion-panels class="anchor-list">
+          <v-expansion-panel title="選擇主播">
+            <v-expansion-panel-text class="p-0">
+              <v-sheet class="mx-auto">
+                <v-slide-group
+                  v-model="anchor"
+                  selected-class="bg-success"
+                  show-arrows
+                >
+                  <v-slide-group-item
+                    v-for="n in anchorList"
+                    :key="n.anchor_id"
+                    v-slot="{ isSelected, toggle, selectedClass }"
+                  >
+                    <v-card
+                      color="grey-lighten-1"
+                      :class="['ma-4', selectedClass]"
+                      @click="toggle"
+                      :title="n.name"
+                    >
+                      <img :src="getImageUrl(n.name)" alt="" />
+                    </v-card>
+                  </v-slide-group-item>
+                </v-slide-group>
+              </v-sheet>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
@@ -83,7 +163,8 @@ async function Submit() {
           <li>
             <h4>2. 準備影片內容</h4>
             <p class="excerpt text-center">
-              範例的資料夾內，有 "素材資料夾" 跟 "EXCEL 檔" <br> （您也可以自行創建資料夾）
+              範例的資料夾內，有 "素材資料夾" 跟 "EXCEL 檔" <br />
+              （您也可以自行創建資料夾）
             </p>
             <img src="@/assets/img/step/step-01.png" alt="" class="mb-4" />
             <p class="excerpt">素材資料夾裡面放照片或影片</p>
@@ -96,8 +177,9 @@ async function Submit() {
             </p>
             <img src="@/assets/img/step/step-03.png" alt="" />
             <ul class="point-list">
-              <li>1. 字幕之間的斷句請使用符號【\】進行換行
-                <br>
+              <li>
+                1. 字幕之間的斷句請使用符號【\】進行換行
+                <br />
                 （建議 10 個字內，若超過請使用換行符號）
               </li>
               <li>2. 字幕段落勿超過中文 25 字、英文 50 字</li>
@@ -151,6 +233,35 @@ async function Submit() {
 </template>
 
 <style lang="scss">
+.anchor-list {
+  padding-left: 40px;
+  img {
+    width: 130px;
+    height: 110px;
+    object-fit: cover;
+  }
+  .v-card-item {
+    padding: 0;
+    text-align: center;
+    .v-card-title {
+      font-size: 18px;
+    }
+  }
+  .bg-success {
+    background: linear-gradient(
+      -225deg,
+      rgb(234, 84, 19) 35%,
+      rgb(178, 69, 146) 100%
+    ) !important;
+  }
+  .v-expansion-panel-title {
+    height: 55px;
+    min-height: 0;
+  }
+  .v-expansion-panel-text__wrapper {
+    padding: 0 !important;
+  }
+}
 .step-list {
   list-style: none;
   img {