Merge pull request #172 from WardPearce/update/svelte-promises

Update/svelte promises

materialious/src/routes/+layout.svelte

@@ -579,7 +579,7 @@
 
 		<form on:submit|preventDefault={() => returnYTDislikesInstanceStore.set(returnYTInstance)}>
 			<nav>
-				<div class="field label border">
+				<div class="field label border max">
 					<input bind:value={returnYTInstance} name="returnyt-instance" type="text" />
 					<label for="returnyt-instance">{$_('layout.instanceUrl')}</label>
 				</div>
@@ -609,7 +609,7 @@
 
 		<form on:submit|preventDefault={() => sponsorBlockUrlStore.set(sponsorBlockInstance)}>
 			<nav>
-				<div class="field label border">
+				<div class="field label border max">
 					<input bind:value={sponsorBlockInstance} name="sponsorblock-instance" type="text" />
 					<label for="sponsorblock-instance">{$_('layout.instanceUrl')}</label>
 				</div>
@@ -657,7 +657,7 @@
 
 		<form on:submit|preventDefault={() => deArrowInstanceStore.set(deArrowUrl)}>
 			<nav>
-				<div class="field label border">
+				<div class="field label border max">
 					<input bind:value={deArrowUrl} name="dearrow-instance" type="text" />
 					<label for="dearrow-instance">{$_('layout.instanceUrl')}</label>
 				</div>
@@ -669,7 +669,7 @@
 
 		<form on:submit|preventDefault={() => deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl)}>
 			<nav>
-				<div class="field label border">
+				<div class="field label border max">
 					<input bind:value={deArrowThumbnailUrl} name="dearrow-thumbnail-instance" type="text" />
 					<label for="dearrow-thumbnail-instance">{$_('layout.deArrow.thumbnailInstanceUrl')}</label
 					>
