markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 11:41:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): housekeeping

Browse Source
This commit is contained in:
Markury
2025-10-04 16:21:33 -04:00
parent 8b3989e71f
commit e535fdb4bc
5 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/components/ContextMenu.svelte
View File

@@ -48,6 +48,13 @@
onClose();
}
}
function handleKeyDown(e: KeyboardEvent, item: MenuItem) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleItemClick(item);
}
}
</script>
<div
@@ -61,6 +68,8 @@
role="menuitem"
class:disabled={item.disabled}
onclick={() => handleItemClick(item)}
onkeydown={(e) => handleKeyDown(e, item)}
tabindex="0"
>
{item.label}
</li>

14
src/lib/components/NowPlayingPanel.svelte
View File

@@ -4,6 +4,14 @@
import LyricsDisplay from '$lib/components/LyricsDisplay.svelte';
import TriangleVolumeSlider from '$lib/components/TriangleVolumeSlider.svelte';
// Local volume state that syncs with the store
let volume = $state($playback.volume);
// Sync local volume with store volume
$effect(() => {
volume = $playback.volume;
});
function handlePlayPause() {
playback.togglePlayPause();
}
@@ -23,8 +31,8 @@
playback.setCurrentTime(time);
}
function handleVolumeChange(volume: number) {
playback.setVolume(volume);
function handleVolumeChange(newVolume: number) {
playback.setVolume(newVolume);
}
function formatTime(seconds: number): string {
@@ -127,7 +135,7 @@
</div>
<div class="volume-section">
<TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
<TriangleVolumeSlider bind:value={volume} onchange={handleVolumeChange} />
</div>
</div>
</div>

3
src/lib/components/TriangleVolumeSlider.svelte
View File

@@ -148,6 +148,9 @@
bind:this={volumeThumb}
onmousedown={handleThumbMouseDown}
ontouchstart={handleThumbTouchStart}
role="button"
tabindex="-1"
aria-label="Volume slider thumb"
>
<div class="volume-thumb-inner"></div>
</div>

2
src/lib/stores/playback.ts
View File

@@ -46,6 +46,8 @@ function createPlaybackStore(): PlaybackStore {
return {
subscribe,
set,
update,
// Queue management
playTrack(track: Track) {

37
src/routes/services/deezer/playlists/[id]/+page.svelte
View File

@@ -98,24 +98,29 @@
// If we have cached album picture, use it
if (cachedTracks[0].album_picture) {
playlistPicture = cachedTracks[0].album_picture;
} else if ($deezerAuth.arl && cachedTracks[0].track_id) {
// Fetch album data from API to get cover
try {
deezerAPI.setArl($deezerAuth.arl);
const trackData = await deezerAPI.getTrackData(cachedTracks[0].track_id);
if (trackData && trackData.ALB_PICTURE) {
const albumCoverUrl = `https://e-cdns-images.dzcdn.net/images/cover/${trackData.ALB_PICTURE}/500x500-000000-80-0-0.jpg`;
playlistPicture = albumCoverUrl;
} else if ($deezerAuth.arl) {
// Get the track ID - handle both DeezerTrack (has 'id') and DeezerPlaylistTrack (has 'track_id')
const trackId = 'track_id' in cachedTracks[0] ? cachedTracks[0].track_id : cachedTracks[0].id;
// Update cache with the album picture
const database = await import('$lib/library/deezer-database').then(m => m.initDeezerDatabase());
await database.execute(
'UPDATE deezer_playlist_tracks SET album_picture = $1 WHERE track_id = $2',
[albumCoverUrl, cachedTracks[0].track_id]
);
if (trackId) {
// Fetch album data from API to get cover
try {
deezerAPI.setArl($deezerAuth.arl);
const trackData = await deezerAPI.getTrack(trackId);
if (trackData && trackData.ALB_PICTURE) {
const albumCoverUrl = `https://e-cdns-images.dzcdn.net/images/cover/${trackData.ALB_PICTURE}/500x500-000000-80-0-0.jpg`;
playlistPicture = albumCoverUrl;
// Update cache with the album picture
const database = await import('$lib/library/deezer-database').then(m => m.initDeezerDatabase());
await database.execute(
'UPDATE deezer_playlist_tracks SET album_picture = $1 WHERE track_id = $2',
[albumCoverUrl, trackId]
);
}
} catch (err) {
console.error('Failed to fetch album cover:', err);
}
} catch (err) {
console.error('Failed to fetch album cover:', err);
}
}
}