Merge pull request #99 from WardPearce/fix/playlist-out-of-bound

Fix index out of bounds for playlists without any items

materialious/src/lib/PlaylistThumbnail.svelte

@@ -5,23 +5,28 @@
 	import { truncate } from './misc';
 
 	export let playlist: Playlist;
+	export let disabled: boolean = false;
 
 	let loading = true;
-	let loaded = false;
 	let failed = false;
 
 	let img: HTMLImageElement;
 
+	const playlistLink = `/playlist/${playlist.playlistId}`;
+
 	onMount(() => {
 		img = new Image();
 		if (playlist.videos.length > 0) {
 			img.src = playlist.videos[0].videoThumbnails[4].url;
-		} else {
+		} else if (playlist.playlistThumbnail) {
 			img.src = playlist.playlistThumbnail;
+		} else {
+			img.src = '';
+			loading = false;
+			return;
 		}
 
 		img.onload = () => {
-			loaded = true;
 			loading = false;
 		};
 		img.onerror = () => {
@@ -32,14 +37,15 @@
 </script>
 
 <a
-	href={`/playlist/${playlist.playlistId}`}
+	href={playlistLink}
+	class:link-disabled={disabled}
 	style="width: 100%; overflow: hidden;min-height:100px;"
 	class="wave"
 >
 	{#if playlist.videoCount > 0}
 		{#if loading}
 			<progress class="circle"></progress>
-		{:else}
+		{:else if img.src !== ''}
 			<img
 				class="responsive"
 				style="max-width: 100%;height: 100%;"
@@ -47,6 +53,8 @@
 				alt="Thumbnail for playlist"
 			/>
 		{/if}
+	{:else}
+		<h6 style="margin: 3em 0;">No image</h6>
 	{/if}
 	<div class="absolute right bottom small-margin black white-text small-text thumbnail-corner">
 		{playlist.videoCount}
@@ -57,7 +65,7 @@
 <div class="small-padding">
 	<nav class="no-margin">
 		<div class="max">
-			<a href={`/playlist/${playlist.playlistId}`}
+			<a class:link-disabled={disabled} href={playlistLink}
 				><div class="bold">{truncate(playlist.title)}</div></a
 			>
 			<div>
@@ -66,3 +74,9 @@
 		</div>
 	</nav>
 </div>
+
+<style>
+	.link-disabled {
+		pointer-events: none;
+	}
+</style>

materialious/src/lib/VideoList.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PlaylistPageVideo, Video, VideoBase } from './Api/model';
-	import PageLoading from './PageLoading.svelte';
 	import Thumbnail from './Thumbnail.svelte';
 
 	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
@@ -8,19 +7,15 @@
 	export let playlistId: string = '';
 </script>
 
-{#if videos.length > 0}
-	<div class="page right active">
-		<div class="space"></div>
-		<div class="grid">
-			{#each videos as video}
-				<div class={`s12 m${oneItemPerRow ? '12' : '6'} l${oneItemPerRow ? '12' : '2'}`}>
-					<article class="no-padding" style="height: 100%;">
-						<Thumbnail {video} {playlistId} />
-					</article>
-				</div>
-			{/each}
-		</div>
+<div class="page right active">
+	<div class="space"></div>
+	<div class="grid">
+		{#each videos as video}
+			<div class={`s12 m${oneItemPerRow ? '12' : '6'} l${oneItemPerRow ? '12' : '2'}`}>
+				<article class="no-padding" style="height: 100%;">
+					<Thumbnail {video} {playlistId} />
+				</article>
+			</div>
+		{/each}
 	</div>
-{:else}
-	<PageLoading />
-{/if}
+</div>

materialious/src/routes/history/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { deleteHistory, getHistory, getVideo } from '$lib/Api';
 	import type { VideoPlay } from '$lib/Api/model';
+	import PageLoading from '$lib/PageLoading.svelte';
 	import VideoList from '$lib/VideoList.svelte';
 	import { error } from '@sveltejs/kit';
 	import { onMount } from 'svelte';
@@ -67,6 +68,10 @@
 	</button>
 </div>
 
-<VideoList videos={history} />
+{#if loaded}
+	<VideoList videos={history} />
 
-<InfiniteLoading on:infinite={loadMore} />
+	<InfiniteLoading on:infinite={loadMore} />
+{:else}
+	<PageLoading />
+{/if}

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

@@ -12,7 +12,7 @@
 	activePage.set(null);
 
 	let videos: PlaylistPageVideo[] | undefined;
-	if (data.playlist.videos) {
+	if (data.playlist.videos.length > 0) {
 		videos = data.playlist.videos.sort((a: PlaylistPageVideo, b: PlaylistPageVideo) => {
 			return a.index < b.index ? -1 : 1;
 		});

materialious/src/routes/playlists/+page.svelte

@@ -37,7 +37,7 @@
 		{#each data.playlists as playlist}
 			<div class="s12 m6 l2">
 				<article class="no-padding" style="height: 100%;">
-					<PlaylistThumbnail {playlist} />
+					<PlaylistThumbnail disabled={playlist.videoCount === 0} {playlist} />
 
 					<nav class="right-align padding">
 						<button