Remove playlist videos with no length

materialious/src/routes/(app)/playlist/[slug]/+page.svelte

@@ -17,6 +17,9 @@
 		videos = data.playlist.videos.sort((a: PlaylistPageVideo, b: PlaylistPageVideo) => {
 			return a.index < b.index ? -1 : 1;
 		});
+		videos = videos.filter((playlistVideo) => {
+			return playlistVideo.lengthSeconds > 0;
+		});
 
 		onMount(async () => {
 			for (let page = 1; page++; ) {
@@ -29,6 +32,9 @@
 						return a.index < b.index ? -1 : 1;
 					}
 				);
+				videos = videos.filter((playlistVideo) => {
+					return playlistVideo.lengthSeconds > 0;
+				});
 			}
 		});
 	}

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -320,6 +320,10 @@
 					return a.index < b.index ? -1 : 1;
 				}
 			);
+
+			playlistVideos = playlistVideos.filter((playlistVideo) => {
+				return playlistVideo.lengthSeconds > 0;
+			});
 		}
 	}
 
@@ -641,7 +645,11 @@
 					{/each}
 				{/if}
 			{:else}
-				<article style="height: 85vh; position: relative;" id="playlist" class="scroll no-padding">
+				<article
+					style="height: 85vh; position: relative;"
+					id="playlist"
+					class="scroll no-padding surface-container-high"
+				>
 					<article class="no-elevate" style="position: sticky; top: 0; z-index: 3;">
 						<h6>{playlist.title}</h6>
 						<p>
@@ -697,7 +705,11 @@
 							class:border={playlistVideo.videoId === data.video.videoId}
 						>
 							{#key playlistVideo.videoId}
-								<Thumbnail video={playlistVideo} playlistId={data.playlistId || undefined} />
+								<Thumbnail
+									video={playlistVideo}
+									sideways={true}
+									playlistId={data.playlistId || undefined}
+								/>
 							{/key}
 						</article>
 					{/each}