From efda9d4a4d5595b8b114d7a95a4bbc2eadce92e2 Mon Sep 17 00:00:00 2001 From: congzc Date: Wed, 5 Jul 2023 15:50:18 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E4=BC=B0=E6=97=B6=E9=95=BF=E5=8F=8A?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=A3=80=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/myCreating.js | 4 +- src/utils/request.js | 1 - src/views/createVideo/index.vue | 243 ++++++++++++++++++---------- src/views/myCreating/index.vue | 48 +++--- src/views/myCreating/videoStatus.js | 1 + 5 files changed, 195 insertions(+), 102 deletions(-) diff --git a/src/apis/myCreating.js b/src/apis/myCreating.js index dcd57f5..55501e0 100644 --- a/src/apis/myCreating.js +++ b/src/apis/myCreating.js @@ -42,9 +42,9 @@ export function videoHyApi(id) { * @params id * @returns data */ -export function checkVideoStatusApi(time) { +export function checkVideoStatusApi(list) { return request({ - url: `/api/userPhotoVideo/checkVideoStatus?time${time}`, + url: `/api/userPhotoVideo/checkVideoStatus?list=${list}`, method: 'get' }) } \ No newline at end of file diff --git a/src/utils/request.js b/src/utils/request.js index fb9043d..8df0f6f 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -42,7 +42,6 @@ request.interceptors.request.use( // 响应拦截器 request.interceptors.response.use( function (response) { - if (!response.data) { // ElMessage.error($t('tips.systemException')); ElMessage.error( diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index eaceb29..fd83c28 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -6,9 +6,9 @@
- +
@@ -79,36 +79,6 @@ :isLoading="compressionImgLoad" :tips="imgUploadTips" > -
-
- -
-
-
-
- + - -
-
-
-
- -
-
×
-
-
-
- -
-
×
-
-
-
- -
-
×
-
-
@@ -268,7 +238,7 @@ :placeholder="$t('createVideo.aiText')" />
- + @@ -364,10 +335,29 @@ > + :key="item.name" + :label="item.name" + :value="item.name" + > +
+ {{ item.name }} + 🔊 +
+ +
element.id == sound.value); - soundStyle.value = null; soundStyleOptions.value = item.style; } - +// 根据ageType返回年龄 +function returnAge(ageType) { + if (ageType == 1) { + if (lanChange.value == "zh-cn") { + return " 儿童"; + } else { + return "Child"; + } + } else if (ageType == 2) { + if (lanChange.value == "zh-cn") { + return " 少年"; + } else { + return "Teen"; + } + } else if (ageType == 3) { + if (lanChange.value == "zh-cn") { + return " 年轻"; + } else { + return "YoungAdult"; + } + } else if (ageType == 4) { + if (lanChange.value == "zh-cn") { + return " 中年"; + } else { + return "OlderAdult"; + } + } else if (ageType == 5) { + if (lanChange.value == "zh-cn") { + return " 老年"; + } else { + return "Senior"; + } + } +} // 试听 const previewAudioUrl = ref(null); const previewAudioLoading = ref(false); @@ -1089,8 +1107,7 @@ async function getPreviewAudio() { return; } previewAudioUrl.value = res.data.data; - // previewAudioUrl.value = - // "/suimang/static/tts/2023-07-04/16884538755531874.wav"; + let audioA = document.getElementById("audio"); audioA.addEventListener("loadedmetadata", async () => { audioA.muted = false; // 将 muted 属性设置为 false @@ -1108,6 +1125,18 @@ async function getPreviewAudio() { return; } } +// 新的试听 +function ListenVoices(url) { + previewAudioUrl.value = url; + // previewAudioUrl.value = + // "/suimang/static/tts/2023-07-04/16884538755531874.wav"; + let audioA = document.getElementById("audio"); + audioA.addEventListener("loadedmetadata", async () => { + audioA.muted = false; // 将 muted 属性设置为 false + await audioA.play(); + previewAudioLoading.value = false; + }); +} //#endregion //#region card2的逻辑 @@ -1287,6 +1316,13 @@ async function uploadProgress(videoId, isSaveVideo) { router.push("/myCreating"); return; } + ElMessage.success( + lanChange.value == "zh-cn" + ? `预计生成的视频时长约为${formatTime(uploadAudioTime.value)}` + : `The video generated is expected to be approximately${formatTime( + uploadAudioTime.value + )} in length` + ); const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 if (res4.message == "success") { ElMessage.success( @@ -1313,6 +1349,7 @@ const createLoading = ref(false); // 保存数据 async function saveOrUpdate(index, isSaveVideo) { if (createLoading.value == true) { + ElMessage.error(lanChange.value == "zh-cn" ? `正在生成` : `Be generating`); return; } tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮 @@ -1363,16 +1400,32 @@ async function saveOrUpdate(index, isSaveVideo) { router.push("/myCreating"); return; } - const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 - if (res3.message == "success") { - ElMessage.success( - lanChange.value == "zh-cn" - ? `视频正在生成中,请耐心等待` - : `The video is being generated, please wait patiently` - ); - } - createLoading.value = false; - router.push("/myCreating"); + // 获取预估时长 + const res4 = await previewAudioApi( + textareaContent.value, + sound.value, + soundStyle.value + ); + ElMessage.success( + lanChange.value == "zh-cn" + ? `预计生成的视频时长约为${formatTime(res4.data.data)}` + : `The video generated is expected to be approximately${formatTime( + res4.data.data + )} in length` + ); + // 3秒后调用生成视频 + const changeHasNewCreate = setTimeout(async () => { + const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 + if (res3.message == "success") { + ElMessage.success( + lanChange.value == "zh-cn" + ? `视频正在生成中,请耐心等待` + : `The video is being generated, please wait patiently` + ); + } + createLoading.value = false; + router.push("/myCreating"); + }, 3000); } catch (error) { // ElMessage.error($t(error.message)); ElMessage.error(error); @@ -1404,6 +1457,7 @@ async function saveOrUpdate(index, isSaveVideo) { } } if (index == 3) { + createLoading.value = true; try { if (!saveOrUpdateData.personPhotoId) { ElMessage.error( @@ -1433,6 +1487,13 @@ async function saveOrUpdate(index, isSaveVideo) { return; } console.log("ceshi"); + ElMessage.success( + lanChange.value == "zh-cn" + ? `预计生成的视频时长约为${formatTime(estimatedDuration.value)}` + : `The video generated is expected to be approximately${formatTime( + estimatedDuration.value + )} in length` + ); const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频 if (res2.message == "success") { ElMessage.success( @@ -1444,11 +1505,27 @@ async function saveOrUpdate(index, isSaveVideo) { createLoading.value = false; router.push("/myCreating"); } catch (error) { - ElMessage.error(error); + if (error) { + ElMessage.error(error); + } else { + ElMessage.error( + lanChange.value == "zh-cn" + ? `生成失败,请稍后重试` + : `Failed to generate, please try again later` + ); + } createLoading.value = false; } } } +// 预估时长时把秒转为分 +function formatTime(seconds) { + const minutes = Math.floor(Math.floor(seconds) / 60); + const remainingSeconds = Math.floor(seconds) % 60; + const formattedMinutes = String(minutes).padStart(2, "0"); + const formattedSeconds = String(remainingSeconds).padStart(2, "0"); + return `${formattedMinutes}:${formattedSeconds}`; +} //#endregion ---------------------------- //#region 根据作品id查询作品信息并回显 @@ -1491,6 +1568,7 @@ const musicListPageSize = ref(8); // const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 const musicData = ref(null); //上传歌曲的数据 const fileMusicInput = ref(null); // 上传组件的dom +const estimatedDuration = ref(""); // card3的生成视频预估时长 // tab切换 function musicTabActiveChange(index) { if (index == 2) { @@ -1532,9 +1610,10 @@ const musicListPageNumPersonChange = (val) => { getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); }; // 点击选择音乐 -function chooseMusicUrl(url, id) { - audioMusicUrl.value = url; - musicItemAction.value = id; +function chooseMusicUrl(item) { + audioMusicUrl.value = item.url; + musicItemAction.value = item.id; + estimatedDuration.value = item.time; } // 转化秒为分秒 function handleTime(time) { @@ -1789,11 +1868,13 @@ onMounted(async () => { }); //#endregion ---------------------------- +//#region 页面销毁 onUnmounted(() => { if (mySocket) { mySocket.close(); } }); +//#endregion ----------------------