132 lines
4.1 KiB
Svelte
132 lines
4.1 KiB
Svelte
<script>
|
|
// V5 · The Focus card — Kyle's vertical reference: transport riding the
|
|
// art, centered three-line meta (with the album), the lane, and one
|
|
// modes row (shuffle · repeat · volume together, per his centring note).
|
|
import Icon from "../../components/Icon.svelte";
|
|
import Wash from "../bits/Wash.svelte";
|
|
import Art from "../bits/Art.svelte";
|
|
import Lane from "../bits/Lane.svelte";
|
|
import VolumeFly from "../bits/VolumeFly.svelte";
|
|
import Chrome from "../bits/Chrome.svelte";
|
|
import { mini, playing, cmd } from "../mini.svelte.js";
|
|
|
|
let artEl = $state(null);
|
|
</script>
|
|
|
|
<div class="shape">
|
|
<Wash artUrl={mini.artUrl} fade="deep" />
|
|
<Chrome anchor={artEl} />
|
|
<div class="lay">
|
|
<div class="artrow">
|
|
<button class="m-skip" title="Previous" onclick={() => cmd("prev")}><Icon name="skip-back" size={18} /></button>
|
|
<div class="artbox" bind:this={artEl}>
|
|
<Art url={mini.artUrl} />
|
|
<button class="m-disc onart" title="Play/Pause" onclick={() => cmd("toggle")}><Icon name={playing() ? "pause" : "play"} size={19} /></button>
|
|
</div>
|
|
<button class="m-skip" title="Next" onclick={() => cmd("next")}><Icon name="skip-forward" size={18} /></button>
|
|
</div>
|
|
<div class="meta">
|
|
<div class="tt">{mini.title ?? "Nothing playing"}</div>
|
|
<div class="ar">{mini.artist ?? ""}</div>
|
|
<div class="al">{mini.album ?? ""}</div>
|
|
</div>
|
|
<Lane />
|
|
<div class="modes">
|
|
<button class="m-mode" class:on={mini.shuffle} title="Shuffle" onclick={() => cmd("shuffle")}><Icon name="shuffle" size={16} /></button>
|
|
<button class="m-mode" class:on={mini.repeat !== "off"} title="Repeat" onclick={() => cmd("repeat")}><Icon name={mini.repeat === "one" ? "repeat-one" : "repeat"} size={16} /></button>
|
|
<VolumeFly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.shape {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--bg-player);
|
|
}
|
|
.lay {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 16px 14px 12px;
|
|
gap: 9px;
|
|
}
|
|
.artrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.artrow .m-skip {
|
|
width: 26px;
|
|
}
|
|
.artbox {
|
|
position: relative;
|
|
flex: 1;
|
|
aspect-ratio: 1;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background: var(--bg-highlight);
|
|
}
|
|
/* The disc rides the art but only shows itself under the pointer — the
|
|
cover stays a cover until you reach for it. Hidden = click-through,
|
|
so a press on the resting art moves the window like anywhere else. */
|
|
:global(.m-disc.onart) {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 46px;
|
|
height: 46px;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 150ms, background 120ms, transform 120ms;
|
|
}
|
|
.artbox:hover :global(.m-disc.onart) {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
:global(.m-disc.onart:hover) {
|
|
transform: translate(-50%, -50%) scale(1.06);
|
|
}
|
|
.meta {
|
|
text-align: center;
|
|
min-width: 0;
|
|
}
|
|
.tt {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.ar {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 2px;
|
|
}
|
|
.al {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 1px;
|
|
}
|
|
.modes {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: -2px;
|
|
}
|
|
</style>
|