From f0862070822ad7c1e4645aeb60e97a3197d7b6b0 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 15:32:00 +1200
Subject: [PATCH 1/9] Improved mobile action buttons

---
 .../src/routes/watch/[slug]/+page.svelte      | 173 ++++++++++--------
 1 file changed, 101 insertions(+), 72 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 690ebe16..464093df 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -275,79 +275,90 @@
 							</button>
 						</nav>
 					{/if}
-					<button on:click={() => (audioMode = !audioMode)} class:border={!audioMode}>
-						<i>headphones</i>
-					</button>
-					<button class="border"
-						><i>share</i>
-						<menu class="no-wrap">
-							<a
-								class="row"
-								href="#copy"
-								on:click={async () =>
-									await navigator.clipboard.writeText(
-										`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}/watch/${data.video.videoId}`
-									)}
-							>
-								<div class="min">Copy Materialious link</div></a
-							><a
-								href="#copy"
-								class="row"
-								on:click={async () =>
-									await navigator.clipboard.writeText(
-										`https://redirect.invidious.io/watch?v=${data.video.videoId}`
-									)}
-							>
-								<div class="min">Copy Invidious redirect link</div></a
-							><a
-								class="row"
-								href="#copy"
-								on:click={async () =>
-									await navigator.clipboard.writeText(
-										`https://www.youtube.com/watch?v=${data.video.videoId}`
-									)}
-							>
-								<div class="min">Copy Youtube link</div></a
-							></menu
-						></button
-					>
-					{#if data.downloadOptions.length > 0}
-						<button class="border"
-							><i>download</i>
-							<menu class="no-wrap">
-								{#each data.downloadOptions as download}
-									<a class="row" href={download.url} target="_blank" rel="noopener noreferrer"
-										>{download.title}</a
-									>
-								{/each}
-							</menu></button
-						>
-					{/if}
-					{#if data.personalPlaylists}
+
+					<div>
+						<button on:click={() => (audioMode = !audioMode)} class:border={!audioMode}>
+							<i>headphones</i>
+							<div class="tooltip">Audio only</div>
+						</button>
 						<button class="border">
-							<i>add</i>
-							<menu>
-								{#each data.personalPlaylists as personalPlaylist}
-									<a
-										href="#add"
-										on:click={async () => await addVideoToPlaylist(personalPlaylist.playlistId)}
-										>{personalPlaylist.title}
-									</a>
-								{/each}
-							</menu>
+							<i>width_wide</i>
+							<div class="tooltip">Theatre mode</div>
 						</button>
-					{:else}
-						<button disabled class="border no-margin">
-							<i>add</i>
-							<div class="tooltip">
-								{#if $auth}
-									No playlists
-								{:else}
-									Login required
-								{/if}
-							</div>
-						</button>
-					{/if}
+						<button class="border"
+							><i>share</i>
+							<div class="tooltip">Share</div>
+							<menu class="no-wrap">
+								<a
+									class="row"
+									href="#copy"
+									on:click={async () =>
+										await navigator.clipboard.writeText(
+											`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}/watch/${data.video.videoId}`
+										)}
+								>
+									<div class="min">Copy Materialious link</div></a
+								><a
+									href="#copy"
+									class="row"
+									on:click={async () =>
+										await navigator.clipboard.writeText(
+											`https://redirect.invidious.io/watch?v=${data.video.videoId}`
+										)}
+								>
+									<div class="min">Copy Invidious redirect link</div></a
+								><a
+									class="row"
+									href="#copy"
+									on:click={async () =>
+										await navigator.clipboard.writeText(
+											`https://www.youtube.com/watch?v=${data.video.videoId}`
+										)}
+								>
+									<div class="min">Copy Youtube link</div></a
+								></menu
+							></button
+						>
+						{#if data.downloadOptions.length > 0}
+							<button class="border"
+								><i>download</i>
+								<div class="tooltip">Download</div>
+								<menu class="no-wrap">
+									{#each data.downloadOptions as download}
+										<a class="row" href={download.url} target="_blank" rel="noopener noreferrer"
+											>{download.title}</a
+										>
+									{/each}
+								</menu></button
+							>
+						{/if}
+						{#if data.personalPlaylists}
+							<button class="border">
+								<i>add</i>
+								<div class="tooltip">Add to playlist</div>
+								<menu>
+									{#each data.personalPlaylists as personalPlaylist}
+										<a
+											href="#add"
+											on:click={async () => await addVideoToPlaylist(personalPlaylist.playlistId)}
+											>{personalPlaylist.title}
+										</a>
+									{/each}
+								</menu>
+							</button>
+						{:else}
+							<button disabled class="border no-margin">
+								<i>add</i>
+								<div class="tooltip">
+									{#if $auth}
+										No playlists
+									{:else}
+										Login required
+									{/if}
+								</div>
+							</button>
+						{/if}
+					</div>
 				</div>
 			</div>
 
@@ -469,7 +480,25 @@
 
 	@media screen and (max-width: 1000px) {
 		.video-actions {
-			justify-content: flex-start;
+			align-items: flex-start;
+			flex-direction: column;
+		}
+	}
+
+	@media screen and (max-width: 1000px) {
+		.video-actions > div {
+			margin-top: 1em;
+		}
+	}
+
+	@media screen and (max-width: 1000px) {
+		menu {
+			position: fixed;
+			top: 50%;
+			left: 50%;
+			width: 100%;
+			transform: translate(-50%, 50%);
+			background-color: var(--surface-variant);
 		}
 	}
 

From abb2377d0ec2331d98761094947b61dc17fdf6a4 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 15:39:44 +1200
Subject: [PATCH 2/9] Added theatre mode

---
 materialious/src/routes/+layout.svelte        | 17 ++++
 .../src/routes/watch/[slug]/+page.svelte      | 83 +++++++++++--------
 materialious/src/store.ts                     |  1 +
 3 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index d79497b8..f6b1d6f7 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -28,6 +28,7 @@
 		playerListenByDefault,
 		playerProxyVideos,
 		playerSavePlaybackPosition,
+		playerTheatreModeByDefault,
 		returnYTDislikesInstance,
 		returnYtDislikes,
 		sponsorBlock,
@@ -482,6 +483,22 @@
 			</nav>
 		</div>
 
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>Theatre mode by default</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerTheatreModeByDefault}
+						on:click={() => playerTheatreModeByDefault.set(!$playerTheatreModeByDefault)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
 		<div class="field no-margin">
 			<nav class="no-padding">
 				<div class="max">
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 464093df..0c74a3f6 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -22,6 +22,7 @@
 		activePage,
 		auth,
 		playerListenByDefault,
+		playerTheatreModeByDefault,
 		syncPartyConnections,
 		syncPartyPeer
 	} from '../../../store';
@@ -35,6 +36,8 @@
 	let playlistVideos: PlaylistPageVideo[] = [];
 	let playlist: PlaylistPage | null = null;
 
+	let theatreMode = get(playerTheatreModeByDefault);
+
 	let audioMode = get(playerListenByDefault);
 	let currentTime: number;
 	let seekTo: (time: number) => void;
@@ -207,11 +210,15 @@
 
 		data.subscribed = !data.subscribed;
 	}
+
+	async function toggleTheatreMode() {
+		theatreMode = !theatreMode;
+	}
 </script>
 
 {#if data}
 	<div class="grid">
-		<div class="s12 m12 l10">
+		<div class={`s12 m12 l${theatreMode ? '12' : '10'}`}>
 			{#key data.video.videoId}
 				<Player
 					{data}
@@ -281,7 +288,7 @@
 							<i>headphones</i>
 							<div class="tooltip">Audio only</div>
 						</button>
-						<button class="border">
+						<button on:click={toggleTheatreMode} class="m l" class:border={!theatreMode}>
 							<i>width_wide</i>
 							<div class="tooltip">Theatre mode</div>
 						</button>
@@ -411,41 +418,47 @@
 				<h6>Unable to load comments</h6>
 			{/if}
 		</div>
-		<div class="s12 m12 l2">
-			{#if !data.playlistId}
-				{#if data.video.recommendedVideos}
-					{#each data.video.recommendedVideos as recommendedVideo}
-						<article class="no-padding">
-							{#key recommendedVideo.videoId}
-								<Thumbnail video={recommendedVideo} />
-							{/key}
+		{#if !theatreMode}
+			<div class="s12 m12 l2">
+				{#if !data.playlistId}
+					{#if data.video.recommendedVideos}
+						{#each data.video.recommendedVideos as recommendedVideo}
+							<article class="no-padding">
+								{#key recommendedVideo.videoId}
+									<Thumbnail video={recommendedVideo} />
+								{/key}
+							</article>
+						{/each}
+					{/if}
+				{:else if playlist}
+					<article
+						style="height: 75vh; position: relative;"
+						id="playlist"
+						class="scroll no-padding"
+					>
+						<article class="no-elevate" style="position: sticky; top: 0; z-index: 3;">
+							<h6>{playlist.title}</h6>
+							<p>{cleanNumber(playlist.viewCount)} views • {playlist.videoCount} videos</p>
+							<p><a href={`/channel/${playlist.authorId}`}>{playlist.author}</a></p>
+							<div class="divider"></div>
 						</article>
-					{/each}
-				{/if}
-			{:else if playlist}
-				<article style="height: 75vh; position: relative;" id="playlist" class="scroll no-padding">
-					<article class="no-elevate" style="position: sticky; top: 0; z-index: 3;">
-						<h6>{playlist.title}</h6>
-						<p>{cleanNumber(playlist.viewCount)} views • {playlist.videoCount} videos</p>
-						<p><a href={`/channel/${playlist.authorId}`}>{playlist.author}</a></p>
-						<div class="divider"></div>
+
+						<div class="space"></div>
+
+						{#each playlistVideos as playlistVideo}
+							<article
+								class="no-padding primary-border"
+								style="margin: .7em;"
+								id={playlistVideo.videoId}
+								class:border={playlistVideo.videoId === data.video.videoId}
+							>
+								<Thumbnail video={playlistVideo} playlistId={data.playlistId} />
+							</article>
+						{/each}
 					</article>
-
-					<div class="space"></div>
-
-					{#each playlistVideos as playlistVideo}
-						<article
-							class="no-padding primary-border"
-							style="margin: .7em;"
-							id={playlistVideo.videoId}
-							class:border={playlistVideo.videoId === data.video.videoId}
-						>
-							<Thumbnail video={playlistVideo} playlistId={data.playlistId} />
-						</article>
-					{/each}
-				</article>
-			{/if}
-		</div>
+				{/if}
+			</div>
+		{/if}
 	</div>
 {:else}
 	<PageLoading />
diff --git a/materialious/src/store.ts b/materialious/src/store.ts
index 36b54d53..4a85b7dd 100644
--- a/materialious/src/store.ts
+++ b/materialious/src/store.ts
@@ -15,6 +15,7 @@ export const playerProxyVideos = persisted("proxyVideos", false);
 export const playerListenByDefault = persisted("listenByDefault", false);
 export const playerSavePlaybackPosition = persisted("savePlaybackPosition", true);
 export const playerDash = persisted("dashEnabled", false);
+export const playerTheatreModeByDefault = persisted("theatreModeByDefault", false);
 
 export const returnYtDislikes = persisted("returnYtDislikes", true);
 

From 9d7b3aaba222d1985c711663bbd8210670cd2458 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 15:41:01 +1200
Subject: [PATCH 3/9] Fixed subscription feed

---
 materialious/src/routes/subscriptions/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/materialious/src/routes/subscriptions/+page.svelte b/materialious/src/routes/subscriptions/+page.svelte
index 85a7af04..1c4ba25f 100644
--- a/materialious/src/routes/subscriptions/+page.svelte
+++ b/materialious/src/routes/subscriptions/+page.svelte
@@ -7,7 +7,7 @@
 	export let data;
 
 	let currentPage = 1;
-	$: videos = [...data.feed.videos, ...data.feed.notifications];
+	$: videos = data.feed.notifications;
 
 	activePage.set('subscriptions');
 

From 264436ff11c475d3fe6a4afe67042d206f83505c Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 15:42:10 +1200
Subject: [PATCH 4/9] Send pause on auto play fail

---
 materialious/src/routes/watch/[slug]/+page.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 0c74a3f6..d6692689 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -68,6 +68,16 @@
 			});
 		});
 
+		player.addEventListener('auto-play-fail', () => {
+			conn.send({
+				events: [
+					{
+						type: 'pause'
+					}
+				]
+			} as PlayerEvents);
+		});
+
 		player.addEventListener('auto-play', () => {
 			conn.send({
 				events: [

From 1a9effdc80e83d47c367bc800ac19a9f42a82e20 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 15:47:47 +1200
Subject: [PATCH 5/9] Added auto play next video setting

---
 materialious/src/routes/+layout.svelte        | 21 +++++++++++++++++--
 .../src/routes/watch/[slug]/+page.svelte      | 10 +++++++++
 materialious/src/store.ts                     |  1 +
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index f6b1d6f7..00da59b9 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -24,6 +24,7 @@
 		interfaceSearchSuggestions,
 		playerAlwaysLoop,
 		playerAutoPlay,
+		playerAutoplayNextByDefault,
 		playerDash,
 		playerListenByDefault,
 		playerProxyVideos,
@@ -406,7 +407,7 @@
 		<div class="field no-margin">
 			<nav class="no-padding">
 				<div class="max">
-					<div>Autoplay</div>
+					<div>Autoplay video</div>
 				</div>
 				<label class="switch">
 					<input
@@ -422,7 +423,7 @@
 		<div class="field no-margin">
 			<nav class="no-padding">
 				<div class="max">
-					<div>Always loop</div>
+					<div>Always loop video</div>
 				</div>
 				<label class="switch">
 					<input
@@ -499,6 +500,22 @@
 			</nav>
 		</div>
 
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>Autoplay next by default</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerAutoplayNextByDefault}
+						on:click={() => playerAutoplayNextByDefault.set(!$playerAutoplayNextByDefault)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
 		<div class="field no-margin">
 			<nav class="no-padding">
 				<div class="max">
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index d6692689..b58ab690 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import {
 		addPlaylistVideo,
 		deleteUnsubscribe,
@@ -21,6 +22,7 @@
 	import {
 		activePage,
 		auth,
+		playerAutoplayNextByDefault,
 		playerListenByDefault,
 		playerTheatreModeByDefault,
 		syncPartyConnections,
@@ -164,6 +166,14 @@
 			});
 		}
 
+		if ($playerAutoplayNextByDefault) {
+			player.addEventListener('end', () => {
+				if ($playerAutoplayNextByDefault && !playlist) {
+					goto(`/watch/${data.video.recommendedVideos[0].videoId}`);
+				}
+			});
+		}
+
 		if (!data.playlistId) return;
 
 		for (let page = 1; page < Infinity; page++) {
diff --git a/materialious/src/store.ts b/materialious/src/store.ts
index 4a85b7dd..595c2023 100644
--- a/materialious/src/store.ts
+++ b/materialious/src/store.ts
@@ -16,6 +16,7 @@ export const playerListenByDefault = persisted("listenByDefault", false);
 export const playerSavePlaybackPosition = persisted("savePlaybackPosition", true);
 export const playerDash = persisted("dashEnabled", false);
 export const playerTheatreModeByDefault = persisted("theatreModeByDefault", false);
+export const playerAutoplayNextByDefault = persisted("autoplayNextByDefault", false);
 
 export const returnYtDislikes = persisted("returnYtDislikes", true);
 

From 280a946ff520152a03acb4c53a61c6afac93193e Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 16:05:35 +1200
Subject: [PATCH 6/9] Fixed playlist current item

---
 materialious/src/lib/Player.svelte            |  3 +++
 .../src/routes/watch/[slug]/+page.svelte      | 22 ++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index 75f41b2f..33702fcc 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -123,6 +123,9 @@
 									event.detail.currentTime >= segment.startTime &&
 									event.detail.currentTime <= segment.endTime
 								) {
+									if (Math.round(player.currentTime) >= Math.round(player.duration)) {
+										return;
+									}
 									categoryBeingSkipped = segment.category;
 									player.currentTime = segment.endTime + 1;
 									ui('#sponsorblock-alert');
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index b58ab690..7dd4f836 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -166,13 +166,15 @@
 			});
 		}
 
-		if ($playerAutoplayNextByDefault) {
-			player.addEventListener('end', () => {
-				if ($playerAutoplayNextByDefault && !playlist) {
-					goto(`/watch/${data.video.recommendedVideos[0].videoId}`);
-				}
-			});
-		}
+		player.addEventListener('end', () => {
+			if ($playerAutoplayNextByDefault && !playlist) {
+				goto(`/watch/${data.video.recommendedVideos[0].videoId}`);
+			}
+
+			if (data.playlistId) {
+				setTimeout(goToCurrentPlaylistItem, 1000);
+			}
+		});
 
 		if (!data.playlistId) return;
 
@@ -192,6 +194,10 @@
 			);
 		}
 
+		goToCurrentPlaylistItem();
+	});
+
+	function goToCurrentPlaylistItem() {
 		const playlistCurrentVideo = document.getElementById(data.video.videoId);
 		const playlistScrollable = document.getElementById('playlist');
 
@@ -199,7 +205,7 @@
 			playlistScrollable.scrollTop =
 				playlistCurrentVideo.offsetTop - playlistScrollable.offsetTop - 200;
 		}
-	});
+	}
 
 	async function addVideoToPlaylist(playlistId: string) {
 		await addPlaylistVideo(playlistId, data.video.videoId);

From ea326516f0522c52b98e3ea627ac18292f21ce64 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 16:10:42 +1200
Subject: [PATCH 7/9] Fixed channel tabs if no content

---
 .../src/routes/channel/[slug]/+page.svelte    | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/materialious/src/routes/channel/[slug]/+page.svelte b/materialious/src/routes/channel/[slug]/+page.svelte
index 82a482f0..f7849122 100644
--- a/materialious/src/routes/channel/[slug]/+page.svelte
+++ b/materialious/src/routes/channel/[slug]/+page.svelte
@@ -100,26 +100,34 @@
 	</div>
 
 	<div class="tabs left-align scroll">
-		<a class:active={tab === 'videos'} on:click={() => changeTab('videos')} href={`#video`}>
-			<i>movie</i>
-			<span>Videos</span>
-		</a>
-		<a class:active={tab === 'shorts'} on:click={() => changeTab('shorts')} href={`#short`}>
-			<i>smartphone</i>
-			<span>Shorts</span>
-		</a>
-		<a class:active={tab === 'streams'} on:click={() => changeTab('streams')} href={`#stream`}>
-			<i>stream</i>
-			<span>Streams</span>
-		</a>
-		<a
-			class:active={tab === 'playlists'}
-			on:click={() => changeTab('playlists')}
-			href={`#playlist`}
-		>
-			<i>playlist_add_check</i>
-			<span>Playlists</span>
-		</a>
+		{#if data.channel.tabs.includes('videos')}
+			<a class:active={tab === 'videos'} on:click={() => changeTab('videos')} href={`#video`}>
+				<i>movie</i>
+				<span>Videos</span>
+			</a>
+		{/if}
+		{#if data.channel.tabs.includes('shorts')}
+			<a class:active={tab === 'shorts'} on:click={() => changeTab('shorts')} href={`#short`}>
+				<i>smartphone</i>
+				<span>Shorts</span>
+			</a>
+		{/if}
+		{#if data.channel.tabs.includes('streams')}
+			<a class:active={tab === 'streams'} on:click={() => changeTab('streams')} href={`#stream`}>
+				<i>stream</i>
+				<span>Streams</span>
+			</a>
+		{/if}
+		{#if data.channel.tabs.includes('playlists')}
+			<a
+				class:active={tab === 'playlists'}
+				on:click={() => changeTab('playlists')}
+				href={`#playlist`}
+			>
+				<i>playlist_add_check</i>
+				<span>Playlists</span>
+			</a>
+		{/if}
 	</div>
 </div>
 

From 71e5d78d07a9579e4d65e826c102abcc45505dd4 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 16:19:41 +1200
Subject: [PATCH 8/9] Fixed search filters resetting state

---
 .../src/routes/search/[slug]/+page.svelte     | 64 +++++++++++--------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/materialious/src/routes/search/[slug]/+page.svelte b/materialious/src/routes/search/[slug]/+page.svelte
index b96ee4d2..dd4410ae 100644
--- a/materialious/src/routes/search/[slug]/+page.svelte
+++ b/materialious/src/routes/search/[slug]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { page } from '$app/stores';
 	import { getSearch } from '$lib/Api';
 	import ChannelThumbnail from '$lib/ChannelThumbnail.svelte';
+	import PageLoading from '$lib/PageLoading.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
@@ -15,9 +15,11 @@
 
 	activePage.set(null);
 
-	function changeType(type: string) {
-		$page.url.searchParams.set('type', type);
-		document.location.href = $page.url.href;
+	async function changeType(type: 'playlist' | 'all' | 'video' | 'channel') {
+		data.searchType = type;
+		currentPage = 1;
+		search = [];
+		search = await getSearch(data.slug, { type: type });
 	}
 
 	async function loadMore(event: InfiniteEvent) {
@@ -38,14 +40,18 @@
 
 <div class="space" style="margin-bottom: 1em;">
 	<div class="tabs left-align min scroll">
-		<a class:active={data.searchType === 'all'} href="#all" on:click={() => changeType('all')}>
+		<a
+			class:active={data.searchType === 'all'}
+			href="#all"
+			on:click={async () => changeType('all')}
+		>
 			<i>home</i>
 			<span>All</span>
 		</a>
 		<a
 			class:active={data.searchType === 'video'}
 			href="#videos"
-			on:click={() => changeType('video')}
+			on:click={async () => changeType('video')}
 		>
 			<i>movie</i>
 			<span>Videos</span>
@@ -53,7 +59,7 @@
 		<a
 			class:active={data.searchType === 'playlist'}
 			href="#playlists"
-			on:click={() => changeType('playlist')}
+			on:click={async () => changeType('playlist')}
 		>
 			<i>playlist_add_check</i>
 			<span>Playlists</span>
@@ -61,7 +67,7 @@
 		<a
 			class:active={data.searchType === 'channel'}
 			href="#channels"
-			on:click={() => changeType('channel')}
+			on:click={async () => changeType('channel')}
 		>
 			<i>person</i>
 			<span>Channels</span>
@@ -69,25 +75,29 @@
 	</div>
 </div>
 
-<div class="page right active">
-	<div class="space"></div>
-	<div class="grid">
-		{#each search as item}
-			<div class="s12 m6 l2">
-				{#key data.search}
-					<article class="no-padding" style="height: 100%;">
-						{#if item.type === 'video'}
-							<Thumbnail video={item} />
-						{:else if item.type === 'channel'}
-							<ChannelThumbnail channel={item} />
-						{:else if item.type === 'playlist'}
-							<PlaylistThumbnail playlist={item} />
-						{/if}
-					</article>
-				{/key}
-			</div>
-		{/each}
+{#if search.length > 0}
+	<div class="page right active">
+		<div class="space"></div>
+		<div class="grid">
+			{#each search as item}
+				<div class="s12 m6 l2">
+					{#key item}
+						<article class="no-padding" style="height: 100%;">
+							{#if item.type === 'video'}
+								<Thumbnail video={item} />
+							{:else if item.type === 'channel'}
+								<ChannelThumbnail channel={item} />
+							{:else if item.type === 'playlist'}
+								<PlaylistThumbnail playlist={item} />
+							{/if}
+						</article>
+					{/key}
+				</div>
+			{/each}
+		</div>
 	</div>
-</div>
+{:else}
+	<PageLoading />
+{/if}
 
 <InfiniteLoading on:infinite={loadMore} />

From fcf1f07b0975f85d104a06d97f6c51c32a123000 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 9 Apr 2024 16:36:40 +1200
Subject: [PATCH 9/9] Fixed chapters not wrapping correctly

---
 materialious/src/routes/watch/[slug]/+page.svelte | 13 ++++++++-----
 materialious/static/style.css                     | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 7dd4f836..d2357d61 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -414,10 +414,7 @@
 							{#if data.content.timestamps.length > 0}
 								<h6 style="margin-bottom: .3em;">Chapters</h6>
 								{#each data.content.timestamps as timestamp}
-									<button
-										on:click={() => seekTo(timestamp.time)}
-										class="timestamps"
-										class:primary={timestamp.time <= currentTime}
+									<button on:click={() => seekTo(timestamp.time)} class="timestamps"
 										>{timestamp.timePretty}
 										{#if !timestamp.title.startsWith('-')}
 											-
@@ -503,10 +500,16 @@
 		margin-left: 0;
 		margin-bottom: 0.4em;
 		display: block;
-		background-color: var(--secondary-container);
+		padding: 0;
+		text-align: left;
+		background-color: transparent;
 		color: var(--on-secondary-container);
 	}
 
+	.timestamps:hover {
+		padding: 0 0.5em;
+	}
+
 	.video-actions {
 		display: flex;
 		align-items: center;
diff --git a/materialious/static/style.css b/materialious/static/style.css
index 51fd4b99..9cd400b1 100644
--- a/materialious/static/style.css
+++ b/materialious/static/style.css
@@ -2,6 +2,20 @@
     padding: .1em .4em;
 }
 
+.vds-chapter-radio-label {
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    white-space: normal !important;
+}
+
+.vds-chapter-radio-content {
+    max-width: 200px !important;
+}
+
+.vds-chapter-radio {
+    align-items: start !important;
+}
+
 @media screen and (max-width: 580px) {
     main {
         padding-left: .1em !important;