Minor improvements to thumbnail progress bar

materialious/src/lib/Thumbnail.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+	import { playerSavePlaybackPosition } from '../store';
 	import type { Notification, Video, VideoBase } from './Api/model';
 	import { cleanNumber, truncate, videoLength } from './misc';
 
@@ -9,6 +11,13 @@
 	let loaded = false;
 	let failed = false;
 
+	let progress: string | null;
+	if (get(playerSavePlaybackPosition)) {
+		progress = localStorage.getItem(`v_${video.videoId}`);
+	} else {
+		progress = null;
+	}
+
 	onMount(() => {
 		const img = new Image();
 		img.src = video.videoThumbnails[3].url;
@@ -41,6 +50,14 @@
 	{:else}
 		<p>Failed to load image</p>
 	{/if}
+	{#if progress}
+		<progress
+			class="absolute right bottom"
+			style="z-index: 1;"
+			value={progress}
+			max={video.lengthSeconds}
+		></progress>
+	{/if}
 	{#if !('liveVideo' in video) || !video.liveVideo}
 		<div class="absolute right bottom small-margin black white-text small-text">
 			&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
@@ -55,10 +72,6 @@
 	{/if}
 </a>
 <div class="small-padding">
-	{#if localStorage.getItem(`v_${video.videoId}`)}
-		<progress value={localStorage.getItem(`v_${video.videoId}`)} max={video.lengthSeconds}
-		></progress>
-	{/if}
 	<nav class="no-margin">
 		<div class="max">
 			<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>

materialious/src/lib/VideoList.svelte

@@ -4,6 +4,7 @@
 	import Thumbnail from './Thumbnail.svelte';
 
 	export let videos: VideoBase[] | Video[] | Notification[] = [];
+	export let oneItemPerRow: boolean = false;
 </script>
 
 {#if videos.length > 0}
@@ -11,7 +12,7 @@
 		<div class="space"></div>
 		<div class="grid">
 			{#each videos as video}
-				<div class="s12 m6 l2">
+				<div class={`s12 m${oneItemPerRow ? '12' : '6'} l${oneItemPerRow ? '12' : '2'}`}>
 					<article class="no-padding" style="height: 100%;">
 						<Thumbnail {video} />
 					</article>

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

@@ -19,9 +19,7 @@
 			promises.push(getVideo(videoId));
 		}
 
-		const loadedHistory = (await Promise.all(promises)).sort((a: VideoPlay, b: VideoPlay) => {
-			return a.published > b.published ? -1 : 1;
-		});
+		const loadedHistory = await Promise.all(promises);
 		history = [...history, ...loadedHistory];
 	}
 

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

@@ -29,4 +29,25 @@
 	});
 </script>
 
+<div class="space" style="margin-bottom: 1em;">
+	<div class="tabs left-align min">
+		<a class="active">
+			<i>home</i>
+			<span>All</span>
+		</a>
+		<a>
+			<i>movie</i>
+			<span>Videos</span>
+		</a>
+		<a>
+			<i>playlist_add_check</i>
+			<span>Playlists</span>
+		</a>
+		<a>
+			<i>person</i>
+			<span>Channels</span>
+		</a>
+	</div>
+</div>
+
 <VideoList videos={search} />

materialious/src/routes/search/[slug]/+page.ts

@@ -5,4 +5,4 @@ export async function load({ params }) {
     search: await getSearch(params.slug, { type: "video" }),
     slug: params.slug
   };
-}
+}

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

@@ -167,7 +167,7 @@
 			</article>
 
 			<div class="space"></div>
-			{#if comments && comments.comments.length > 0}
+			{#if comments !== null && comments.comments !== undefined && comments.comments.length > 0}
 				<h6>{numberWithCommas(comments.commentCount)} comments</h6>
 				{#each comments.comments as comment}
 					<Comment {comment} videoId={data.video.videoId}></Comment>