Fix resolve error for when authorId isn't present

materialious/src/lib/components/ItemsList.svelte

@@ -195,6 +195,8 @@
 		} else if ($feedLastItemId) {
 			const element = document.getElementById($feedLastItemId);
 
+			feedLastItemId.set(undefined);
+
 			if (element) {
 				element.scrollIntoView({
 					behavior: 'instant',
@@ -236,7 +238,7 @@
 		</div>
 	{/if}
 	<div class="grid" bind:this={gridElement}>
-		{#each items as item, index}
+		{#each items as item, index (index)}
 			<ContentColumn>
 				<article
 					class="no-padding android-tv-item border"
@@ -245,11 +247,12 @@
 					id={extractUniqueId(item)}
 					role="presentation"
 					onclick={() => {
-						feedLastItemId.set(extractUniqueId(item));
+						const uniqueItemId = extractUniqueId(item);
+						feedLastItemId.set(uniqueItemId);
 
 						// Required to pass click through to thumbnail component on Android TV
 						if ($isAndroidTvStore) {
-							const articleElement = document.getElementById(extractUniqueId(item));
+							const articleElement = document.getElementById(uniqueItemId);
 							if (articleElement) {
 								const clickable = articleElement.querySelector('a, button');
 								if (clickable instanceof HTMLElement) {

materialious/src/lib/components/Thumbnail.svelte

@@ -159,7 +159,7 @@
 		<a
 			tabindex="-1"
 			class="wave thumbnail"
-			href={watchUrl.toString()}
+			href={resolve(watchUrl.toString(), {})}
 			data-sveltekit-preload-data="off"
 			onclick={syncChangeVideo}
 		>
@@ -207,18 +207,22 @@
 				style="padding-left: 1px;"
 				class="video-title"
 				data-sveltekit-preload-data="off"
-				href={watchUrl.toString()}
+				href={resolve(watchUrl.toString(), {})}
 			>
 				<span class="bold">{letterCase(video.title.trimEnd())}</span>
 			</a>
 
 			<div>
-				<a
-					tabindex="-1"
-					class:author={!sideways}
-					href={resolve(`/channel/[authorId]`, { authorId: video.authorId })}
-					>{video.author}
-				</a>
+				{#if video.authorId}
+					<a
+						tabindex="-1"
+						class:author={!sideways}
+						href={resolve(`/channel/[authorId]`, { authorId: video.authorId })}
+						>{video.author}
+					</a>
+				{:else}
+					<p>{video.author}</p>
+				{/if}
 
 				{#if !('publishedText' in video) && 'viewCountText' in video}
 					•

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

@@ -191,76 +191,70 @@
 
 	<div class="tabs left-align scroll">
 		{#if data.channel.tabs.includes('videos')}
-			<a class:active={tab === 'videos'} onclick={() => changeTab('videos')} href={`#video`}>
+			<a class:active={tab === 'videos'} onclick={() => changeTab('videos')} href="#video">
 				<i>movie</i>
 				<span>{$_('videoTabs.videos')}</span>
 			</a>
 		{/if}
 		{#if data.channel.tabs.includes('shorts')}
-			<a class:active={tab === 'shorts'} onclick={() => changeTab('shorts')} href={`#short`}>
+			<a class:active={tab === 'shorts'} onclick={() => changeTab('shorts')} href="#short">
 				<i>smartphone</i>
 				<span>{$_('videoTabs.shorts')}</span>
 			</a>
 		{/if}
 		{#if data.channel.tabs.includes('streams')}
-			<a class:active={tab === 'streams'} onclick={() => changeTab('streams')} href={`#stream`}>
+			<a class:active={tab === 'streams'} onclick={() => changeTab('streams')} href="#stream">
 				<i>stream</i>
 				<span>{$_('videoTabs.streams')}</span>
 			</a>
 		{/if}
 		{#if data.channel.tabs.includes('playlists')}
-			<a
-				class:active={tab === 'playlists'}
-				onclick={() => changeTab('playlists')}
-				href={`#playlist`}
-			>
+			<a class:active={tab === 'playlists'} onclick={() => changeTab('playlists')} href="#playlist">
 				<i>playlist_add_check</i>
 				<span>{$_('videoTabs.playlists')}</span>
 			</a>
 		{/if}
 	</div>
-</div>
 
-<div class="grid">
-	<div class="s12 m6 l6">
-		<nav class="group">
-			{#each sortByOptions as sortingOption (sortingOption)}
-				<button
-					class="no-round"
-					onclick={async () => {
-						sortBy = sortingOption;
+	<div class="grid">
+		<div class="s12 m6 l6">
+			<nav class="group">
+				{#each sortByOptions as sortingOption (sortingOption)}
+					<button
+						class="no-round"
+						onclick={async () => {
+							sortBy = sortingOption;
 
-						displayContent = await getChannelContent(data.channel.authorId, {
-							type: tab,
-							sortBy: sortBy
-						});
-					}}
-					class:active={sortBy === sortingOption}>{$_(sortingOption)}</button
-				>
-			{/each}
-		</nav>
-	</div>
-	<div class="s12 m6 l6">
-		{#if showSearch}
-			<div class="max field suffix prefix small no-margin surface-variant">
-				<i class="front">search</i><input
-					bind:value={channelSearch}
-					oninput={searchChannel}
-					type="text"
-					placeholder={$_('searchPlaceholder')}
-				/>
-			</div>
-		{:else}
-			<nav class="right-align m l">
-				<button onclick={() => (showSearch = true)}><i>search</i></button>
+							displayContent = await getChannelContent(data.channel.authorId, {
+								type: tab,
+								sortBy: sortBy
+							});
+						}}
+						class:active={sortBy === sortingOption}>{$_(sortingOption)}</button
+					>
+				{/each}
 			</nav>
-			<button class="s" onclick={() => (showSearch = true)}><i>search</i></button>
-		{/if}
+		</div>
+		<div class="s12 m6 l6">
+			{#if showSearch}
+				<div class="max field suffix prefix small no-margin surface-variant">
+					<i class="front">search</i><input
+						bind:value={channelSearch}
+						oninput={searchChannel}
+						type="text"
+						placeholder={$_('searchPlaceholder')}
+					/>
+				</div>
+			{:else}
+				<nav class="right-align m l">
+					<button onclick={() => (showSearch = true)}><i>search</i></button>
+				</nav>
+				<button class="s" onclick={() => (showSearch = true)}><i>search</i></button>
+			{/if}
+		</div>
 	</div>
 </div>
 
-<div class="space"></div>
-
 {#if displayContent}
 	{#if 'videos' in displayContent}
 		<ItemsList items={displayContent.videos} />