668 lines
21 KiB
Svelte
668 lines
21 KiB
Svelte
|
<script>
|
|||
|
|
import { onMount, onDestroy } from 'svelte';
|
|||
|
|
import { browser } from '$app/environment';
|
|||
|
|
import { audioPlaylist, currentTrack, hasNext, hasPrevious } from '$lib/stores/audioPlaylist';
|
|||
|
|
|
|||
|
|
let seekBar;
|
|||
|
|
let volumeBar;
|
|||
|
|
let isDraggingSeek = false;
|
|||
|
|
let isDraggingVolume = false;
|
|||
|
|
let seekPosition = 0;
|
|||
|
|
|
|||
|
|
// Format time in mm:ss
|
|||
|
|
function formatTime(seconds) {
|
|||
|
|
if (!seconds || isNaN(seconds)) return '0:00';
|
|||
|
|
const mins = Math.floor(seconds / 60);
|
|||
|
|
const secs = Math.floor(seconds % 60);
|
|||
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Seek bar handling
|
|||
|
|
function handleSeekStart(e) {
|
|||
|
|
isDraggingSeek = true;
|
|||
|
|
handleSeekMove(e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleSeekMove(e) {
|
|||
|
|
if (!isDraggingSeek || !seekBar) return;
|
|||
|
|
const rect = seekBar.getBoundingClientRect();
|
|||
|
|
const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
|
|||
|
|
seekPosition = Math.max(0, Math.min(1, x / rect.width));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleSeekEnd() {
|
|||
|
|
if (isDraggingSeek) {
|
|||
|
|
const newTime = seekPosition * $audioPlaylist.duration;
|
|||
|
|
audioPlaylist.seek(newTime);
|
|||
|
|
}
|
|||
|
|
isDraggingSeek = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Volume bar handling
|
|||
|
|
function handleVolumeStart(e) {
|
|||
|
|
isDraggingVolume = true;
|
|||
|
|
handleVolumeMove(e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleVolumeMove(e) {
|
|||
|
|
if (!isDraggingVolume || !volumeBar) return;
|
|||
|
|
const rect = volumeBar.getBoundingClientRect();
|
|||
|
|
const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
|
|||
|
|
const volume = Math.max(0, Math.min(1, x / rect.width));
|
|||
|
|
audioPlaylist.setVolume(volume);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleVolumeEnd() {
|
|||
|
|
isDraggingVolume = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Keyboard shortcuts
|
|||
|
|
function handleKeydown(e) {
|
|||
|
|
if (!$audioPlaylist.enabled) return;
|
|||
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|||
|
|
|
|||
|
|
switch (e.code) {
|
|||
|
|
case 'Space':
|
|||
|
|
if (e.ctrlKey || e.metaKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
audioPlaylist.togglePlay();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
if (e.ctrlKey || e.metaKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
audioPlaylist.next();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
if (e.ctrlKey || e.metaKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
audioPlaylist.previous();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMount(() => {
|
|||
|
|
if (browser) {
|
|||
|
|
window.addEventListener('mousemove', handleSeekMove);
|
|||
|
|
window.addEventListener('mouseup', handleSeekEnd);
|
|||
|
|
window.addEventListener('touchmove', handleSeekMove);
|
|||
|
|
window.addEventListener('touchend', handleSeekEnd);
|
|||
|
|
window.addEventListener('mousemove', handleVolumeMove);
|
|||
|
|
window.addEventListener('mouseup', handleVolumeEnd);
|
|||
|
|
window.addEventListener('touchmove', handleVolumeMove);
|
|||
|
|
window.addEventListener('touchend', handleVolumeEnd);
|
|||
|
|
window.addEventListener('keydown', handleKeydown);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onDestroy(() => {
|
|||
|
|
if (browser) {
|
|||
|
|
window.removeEventListener('mousemove', handleSeekMove);
|
|||
|
|
window.removeEventListener('mouseup', handleSeekEnd);
|
|||
|
|
window.removeEventListener('touchmove', handleSeekMove);
|
|||
|
|
window.removeEventListener('touchend', handleSeekEnd);
|
|||
|
|
window.removeEventListener('mousemove', handleVolumeMove);
|
|||
|
|
window.removeEventListener('mouseup', handleVolumeEnd);
|
|||
|
|
window.removeEventListener('touchmove', handleVolumeMove);
|
|||
|
|
window.removeEventListener('touchend', handleVolumeEnd);
|
|||
|
|
window.removeEventListener('keydown', handleKeydown);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Calculate progress percentage
|
|||
|
|
$: progress = $audioPlaylist.duration > 0
|
|||
|
|
? (isDraggingSeek ? seekPosition : $audioPlaylist.currentTime / $audioPlaylist.duration) * 100
|
|||
|
|
: 0;
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
{#if $audioPlaylist.enabled && ($audioPlaylist.queue.length > 0 || $audioPlaylist.nowPlaying)}
|
|||
|
|
|
|||
|
|
<div class="audio-player" class:minimized={$audioPlaylist.minimized}>
|
|||
|
|
{#if $audioPlaylist.minimized}
|
|||
|
|
<!-- Minimized view -->
|
|||
|
|
<div class="mini-player">
|
|||
|
|
<div class="mini-thumb" on:click={() => audioPlaylist.toggleMinimized()}>
|
|||
|
|
{#if $currentTrack?.thumbnailPath}
|
|||
|
|
<img src={$currentTrack.thumbnailPath} alt="" />
|
|||
|
|
{:else}
|
|||
|
|
<div class="mini-thumb-placeholder">
|
|||
|
|
<span>{$currentTrack?.title?.charAt(0) || '?'}</span>
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
<div class="mini-progress" style="width: {progress}%"></div>
|
|||
|
|
</div>
|
|||
|
|
<button class="mini-play" on:click={() => audioPlaylist.togglePlay()}>
|
|||
|
|
{$audioPlaylist.isPlaying ? '⏸' : '▶'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{:else}
|
|||
|
|
<!-- Full player view -->
|
|||
|
|
<div class="player-header">
|
|||
|
|
<span class="queue-count">{$audioPlaylist.currentIndex + 1} / {$audioPlaylist.queue.length}</span>
|
|||
|
|
<div class="header-controls">
|
|||
|
|
<button class="header-btn" on:click={() => audioPlaylist.toggleMinimized()} title="Minimize">
|
|||
|
|
─
|
|||
|
|
</button>
|
|||
|
|
<button class="header-btn close" on:click={() => audioPlaylist.hide()} title="Close">
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="player-content">
|
|||
|
|
<!-- Track info -->
|
|||
|
|
<div class="track-info">
|
|||
|
|
<div class="track-thumb">
|
|||
|
|
{#if $currentTrack?.thumbnailPath}
|
|||
|
|
<img src={$currentTrack.thumbnailPath} alt="" />
|
|||
|
|
{:else}
|
|||
|
|
<div class="thumb-placeholder">
|
|||
|
|
<span>{$currentTrack?.title?.charAt(0) || '?'}</span>
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
<div class="track-details">
|
|||
|
|
<div class="track-title" title={$currentTrack?.title || 'Unknown'}>
|
|||
|
|
{$currentTrack?.title || 'Unknown'}
|
|||
|
|
</div>
|
|||
|
|
<div class="track-artist">
|
|||
|
|
{$currentTrack?.username || 'Unknown Artist'}
|
|||
|
|
{#if $currentTrack?.realmName}
|
|||
|
|
<span class="track-realm">in {$currentTrack.realmName}</span>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Progress bar -->
|
|||
|
|
<div class="progress-container">
|
|||
|
|
<span class="time">{formatTime(isDraggingSeek ? seekPosition * $audioPlaylist.duration : $audioPlaylist.currentTime)}</span>
|
|||
|
|
<div
|
|||
|
|
class="progress-bar"
|
|||
|
|
bind:this={seekBar}
|
|||
|
|
on:mousedown={handleSeekStart}
|
|||
|
|
on:touchstart={handleSeekStart}
|
|||
|
|
>
|
|||
|
|
<div class="progress-fill" style="width: {progress}%"></div>
|
|||
|
|
<div class="progress-thumb" style="left: {progress}%"></div>
|
|||
|
|
</div>
|
|||
|
|
<span class="time">{formatTime($audioPlaylist.duration)}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Main controls -->
|
|||
|
|
<div class="main-controls">
|
|||
|
|
<button
|
|||
|
|
class="control-btn secondary"
|
|||
|
|
class:active={$audioPlaylist.shuffle}
|
|||
|
|
on:click={() => audioPlaylist.toggleShuffle()}
|
|||
|
|
title="Shuffle"
|
|||
|
|
>
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|||
|
|
<polyline points="16 3 21 3 21 8"></polyline>
|
|||
|
|
<line x1="4" y1="20" x2="21" y2="3"></line>
|
|||
|
|
<polyline points="21 16 21 21 16 21"></polyline>
|
|||
|
|
<line x1="15" y1="15" x2="21" y2="21"></line>
|
|||
|
|
<line x1="4" y1="4" x2="9" y2="9"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
class="control-btn"
|
|||
|
|
disabled={!$hasPrevious}
|
|||
|
|
on:click={() => audioPlaylist.previous()}
|
|||
|
|
title="Previous"
|
|||
|
|
>
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M6 6h2v12H6v-12zm3.5 6l8.5 6V6l-8.5 6z"/>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button class="control-btn play" on:click={() => audioPlaylist.togglePlay()}>
|
|||
|
|
{#if $audioPlaylist.isPlaying}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|||
|
|
</svg>
|
|||
|
|
{:else}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M8 5v14l11-7z"/>
|
|||
|
|
</svg>
|
|||
|
|
{/if}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
class="control-btn"
|
|||
|
|
disabled={!$hasNext}
|
|||
|
|
on:click={() => audioPlaylist.next()}
|
|||
|
|
title="Next"
|
|||
|
|
>
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z"/>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
class="control-btn secondary"
|
|||
|
|
class:active={$audioPlaylist.repeat !== 'none'}
|
|||
|
|
on:click={() => audioPlaylist.cycleRepeat()}
|
|||
|
|
title={`Repeat: ${$audioPlaylist.repeat}`}
|
|||
|
|
>
|
|||
|
|
{#if $audioPlaylist.repeat === 'one'}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|||
|
|
<polyline points="17 1 21 5 17 9"></polyline>
|
|||
|
|
<path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
|
|||
|
|
<polyline points="7 23 3 19 7 15"></polyline>
|
|||
|
|
<path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
|
|||
|
|
<text x="12" y="14" font-size="7" fill="currentColor" stroke="none" text-anchor="middle" dominant-baseline="middle">1</text>
|
|||
|
|
</svg>
|
|||
|
|
{:else}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|||
|
|
<polyline points="17 1 21 5 17 9"></polyline>
|
|||
|
|
<path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
|
|||
|
|
<polyline points="7 23 3 19 7 15"></polyline>
|
|||
|
|
<path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
|
|||
|
|
</svg>
|
|||
|
|
{/if}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Volume control -->
|
|||
|
|
<div class="volume-container">
|
|||
|
|
<button
|
|||
|
|
class="control-btn secondary"
|
|||
|
|
on:click={() => audioPlaylist.toggleMute()}
|
|||
|
|
title={$audioPlaylist.muted ? 'Unmute' : 'Mute'}
|
|||
|
|
>
|
|||
|
|
{#if $audioPlaylist.muted || $audioPlaylist.volume === 0}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
|
|||
|
|
</svg>
|
|||
|
|
{:else if $audioPlaylist.volume < 0.5}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
|
|||
|
|
</svg>
|
|||
|
|
{:else}
|
|||
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|||
|
|
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
|||
|
|
</svg>
|
|||
|
|
{/if}
|
|||
|
|
</button>
|
|||
|
|
<div
|
|||
|
|
class="volume-bar"
|
|||
|
|
bind:this={volumeBar}
|
|||
|
|
on:mousedown={handleVolumeStart}
|
|||
|
|
on:touchstart={handleVolumeStart}
|
|||
|
|
>
|
|||
|
|
<div class="volume-fill" style="width: {$audioPlaylist.muted ? 0 : $audioPlaylist.volume * 100}%"></div>
|
|||
|
|
<div class="volume-thumb" style="left: {$audioPlaylist.muted ? 0 : $audioPlaylist.volume * 100}%"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.audio-player {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 1rem;
|
|||
|
|
right: 1rem;
|
|||
|
|
width: 320px;
|
|||
|
|
background: #161b22;
|
|||
|
|
border: 1px solid #30363d;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|||
|
|
z-index: 9998;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-player.minimized {
|
|||
|
|
width: auto;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Mini player */
|
|||
|
|
.mini-player {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
padding: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-thumb {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-thumb img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-thumb-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(135deg, #561d5e, #8b3a92);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-progress {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 3px;
|
|||
|
|
background: #8b3a92;
|
|||
|
|
border-radius: 0 0 0 50%;
|
|||
|
|
transition: width 0.1s linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-play {
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
border: none;
|
|||
|
|
background: #8b3a92;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
transition: transform 0.15s ease, background 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mini-play:hover {
|
|||
|
|
background: #a64daf;
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Full player */
|
|||
|
|
.player-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0.5rem 0.75rem;
|
|||
|
|
background: #0d1117;
|
|||
|
|
border-bottom: 1px solid #30363d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.queue-count {
|
|||
|
|
color: #8b949e;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-controls {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-btn {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
color: #8b949e;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
transition: all 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-btn:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
color: #c9d1d9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-btn.close:hover {
|
|||
|
|
color: #f85149;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.player-content {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Track info */
|
|||
|
|
.track-info {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-thumb {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-thumb img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thumb-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(135deg, #561d5e, #8b3a92);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-details {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-title {
|
|||
|
|
color: #c9d1d9;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-artist {
|
|||
|
|
color: #8b949e;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.track-realm {
|
|||
|
|
color: #6e7681;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Progress bar */
|
|||
|
|
.progress-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
color: #8b949e;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-family: monospace;
|
|||
|
|
min-width: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time:last-child {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bar {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 4px;
|
|||
|
|
background: #30363d;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: #8b3a92;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
transition: width 0.1s linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-thumb {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bar:hover .progress-thumb {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Main controls */
|
|||
|
|
.main-controls {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border: none;
|
|||
|
|
background: none;
|
|||
|
|
color: #c9d1d9;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
transition: all 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn svg {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn:hover:not(:disabled) {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn:disabled {
|
|||
|
|
opacity: 0.3;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn.secondary {
|
|||
|
|
color: #8b949e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn.secondary svg {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn.secondary.active {
|
|||
|
|
color: #8b3a92;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn.play {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
background: #8b3a92;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn.play:hover {
|
|||
|
|
background: #a64daf;
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-btn.play svg {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Volume control */
|
|||
|
|
.volume-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.volume-bar {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 100px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: #30363d;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.volume-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: #8b3a92;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
transition: width 0.1s linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.volume-thumb {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 10px;
|
|||
|
|
height: 10px;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.15s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.volume-bar:hover .volume-thumb {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 400px) {
|
|||
|
|
.audio-player {
|
|||
|
|
width: calc(100vw - 2rem);
|
|||
|
|
right: 1rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|