Added support for playlist thumbnails

materialious/src/lib/api/youtubejs/schema.ts

@@ -1,9 +1,9 @@
 import { cleanNumber, extractNumber } from '$lib/numbers';
 import { convertToSeconds } from '$lib/time';
-import type { Channel, Thumbnail, Video } from '../model';
+import type { Channel, Playlist, Thumbnail, Video } from '../model';
 import { Helpers, YTNodes } from 'youtubei.js';
 
-export function invidiousItemSchema(item: Helpers.YTNode): Video | Channel | undefined {
+export function invidiousItemSchema(item: Helpers.YTNode): Video | Channel | Playlist | undefined {
 	if (item.is(YTNodes.Video)) {
 		const views = extractNumber(item.view_count?.toString() || '');
 		return {
@@ -40,5 +40,26 @@ export function invidiousItemSchema(item: Helpers.YTNode): Video | Channel | und
 			descriptionHml: item.description_snippet.toHTML() ?? '',
 			authorThumbnails: item.author.thumbnails as Thumbnail[]
 		};
+	} else if (item.is(YTNodes.LockupView) && item.content_type === 'PLAYLIST') {
+		let author = '';
+		const metadataRows = item.metadata?.metadata?.metadata_rows[0];
+		if (metadataRows && metadataRows.metadata_parts) {
+			author = metadataRows.metadata_parts[0].text?.text ?? '';
+		}
+		return {
+			type: 'playlist',
+			title: item.metadata?.title.text ?? '',
+			playlistId: item.content_id,
+			playlistThumbnail: item.content_image?.is(YTNodes.CollectionThumbnailView)
+				? item.content_image.primary_thumbnail?.is(YTNodes.ThumbnailView)
+					? item.content_image.primary_thumbnail.image[0].url
+					: ''
+				: '',
+			authorVerified: false,
+			author,
+			authorId: '',
+			videoCount: 0,
+			videos: []
+		};
 	}
 }

materialious/src/lib/components/PlaylistThumbnail.svelte

@@ -25,10 +25,10 @@
 	onMount(async () => {
 		if (get(interfaceLowBandwidthMode)) return;
 
-		let imgSrc = '';
+		let imgSrc;
 		if (playlist.videos && playlist.videos.length > 0) {
 			imgSrc = getBestThumbnail(playlist.videos[0].videoThumbnails) || '';
-		} else if (playlist.playlistThumbnail && playlist.playlistThumbnail.length > 0) {
+		} else if (playlist.playlistThumbnail) {
 			imgSrc = playlist.playlistThumbnail;
 		} else {
 			imgSrc = '';
@@ -53,18 +53,14 @@
 	style="width: 100%; overflow: hidden;min-height:100px;"
 	class="wave"
 >
-	{#if playlist.videoCount > 0 && !$interfaceLowBandwidthMode}
-		{#if loading}
-			<progress class="circle"></progress>
-		{:else if img && img.src !== ''}
-			<img
-				loading="lazy"
-				class="responsive"
-				style="max-width: 100%;height: 100%;"
-				src={img.src}
-				alt="Thumbnail for playlist"
-			/>
-		{/if}
+	{#if !$interfaceLowBandwidthMode && img}
+		<img
+			loading="lazy"
+			class="responsive"
+			style="max-width: 100%;height: 100%;"
+			src={img.src}
+			alt="Thumbnail for playlist"
+		/>
 	{:else}
 		<h6 style="margin: 3em 0;">No image</h6>
 	{/if}