video-maker/frontend/src/views/main/Upload.vue

<script setup lang="ts">
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 type { VideoUploaded } from "@/interfaces";
import router from "@/router";
import Dialog from "@/components/Dialog.vue";

const { t } = useI18n();
const mainStore = useMainStore();
const WS = mainStore.videosWebSocket;
const valid = ref(true);
const title = ref("");
const zipFiles = ref();
const Form = ref();
let anchor = ref(0);
let templateId = ref(0);
let selectAnchor = ref("angela");
let selectTemplate = ref("");

// props
let dialog = reactive({
  msg: "",
  state: "info",
  show: false,
});

const anchorList = reactive([
  {
    anchor_id: "angela",
    name: "Angela",
  },
  {
    anchor_id: "peggy",
    name: "Peggy",
  },
  {
    anchor_id: "jocelyn",
    name: "Jocelyn",
  },
  {
    anchor_id: "summer",
    name: "Summer",
  },
]);

const templateList = reactive([
  {
    template_id: "style1",
    img: "鏡面-01",
  },
  {
    template_id: "style2",
    img: "鏡面-02",
  },
  {
    template_id: "style3",
    img: "鏡面-03",
  },
  {
    template_id: "style4",
    img: "鏡面-04",
  },
]);

let anchorLang = ref("中文");
let items = reactive([
  { lang: "中文", id: 0 },
  { lang: "英文", id: 1 },
]);

// 取得圖片路徑
const getImageUrl = (imgFolder: string, name: string) => {
  return new URL(`../../assets/img/${imgFolder}/${name}.png`, import.meta.url)
    .href;
};

watch(dialog, (newVal, oldVal) => {
  if (!newVal.show && newVal.state === "error") {
    return;
  } else if (!newVal.show && newVal.state === "success") {
    router.push("/main/progress");
  }
});

watch(anchor, (newVal) => {
  selectAnchor.value = anchorList[newVal].anchor_id;
});

watch(templateId, (newVal) => {
  selectTemplate.value = templateList[newVal].template_id;
});

async function Submit() {
  WS.send("subscribe");
  await (Form as any).value.validate();
  if (valid.value) {
    valid.value = false;

    const video_data: VideoCreate = {
      title: title.value,
      anchor_id: selectAnchor.value,
      style: selectTemplate.value,
      lang: "zh",
    };
    
    const ret: VideoUploaded = await mainStore.uploadPlot(
      video_data,
      zipFiles.value[0]
    );

    if (ret.accepted) {
      dialog.msg = t("acceptZipMessage");
      dialog.state = "success";
      dialog.show = true;
    } else {
      dialog.msg = ret.error_message!;
      dialog.state = "error";
      dialog.show = true;
    }

    valid.value = true;

    // (Form as any).value.reset();
  }
}
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <h3 class="card-title mb-3">{{ t("makeVideo") }}</h3>
      </v-card-title>
      <v-card-text>
        <v-form v-model="valid" ref="Form">
          <v-text-field
            :label="$t('videoTitle')"
            v-model="title"
            :rules="required"
            prepend-icon="title"
          >
          </v-text-field>
          <v-file-input
            v-model="zipFiles"
            :rules="[(v) => v.length || 'select zip file.']"
            accept=".zip"
            :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-item-group mandatory v-model="anchor">
                <v-container fluid>
                  <ul>
                    <li v-for="n in anchorList" :key="n.anchor_id">
                      <v-item v-slot="{ isSelected, toggle }">
                        <v-card
                          :color="isSelected ? 'primary' : ''"
                          class="d-flex flex-column align-center"
                          dark
                          @click="toggle"
                          :title="n.name"
                        >
                          <v-scroll-y-transition>
                            <!-- <div v-if="n.anchor_id !== 0" class="img-disabled">
                              <img
                                :src="getImageUrl('anchor', n.name)"
                                alt=""
                              />
                              <p>Coming Soon</p>
                            </div> -->
                            <img
                              :src="getImageUrl('anchor', n.anchor_id)"
                              alt=""
                            />
                          </v-scroll-y-transition>
                        </v-card>
                      </v-item>
                    </li>
                  </ul>
                </v-container>
              </v-item-group>
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>

        <v-expansion-panels class="template-list mt-6">
          <v-expansion-panel title="選擇模板">
            <v-expansion-panel-text class="p-0">
              <v-sheet class="mx-auto">
                <v-slide-group
                  v-model="templateId"
                  selected-class="bg-primary"
                  show-arrows
                >
                  <v-slide-group-item
                    v-for="n in templateList"
                    :key="n.template_id"
                    v-slot="{ isSelected, toggle, selectedClass }"
                  >
                    <v-card
                      color="grey-lighten-1"
                      :class="['ma-4', selectedClass]"
                      @click="toggle"
                    >
                      <span
                        class="choose-btn"
                        :class="{ 'active-color': isSelected }"
                      >
                        <v-icon icon="done" color="white" />
                      </span>
                      <img :src="getImageUrl('template', n.img)" alt="" />
                      <!-- <div :class="{ 'img-disabled': n.template_id !== 0 }">
                        <img :src="getImageUrl('template', n.img)" alt="" />
                        <p v-if="n.template_id !== 0">Coming Soon</p>
                      </div> -->
                    </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>
        <v-btn @click="Submit" :disabled="!valid" variant="outlined">
          {{ t("send") }}
        </v-btn>
      </v-card-actions>
    </v-card>

    <v-card class="ma-3 pa-3 mt-8">
      <v-card-title primary-title>
        <h3 class="text-center">使用教學</h3>
      </v-card-title>
      <v-card-text>
        <ul class="mt-5 step-list">
          <li>
            <h4>1. 取得快速製作模板</h4>
            <p class="excerpt">請點擊下方按鈕取得模板範例</p>
            <div class="mb-5">
              <a :href="'/example/影片範例.zip'" class="link-btn" download
                >點我下載</a
              >
            </div>
          </li>
          <li>
            <h4>2. 準備影片內容</h4>
            <p class="excerpt text-center">
              範例的資料夾內，有 "素材資料夾" 跟 "EXCEL 檔" <br />
              （您也可以自行創建資料夾）
            </p>
            <img src="@/assets/img/step/step-01.png" alt="" class="mb-4" />
            <p class="excerpt">素材資料夾裡面放照片或影片</p>
            <img src="@/assets/img/step/step-02.png" alt="" />
            <small class="d-block ms-4"
              >包含內容：圖片／影片（.jpg／.mp4）</small
            >
            <p class="mt-5 excerpt">
              EXCEL 檔整理成這個格式－大標、字幕、素材、發音
            </p>
            <img src="@/assets/img/step/step-03.png" alt="" />
            <ul class="point-list">
              <li>
                1. 字幕之間的斷句請使用符號【\】進行換行
                <br />
                （建議 10 個字內，若超過請使用換行符號）
              </li>
              <li>2. 大標字數勿超過中文 15 字、英文 30 字</li>
              <li>3. 音檔請留空白</li>
            </ul>
            <p class="mt-5 excerpt">以下為顯示效果：</p>
            <img src="@/assets/img/step/step-04.png" alt="" />
            <p class="mt-5 excerpt">
              接下來同時選素材資料夾跟 EXCEL 檔，壓縮成 ZIP 檔
            </p>
            <img src="@/assets/img/step/step-05.png" alt="" class="my-5" />
          </li>
          <li>
            <h4>3. 上傳 ZIP 資料夾至 AI Spokesgirl 平台</h4>
            <p class="excerpt">影片檔名請寫上影片名稱</p>
            <img src="@/assets/img/step/step-06.png" alt="" />
            <h4 class="my-5 caption">
              點選“送出”之後需等待一段影片製作的時間 <br />
              請您耐心等候，待製作完畢可於影片清單查看
            </h4>
          </li>
        </ul>
      </v-card-text>
    </v-card>

    <template>
      <div class="text-center">
        <Dialog
          :msg="dialog.msg"
          :state="dialog.state"
          :dialog="dialog.show"
          @close="dialog.show = false"
        ></Dialog>
      </div>
    </template>
  </v-container>
