Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: MiniPlayer button clicks, 300px width, 8px margin, transparency

Browse Source 
- Stop event propagation on all buttons to prevent drag capture
- Reduce window size to 300x140px
- Increase margin to 8px
- Enable window transparency in tauri.conf.json
- Compact UI for smaller size (smaller artwork, tighter controls)
This commit is contained in:
vicrodh committed 2026-01-12 08:36:01 -06:00
1 parent 2278d9b90e
commit dc2c4237e6
4 files changed
+96 -267
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src-tauri/tauri.conf.json
+1 -1
View File
@@ -18,7 +18,7 @@
"minWidth": 800, "minWidth": 800,
"minHeight": 600, "minHeight": 600,
"decorations": false, "decorations": false,
"transparent": false, "transparent": true,
"resizable": true "resizable": true
} }
], ],
src/lib/services/miniplayerService.ts
+3 -3
View File
@@ -10,9 +10,9 @@
import { getCurrentWindow } from '@tauri-apps/api/window'; import { getCurrentWindow } from '@tauri-apps/api/window';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
// Miniplayer dimensions (with 4px margin on each side) // Miniplayer dimensions (with 8px margin on each side)
const MINIPLAYER_WIDTH = 408; // 400 content + 8px total margin const MINIPLAYER_WIDTH = 300;
const MINIPLAYER_HEIGHT = 158; // 150 content + 8px total margin const MINIPLAYER_HEIGHT = 140;
// LocalStorage key for persisting window state // LocalStorage key for persisting window state
const STORAGE_KEY = 'miniplayer_original_state'; const STORAGE_KEY = 'miniplayer_original_state';
src/routes/miniplayer/+layout.svelte
+4 -4
View File
@@ -19,16 +19,16 @@
:global(html, body) { :global(html, body) {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #0f0f12 !important; background: transparent !important;
overflow: hidden; overflow: hidden;
} }
.miniplayer-layout { .miniplayer-layout {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: #0f0f12; background: transparent;
overflow: hidden; overflow: hidden;
padding: 4px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -38,6 +38,6 @@
background: #18181b; background: #18181b;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
} }
</style> </style>
src/routes/miniplayer/+page.svelte
+88 -259
View File
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { invoke } from '@tauri-apps/api/core';
import { getCurrentWindow } from '@tauri-apps/api/window'; import { getCurrentWindow } from '@tauri-apps/api/window';
import { import {
Shuffle, Shuffle,
@@ -46,12 +45,10 @@
let isPinned = $state(true); let isPinned = $state(true);
let isDragging = $state(false); let isDragging = $state(false);
let isDraggingProgress = $state(false); let isDraggingProgress = $state(false);
let isDraggingVolume = $state(false);
let queueCount = $state(0); let queueCount = $state(0);
// Refs // Refs
let progressRef: HTMLDivElement; let progressRef: HTMLDivElement;
let volumeRef: HTMLDivElement;
// Derived state // Derived state
const progress = $derived(playerState.duration > 0 ? (playerState.currentTime / playerState.duration) * 100 : 0); const progress = $derived(playerState.duration > 0 ? (playerState.currentTime / playerState.duration) * 100 : 0);
@@ -68,16 +65,12 @@
onMount(async () => { onMount(async () => {
console.log('[MiniPlayer] Mounting, starting polling...'); console.log('[MiniPlayer] Mounting, starting polling...');
// Start listening for playback events
await startPolling(); await startPolling();
// Subscribe to player state
unsubscribePlayer = subscribePlayer(() => { unsubscribePlayer = subscribePlayer(() => {
playerState = getPlayerState(); playerState = getPlayerState();
}); });
// Subscribe to queue state
unsubscribeQueue = subscribeQueue(() => { unsubscribeQueue = subscribeQueue(() => {
const qState = getQueueState(); const qState = getQueueState();
isShuffle = qState.isShuffle; isShuffle = qState.isShuffle;
@@ -85,7 +78,6 @@
queueCount = qState.tracks.length; queueCount = qState.tracks.length;
}); });
// Initial state
const qState = getQueueState(); const qState = getQueueState();
isShuffle = qState.isShuffle; isShuffle = qState.isShuffle;
repeatMode = qState.repeatMode; repeatMode = qState.repeatMode;
@@ -100,7 +92,8 @@
}); });
// Playback controls // Playback controls
async function handlePlayPause(): Promise<void> { async function handlePlayPause(e: MouseEvent): Promise<void> {
e.stopPropagation();
try { try {
await togglePlay(); await togglePlay();
} catch (err) { } catch (err) {
@@ -108,7 +101,8 @@
} }
} }
async function handleNext(): Promise<void> { async function handleNext(e: MouseEvent): Promise<void> {
e.stopPropagation();
try { try {
await nextTrack(); await nextTrack();
} catch (err) { } catch (err) {
@@ -116,7 +110,8 @@
} }
} }
async function handlePrevious(): Promise<void> { async function handlePrevious(e: MouseEvent): Promise<void> {
e.stopPropagation();
try { try {
await previousTrack(); await previousTrack();
} catch (err) { } catch (err) {
@@ -124,7 +119,8 @@
} }
} }
async function handleToggleShuffle(): Promise<void> { async function handleToggleShuffle(e: MouseEvent): Promise<void> {
e.stopPropagation();
try { try {
await toggleShuffle(); await toggleShuffle();
} catch (err) { } catch (err) {
@@ -132,7 +128,8 @@
} }
} }
async function handleToggleRepeat(): Promise<void> { async function handleToggleRepeat(e: MouseEvent): Promise<void> {
e.stopPropagation();
try { try {
await toggleRepeat(); await toggleRepeat();
} catch (err) { } catch (err) {
@@ -142,6 +139,7 @@
// Progress bar // Progress bar
function handleProgressMouseDown(e: MouseEvent): void { function handleProgressMouseDown(e: MouseEvent): void {
e.stopPropagation();
isDraggingProgress = true; isDraggingProgress = true;
updateProgress(e); updateProgress(e);
document.addEventListener('mousemove', handleProgressMouseMove); document.addEventListener('mousemove', handleProgressMouseMove);
@@ -167,43 +165,17 @@
} }
} }
// Volume control // Window controls - stop propagation to prevent drag from capturing
function handleVolumeMouseDown(e: MouseEvent): void { async function handleRestore(e: MouseEvent): Promise<void> {
isDraggingVolume = true; e.stopPropagation();
updateVolume(e); e.preventDefault();
document.addEventListener('mousemove', handleVolumeMouseMove);
document.addEventListener('mouseup', handleVolumeMouseUp);
}
function handleVolumeMouseMove(e: MouseEvent): void {
if (isDraggingVolume) updateVolume(e);
}
function handleVolumeMouseUp(): void {
isDraggingVolume = false;
document.removeEventListener('mousemove', handleVolumeMouseMove);
document.removeEventListener('mouseup', handleVolumeMouseUp);
}
function updateVolume(e: MouseEvent): void {
if (volumeRef) {
const rect = volumeRef.getBoundingClientRect();
const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
playerSetVolume(Math.round(percentage));
}
}
function handleMuteToggle(): void {
playerSetVolume(playerState.volume === 0 ? 75 : 0);
}
// Window controls
async function handleRestore(): Promise<void> {
console.log('[MiniPlayer] Restore button clicked'); console.log('[MiniPlayer] Restore button clicked');
await exitMiniplayerMode(); await exitMiniplayerMode();
} }
async function togglePin(): Promise<void> { async function togglePin(e: MouseEvent): Promise<void> {
e.stopPropagation();
e.preventDefault();
isPinned = !isPinned; isPinned = !isPinned;
await setMiniplayerAlwaysOnTop(isPinned); await setMiniplayerAlwaysOnTop(isPinned);
} }
@@ -220,10 +192,9 @@
} }
} }
// Queue info (placeholder - will open queue panel later) function handleOpenQueue(e: MouseEvent): void {
function handleOpenQueue(): void { e.stopPropagation();
console.log('[MiniPlayer] Queue button clicked, tracks:', queueCount); console.log('[MiniPlayer] Queue button clicked, tracks:', queueCount);
// TODO: Open queue panel or switch to expanded mode
} }
</script> </script>
@@ -232,36 +203,37 @@
class:dragging={isDragging} class:dragging={isDragging}
role="application" role="application"
aria-label="MiniPlayer" aria-label="MiniPlayer"
onmousedown={startDrag}
> >
<!-- Album Art Section --> <!-- Album Art -->
<div class="artwork-section" onmousedown={startDrag}> <div class="artwork-section">
{#if playerState.currentTrack?.artwork} {#if playerState.currentTrack?.artwork}
<img src={playerState.currentTrack.artwork} alt="Album art" class="artwork" /> <img src={playerState.currentTrack.artwork} alt="Album art" class="artwork" />
{:else} {:else}
<div class="artwork-placeholder"> <div class="artwork-placeholder">
<Play size={32} /> <Play size={24} />
</div> </div>
{/if} {/if}
</div> </div>
<!-- Main Content --> <!-- Main Content -->
<div class="content-section"> <div class="content-section">
<!-- Header with track info and window controls --> <!-- Header: Track info + window controls -->
<div class="header" onmousedown={startDrag}> <div class="header">
<div class="track-info"> <div class="track-info">
<div class="title">{playerState.currentTrack?.title ?? 'No track playing'}</div> <div class="title">{playerState.currentTrack?.title ?? 'No track'}</div>
<div class="artist">{playerState.currentTrack?.artist ?? '—'}</div> <div class="artist">{playerState.currentTrack?.artist ?? '—'}</div>
</div> </div>
<div class="window-controls"> <div class="window-controls">
<button class="window-btn" onclick={togglePin} title={isPinned ? 'Unpin' : 'Pin on top'}> <button class="window-btn" onclick={togglePin} title={isPinned ? 'Unpin' : 'Pin'}>
{#if isPinned} {#if isPinned}
<Pin size={14} /> <Pin size={12} />
{:else} {:else}
<PinOff size={14} /> <PinOff size={12} />
{/if} {/if}
</button> </button>
<button class="window-btn restore" onclick={handleRestore} title="Restore window"> <button class="window-btn restore" onclick={handleRestore} title="Restore">
<Maximize2 size={14} /> <Maximize2 size={12} />
</button> </button>
</div> </div>
</div> </div>
@@ -282,92 +254,57 @@
<div class="progress-track"> <div class="progress-track">
<div class="progress-fill" style="width: {progress}%"></div> <div class="progress-fill" style="width: {progress}%"></div>
</div> </div>
<div class="progress-thumb" style="left: {progress}%"></div>
</div> </div>
<span class="time remaining">-{formatTime(Math.max(0, playerState.duration - playerState.currentTime))}</span> <span class="time">-{formatTime(Math.max(0, playerState.duration - playerState.currentTime))}</span>
</div> </div>
<!-- Controls Row --> <!-- Controls Row -->
<div class="controls-row"> <div class="controls-row">
<!-- Playback Controls -->
<div class="playback-controls">
<button <button
class="control-btn small" class="ctrl-btn"
class:active={isShuffle} class:active={isShuffle}
onclick={handleToggleShuffle} onclick={handleToggleShuffle}
title="Shuffle" title="Shuffle"
> >
<Shuffle size={14} /> <Shuffle size={12} />
</button> </button>
<button class="control-btn" onclick={handlePrevious} title="Previous"> <button class="ctrl-btn" onclick={handlePrevious} title="Previous">
<SkipBack size={18} /> <SkipBack size={14} />
</button> </button>
<button class="control-btn play" onclick={handlePlayPause} title={playerState.isPlaying ? 'Pause' : 'Play'}> <button class="ctrl-btn play" onclick={handlePlayPause} title={playerState.isPlaying ? 'Pause' : 'Play'}>
{#if playerState.isPlaying} {#if playerState.isPlaying}
<Pause size={20} /> <Pause size={16} />
{:else} {:else}
<Play size={20} /> <Play size={16} />
{/if} {/if}
</button> </button>
<button class="control-btn" onclick={handleNext} title="Next"> <button class="ctrl-btn" onclick={handleNext} title="Next">
<SkipForward size={18} /> <SkipForward size={14} />
</button> </button>
<button <button
class="control-btn small" class="ctrl-btn"
class:active={repeatMode !== 'off'} class:active={repeatMode !== 'off'}
onclick={handleToggleRepeat} onclick={handleToggleRepeat}
title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'} title="Repeat"
> >
{#if repeatMode === 'one'} {#if repeatMode === 'one'}
<Repeat1 size={14} /> <Repeat1 size={12} />
{:else} {:else}
<Repeat size={14} /> <Repeat size={12} />
{/if} {/if}
</button> </button>
</div>
<!-- Right Controls: Queue + Volume -->
<div class="right-controls">
<button <button
class="control-btn small" class="ctrl-btn"
onclick={handleOpenQueue} onclick={handleOpenQueue}
title="Queue ({queueCount} tracks)" title="Queue ({queueCount})"
> >
<ListMusic size={14} /> <ListMusic size={12} />
{#if queueCount > 0}
<span class="queue-badge">{queueCount > 99 ? '99+' : queueCount}</span>
{/if}
</button> </button>
<button class="control-btn small" onclick={handleMuteToggle} title={playerState.volume === 0 ? 'Unmute' : 'Mute'}>
{#if playerState.volume === 0}
<VolumeX size={14} />
{:else if playerState.volume < 50}
<Volume1 size={14} />
{:else}
<Volume2 size={14} />
{/if}
</button>
<div
class="volume-slider"
bind:this={volumeRef}
onmousedown={handleVolumeMouseDown}
role="slider"
tabindex="0"
aria-valuenow={playerState.volume}
aria-valuemin={0}
aria-valuemax={100}
>
<div class="volume-track">
<div class="volume-fill" style="width: {playerState.volume}%"></div>
</div>
<div class="volume-thumb" style="left: {playerState.volume}%"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -381,30 +318,25 @@
color: white; color: white;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
cursor: grab;
} }
.miniplayer.dragging { .miniplayer.dragging {
cursor: grabbing; cursor: grabbing;
} }
/* Album Art Section */ /* Album Art */
.artwork-section { .artwork-section {
width: 150px; width: 124px;
height: 150px; height: 124px;
flex-shrink: 0; flex-shrink: 0;
cursor: grab;
position: relative;
background: #0f0f11;
}
.artwork-section:active {
cursor: grabbing;
} }
.artwork { .artwork {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 6px 0 0 6px;
} }
.artwork-placeholder { .artwork-placeholder {
@@ -414,16 +346,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.2);
border-radius: 6px 0 0 6px;
} }
/* Content Section */ /* Content */
.content-section { .content-section {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px 14px; padding: 8px 10px;
min-width: 0; min-width: 0;
justify-content: space-between;
} }
/* Header */ /* Header */
@@ -431,12 +365,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 6px; gap: 6px;
cursor: grab;
}
.header:active {
cursor: grabbing;
} }
.track-info { .track-info {
@@ -447,7 +376,7 @@
.title { .title {
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 11px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -456,27 +385,25 @@
} }
.artist { .artist {
font-size: 11px; font-size: 10px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-top: 1px;
} }
.window-controls { .window-controls {
display: flex; display: flex;
gap: 4px; gap: 2px;
flex-shrink: 0; flex-shrink: 0;
margin-left: 8px;
} }
.window-btn { .window-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 22px; width: 20px;
height: 22px; height: 20px;
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
border: none; border: none;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@@ -491,37 +418,31 @@
} }
.window-btn.restore:hover { .window-btn.restore:hover {
background: rgba(99, 102, 241, 0.25); background: rgba(99, 102, 241, 0.3);
color: #a5b4fc; color: #a5b4fc;
} }
/* Progress Section */ /* Progress */
.progress-section { .progress-section {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
margin-bottom: 8px;
} }
.time { .time {
font-size: 10px; font-size: 9px;
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
min-width: 30px; min-width: 28px;
}
.time.remaining {
text-align: right;
} }
.progress-bar { .progress-bar {
flex: 1; flex: 1;
height: 16px; height: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
position: relative;
} }
.progress-track { .progress-track {
@@ -539,140 +460,48 @@
transition: width 100ms linear; transition: width 100ms linear;
} }
.progress-thumb { /* Controls */
position: absolute;
top: 50%;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 150ms ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.progress-bar:hover .progress-thumb {
opacity: 1;
}
/* Controls Row */
.controls-row { .controls-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.playback-controls {
display: flex;
align-items: center;
gap: 2px;
}
.right-controls {
display: flex;
align-items: center;
gap: 4px;
}
.control-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 30px; gap: 2px;
height: 30px; }
.ctrl-btn {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: transparent; background: transparent;
border: none; border: none;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
transition: all 0.15s ease; transition: all 0.15s ease;
position: relative;
} }
.control-btn:hover { .ctrl-btn:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
color: #fff; color: #fff;
} }
.control-btn:active { .ctrl-btn:active {
transform: scale(0.95); transform: scale(0.95);
} }
.control-btn.small { .ctrl-btn.active {
width: 26px;
height: 26px;
}
.control-btn.active {
color: #818cf8; color: #818cf8;
} }
.control-btn.play { .ctrl-btn.play {
width: 36px; width: 28px;
height: 36px; height: 28px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
margin: 0 2px;
} }
.control-btn.play:hover { .ctrl-btn.play:hover {
background: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.18);
} }
.queue-badge {
position: absolute;
top: 0;
right: 0;
min-width: 14px;
height: 14px;
padding: 0 3px;
font-size: 9px;
font-weight: 600;
background: #6366f1;
color: white;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
}
/* Volume Control */
.volume-slider {
width: 50px;
height: 16px;
display: flex;
align-items: center;
cursor: pointer;
position: relative;
}
.volume-track {
width: 100%;
height: 3px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.volume-fill {
height: 100%;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
.volume-thumb {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 150ms ease;
}
.volume-slider:hover .volume-thumb {
opacity: 1;
}
</style> </style>