mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🚸 优化加载
This commit is contained in:
@@ -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();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user