alikia2x/aquavox
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix: when cover resolution too low, image on the UI won't fill the container

Browse Source 
improve: adjust margin of cover and interactiveBox
This commit is contained in:
alikia2x (寒寒) 2024-11-03 00:42:05 +08:00
parent 2b6d1e7439
commit 630692b507
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
4 changed files with 82 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/components/cover.svelte
View File

@ -12,8 +12,9 @@
{#if hasLyrics}
<img
class="absolute shadow-md select-none z-10 object-cover rounded-lg md:rounded-2xl max-md:h-20 max-xl:h-32 max-xl:top-6 md:max-h-[calc(94vh-20rem)] xl:w-auto max-w-[90%] xl:max-w-[37vw]
md:bottom-80 left-6 md:left-[calc(7vw-1rem)] lg:left-[calc(12vw-1rem)] xl:translate-x-[-50%] xl:left-[25vw]"
md:bottom-[21rem] left-6 md:left-[calc(7vw-1rem)] lg:left-[calc(12vw-1rem)] xl:translate-x-[-50%] xl:left-[25vw]"
src={path}
width="1200"
alt="封面"
/>
{:else}

2
packages/core/components/interactiveBox.svelte
View File

@ -78,7 +78,7 @@
{/if}
<div
class={'absolute select-none bottom-2 h-60 w-[86vw] left-[7vw] z-10 ' +
class={'absolute select-none bottom-12 h-60 w-[86vw] left-[7vw] z-10 ' +
(hasLyrics
? 'lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[7vw]'
: 'lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[31.5vw]')}

44
packages/electron/src/routes/play/[id]/+page.svelte
View File

@ -81,10 +81,46 @@
});
localforage.getItem(`${audioId}-cover`, function (err, file) {
if (file) {
const path = URL.createObjectURL(file as File);
coverPath.set(path);
const img = new Image();
img.src = URL.createObjectURL(file as File);
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 计算新的宽度和高度，确保宽度至少为1200px
let newWidth = img.width;
let newHeight = img.height;
console.log(newWidth)
if (newWidth < 1200) {
newWidth = 1200;
newHeight = (img.height * 1200) / img.width;
}
canvas.width = newWidth;
canvas.height = newHeight;
// 绘制放大后的图片到canvas
ctx!.drawImage(img, 0, 0, newWidth, newHeight);
// 将canvas内容转换为Blob
canvas.toBlob(function (blob) {
const path = URL.createObjectURL(blob!);
coverPath.set(path);
}, 'image/jpeg'); // 你可以根据需要更改图片格式
prepared.push('cover');
};
img.onerror = function () {
console.error('Failed to load image');
prepared.push('cover');
};
} else {
prepared.push('cover');
}
prepared.push('cover');
});
localforage.getItem(`${audioId}-file`, function (err, file) {
if (audioPlayer === null) return;
@ -211,7 +247,7 @@
{hasLyrics}
/>
<NewLyrics {originalLyrics} progress={currentProgress} player={audioPlayer}/>
<NewLyrics {originalLyrics} progress={currentProgress} player={audioPlayer} />
<!-- <Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} player={audioPlayer} class="hidden" /> -->

42
packages/web/src/routes/play/[id]/+page.svelte
View File

@ -81,10 +81,46 @@
});
localforage.getItem(`${audioId}-cover`, function (err, file) {
if (file) {
const path = URL.createObjectURL(file as File);
coverPath.set(path);
const img = new Image();
img.src = URL.createObjectURL(file as File);
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 计算新的宽度和高度，确保宽度至少为1200px
let newWidth = img.width;
let newHeight = img.height;
console.log(newWidth)
if (newWidth < 1200) {
newWidth = 1200;
newHeight = (img.height * 1200) / img.width;
}
canvas.width = newWidth;
canvas.height = newHeight;
// 绘制放大后的图片到canvas
ctx!.drawImage(img, 0, 0, newWidth, newHeight);
// 将canvas内容转换为Blob
canvas.toBlob(function (blob) {
const path = URL.createObjectURL(blob!);
coverPath.set(path);
}, 'image/jpeg'); // 你可以根据需要更改图片格式
prepared.push('cover');
};
img.onerror = function () {
console.error('Failed to load image');
prepared.push('cover');
};
} else {
prepared.push('cover');
}
prepared.push('cover');
});
localforage.getItem(`${audioId}-file`, function (err, file) {
if (audioPlayer === null) return;