</template>

<style lang="scss">
.anchor-list {
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
    grid-gap: 20px;
    justify-content: center;
    padding: initial;
    li {
      list-style-type: none;
    }
  }
  img {
    width: 100%;
    height: 140px;
    object-fit: cover;
  }

  .v-card--variant-elevated {
    box-shadow: 0px 2px 5px 1px
        var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
      0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
      0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
  }

  .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-text__wrapper {
    padding: 0 !important;
  }
}

.anchor-list,
.template-list {
  padding-left: 40px;
  .v-expansion-panel-title {
    height: 55px;
    min-height: 0;
  }
}

.template-list {
  img {
    width: 100%;
    height: 180px;
  }
  .choose-btn {
    padding: 5px;
    position: absolute;
    right: 8px;
    bottom: 13px;
    background: #ccc;
    border-radius: 100px;
  }
  .active-color {
    background: #ea5413;
  }
}

.step-list {
  list-style: none;
  img {
    width: 100%;
    max-width: 800px;
  }
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    p {
      line-height: 32px;
    }
    h4 {
      margin: 20px auto;
      color: #ea5413;
      font-weight: bold;
      text-align: center;
      line-height: 34px;
      font-size: 20px;
    }
  }

  .link-btn {
    display: inline-block;
    padding: 12px 20px;
    margin-top: 25px;
    border-radius: 100px;
    text-decoration: none;
    color: #fff;
    background: #ea5413;
    transition: all 0.3s;
    &:hover {
      opacity: 0.8;
    }
  }

  .point-list {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-left: 40px;
  }

  .excerpt::before {
    content: "";
    font-weight: bold;
    display: inline-block;
    border: 5px solid #ea5413;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 2px;
  }
}

.img-disabled {
  position: relative;
  z-index: 999;
  background-color: #ccc;
  margin-bottom: -5px;
  img {
    opacity: 0.7;
  }
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
    font-size: 16px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 2px 2px 6px #000;
  }
}

.v-card--disabled > :not(.v-card__loader) {
  opacity: 1 !important;
}
</style>