🚸 优化加载

This commit is contained in:
目棃
2025-01-11 14:30:54 +08:00
parent 63b7f685c1
commit 0e6a15bd8f
2 changed files with 10 additions and 4 deletions

View File

@@ -6,7 +6,7 @@
:id="`tp-vod-${props.data.insert.vod.id}`" :id="`tp-vod-${props.data.insert.vod.id}`"
></div> ></div>
<div class="tp-vod-share"> <div class="tp-vod-share">
<img alt="cover" :src="props.data.insert.vod.cover" class="tp-vod-cover" /> <img alt="cover" :src="coverUrl" class="tp-vod-cover" />
<img src="/source/UI/video_play.svg" alt="icon" class="tp-vod-icon" /> <img src="/source/UI/video_play.svg" alt="icon" class="tp-vod-icon" />
<div class="tp-vod-time"> <div class="tp-vod-time">
<v-icon size="12">mdi-clock-time-four-outline</v-icon> <v-icon size="12">mdi-clock-time-four-outline</v-icon>
@@ -20,6 +20,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import showLoading from "@comp/func/loading.js";
import { getCurrentWindow } from "@tauri-apps/api/window"; import { getCurrentWindow } from "@tauri-apps/api/window";
import Artplayer from "artplayer"; import Artplayer from "artplayer";
import type { Option } from "artplayer/types/option.js"; import type { Option } from "artplayer/types/option.js";
@@ -79,7 +80,7 @@ onMounted(async () => {
id: props.data.insert.vod.id, id: props.data.insert.vod.id,
container: `#tp-vod-${props.data.insert.vod.id}`, container: `#tp-vod-${props.data.insert.vod.id}`,
url: highestResolution.url, url: highestResolution.url,
poster: props.data.insert.vod.cover, poster: coverUrl.value,
type: highestResolution.format, type: highestResolution.format,
playbackRate: true, playbackRate: true,
aspectRatio: true, aspectRatio: true,
@@ -110,10 +111,12 @@ onMounted(async () => {
html: `<i class="mdi mdi-download"></i>`, html: `<i class="mdi mdi-download"></i>`,
tooltip: "下载封面", tooltip: "下载封面",
click: async () => { click: async () => {
await showLoading.start("正在下载封面");
if (!coverBuffer.value) { if (!coverBuffer.value) {
coverBuffer.value = await getImageBuffer(props.data.insert.vod.cover); coverBuffer.value = await getImageBuffer(props.data.insert.vod.cover);
} }
await saveCanvasImg(coverBuffer.value, `vod-cover-${props.data.insert.vod.id}`); await saveCanvasImg(coverBuffer.value, `vod-cover-${props.data.insert.vod.id}`);
await showLoading.end();
}, },
}, },
], ],

View File

@@ -24,6 +24,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import TOverlay from "@comp/app/t-overlay.vue"; import TOverlay from "@comp/app/t-overlay.vue";
import showLoading from "@comp/func/loading.js";
import showSnackbar from "@comp/func/snackbar.js"; import showSnackbar from "@comp/func/snackbar.js";
import { computed, onMounted, onUnmounted, ref, shallowRef } from "vue"; import { computed, onMounted, onUnmounted, ref, shallowRef } from "vue";
@@ -70,23 +71,25 @@ async function onCopy(): Promise<void> {
showSnackbar.warn("GIF 图片不支持复制到剪贴板"); showSnackbar.warn("GIF 图片不支持复制到剪贴板");
return; return;
} }
await showLoading.start("正在复制图片到剪贴板");
const image = props.image.insert.image; const image = props.image.insert.image;
if (buffer.value === null) buffer.value = await getImageBuffer(image); if (buffer.value === null) buffer.value = await getImageBuffer(image);
const size = bytesToSize(buffer.value.byteLength); const size = bytesToSize(buffer.value.byteLength);
await copyToClipboard(buffer.value); await copyToClipboard(buffer.value);
await showLoading.end();
showSnackbar.success(`图片已复制到剪贴板,大小:${size}`); showSnackbar.success(`图片已复制到剪贴板,大小:${size}`);
} }
async function onDownload(): Promise<void> { async function onDownload(): Promise<void> {
await showLoading.start("正在下载图片到本地");
const image = props.image.insert.image; const image = props.image.insert.image;
if (buffer.value === null) buffer.value = await getImageBuffer(image); if (buffer.value === null) buffer.value = await getImageBuffer(image);
const size = bytesToSize(buffer.value.byteLength);
if (buffer.value.byteLength > 80000000) { if (buffer.value.byteLength > 80000000) {
showSnackbar.warn("图片过大,无法下载到本地"); showSnackbar.warn("图片过大,无法下载到本地");
return; return;
} }
await saveCanvasImg(buffer.value, Date.now().toString(), format.value); await saveCanvasImg(buffer.value, Date.now().toString(), format.value);
showSnackbar.success(`图片已下载到本地,大小:${size}`); await showLoading.end();
} }
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>