@@ -752,7 +752,7 @@
 	<p>{$_('layout.syncPartyWarning')}</p>
 	{#if $syncPartyPeerStore}
 		<nav>
-			<div class="field label border">
+			<div class="field label border max">
 				<input
 					name="sync-share"
 					readonly

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

@@ -87,42 +87,50 @@
 			src={getBestThumbnail(data.channel.authorThumbnails)}
 			alt="Channel profile"
 		/>
+
 		<div>
 			<h2>{data.channel.author}</h2>
 			<p>{cleanNumber(data.channel.subCount)} {$_('subscribers')}</p>
 			<p style="width: 60vw;">{data.channel.description}</p>
 		</div>
-		<button
-			on:click={toggleSubscribed}
-			class:inverse-surface={!isSubscribed}
-			class:border={isSubscribed}
-		>
-			{#if !isSubscribed}
-				{$_('subscribe')}
-			{:else}
-				{$_('unsubscribe')}
-			{/if}
-		</button>
-		<button class="border">
-			<i>share</i>
-			<span>{$_('player.share.title')}</span>
-			<menu class="no-wrap">
-				<a
-					href="#share"
-					on:click={async () => {
-						await navigator.clipboard.writeText(location.href);
-					}}>{$_('player.share.materialiousLink')}</a
+		<div class="grid no-padding">
+			<div class="s12 m12 l5">
+				<button
+					on:click={toggleSubscribed}
+					class:inverse-surface={!isSubscribed}
+					class:border={isSubscribed}
 				>
-				<a
-					href="#share"
-					on:click={async () => {
-						await navigator.clipboard.writeText(
-							`https://www.youtube.com/channel/${data.channel.authorId}`
-						);
-					}}>{$_('player.share.youtubeLink')}</a
-				>
-			</menu>
-		</button>
+					{#if !isSubscribed}
+						{$_('subscribe')}
+					{:else}
+						{$_('unsubscribe')}
+					{/if}
+				</button>
+			</div>
+
+			<div class="s12 m12 l5">
+				<button class="border">
+					<i>share</i>
+					<span>{$_('player.share.title')}</span>
+					<menu class="no-wrap">
+						<a
+							href="#share"
+							on:click={async () => {
+								await navigator.clipboard.writeText(location.href);
+							}}>{$_('player.share.materialiousLink')}</a
+						>
+						<a
+							href="#share"
+							on:click={async () => {
+								await navigator.clipboard.writeText(
+									`https://www.youtube.com/channel/${data.channel.authorId}`
+								);
+							}}>{$_('player.share.youtubeLink')}</a
+						>
+					</menu>
+				</button>
+			</div>
+		</div>
 	</div>
 
 	<div class="tabs left-align scroll">
@@ -193,6 +201,12 @@
 		justify-content: center;
 	}
 
+	@media screen and (max-width: 580px) {
+		.description {
+			flex-direction: column;
+		}
+	}
+
 	.tabs {
 		text-transform: capitalize;
 	}

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

@@ -9,7 +9,7 @@
 		postSubscribe,
 		removePlaylistVideo
 	} from '$lib/Api/index.js';
-	import type { PlaylistPage, PlaylistPageVideo } from '$lib/Api/model.js';
+	import type { Comments, PlaylistPage, PlaylistPageVideo } from '$lib/Api/model.js';
 	import Comment from '$lib/Comment.svelte';
 	import Player from '$lib/Player.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
@@ -33,7 +33,18 @@
 
 	export let data;
 
-	$: comments = data.comments;
+	let comments: Comments | null = null;
+	data.streamed.comments?.then((streamedComments) => {
+		comments = streamedComments;
+	});
+
+	let subscribed: boolean = false;
+	data.streamed.subscribed.then((streamedIsSubbed) => {
+		subscribed = streamedIsSubbed;
+	});
+
+	let personalPlaylists: PlaylistPage[] | null = null;
+	data.streamed.personalPlaylists?.then((streamPlaylists) => (personalPlaylists = streamPlaylists));
 
 	activePageStore.set(null);
 
@@ -295,9 +306,9 @@
 	}
 
 	async function toggleVideoToPlaylist(playlistId: string) {
-		if (!data.personalPlaylists) return;
+		if (!personalPlaylists) return;
 
-		const selectedPlaylist = data.personalPlaylists.filter((item) => {
+		const selectedPlaylist = personalPlaylists.filter((item) => {
 			return item.playlistId === playlistId;
 		});
 
@@ -317,7 +328,7 @@
 			await addPlaylistVideo(playlistId, data.video.videoId);
 		}
 
-		data.personalPlaylists = await getPersonalPlaylists();
+		personalPlaylists = await getPersonalPlaylists();
 	}
 
 	async function loadMoreComments() {
@@ -335,13 +346,13 @@
 	}
 
 	async function toggleSubscribed() {
-		if (data.subscribed) {
+		if (subscribed) {
 			await deleteUnsubscribe(data.video.authorId);
 		} else {
 			await postSubscribe(data.video.authorId);
 		}
 
-		data.subscribed = !data.subscribed;
+		subscribed = !subscribed;
 	}
 
 	async function toggleTheatreMode() {
@@ -391,10 +402,10 @@
 					{#if $authStore}
 						<button
 							on:click={toggleSubscribed}
-							class:inverse-surface={!data.subscribed}
-							class:border={data.subscribed}
+							class:inverse-surface={!subscribed}
+							class:border={subscribed}
 						>
-							{#if !data.subscribed}
+							{#if !subscribed}
 								{$_('subscribe')}
 							{:else}
 								{$_('unsubscribe')}
@@ -411,18 +422,20 @@
 				</nav>
 			</div>
 			<div class="s12 m12 l7 video-actions">
-				{#if data.returnYTDislikes}
-					<nav class="no-space" style="margin-right: .5em;">
-						<button style="cursor: default;" class="border left-round">
-							<i class="small">thumb_up</i>
-							<span>{cleanNumber(data.returnYTDislikes.likes)}</span>
-						</button>
-						<button style="cursor: default;" class="border right-round">
-							<i class="small">thumb_down_alt</i>
-							<span>{cleanNumber(data.returnYTDislikes.dislikes)}</span>
-						</button>
-					</nav>
-				{/if}
+				{#await data.streamed.returnYTDislikes then returnYTDislikes}
+					{#if returnYTDislikes}
+						<nav class="no-space" style="margin-right: .5em;">
+							<button style="cursor: default;" class="border left-round">
+								<i class="small">thumb_up</i>
+								<span>{cleanNumber(returnYTDislikes.likes)}</span>
+							</button>
+							<button style="cursor: default;" class="border right-round">
+								<i class="small">thumb_down_alt</i>
+								<span>{cleanNumber(returnYTDislikes.dislikes)}</span>
+							</button>
+						</nav>
+					{/if}
+				{/await}
 
 				<div>
 					<button on:click={() => (audioMode = !audioMode)} class:border={!audioMode}>
@@ -482,12 +495,12 @@
 							</menu></button
 						>
 					{/if}
-					{#if data.personalPlaylists}
+					{#if personalPlaylists}
 						<button class="border">
 							<i>add</i>
 							<div class="tooltip">{$_('player.addToPlaylist')}</div>
 							<menu class="no-wrap">
-								{#each data.personalPlaylists as personalPlaylist}
+								{#each personalPlaylists as personalPlaylist}
 									<a
 										href="#add"
 										on:click={async () => await toggleVideoToPlaylist(personalPlaylist.playlistId)}
@@ -563,15 +576,28 @@
 			</details>
 		</article>
 
-		<div class="space"></div>
-		{#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>
-			{/each}
-			{#if comments.continuation}
-				<button on:click={loadMoreComments} class="margin">{$_('loadMore')}</button>
-			{/if}
+		{#if comments && comments.comments.length > 0}
+			<article>
+				<details open>
+					<summary class="none bold">
+						<nav>
+							<div class="max">{numberWithCommas(comments.commentCount)} comments</div>
+							<i>expand_more</i>
+						</nav>
+					</summary>
+
+					<div class="space"></div>
+
+					<div class="medium scroll">
+						{#each comments.comments as comment}
+							<Comment {comment} videoId={data.video.videoId}></Comment>
+						{/each}
+						{#if comments.continuation}
+							<button on:click={loadMoreComments} class="margin">{$_('loadMore')}</button>
+						{/if}
+					</div>
+				</details>
+			</article>
 		{:else}
 			<h6>{$_('player.unableToLoadComments')}</h6>
 		{/if}

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

@@ -6,7 +6,6 @@ import {
 	getVideo,
 	postHistory
 } from '$lib/Api/index.js';
-import type { PlaylistPage } from '$lib/Api/model';
 import { phaseDescription } from '$lib/misc';
 import { error } from '@sveltejs/kit';
 import { get } from 'svelte/store';
@@ -38,11 +37,10 @@ export async function load({ params, url }) {
 		});
 	}
 
-	let personalPlaylists: PlaylistPage[] | null;
-
+	let personalPlaylists;
 	if (get(authStore)) {
 		postHistory(video.videoId);
-		personalPlaylists = await getPersonalPlaylists();
+		personalPlaylists = getPersonalPlaylists();
 	} else {
 		personalPlaylists = null;
 	}
@@ -51,31 +49,29 @@ export async function load({ params, url }) {
 	try {
 		comments = video.liveNow
 			? null
-			: await getComments(params.slug, { sort_by: 'top', source: 'youtube' });
+			: getComments(params.slug, { sort_by: 'top', source: 'youtube' });
 	} catch {
 		comments = null;
 	}
 
-	if (comments && 'errorBacktrace' in comments) {
-		comments = null;
-	}
-
 	let returnYTDislikes = null;
 	const returnYTDislikesInstance = get(returnYTDislikesInstanceStore);
 	if (returnYTDislikesInstance && returnYTDislikesInstance !== "") {
 		try {
-			returnYTDislikes = get(returnYtDislikesStore) ? await getDislikes(params.slug) : null;
+			returnYTDislikes = get(returnYtDislikesStore) ? getDislikes(params.slug) : null;
 		} catch { }
 	}
 
 	return {
 		video: video,
-		returnYTDislikes: returnYTDislikes,
-		comments: comments,
-		subscribed: await amSubscribed(video.authorId),
 		content: phaseDescription(video.descriptionHtml),
 		playlistId: url.searchParams.get('playlist'),
-		personalPlaylists: personalPlaylists,
-		downloadOptions: downloadOptions
+		downloadOptions: downloadOptions,
+		streamed: {
+			personalPlaylists: personalPlaylists,
+			returnYTDislikes: returnYTDislikes,
+			comments: comments,
+			subscribed: amSubscribed(video.authorId),
+		}
 	};
 }