Commit ae2303a8 authored by Dazzle Wu's avatar Dazzle Wu

chore: 修改视频配置时才保存草稿

parent 92203163
...@@ -7,10 +7,7 @@ function defaultDigitalCreation(): DraftConfig { ...@@ -7,10 +7,7 @@ function defaultDigitalCreation(): DraftConfig {
id: null, id: null,
coverUrl: null, coverUrl: null,
draftName: '', draftName: '',
videoName: '',
videoDuration: null,
taskType: TaskType.BASE_VIDEO, taskType: TaskType.BASE_VIDEO,
requestId: null,
inputImageUrl: null, inputImageUrl: null,
driveType: DriveType.TEXT, driveType: DriveType.TEXT,
text: '', text: '',
...@@ -19,16 +16,14 @@ function defaultDigitalCreation(): DraftConfig { ...@@ -19,16 +16,14 @@ function defaultDigitalCreation(): DraftConfig {
volume: '5', volume: '5',
pitch: '5', pitch: '5',
inputAudioUrl: null, inputAudioUrl: null,
callbackUrl: null,
figureId: null, figureId: null,
width: 720, width: 720,
height: 1280, height: 1280,
transparent: 'N',
cameraId: null, cameraId: null,
x: 0, x: 0,
y: 0, y: 0,
w: 0, w: 1080,
h: 0, h: 1920,
subtitlePolicy: 'SRT', subtitlePolicy: 'SRT',
enabled: 'N', enabled: 'N',
backgroundImageUrl: null, backgroundImageUrl: null,
......
...@@ -68,10 +68,7 @@ export interface DraftConfig { ...@@ -68,10 +68,7 @@ export interface DraftConfig {
id: number | null id: number | null
coverUrl: string | null coverUrl: string | null
draftName: string draftName: string
videoName: string
videoDuration: number | null
taskType: TaskType taskType: TaskType
requestId: string | null
inputImageUrl: string | null inputImageUrl: string | null
driveType: DriveType driveType: DriveType
text: string text: string
...@@ -80,11 +77,9 @@ export interface DraftConfig { ...@@ -80,11 +77,9 @@ export interface DraftConfig {
volume: string volume: string
pitch: string pitch: string
inputAudioUrl: string | null inputAudioUrl: string | null
callbackUrl: string | null
figureId: string | null figureId: string | null
width: number width: number
height: number height: number
transparent: string
cameraId: number | null cameraId: number | null
x: number x: number
y: number y: number
......
...@@ -4,6 +4,7 @@ import { fetchUniversalCurrency } from '@/apis/user' ...@@ -4,6 +4,7 @@ import { fetchUniversalCurrency } from '@/apis/user'
import { useAudioSettingStore } from '@/store/modules/audio-setting' import { useAudioSettingStore } from '@/store/modules/audio-setting'
import { useDigitalCreationStore } from '@/store/modules/creation' import { useDigitalCreationStore } from '@/store/modules/creation'
import { BaseVideoTask, DraftConfig } from '@/store/types/creation' import { BaseVideoTask, DraftConfig } from '@/store/types/creation'
import { isEqual } from 'lodash-es'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue' import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
...@@ -11,17 +12,19 @@ const router = useRouter() ...@@ -11,17 +12,19 @@ const router = useRouter()
const audioSettingStore = useAudioSettingStore() const audioSettingStore = useAudioSettingStore()
const digitalCreationStore = useDigitalCreationStore() const digitalCreationStore = useDigitalCreationStore()
const draftName = ref('') const draftName = ref('')
const videoName = ref('')
const transparent = ref('N')
const userCurrency = ref(0) const userCurrency = ref(0)
const editDraftName = ref(false) const editDraftName = ref(false)
const autoSaveSuccess = ref(false) const autoSaveSuccess = ref(false)
const showExportModal = ref(false) const showExportModal = ref(false)
const isExporting = ref(false) const isExporting = ref(false)
// const ratioValue = ref(720) const savedConfig = ref<DraftConfig>()
const ratioList = [ const ratioList = [
{ value: 720, label: '720p' }, { value: 720, label: '720p' },
{ value: 1080, label: '1080p' }, { value: 1080, label: '1080p' },
] ]
const transparent = [ const transparentList = [
{ value: 'N', label: '全部' }, { value: 'N', label: '全部' },
{ value: 'Y', label: '僅數字人(透明背景)' }, { value: 'Y', label: '僅數字人(透明背景)' },
] ]
...@@ -67,12 +70,17 @@ watch( ...@@ -67,12 +70,17 @@ watch(
onMounted(() => { onMounted(() => {
getUniversalCurrency() getUniversalCurrency()
timer = setInterval(() => { timer = setInterval(() => {
!isExporting.value && saveDraft() const unsavedConfig = { ...digitalCreationStore.$state, modifiedTime: '' }
const isModified = !isEqual(unsavedConfig, savedConfig.value)
if (!savedConfig.value || (isModified && !isExporting.value)) {
saveDraft()
}
}, 5000) }, 5000)
}) })
onUnmounted(() => { onUnmounted(async () => {
saveDraft() await saveDraft()
digitalCreationStore.resetDigitalCreation()
clearInterval(timer) clearInterval(timer)
timer = null timer = null
}) })
...@@ -99,6 +107,8 @@ async function saveDraft(autoSave: boolean = true) { ...@@ -99,6 +107,8 @@ async function saveDraft(autoSave: boolean = true) {
if (res.code === 0) { if (res.code === 0) {
autoSave ? (autoSaveSuccess.value = true) : window.$message.success('保存成功') autoSave ? (autoSaveSuccess.value = true) : window.$message.success('保存成功')
digitalCreationStore.updateDigitalCreation(res.data) digitalCreationStore.updateDigitalCreation(res.data)
const temp: DraftConfig = { ...res.data, modifiedTime: '' }
savedConfig.value = temp
} }
} }
...@@ -111,7 +121,7 @@ async function calculateConsumption() { ...@@ -111,7 +121,7 @@ async function calculateConsumption() {
// 导出视频 // 导出视频
function confirmExport() { function confirmExport() {
if (!digitalCreationStore.videoName) { if (!videoName.value) {
window.$message.error('請輸入視頻名稱') window.$message.error('請輸入視頻名稱')
return false return false
} }
...@@ -126,10 +136,10 @@ async function createBaseVideoTask() { ...@@ -126,10 +136,10 @@ async function createBaseVideoTask() {
isExporting.value = true isExporting.value = true
const payload: BaseVideoTask = { const payload: BaseVideoTask = {
draftId: digitalCreationStore.id!, draftId: digitalCreationStore.id!,
videoName: digitalCreationStore.videoName, videoName: videoName.value,
width: digitalCreationStore.width, width: digitalCreationStore.width,
height: digitalCreationStore.height, height: digitalCreationStore.height,
transparent: digitalCreationStore.transparent, transparent: transparent.value,
videoType: 'mp4', videoType: 'mp4',
audioUrl: digitalCreationStore.inputAudioUrl!, audioUrl: digitalCreationStore.inputAudioUrl!,
} }
...@@ -186,7 +196,7 @@ async function getUniversalCurrency() { ...@@ -186,7 +196,7 @@ async function getUniversalCurrency() {
<n-modal v-model:show="showExportModal" preset="dialog" title="導出視頻" @after-leave="isExporting = false"> <n-modal v-model:show="showExportModal" preset="dialog" title="導出視頻" @after-leave="isExporting = false">
<n-form ref="formRef" :label-width="100" label-placement="left"> <n-form ref="formRef" :label-width="100" label-placement="left">
<n-form-item label="視頻名稱" required> <n-form-item label="視頻名稱" required>
<n-input v-model:value="digitalCreationStore.videoName" placeholder="請輸入視頻名稱" /> <n-input v-model:value="videoName" placeholder="請輸入視頻名稱" />
</n-form-item> </n-form-item>
<n-form-item label="視頻分辨率" required> <n-form-item label="視頻分辨率" required>
<n-radio-group v-model:value="ratioValue" name="ratio"> <n-radio-group v-model:value="ratioValue" name="ratio">
...@@ -198,9 +208,9 @@ async function getUniversalCurrency() { ...@@ -198,9 +208,9 @@ async function getUniversalCurrency() {
</n-radio-group> </n-radio-group>
</n-form-item> </n-form-item>
<n-form-item label="導出範圍" required> <n-form-item label="導出範圍" required>
<n-radio-group v-model:value="digitalCreationStore.transparent" name="transparent"> <n-radio-group v-model:value="transparent" name="transparent">
<n-space> <n-space>
<n-radio v-for="item in transparent" :key="item.value" :value="item.value"> <n-radio v-for="item in transparentList" :key="item.value" :value="item.value">
{{ item.label }} {{ item.label }}
</n-radio> </n-radio>
</n-space> </n-space>
......
<script setup lang="ts"> <script setup lang="ts">
import { fetchDraftConfigById } from '@/apis/digital-creation' import { fetchDraftConfigById } from '@/apis/digital-creation'
import { fetchGetTaskConfig } from '@/apis/opus'
import { fetchDigitalHumanTemplateStatus } from '@/apis/template' import { fetchDigitalHumanTemplateStatus } from '@/apis/template'
import { useDigitalCreationStore } from '@/store/modules/creation' import { useDigitalCreationStore } from '@/store/modules/creation'
import { DraftConfig, LangType } from '@/store/types/creation' import { DraftConfig } from '@/store/types/creation'
import { DigitalTemplate } from '@/store/types/template' import { DigitalTemplate } from '@/store/types/template'
import { formatDateTime } from '@/utils/date-formatter'
import { onMounted } from 'vue' import { onMounted } from 'vue'
import HeaderBar from './header-bar.vue' import HeaderBar from './header-bar.vue'
import MainContent from './main-content.vue' import MainContent from './main-content.vue'
import SideBar from './side-bar.vue' import SideBar from './side-bar.vue'
import { fetchGetTaskConfig } from '@/apis/opus'
interface Props { interface Props {
templateId?: string templateId?: string
...@@ -37,30 +38,25 @@ async function getDigitalTemplate(id: string) { ...@@ -37,30 +38,25 @@ async function getDigitalTemplate(id: string) {
const draftConfig: DraftConfig = { const draftConfig: DraftConfig = {
id: null, id: null,
coverUrl: digitalTemplate.coverUrl, coverUrl: digitalTemplate.coverUrl,
draftName: `新建數字人視頻`, draftName: '新建數字人視頻' + formatDateTime(new Date()),
videoName: '',
videoDuration: null,
taskType: digitalTemplate.taskType, taskType: digitalTemplate.taskType,
requestId: digitalTemplate.requestId,
inputImageUrl: digitalTemplate.digitalHumanImageUrl, inputImageUrl: digitalTemplate.digitalHumanImageUrl,
driveType: digitalTemplate.driveType, driveType: digitalTemplate.driveType,
text: digitalTemplate.text, text: digitalTemplate.text,
person: digitalTemplate.ttsParams?.person || null, person: digitalTemplate.ttsParams?.person || digitalCreationStore.person,
speed: digitalTemplate.ttsParams?.speed || '5', speed: digitalTemplate.ttsParams?.speed || digitalCreationStore.speed,
volume: digitalTemplate.ttsParams?.volume || '5', volume: digitalTemplate.ttsParams?.volume || digitalCreationStore.volume,
pitch: digitalTemplate.ttsParams?.pitch || '5', pitch: digitalTemplate.ttsParams?.pitch || digitalCreationStore.pitch,
inputAudioUrl: digitalTemplate.inputAudioUrl, inputAudioUrl: digitalTemplate.inputAudioUrl,
callbackUrl: digitalTemplate.callbackUrl,
figureId: digitalTemplate.figureId, figureId: digitalTemplate.figureId,
width: digitalTemplate.videoParams?.width || 1080, width: digitalTemplate.videoParams?.width || digitalCreationStore.width,
height: digitalTemplate.videoParams?.height || 1920, height: digitalTemplate.videoParams?.height || digitalCreationStore.height,
transparent: digitalTemplate.videoParams?.transparent ? 'Y' : 'N',
cameraId: digitalTemplate.dhParams?.cameraId || null, cameraId: digitalTemplate.dhParams?.cameraId || null,
x: digitalTemplate.dhParams?.position.x || 0, x: digitalTemplate.dhParams?.position.x || digitalCreationStore.x,
y: digitalTemplate.dhParams?.position.y || 0, w: digitalTemplate.dhParams?.position.w || digitalCreationStore.w,
w: digitalTemplate.dhParams?.position.w || 0, y: digitalTemplate.dhParams?.position.y || digitalCreationStore.y,
h: digitalTemplate.dhParams?.position.h || 0, h: digitalTemplate.dhParams?.position.h || digitalCreationStore.h,
subtitlePolicy: digitalTemplate.subtitleParams?.subtitlePolicy || 'SRT', subtitlePolicy: digitalTemplate.subtitleParams?.subtitlePolicy || digitalCreationStore.subtitlePolicy,
enabled: digitalTemplate.subtitleParams?.enabled ? 'Y' : 'N', enabled: digitalTemplate.subtitleParams?.enabled ? 'Y' : 'N',
backgroundImageUrl: digitalTemplate.backgroundImageUrl, backgroundImageUrl: digitalTemplate.backgroundImageUrl,
autoAnimoji: digitalTemplate.autoAnimoji ? 'Y' : 'N', autoAnimoji: digitalTemplate.autoAnimoji ? 'Y' : 'N',
...@@ -70,7 +66,7 @@ async function getDigitalTemplate(id: string) { ...@@ -70,7 +66,7 @@ async function getDigitalTemplate(id: string) {
logoUrl: digitalTemplate.logoParams?.logoUrl || null, logoUrl: digitalTemplate.logoParams?.logoUrl || null,
bgmUrl: digitalTemplate.bgmParams?.bgmUrl || null, bgmUrl: digitalTemplate.bgmParams?.bgmUrl || null,
materialUrl: digitalTemplate.materialUrl, materialUrl: digitalTemplate.materialUrl,
pronunciationLanguage: LangType.CANTONESE, pronunciationLanguage: digitalCreationStore.pronunciationLanguage,
} }
digitalCreationStore.updateDigitalCreation(draftConfig) digitalCreationStore.updateDigitalCreation(draftConfig)
} }
...@@ -86,7 +82,10 @@ async function getDraft(id: string) { ...@@ -86,7 +82,10 @@ async function getDraft(id: string) {
async function getTaskConfig(id: string) { async function getTaskConfig(id: string) {
const res = await fetchGetTaskConfig<DraftConfig>(id) const res = await fetchGetTaskConfig<DraftConfig>(id)
if (res.code === 0) { if (res.code === 0) {
digitalCreationStore.updateDigitalCreation(res.data) digitalCreationStore.updateDigitalCreation({
...res.data,
draftName: '新建數字人視頻' + formatDateTime(new Date()),
})
} }
} }
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment