From 0fdeab176a87326cd69c6d109c112983063399fc Mon Sep 17 00:00:00 2001 From: congzc Date: Mon, 5 Jun 2023 18:03:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lang/package/en.ts | 5 + src/lang/package/zh-cn.ts | 5 + src/views/createVideo/index.vue | 176 +++++++++++++++++++++++--------- src/views/myCreating/index.vue | 21 +++- 4 files changed, 155 insertions(+), 52 deletions(-) diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 3b1c704..33ed014 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -44,6 +44,9 @@ export default { personalWarehouse:'Personal warehouse', typeScript: "Type your Script", uploadAudio: "Upload Audio", + recordedAudio:'Recorded audio', + startRecorded:'Start recording', + stopRecorded:'Stop recording', aiScript: "Ai Script", typeTitle: "Type a title", confirm: "Confirm", @@ -54,6 +57,8 @@ export default { reselect: "reselect", sureUpload: "Confirm upload", generateVideo: "Generate Video", + saveVideo:'save video', + select:'Please select', }, // 我的视频 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index 02b61b6..ef3eaf5 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -44,6 +44,9 @@ export default { personalWarehouse:'个人仓库', typeScript: "输入文案", uploadAudio: "上传音频", + recordedAudio:'录制音频', + startRecorded:'开始录制', + stopRecorded:'停止录制', aiScript: "AI生成文本", typeTitle: "输入标题", confirm: "确定", @@ -54,6 +57,8 @@ export default { reselect: "重新选择", sureUpload: "确认上传", generateVideo: "生成视频", + saveVideo:'保存视频', + select:'请选择', }, // 我的视频 diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 139af0c..bd47601 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -7,7 +7,11 @@
-
+
+ - +
×
@@ -83,11 +77,7 @@
-
+
+
@@ -135,7 +125,7 @@ + {{ $t("createVideo.generateVideo") }} + + + + {{ + $t("createVideo.saveVideo") + }}
@@ -201,7 +204,7 @@

- 上传音频 + {{ $t("createVideo.uploadAudio") }}

+ @@ -223,7 +226,7 @@

- 录制音频 + {{ $t("createVideo.recordedAudio") }}

- 开始录音 + {{ $t("createVideo.startRecorded") }}
@@ -251,12 +254,25 @@ 上传音频 -->
+ {{ $t("createVideo.generateVideo") }} + + + + {{ + $t("createVideo.saveVideo") + }}
@@ -348,9 +364,13 @@ import { createVideoApi, previewAudioApi, } from "@/apis/createVideo"; +import { useI18n } from "vue-i18n"; import Recorder from "js-audio-recorder"; //mp3插件 import imageCompression from "browser-image-compression"; //压缩图片插件 +const { locale } = useI18n(); +const lanChange = ref(locale); + //#region 头像区的逻辑 // 获取AI头像 const AiFaceList = ref([]); @@ -392,18 +412,27 @@ function setImgUrl(url, id) { //#region 预览图片 const compressionImgLoad = ref(false); async function lookImg(e) { - // 压缩配置 - compressionImgLoad.value = true; - const options = { - maxSizeMB: 2, // 最大压缩大小为 1MB - useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 - }; - const compressedFile = await imageCompression(e.target.files[0], options); - imgUrl.value = URL.createObjectURL(compressedFile); - imgData.value = compressedFile; - showUploadBtn.value = false; - submitImgBtn.value = true; - compressionImgLoad.value = false; + if (e.target.files[0]) { + faceItemActive.value = null; + imgUrl.value = null; + imgData.value = null; + showUploadBtn.value = true; + submitImgBtn.value = false; + compressionImgLoad.value = true; + // 压缩配置 + const options = { + maxSizeMB: 2, // 最大压缩大小为 1MB + useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 + }; + const compressedFile = await imageCompression(e.target.files[0], options); + imgUrl.value = URL.createObjectURL(compressedFile); + imgData.value = compressedFile; + showUploadBtn.value = false; + submitImgBtn.value = true; + compressionImgLoad.value = false; + } else { + return; + } } //#endregion ------------------ @@ -415,6 +444,11 @@ const imgUrl = ref(""); //图片回显路径 const imgData = ref(""); // 上传图片文件 const showUploadBtn = ref(false); //上传图片+号的显示隐藏 const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏 +// 点击AI头像区的+号 +function clickAddBtn() { + faceItemActive.value = null; + showUploadBtn.value = true; +} // 上传图片 async function changeFile() { imgUrl.value = URL.createObjectURL(imgData.value); @@ -422,13 +456,21 @@ async function changeFile() { const timestamp = Date.now(); formData.append("file", imgData.value, timestamp + ".png"); try { + // 上传图片 const res = await awsImgUpload(formData); - if (res.code == 200) { - ElMessage.success("上传成功!"); + // 保存图片 + const res2 = await saveImgApi({ material: res.data.url }); + // 重新获取列表 + getAiFaceList(1, 100, 1); + if (res2.code == 200) { + ElMessage.success( + lanChange.value == "zh-cn" ? `上传成功` : `Upload successfully` + ); } else { - ElMessage.error("上传失败!"); + ElMessage.error( + lanChange.value == "zh-cn" ? `上传失败` : `Upload failure` + ); } - const res2 = await saveImgApi({ material: res.data.url }); } catch (error) { ElMessage.error(error); } @@ -496,11 +538,19 @@ async function chooseStyle() { const previewAudioUrl = ref(null); async function getPreviewAudio() { if (!textareaContent.value) { - ElMessage.error("您还没有输入文案"); + ElMessage.error( + lanChange.value == "zh-cn" + ? `您还没有输入文案` + : `You have not entered the copy yet` + ); return; } if (!sound.value) { - ElMessage.error("您还没有选择声音"); + ElMessage.error( + lanChange.value == "zh-cn" + ? `您还没有选择声音` + : `You have not selected the sound` + ); return; } @@ -558,7 +608,7 @@ const playRecording = () => { } }; // 上传音频 -async function uploadAudio() { +async function uploadAudio(isSaveVideo) { createLoading.value = true; let formData = new FormData(); const timestamp = Date.now(); @@ -569,12 +619,14 @@ async function uploadAudio() { if (res) { // ElMessage.success("上传成功!"); } else { - ElMessage.error("音频上传失败!"); + ElMessage.error( + lanChange.value == "zh-cn" ? `上传音频失败!` : `Failed to upload audio!` + ); return; } // 查询进度 intervalId = setInterval(() => { - uploadProgress(res.data.videoId); + uploadProgress(res.data.videoId, isSaveVideo); }, 1000); // ElMessage.success("上传成功!"); } catch (error) { @@ -597,7 +649,7 @@ const handleFileChange = async () => { }; // 获取视频上传进度 const afterSaveAudioId = ref(null); -async function uploadProgress(videoId) { +async function uploadProgress(videoId, isSaveVideo) { const res = await uploadProgressApi(videoId); if (res.data == "complete") { clearInterval(intervalId); @@ -618,9 +670,20 @@ async function uploadProgress(videoId) { }; try { const res3 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 + if (isSaveVideo == "saveVideo") { + ElMessage.success( + lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` + ); + createLoading.value = false; + return; + } const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频 if (res4.message == "success") { - ElMessage.success("视频正在生成,请耐心等待"); + ElMessage.success( + lanChange.value == "zh-cn" + ? `视频正在生成中,请耐心等待` + : `The video is being generated, please wait patiently` + ); } createLoading.value = false; } catch (error) { @@ -637,7 +700,7 @@ const tabFrom = ref(1); const createLoading = ref(false); // 上传音频后,得到videoId // 保存数据 -async function saveOrUpdate(index) { +async function saveOrUpdate(index, isSaveVideo) { if (createLoading.value == true) { return; } @@ -654,9 +717,20 @@ async function saveOrUpdate(index) { createLoading.value = true; try { const res2 = await saveOrUpdateApi(saveOrUpdateData); // 保存数据 + if (isSaveVideo == "saveVideo") { + ElMessage.success( + lanChange.value == "zh-cn" ? `已保存为草稿` : `Saved as draft` + ); + createLoading.value = false; + return; + } const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频 if (res3.message == "success") { - ElMessage.success("视频正在生成,请耐心等待"); + ElMessage.success( + lanChange.value == "zh-cn" + ? `视频正在生成中,请耐心等待` + : `The video is being generated, please wait patiently` + ); } createLoading.value = false; } catch (error) { @@ -666,7 +740,7 @@ async function saveOrUpdate(index) { } if (index == 2) { try { - const res1 = await uploadAudio(); // 上传音频 + const res1 = await uploadAudio(isSaveVideo); // 上传音频 } catch (error) { ElMessage.error(error); createLoading.value = false; diff --git a/src/views/myCreating/index.vue b/src/views/myCreating/index.vue index 52a41d7..34a865f 100644 --- a/src/views/myCreating/index.vue +++ b/src/views/myCreating/index.vue @@ -46,7 +46,26 @@ @mouseleave="mouseleave" @click="clickVideoItem(item)" > - + + + +
...