update: responsive ui improvement
This commit is contained in:
Alikia2x
parent
b9243b35a6
commit
17a3e45d5e
@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import localforage from '$lib/storage';
|
||||
import type { Writable } from 'svelte/store';
|
||||
export let coverPath: Writable<string>;
|
||||
let path: string = '';
|
||||
@ -9,21 +8,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<img class="cover" src={path} alt="封面" />
|
||||
|
||||
<style>
|
||||
.cover {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 55vh;
|
||||
min-width: 27vw;
|
||||
min-height: 27vw;
|
||||
object-fit: cover;
|
||||
left: 10vw;
|
||||
top: 40vh;
|
||||
transform: translate(0, -50%);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
<img class="absolute shadow-md select-none z-10 object-cover rounded-2xl max-h-[calc(94vh-18rem)] md:max-h-[calc(94vh-20rem)] xl:w-auto max-w-[90%] md:max-w-[75%] xl:max-w-[37vw]
|
||||
bottom-72 md:bottom-80
|
||||
left-1/2 translate-x-[-50%] xl:left-[25vw]" src={path} alt="封面" />
|
||||
|
||||
@ -9,8 +9,10 @@
|
||||
export let volume: number = 1;
|
||||
export let clickPlay: Function;
|
||||
export let adjustProgress: Function;
|
||||
export let adjustRealProgress: Function;
|
||||
export let adjustVolume: Function;
|
||||
let onSlide = false;
|
||||
export let onSlide: boolean;
|
||||
export let setOnSlide: Function;
|
||||
let progressBar: HTMLInputElement;
|
||||
let volumeBar: HTMLInputElement;
|
||||
|
||||
@ -18,12 +20,16 @@
|
||||
adjustProgress(e.target.value / (duration + 0.001));
|
||||
}
|
||||
|
||||
function progressBarOnInput(e: any) {
|
||||
adjustRealProgress(e.target.value / (duration + 0.001));
|
||||
}
|
||||
|
||||
function volumeBarOnChange(e: any) {
|
||||
adjustVolume(e.target.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="interactive-box">
|
||||
<div class="absolute select-none bottom-2 h-60 w-[86vw] left-[7vw] lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[7vw]">
|
||||
<div class="song-info">
|
||||
<span class="song-name text-shadow">{name}</span><br />
|
||||
<span class="song-author">{singer}</span>
|
||||
@ -34,10 +40,11 @@
|
||||
class="progress-bar shadow-md"
|
||||
bind:this={progressBar}
|
||||
on:change={progressBarOnChange}
|
||||
on:mousedown={() => (onSlide = true)}
|
||||
on:input={progressBarOnInput}
|
||||
on:mousedown={() => setOnSlide(true)}
|
||||
on:mouseup={() => {
|
||||
setTimeout(() => {
|
||||
onSlide = false;
|
||||
setOnSlide(false);
|
||||
}, 50);
|
||||
}}
|
||||
type="range"
|
||||
@ -195,13 +202,4 @@
|
||||
.time-total {
|
||||
right: 0;
|
||||
}
|
||||
.interactive-box {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
width: 55vh;
|
||||
min-width: 27vw;
|
||||
top: 69vh;
|
||||
height: 15rem;
|
||||
left: 10vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,12 +37,8 @@
|
||||
for (let i = 0; i < lyrics.length; i++) {
|
||||
const offset = Math.abs(i - currentLyricIndex);
|
||||
const blurRadius = Math.min(offset * 1, 16);
|
||||
const fontSize = i === currentLyricIndex ? '3.5rem' : '3rem';
|
||||
const lineHeight = i === currentLyricIndex ? '4.5rem' : '4rem';
|
||||
if (refs[i]) {
|
||||
refs[i].style.filter = `blur(${blurRadius}px)`;
|
||||
refs[i].style.fontSize = fontSize;
|
||||
refs[i].style.lineHeight = lineHeight;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
@ -60,7 +56,10 @@
|
||||
</script>
|
||||
|
||||
{#if lyrics && originalLyrics}
|
||||
<div class="lyrics" style="overflow-y: auto">
|
||||
<div
|
||||
class="absolute top-0 w-screen xl:w-[52vw] xl:left-[45vw] xl:px-[3vw] h-screen font-sans
|
||||
text-left scroll-smooth no-scrollbar overflow-y-auto"
|
||||
>
|
||||
{#each lyrics as lyric, i}
|
||||
<p bind:this={_refs[i]} class={getClass(i, progress)}>
|
||||
{lyric}
|
||||
@ -70,27 +69,18 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.lyrics {
|
||||
position: absolute;
|
||||
width: 52vw;
|
||||
left: 45vw;
|
||||
padding-left: 3vw;
|
||||
padding-right: 3vw;
|
||||
height: 100vh;
|
||||
font-family: sans-serif;
|
||||
text-align: left;
|
||||
scroll-behavior: smooth;
|
||||
.no-scrollbar {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.current-lyric {
|
||||
position: relative;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 3.5rem;
|
||||
line-height: 4.5rem;
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
top: 1rem;
|
||||
transition: 0.2s;
|
||||
margin: 2rem 0.3rem;
|
||||
@ -117,4 +107,11 @@
|
||||
transition: 0.2s;
|
||||
margin: 2rem 0rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.current-lyric {
|
||||
font-size: 3.5rem;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,51 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import localforage from 'localforage';
|
||||
import Background from '$lib/components/background.svelte';
|
||||
let audioInput: any;
|
||||
let coverInput: any;
|
||||
const audioId = 'd5a2e306-ddea-4fc3-9927-c79dcb3a4071';
|
||||
import localforage from "$lib/storage";
|
||||
let musicList;
|
||||
|
||||
// Initialize IndexedDB
|
||||
localforage.config({
|
||||
driver: localforage.INDEXEDDB,
|
||||
name: 'audioDB'
|
||||
});
|
||||
onMount(() => {
|
||||
// Handle audio input change
|
||||
audioInput.addEventListener('change', function (e: any) {
|
||||
const file: File = e.target.files[0];
|
||||
if (file) {
|
||||
localforage.setItem(audioId + '-file', file);
|
||||
}
|
||||
});
|
||||
|
||||
coverInput.addEventListener('change', function (e: any) {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
localforage.setItem(audioId + '-cover', file);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
;
|
||||
};
|
||||
});
|
||||
function extractId(key: string) {
|
||||
return key.split('-').pop();
|
||||
}
|
||||
localforage.iterate(function (value, key, iterationNumber) {
|
||||
console.log(extractId(key));
|
||||
})
|
||||
</script>
|
||||
|
||||
<p>
|
||||
Select Audio File:
|
||||
<input type="file" bind:this={audioInput} />
|
||||
</p>
|
||||
<p>
|
||||
Select Cover File:
|
||||
<input type="file" bind:this={coverInput} />
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Input song id"
|
||||
id="audioId"
|
||||
value="d5a2e306-ddea-4fc3-9927-c79dcb3a4071"
|
||||
style="width: 36ch"
|
||||
/>
|
||||
|
||||
<Background coverId={audioId} />
|
||||
<div
|
||||
class="absolute w-screen md:w-2/3 left-0 md:left-[16.6667%] px-[3%] md:px-0 top-16"
|
||||
>
|
||||
<h1>AquaVox</h1>
|
||||
<h2>音乐库</h2>
|
||||
</div>
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
let prepared: string[] = [];
|
||||
let originalLyrics: Line[];
|
||||
let lyricsText: string[] = [];
|
||||
let onAdjustingProgress = false;
|
||||
const coverPath = writable('');
|
||||
let mainInterval: ReturnType<typeof setInterval>;
|
||||
|
||||
@ -131,16 +132,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
function adjustRealProgress(progress: number) {
|
||||
if (audioPlayer) {
|
||||
currentProgress = duration * progress;
|
||||
}
|
||||
}
|
||||
|
||||
function adjustVolume(targetVolume: number) {
|
||||
if (audioPlayer) {
|
||||
audioPlayer.volume = targetVolume;
|
||||
}
|
||||
}
|
||||
|
||||
function setOnSlide(value: boolean) {
|
||||
onAdjustingProgress = value;
|
||||
}
|
||||
|
||||
$: {
|
||||
clearInterval(mainInterval);
|
||||
mainInterval = setInterval(() => {
|
||||
if (audioPlayer !== null && audioPlayer.currentTime !== undefined) {
|
||||
if (
|
||||
audioPlayer !== null &&
|
||||
audioPlayer.currentTime !== undefined &&
|
||||
onAdjustingProgress === false
|
||||
) {
|
||||
currentProgress = audioPlayer.currentTime;
|
||||
}
|
||||
}, 100);
|
||||
@ -156,6 +171,10 @@
|
||||
readDB();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{name} - Aquavox</title>
|
||||
</svelte:head>
|
||||
|
||||
<Background coverId={audioId} />
|
||||
<Cover {coverPath} />
|
||||
<InteractiveBox
|
||||
@ -168,7 +187,13 @@
|
||||
{paused}
|
||||
{adjustProgress}
|
||||
{adjustVolume}
|
||||
{adjustRealProgress}
|
||||
onSlide={onAdjustingProgress}
|
||||
{setOnSlide}
|
||||
/>
|
||||
|
||||
<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} />
|
||||
|
||||
<audio
|
||||
bind:this={audioPlayer}
|
||||
controls
|
||||
@ -178,5 +203,3 @@
|
||||
audioPlayer.pause();
|
||||
}}
|
||||
></audio>
|
||||
|
||||
<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user