diff --git a/src/lib/components/media/artistList.svelte b/src/lib/components/media/artistList.svelte new file mode 100644 index 0000000..31f81ef --- /dev/null +++ b/src/lib/components/media/artistList.svelte @@ -0,0 +1,42 @@ + + + + +
+ {#if 'artists' in mediaItem && mediaItem.artists && typeof mediaItem.artists === 'string'} + {mediaItem.artists} + {:else if 'artists' in mediaItem && mediaItem.artists && typeof mediaItem.artists !== 'string' && mediaItem.artists.length > 0} + {#each mediaItem.artists as artist, index} + {#if linked} + {artist.name} + {:else} + {artist.name} + {/if} + {#if index < mediaItem.artists.length - 1} + , + {/if} + {/each} + {:else if 'uploader' in mediaItem && mediaItem.uploader} + {#if linked} + {mediaItem.uploader.name} + {:else} + {mediaItem.uploader.name} + {/if} + {:else if 'createdBy' in mediaItem && mediaItem.createdBy} + {#if linked} + {mediaItem.createdBy.name} + {:else} + {mediaItem.createdBy.name} + {/if} + {/if} +
diff --git a/src/lib/components/media/lazyImage.svelte b/src/lib/components/media/lazyImage.svelte index 1b47d5d..beae5d2 100644 --- a/src/lib/components/media/lazyImage.svelte +++ b/src/lib/components/media/lazyImage.svelte @@ -7,6 +7,8 @@ @param thumbnailUrl A string of a URL that points to the desired image. @param alt Supplementary text in the event the image fails to load. @param loadingMethod Optional. Either the string 'lazy' or 'eager', defaults to lazy. The method by which to load the image. + @param objectFit One of the following fill, contain, cover, none, scale-down. Specifies the object-fit styling of the image + @param objectPosistion Optional. Specifies the object-position styling of the image. Defaults to 'center' --> @@ -41,7 +39,7 @@ on:click={() => { switch (mediaItem.type) { case 'song': - queueRef.setQueue([mediaItem]) + $queue.setQueue([mediaItem]) break case 'album': case 'playlist': diff --git a/src/lib/components/media/mediaPlayer.svelte b/src/lib/components/media/mediaPlayer.svelte index 9639609..f660c2a 100644 --- a/src/lib/components/media/mediaPlayer.svelte +++ b/src/lib/components/media/mediaPlayer.svelte @@ -6,6 +6,9 @@ import Slider from '$lib/components/util/slider.svelte' import Loader from '$lib/components/util/loader.svelte' import LazyImage from './lazyImage.svelte' + import IconButton from '$lib/components/util/iconButton.svelte' + import ScrollingText from '$lib/components/util/scrollingText.svelte' + import ArtistList from './artistList.svelte' $: currentlyPlaying = $queue.current @@ -31,16 +34,28 @@ return hours > 0 ? `${hours}:`.concat(durationString) : durationString } - $: if (currentlyPlaying) updateMediaSession(currentlyPlaying) - function updateMediaSession(media: Song) { - if ('mediaSession' in navigator) { - navigator.mediaSession.metadata = new MediaMetadata({ - title: media.name, - artist: media.artists?.map((artist) => artist.name).join(', ') || media.uploader?.name, - album: media.album?.name, - artwork: [{ src: `/api/remoteImage?url=${media.thumbnailUrl}`, sizes: '256x256', type: 'image/png' }], - }) + $: updateMediaSession(currentlyPlaying) + function updateMediaSession(media: Song | null) { + if (!('mediaSession' in navigator)) return + + if (!media) { + navigator.mediaSession.metadata = null + return } + + navigator.mediaSession.metadata = new MediaMetadata({ + title: media.name, + artist: media.artists?.map((artist) => artist.name).join(', ') || media.uploader?.name, + album: media.album?.name, + artwork: [ + { src: `/api/remoteImage?url=${media.thumbnailUrl}&maxWidth=96`, sizes: '96x96', type: 'image/png' }, + { src: `/api/remoteImage?url=${media.thumbnailUrl}&maxWidth=128`, sizes: '128x128', type: 'image/png' }, + { src: `/api/remoteImage?url=${media.thumbnailUrl}&maxWidth=192`, sizes: '192x192', type: 'image/png' }, + { src: `/api/remoteImage?url=${media.thumbnailUrl}&maxWidth=256`, sizes: '256x256', type: 'image/png' }, + { src: `/api/remoteImage?url=${media.thumbnailUrl}&maxWidth=384`, sizes: '384x384', type: 'image/png' }, + { src: `/api/remoteImage?url=${media.thumbnailUrl}&maxWidth=512`, sizes: '512x512', type: 'image/png' }, + ], + }) } onMount(() => { @@ -80,100 +95,98 @@ $: if (!seeking && expandedProgressBar) expandedProgressBar.$set({ value: currentTime }) $: if (!seeking && expandedDurationTimestamp) expandedDurationTimestamp.innerText = formatTime(duration) - let slidingText: HTMLElement - let slidingTextWidth: number, slidingTextWrapperWidth: number - let scrollDirection: 1 | -1 = 1 - $: scrollDistance = slidingTextWidth - slidingTextWrapperWidth - $: if (slidingText && scrollDistance > 0) slidingText.style.animationDuration = `${scrollDistance / 50}s` - let audioElement: HTMLAudioElement {#if currentlyPlaying}
{#if !expanded} -
-
+
+
- +
-
-
{currentlyPlaying.name}
-
{currentlyPlaying.artists?.map((artist) => artist.name).join(', ') || currentlyPlaying.uploader?.name}
+
+
+ +
{currentlyPlaying.name}
+ +
+
+ +
-
-
- - - - - +
+ $queue.previous()}> + + +
+ (paused = !paused)}> +
+ {#if waiting} + + {:else} + + {/if} +
+
-
+ $queue.clear()}> + + + $queue.next()}> + + +
-
- { - currentTimeTimestamp.innerText = formatTime(event.detail.value) - seeking = true - }} - on:seeked={(event) => { - currentTime = event.detail.value - seeking = false - }} - /> -
+ { + currentTimeTimestamp.innerText = formatTime(event.detail.value) + seeking = true + }} + on:seeked={(event) => { + currentTime = event.detail.value + seeking = false + }} + />
-
-
- -
- { - if (volume > 0) localStorage.setItem('volume', volume.toString()) - }} - /> -
+
+
+ { + if (volume > 0) localStorage.setItem('volume', volume.toString()) + }} + /> + (volume = volume > 0 ? 0 : Number(localStorage.getItem('volume')))}> + +
- - + (shuffled ? $queue.reorder() : $queue.shuffle())}> + + + (loop = !loop)}> + + + (expanded = true)}> + +
{:else} -
- +
+
+ +
- {#key currentlyPlaying} - - {/key} +
UP NEXT @@ -181,13 +194,15 @@ {@const isCurrent = item === currentlyPlaying}
-
+
-
-
- (scrollDirection *= -1)} - id="scrollingText" - class="{scrollDistance > 0 ? (scrollDirection > 0 ? 'scrollLeft' : 'scrollRight') : ''} absolute whitespace-nowrap text-3xl">{currentlyPlaying.name} +
+
+ + {currentlyPlaying.name} +
-
- {#if currentlyPlaying.artists && currentlyPlaying.artists.length > 0} - {#each currentlyPlaying.artists as artist, index} - (expanded = false)} - class="line-clamp-1 flex-shrink-0 text-lg hover:underline focus:underline" - href="/details/artist?id={artist.id}&connection={currentlyPlaying.connection.id}">{artist.name} - {#if index < currentlyPlaying.artists.length - 1} - , - {/if} - {/each} - {:else if currentlyPlaying.uploader} + {#if (currentlyPlaying.artists && currentlyPlaying.artists.length > 0) || currentlyPlaying.uploader} +
+ + +
+ {/if} + {#if currentlyPlaying.album} +
+ (expanded = false)} - class="line-clamp-1 flex-shrink-0 text-lg hover:underline focus:underline" - href="/details/user?id={currentlyPlaying.uploader.id}&connection={currentlyPlaying.connection.id}">{currentlyPlaying.uploader.name} - {/if} - {#if currentlyPlaying.album} - - - (expanded = false)} - class="line-clamp-1 flex-shrink-0 text-lg hover:underline focus:underline" + class="line-clamp-1 flex-shrink-0 hover:underline focus:underline" href="/details/album?id={currentlyPlaying.album.id}&connection={currentlyPlaying.connection.id}">{currentlyPlaying.album.name} - {/if} -
+
+ {/if}
-
+
@@ -275,7 +274,7 @@
-
+
-
- - +
+ ($itemDisplayState = 'list')}> + + + ($itemDisplayState = 'grid')}> + +
{#key currentPathname} @@ -34,9 +35,6 @@