update: interactiveBox component for player
This commit is contained in:
Alikia2x
parent
680b556a6a
commit
4ad8541392
147
src/lib/components/interactiveBox.svelte
Normal file
147
src/lib/components/interactiveBox.svelte
Normal file
@ -0,0 +1,147 @@
|
||||
<script lang="ts">
|
||||
import formatDuration from "$lib/formatDuration";
|
||||
|
||||
export let name: string;
|
||||
export let singer: string = "";
|
||||
export let duration: number = 0;
|
||||
export let progress: number = 0;
|
||||
</script>
|
||||
|
||||
<div class="interactive-box">
|
||||
<div class="song-info">
|
||||
<span class="song-name">{name}</span><br/>
|
||||
<span class="song-author">{singer}</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="time-indicator time-current">{formatDuration(progress)}</div>
|
||||
<div id="progress-bar" class="progress-bar">
|
||||
<div class="bar" style={`width: ${progress/(duration+0.001)*100}%;`}></div>
|
||||
</div>
|
||||
<div class="time-indicator time-total">{formatDuration(duration)}</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div id="previous" class="control-btn previous">
|
||||
<img class="control-img switch-song-img" src="/previous.svg" alt="上一曲" />
|
||||
</div>
|
||||
<div id="play" class="control-btn play-btn">
|
||||
<img id="play-img" class="control-img" src="/play.svg" alt="暂停或播放" />
|
||||
</div>
|
||||
<div id="right" class="control-btn next">
|
||||
<img class="control-img switch-song-img" src="/next.svg" alt="下一曲" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 9rem;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.control-btn {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: 4.2rem;
|
||||
width: 6rem;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.control-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.play-btn {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.control-img {
|
||||
position: relative;
|
||||
height: 2.3rem;
|
||||
width: 2.3rem;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.previous {
|
||||
left: 50%;
|
||||
transform: translate(calc(-50% - 8rem), 0);
|
||||
}
|
||||
.next {
|
||||
right: 50%;
|
||||
transform: translate(calc(50% + 8rem), 0);
|
||||
}
|
||||
.switch-song-img {
|
||||
width: auto !important;
|
||||
height: 2rem !important;
|
||||
}
|
||||
|
||||
.song-info {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: 1rem;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
.song-name {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
.song-author {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: 6rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
.progress-bar {
|
||||
top: 1.8rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.bar {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 0.3rem;
|
||||
display: inline-block;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
.time-indicator {
|
||||
width: fit-content;
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: sans-serif;
|
||||
display: inline-block;
|
||||
top: 0.2rem;
|
||||
}
|
||||
.time-current {
|
||||
left: 0;
|
||||
}
|
||||
.time-total {
|
||||
right: 0;
|
||||
}
|
||||
.interactive-box {
|
||||
position: absolute;
|
||||
width: 34vw;
|
||||
top: 70vh;
|
||||
height: 15rem;
|
||||
left: 10vw;
|
||||
}
|
||||
</style>
|
||||
@ -2,9 +2,15 @@
|
||||
import { page } from '$app/stores';
|
||||
import Background from '$lib/components/background.svelte';
|
||||
import Cover from '$lib/components/cover.svelte';
|
||||
import InteractiveBox from '$lib/components/interactiveBox.svelte';
|
||||
|
||||
const audioId = $page.params.id;
|
||||
const name = "晨曦旅客";
|
||||
const singer = "乐正绫";
|
||||
const duration = 218;
|
||||
const currentProgress = 0;
|
||||
</script>
|
||||
|
||||
<Background coverId={audioId} />
|
||||
<Cover coverId={audioId}/>
|
||||
<Cover coverId={audioId} />
|
||||
<InteractiveBox name={name} singer={singer} duration={duration} progress={currentProgress}/>
|
||||
|
||||
11
static/next.svg
Normal file
11
static/next.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--Generator: Apple Native CoreSVG 232.5-->
|
||||
<!DOCTYPE svg
|
||||
PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
||||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="473.625" height="249.625">
|
||||
<g>
|
||||
<rect height="249.625" opacity="0" width="473.625" x="0" y="0"/>
|
||||
<path d="M58.625 249.625C64.75 249.625 70 247.375 76 244L241.25 146.75C251.25 140.75 255.75 133.625 255.75 125C255.75 116.375 251.25 109.375 241.25 103.375L76 6.125C70 2.625 64.75 0.5 58.625 0.5C47 0.5 37 9.25 37 26.25L37 223.75C37 240.75 47 249.625 58.625 249.625ZM276.5 249.625C282.625 249.625 288 247.375 293.875 244L459.125 146.75C469.125 140.75 473.625 133.625 473.625 125C473.625 116.375 469.125 109.375 459.125 103.375L293.875 6.125C287.875 2.625 282.625 0.5 276.5 0.5C264.875 0.5 254.875 9.25 254.875 26.25L254.875 223.75C254.875 240.75 264.875 249.625 276.5 249.625Z" fill="#ffffff" fill-opacity="0.85"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1022 B |
11
static/pause.svg
Normal file
11
static/pause.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--Generator: Apple Native CoreSVG 232.5-->
|
||||
<!DOCTYPE svg
|
||||
PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
||||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="189.875" height="259.125">
|
||||
<g>
|
||||
<rect height="259.125" opacity="0" width="189.875" x="0" y="0"/>
|
||||
<path d="M20 259L56 259C69.375 259 76 252.375 76 239L76 20C76 6.25 69.375 0 56 0L20 0C6.625 0 0 6.75 0 20L0 239C0 252.375 6.625 259 20 259ZM133.875 259L169.875 259C183.25 259 189.875 252.375 189.875 239L189.875 20C189.875 6.25 183.25 0 169.875 0L133.875 0C120.5 0 113.875 6.75 113.875 20L113.875 239C113.875 252.375 120.5 259 133.875 259Z" fill="#ffffff" fill-opacity="0.85"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 785 B |
11
static/play.svg
Normal file
11
static/play.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--Generator: Apple Native CoreSVG 232.5-->
|
||||
<!DOCTYPE svg
|
||||
PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
||||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="278.25" height="271.875">
|
||||
<g>
|
||||
<rect height="271.875" opacity="0" width="278.25" x="0" y="0"/>
|
||||
<path d="M54.5 271.875C60.375 271.875 65.125 269.875 71.125 266.375L262 155.375C273.875 148.625 278.25 143.875 278.25 136C278.25 128.25 273.875 123.5 262 116.625L71.125 5.75C65.125 2.25 60.375 0.125 54.5 0.125C43.75 0.125 37 8.25 37 21.125L37 251C37 263.75 43.75 271.875 54.5 271.875Z" fill="#ffffff" fill-opacity="0.85"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 729 B |
11
static/previous.svg
Normal file
11
static/previous.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--Generator: Apple Native CoreSVG 232.5-->
|
||||
<!DOCTYPE svg
|
||||
PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
||||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="473.625" height="249.625">
|
||||
<g>
|
||||
<rect height="249.625" opacity="0" width="473.625" x="0" y="0"/>
|
||||
<path d="M197.125 249.625C208.75 249.625 218.75 240.75 218.75 223.75L218.75 26.25C218.75 9.25 208.75 0.5 197.125 0.5C191 0.5 185.75 2.625 179.75 6.125L14.5 103.375C4.5 109.375 0 116.375 0 125C0 133.625 4.5 140.75 14.5 146.75L179.75 244C185.75 247.375 191 249.625 197.125 249.625ZM415 249.625C426.625 249.625 436.625 240.75 436.625 223.75L436.625 26.25C436.625 9.25 426.625 0.5 415 0.5C408.875 0.5 403.625 2.625 397.625 6.125L232.5 103.375C222.375 109.375 217.875 116.375 217.875 125C217.875 133.625 222.5 140.75 232.5 146.75L397.625 244C403.625 247.375 408.875 249.625 415 249.625Z" fill="#ffffff" fill-opacity="0.85"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in New Issue
Block a user