From 4a9a8f3be04e115259532184e932aa15ba116ace Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 30 Apr 2024 17:32:50 +1200
Subject: [PATCH 1/3] Componentize layout more

---
 materialious/src/lib/Settings.svelte   | 456 +++++++++++++++++++
 materialious/src/lib/SyncParty.svelte  | 146 ++++++
 materialious/src/routes/+layout.svelte | 592 +------------------------
 materialious/static/style.css          |  12 +-
 4 files changed, 618 insertions(+), 588 deletions(-)
 create mode 100644 materialious/src/lib/Settings.svelte
 create mode 100644 materialious/src/lib/SyncParty.svelte

diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte
new file mode 100644
index 00000000..97371973
--- /dev/null
+++ b/materialious/src/lib/Settings.svelte
@@ -0,0 +1,456 @@
+<script lang="ts">
+	import { bookmarkletSaveToUrl } from '$lib/bookmarklet';
+	import 'beercss';
+	import 'material-dynamic-colors';
+	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
+	import {
+		darkModeStore,
+		deArrowEnabledStore,
+		deArrowInstanceStore,
+		deArrowThumbnailInstanceStore,
+		interfacePreviewVideoOnHoverStore,
+		interfaceSearchSuggestionsStore,
+		playerAlwaysLoopStore,
+		playerAutoPlayStore,
+		playerAutoplayNextByDefaultStore,
+		playerDashStore,
+		playerListenByDefaultStore,
+		playerProxyVideosStore,
+		playerSavePlaybackPositionStore,
+		playerTheatreModeByDefaultStore,
+		returnYTDislikesInstanceStore,
+		returnYtDislikesStore,
+		sponsorBlockCategoriesStore,
+		sponsorBlockStore,
+		sponsorBlockUrlStore,
+		synciousInstanceStore,
+		synciousStore,
+		themeColorStore
+	} from '../store';
+
+	let sponsorCategoriesList: string[] = [];
+	sponsorBlockCategoriesStore.subscribe((value) => (sponsorCategoriesList = value));
+
+	let sponsorBlockInstance = get(sponsorBlockUrlStore);
+	let synciousInstance = get(synciousInstanceStore);
+	let returnYTInstance = get(returnYTDislikesInstanceStore);
+	let deArrowUrl = get(deArrowInstanceStore);
+	let deArrowThumbnailUrl = get(deArrowThumbnailInstanceStore);
+
+	const sponsorCategories = [
+		{ name: $_('layout.sponsors.sponsor'), category: 'sponsor' },
+		{ name: $_('layout.sponsors.unpaidSelfPromotion'), category: 'selfpromo' },
+		{ name: $_('layout.sponsors.interactionReminder'), category: 'interaction' },
+		{ name: $_('layout.sponsors.intermissionIntroAnimation'), category: 'intro' },
+		{ name: $_('layout.sponsors.credits'), category: 'outro' },
+		{ name: $_('layout.sponsors.preViewRecapHook'), category: 'preview' },
+		{ name: $_('layout.sponsors.tangentJokes'), category: 'filler' }
+	];
+
+	function toggleSponsor(category: string) {
+		if (sponsorCategoriesList.includes(category)) {
+			sponsorBlockCategoriesStore.set(sponsorCategoriesList.filter((value) => value !== category));
+		} else {
+			sponsorCategoriesList.push(category);
+			sponsorBlockCategoriesStore.set(sponsorCategoriesList);
+		}
+	}
+
+	async function setColor(color: any) {
+		const target = color.target;
+		const hex = (target as { value: string }).value;
+		await ui('theme', hex);
+		themeColorStore.set(hex);
+	}
+
+	function toggleDarkMode() {
+		const isDark = get(darkModeStore);
+
+		if (isDark) {
+			ui('mode', 'light');
+			darkModeStore.set(false);
+		} else {
+			ui('mode', 'dark');
+			darkModeStore.set(true);
+		}
+	}
+</script>
+
+<dialog class="right" id="dialog-settings">
+	<nav>
+		<h4 class="max">{$_('layout.settings')}</h4>
+		<button class="circle transparent" data-ui="#dialog-settings"><i>close</i></button>
+	</nav>
+	<p>{$_('layout.customize')} Materialious</p>
+
+	<div class="settings">
+		<h6>{$_('layout.theme.theme')}</h6>
+		<button on:click={toggleDarkMode} class="no-margin">
+			{#if !$darkModeStore}
+				<i>dark_mode</i>
+				<span>{$_('layout.theme.darkMode')}</span>
+			{:else}
+				<i>light_mode</i>
+				<span>{$_('layout.theme.lightMode')}</span>
+			{/if}
+		</button>
+		<button>
+			<i>palette</i>
+			<span>{$_('layout.theme.color')}</span>
+			<input on:change={setColor} type="color" />
+		</button>
+	</div>
+
+	<div class="settings">
+		<h6>Interface</h6>
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.searchSuggestions')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$interfaceSearchSuggestionsStore}
+						on:click={() => interfaceSearchSuggestionsStore.set(!$interfaceSearchSuggestionsStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.previewVideoOnHover')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$interfacePreviewVideoOnHoverStore}
+						on:click={() =>
+							interfacePreviewVideoOnHoverStore.set(!$interfacePreviewVideoOnHoverStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+	</div>
+
+	<div class="settings">
+		<h6>{$_('layout.dataPreferences.dataPreferences')}</h6>
+		<p style="width: 240px;">
+			<a
+				href={`${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}/preferences`}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="link"
+			>
+				{$_('layout.dataPreferences.content')}
+			</a>
+		</p>
+	</div>
+
+	<div class="settings">
+		<h6>{$_('layout.player.title')}</h6>
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.autoPlay')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerAutoPlayStore}
+						on:click={() => playerAutoPlayStore.set(!$playerAutoPlayStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.alwaysLoopVideo')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerAlwaysLoopStore}
+						on:click={() => playerAlwaysLoopStore.set(!$playerAlwaysLoopStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.proxyVideos')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerProxyVideosStore}
+						on:click={() => playerProxyVideosStore.set(!$playerProxyVideosStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.savePlaybackPosition')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerSavePlaybackPositionStore}
+						on:click={() => playerSavePlaybackPositionStore.set(!$playerSavePlaybackPositionStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.listenByDefault')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerListenByDefaultStore}
+						on:click={() => playerListenByDefaultStore.set(!$playerListenByDefaultStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin m l">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.theatreModeByDefault')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerTheatreModeByDefaultStore}
+						on:click={() => playerTheatreModeByDefaultStore.set(!$playerTheatreModeByDefaultStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.autoPlayNextByDefault')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerAutoplayNextByDefaultStore}
+						on:click={() =>
+							playerAutoplayNextByDefaultStore.set(!$playerAutoplayNextByDefaultStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.player.dash')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$playerDashStore}
+						on:click={() => playerDashStore.set(!$playerDashStore)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+	</div>
+
+	<div class="settings">
+		<h6>Return YT Dislikes</h6>
+
+		<form on:submit|preventDefault={() => returnYTDislikesInstanceStore.set(returnYTInstance)}>
+			<nav>
+				<div class="field label border max">
+					<input bind:value={returnYTInstance} name="returnyt-instance" type="text" />
+					<label for="returnyt-instance">{$_('layout.instanceUrl')}</label>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
+		<nav class="no-padding">
+			<div class="max">
+				<p>{$_('enabled')}</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$returnYtDislikesStore}
+					on:click={() => returnYtDislikesStore.set(!$returnYtDislikesStore)}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+	</div>
+
+	<div class="settings">
+		<h6>Syncious</h6>
+
+		<form on:submit|preventDefault={() => synciousInstanceStore.set(synciousInstance)}>
+			<nav>
+				<div class="field label border max">
+					<input bind:value={synciousInstance} name="syncious-instance" type="text" />
+					<label for="syncious-instance">{$_('layout.instanceUrl')}</label>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
+		<nav class="no-padding">
+			<div class="max">
+				<p>{$_('enabled')}</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$synciousStore}
+					on:click={() => synciousStore.set(!$synciousStore)}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+	</div>
+
+	<div class="settings">
+		<h6>Sponsorblock</h6>
+
+		<form on:submit|preventDefault={() => sponsorBlockUrlStore.set(sponsorBlockInstance)}>
+			<nav>
+				<div class="field label border max">
+					<input bind:value={sponsorBlockInstance} name="sponsorblock-instance" type="text" />
+					<label for="sponsorblock-instance">{$_('layout.instanceUrl')}</label>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
+		<nav class="no-padding">
+			<div class="max">
+				<p>{$_('enabled')}</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$sponsorBlockStore}
+					on:click={() => sponsorBlockStore.set(!$sponsorBlockStore)}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+
+		{#each sponsorCategories as sponsor}
+			<div class="field middle-align no-margin">
+				<nav class="no-padding">
+					<div class="max">
+						<p>{sponsor.name}</p>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							checked={sponsorCategoriesList.includes(sponsor.category)}
+							on:click={() => toggleSponsor(sponsor.category)}
+						/>
+						<span></span>
+					</label>
+				</nav>
+			</div>
+		{/each}
+	</div>
+
+	<div class="settings">
+		<h6>{$_('layout.deArrow.title')}</h6>
+
+		<form on:submit|preventDefault={() => deArrowInstanceStore.set(deArrowUrl)}>
+			<nav>
+				<div class="field label border max">
+					<input bind:value={deArrowUrl} name="dearrow-instance" type="text" />
+					<label for="dearrow-instance">{$_('layout.instanceUrl')}</label>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
+		<form on:submit|preventDefault={() => deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl)}>
+			<nav>
+				<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
+					>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
+		<nav class="no-padding">
+			<div class="max">
+				<p>{$_('enabled')}</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$deArrowEnabledStore}
+					on:click={() => deArrowEnabledStore.set(!$deArrowEnabledStore)}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+	</div>
+
+	<div class="settings">
+		<h6>{$_('layout.bookmarklet')}</h6>
+		<button
+			class="no-margin"
+			on:click={async () => await navigator.clipboard.writeText(bookmarkletSaveToUrl())}
+			>{$_('copyUrl')}</button
+		>
+	</div>
+</dialog>
+
+<style>
+	.settings h6 {
+		margin: 1em 0 0.3em 0;
+	}
+
+	form {
+		margin: 1em 0;
+	}
+</style>
diff --git a/materialious/src/lib/SyncParty.svelte b/materialious/src/lib/SyncParty.svelte
new file mode 100644
index 00000000..f5a230d2
--- /dev/null
+++ b/materialious/src/lib/SyncParty.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { peerJsOptions, removeWindowQueryFlag, setWindowQueryFlag } from '$lib/misc';
+	import type { PlayerEvents } from '$lib/player';
+	import 'beercss';
+	import 'material-dynamic-colors';
+	import type { DataConnection } from 'peerjs';
+	import Peer from 'peerjs';
+	import { onDestroy, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
+	import { syncPartyConnectionsStore, syncPartyPeerStore } from '../store';
+
+	function changeVideoEvent(conn: DataConnection) {
+		conn.on('data', (data) => {
+			const events = data as PlayerEvents;
+			const currentUrl = get(page).url;
+
+			events.events.forEach((event) => {
+				if (event.type === 'change-video' && event.videoId) {
+					currentUrl.pathname = `/watch/${event.videoId}`;
+					goto(currentUrl);
+				}
+			});
+		});
+	}
+
+	async function startWatchSync() {
+		if ($syncPartyPeerStore) {
+			$syncPartyPeerStore.destroy();
+			syncPartyPeerStore.set(null);
+			removeWindowQueryFlag('sync');
+			return;
+		}
+
+		const peerId = crypto.randomUUID();
+		setWindowQueryFlag('sync', peerId);
+		$syncPartyPeerStore = new Peer(peerId, peerJsOptions());
+
+		if ($syncPartyPeerStore) {
+			$syncPartyPeerStore.on('connection', (conn) => {
+				conn.on('open', () => {
+					ui('#sync-party-connection-join');
+
+					if ($page.url.pathname.startsWith('/watch')) {
+						const paths = $page.url.pathname.split('/');
+						if (paths.length > 2) {
+							conn.send({
+								events: [
+									{
+										type: 'change-video',
+										videoId: paths[2]
+									}
+								]
+							} as PlayerEvents);
+						}
+					}
+					changeVideoEvent(conn);
+					syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]);
+				});
+
+				conn.on('close', () => {
+					ui('#sync-party-connection-left');
+				});
+			});
+		}
+	}
+
+	onMount(async () => {
+		const currentUrl = get(page).url;
+		const syncId = currentUrl.searchParams.get('sync');
+		if (syncId) {
+			$syncPartyPeerStore = new Peer(crypto.randomUUID(), peerJsOptions());
+			$syncPartyPeerStore.on('open', () => {
+				if (!$syncPartyPeerStore) return;
+
+				const conn = $syncPartyPeerStore.connect(syncId);
+				syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]);
+
+				changeVideoEvent(conn);
+			});
+
+			$syncPartyPeerStore.on('disconnected', () => {
+				syncPartyPeerStore.set(null);
+				syncPartyConnectionsStore.set(null);
+			});
+		}
+	});
+
+	onDestroy(() => {
+		if ($syncPartyPeerStore) {
+			$syncPartyPeerStore.destroy();
+			$syncPartyPeerStore = null;
+		}
+	});
+</script>
+
+<dialog id="sync-party">
+	<h6>{$_('layout.syncParty')}</h6>
+	<p>{$_('layout.syncPartyWarning')}</p>
+	{#if $syncPartyPeerStore}
+		<nav>
+			<div class="field label border max">
+				<input
+					name="sync-share"
+					readonly
+					value={`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeerStore.id}`}
+					type="text"
+				/>
+				<label class="active" for="sync-share">Share URL</label>
+			</div>
+			<button
+				on:click={async () => {
+					await navigator.clipboard.writeText(
+						`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeerStore.id}`
+					);
+				}}
+				class="square round"
+			>
+				<i>content_copy</i>
+			</button>
+		</nav>
+	{/if}
+	<div class="space"></div>
+	<button
+		class="no-margin"
+		on:click={startWatchSync}
+		data-ui={`${$syncPartyPeerStore ? '#sync-party' : ''}`}
+		>{#if $syncPartyPeerStore}
+			{$_('layout.endSyncParty')}
+		{:else}
+			{$_('layout.startSyncParty')}
+		{/if}
+	</button>
+</dialog>
+
+<div class="snackbar" id="sync-party-connection-join">
+	<i>person_add</i>
+	<span>{$_('syncParty.userJoined')}</span>
+</div>
+
+<div class="snackbar" id="sync-party-connection-left">
+	<i>person_remove</i>
+	<span>{$_('syncParty.userLeft')}</span>
+</div>
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index cf5791bd..b2adaa6f 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { navigating, page } from '$app/stores';
+	import { navigating } from '$app/stores';
 	import { getFeed } from '$lib/Api/index';
 	import type { Notification } from '$lib/Api/model';
 	import Logo from '$lib/Logo.svelte';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Search from '$lib/Search.svelte';
+	import Settings from '$lib/Settings.svelte';
+	import SyncParty from '$lib/SyncParty.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { bookmarkletLoadFromUrl, bookmarkletSaveToUrl } from '$lib/bookmarklet';
-	import { peerJsOptions, removeWindowQueryFlag, setWindowQueryFlag } from '$lib/misc';
-	import type { PlayerEvents } from '$lib/player';
+	import { bookmarkletLoadFromUrl } from '$lib/bookmarklet';
 	import 'beercss';
 	import 'material-dynamic-colors';
-	import type { DataConnection } from 'peerjs';
-	import Peer from 'peerjs';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { pwaInfo } from 'virtual:pwa-info';
@@ -22,28 +20,7 @@
 		activePageStore,
 		authStore,
 		darkModeStore,
-		deArrowEnabledStore,
-		deArrowInstanceStore,
-		deArrowThumbnailInstanceStore,
-		interfacePreviewVideoOnHoverStore,
-		interfaceSearchSuggestionsStore,
-		playerAlwaysLoopStore,
-		playerAutoPlayStore,
-		playerAutoplayNextByDefaultStore,
-		playerDashStore,
-		playerListenByDefaultStore,
-		playerProxyVideosStore,
-		playerSavePlaybackPositionStore,
-		playerTheatreModeByDefaultStore,
-		returnYTDislikesInstanceStore,
-		returnYtDislikesStore,
-		sponsorBlockCategoriesStore,
-		sponsorBlockStore,
-		sponsorBlockUrlStore,
-		syncPartyConnectionsStore,
 		syncPartyPeerStore,
-		synciousInstanceStore,
-		synciousStore,
 		themeColorStore
 	} from '../store';
 
@@ -52,9 +29,6 @@
 	let currentPage: string | null = '';
 	activePageStore.subscribe((page) => (currentPage = page));
 
-	let sponsorCategoriesList: string[] = [];
-	sponsorBlockCategoriesStore.subscribe((value) => (sponsorCategoriesList = value));
-
 	let isLoggedIn = false;
 	authStore.subscribe((value) => {
 		isLoggedIn = value !== null;
@@ -62,12 +36,6 @@
 
 	let notifications: Notification[] = [];
 
-	let sponsorBlockInstance = get(sponsorBlockUrlStore);
-	let synciousInstance = get(synciousInstanceStore);
-	let returnYTInstance = get(returnYTDislikesInstanceStore);
-	let deArrowUrl = get(deArrowInstanceStore);
-	let deArrowThumbnailUrl = get(deArrowThumbnailInstanceStore);
-
 	const pages = [
 		{
 			icon: 'home',
@@ -101,99 +69,6 @@
 		}
 	];
 
-	const sponsorCategories = [
-		{ name: $_('layout.sponsors.sponsor'), category: 'sponsor' },
-		{ name: $_('layout.sponsors.unpaidSelfPromotion'), category: 'selfpromo' },
-		{ name: $_('layout.sponsors.interactionReminder'), category: 'interaction' },
-		{ name: $_('layout.sponsors.intermissionIntroAnimation'), category: 'intro' },
-		{ name: $_('layout.sponsors.credits'), category: 'outro' },
-		{ name: $_('layout.sponsors.preViewRecapHook'), category: 'preview' },
-		{ name: $_('layout.sponsors.tangentJokes'), category: 'filler' }
-	];
-
-	function changeVideoEvent(conn: DataConnection) {
-		conn.on('data', (data) => {
-			const events = data as PlayerEvents;
-			const currentUrl = get(page).url;
-
-			events.events.forEach((event) => {
-				if (event.type === 'change-video' && event.videoId) {
-					currentUrl.pathname = `/watch/${event.videoId}`;
-					goto(currentUrl);
-				}
-			});
-		});
-	}
-
-	async function startWatchSync() {
-		if ($syncPartyPeerStore) {
-			$syncPartyPeerStore.destroy();
-			syncPartyPeerStore.set(null);
-			removeWindowQueryFlag('sync');
-			return;
-		}
-
-		const peerId = crypto.randomUUID();
-		setWindowQueryFlag('sync', peerId);
-		$syncPartyPeerStore = new Peer(peerId, peerJsOptions());
-
-		if ($syncPartyPeerStore) {
-			$syncPartyPeerStore.on('connection', (conn) => {
-				conn.on('open', () => {
-					ui('#sync-party-connection-join');
-
-					if ($page.url.pathname.startsWith('/watch')) {
-						const paths = $page.url.pathname.split('/');
-						if (paths.length > 2) {
-							conn.send({
-								events: [
-									{
-										type: 'change-video',
-										videoId: paths[2]
-									}
-								]
-							} as PlayerEvents);
-						}
-					}
-					changeVideoEvent(conn);
-					syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]);
-				});
-
-				conn.on('close', () => {
-					ui('#sync-party-connection-left');
-				});
-			});
-		}
-	}
-
-	function toggleSponsor(category: string) {
-		if (sponsorCategoriesList.includes(category)) {
-			sponsorBlockCategoriesStore.set(sponsorCategoriesList.filter((value) => value !== category));
-		} else {
-			sponsorCategoriesList.push(category);
-			sponsorBlockCategoriesStore.set(sponsorCategoriesList);
-		}
-	}
-
-	async function setColor(color: any) {
-		const target = color.target;
-		const hex = (target as { value: string }).value;
-		await ui('theme', hex);
-		themeColorStore.set(hex);
-	}
-
-	function toggleDarkMode() {
-		const isDark = get(darkModeStore);
-
-		if (isDark) {
-			ui('mode', 'light');
-			darkModeStore.set(false);
-		} else {
-			ui('mode', 'dark');
-			darkModeStore.set(true);
-		}
-	}
-
 	darkModeStore.subscribe((isDark) => {
 		if (isDark) {
 			ui('mode', 'dark');
@@ -253,32 +128,6 @@
 		if (isLoggedIn) {
 			loadNotifications().catch(() => authStore.set(null));
 		}
-
-		const currentUrl = get(page).url;
-		const syncId = currentUrl.searchParams.get('sync');
-		if (syncId) {
-			$syncPartyPeerStore = new Peer(crypto.randomUUID(), peerJsOptions());
-			$syncPartyPeerStore.on('open', () => {
-				if (!$syncPartyPeerStore) return;
-
-				const conn = $syncPartyPeerStore.connect(syncId);
-				syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]);
-
-				changeVideoEvent(conn);
-			});
-
-			$syncPartyPeerStore.on('disconnected', () => {
-				syncPartyPeerStore.set(null);
-				syncPartyConnectionsStore.set(null);
-			});
-		}
-	});
-
-	onDestroy(() => {
-		if ($syncPartyPeerStore) {
-			$syncPartyPeerStore.destroy();
-			$syncPartyPeerStore = null;
-		}
 	});
 
 	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
@@ -370,373 +219,7 @@
 	{/each}
 </nav>
 
-<dialog class="right" id="dialog-settings">
-	<nav>
-		<h4 class="max">{$_('layout.settings')}</h4>
-		<button class="circle transparent" data-ui="#dialog-settings"><i>close</i></button>
-	</nav>
-	<p>{$_('layout.customize')} Materialious</p>
-
-	<div class="settings">
-		<h6>{$_('layout.theme.theme')}</h6>
-		<button on:click={toggleDarkMode} class="no-margin">
-			{#if !$darkModeStore}
-				<i>dark_mode</i>
-				<span>{$_('layout.theme.darkMode')}</span>
-			{:else}
-				<i>light_mode</i>
-				<span>{$_('layout.theme.lightMode')}</span>
-			{/if}
-		</button>
-		<button>
-			<i>palette</i>
-			<span>{$_('layout.theme.color')}</span>
-			<input on:change={setColor} type="color" />
-		</button>
-	</div>
-
-	<div class="settings">
-		<h6>Interface</h6>
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.searchSuggestions')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$interfaceSearchSuggestionsStore}
-						on:click={() => interfaceSearchSuggestionsStore.set(!$interfaceSearchSuggestionsStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.previewVideoOnHover')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$interfacePreviewVideoOnHoverStore}
-						on:click={() =>
-							interfacePreviewVideoOnHoverStore.set(!$interfacePreviewVideoOnHoverStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-	</div>
-
-	<div class="settings">
-		<h6>{$_('layout.dataPreferences.dataPreferences')}</h6>
-		<p style="width: 240px;">
-			<a
-				href={`${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}/preferences`}
-				target="_blank"
-				rel="noopener noreferrer"
-				class="link"
-			>
-				{$_('layout.dataPreferences.content')}
-			</a>
-		</p>
-	</div>
-
-	<div class="settings">
-		<h6>{$_('layout.player.title')}</h6>
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.autoPlay')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerAutoPlayStore}
-						on:click={() => playerAutoPlayStore.set(!$playerAutoPlayStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.alwaysLoopVideo')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerAlwaysLoopStore}
-						on:click={() => playerAlwaysLoopStore.set(!$playerAlwaysLoopStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.proxyVideos')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerProxyVideosStore}
-						on:click={() => playerProxyVideosStore.set(!$playerProxyVideosStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.savePlaybackPosition')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerSavePlaybackPositionStore}
-						on:click={() => playerSavePlaybackPositionStore.set(!$playerSavePlaybackPositionStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.listenByDefault')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerListenByDefaultStore}
-						on:click={() => playerListenByDefaultStore.set(!$playerListenByDefaultStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin m l">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.theatreModeByDefault')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerTheatreModeByDefaultStore}
-						on:click={() => playerTheatreModeByDefaultStore.set(!$playerTheatreModeByDefaultStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.autoPlayNextByDefault')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerAutoplayNextByDefaultStore}
-						on:click={() =>
-							playerAutoplayNextByDefaultStore.set(!$playerAutoplayNextByDefaultStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-
-		<div class="field no-margin">
-			<nav class="no-padding">
-				<div class="max">
-					<div>{$_('layout.player.dash')}</div>
-				</div>
-				<label class="switch">
-					<input
-						type="checkbox"
-						bind:checked={$playerDashStore}
-						on:click={() => playerDashStore.set(!$playerDashStore)}
-					/>
-					<span></span>
-				</label>
-			</nav>
-		</div>
-	</div>
-
-	<div class="settings">
-		<h6>Return YT Dislikes</h6>
-
-		<form on:submit|preventDefault={() => returnYTDislikesInstanceStore.set(returnYTInstance)}>
-			<nav>
-				<div class="field label border max">
-					<input bind:value={returnYTInstance} name="returnyt-instance" type="text" />
-					<label for="returnyt-instance">{$_('layout.instanceUrl')}</label>
-				</div>
-				<button class="square round">
-					<i>done</i>
-				</button>
-			</nav>
-		</form>
-
-		<nav class="no-padding">
-			<div class="max">
-				<p>{$_('enabled')}</p>
-			</div>
-			<label class="switch">
-				<input
-					bind:checked={$returnYtDislikesStore}
-					on:click={() => returnYtDislikesStore.set(!$returnYtDislikesStore)}
-					type="checkbox"
-				/>
-				<span></span>
-			</label>
-		</nav>
-	</div>
-
-	<div class="settings">
-		<h6>Syncious</h6>
-
-		<form on:submit|preventDefault={() => synciousInstanceStore.set(synciousInstance)}>
-			<nav>
-				<div class="field label border max">
-					<input bind:value={synciousInstance} name="syncious-instance" type="text" />
-					<label for="syncious-instance">{$_('layout.instanceUrl')}</label>
-				</div>
-				<button class="square round">
-					<i>done</i>
-				</button>
-			</nav>
-		</form>
-
-		<nav class="no-padding">
-			<div class="max">
-				<p>{$_('enabled')}</p>
-			</div>
-			<label class="switch">
-				<input
-					bind:checked={$synciousStore}
-					on:click={() => synciousStore.set(!$synciousStore)}
-					type="checkbox"
-				/>
-				<span></span>
-			</label>
-		</nav>
-	</div>
-
-	<div class="settings">
-		<h6>Sponsorblock</h6>
-
-		<form on:submit|preventDefault={() => sponsorBlockUrlStore.set(sponsorBlockInstance)}>
-			<nav>
-				<div class="field label border max">
-					<input bind:value={sponsorBlockInstance} name="sponsorblock-instance" type="text" />
-					<label for="sponsorblock-instance">{$_('layout.instanceUrl')}</label>
-				</div>
-				<button class="square round">
-					<i>done</i>
-				</button>
-			</nav>
-		</form>
-
-		<nav class="no-padding">
-			<div class="max">
-				<p>{$_('enabled')}</p>
-			</div>
-			<label class="switch">
-				<input
-					bind:checked={$sponsorBlockStore}
-					on:click={() => sponsorBlockStore.set(!$sponsorBlockStore)}
-					type="checkbox"
-				/>
-				<span></span>
-			</label>
-		</nav>
-
-		{#each sponsorCategories as sponsor}
-			<div class="field middle-align no-margin">
-				<nav class="no-padding">
-					<div class="max">
-						<p>{sponsor.name}</p>
-					</div>
-					<label class="switch">
-						<input
-							type="checkbox"
-							checked={sponsorCategoriesList.includes(sponsor.category)}
-							on:click={() => toggleSponsor(sponsor.category)}
-						/>
-						<span></span>
-					</label>
-				</nav>
-			</div>
-		{/each}
-	</div>
-
-	<div class="settings">
-		<h6>{$_('layout.deArrow.title')}</h6>
-
-		<form on:submit|preventDefault={() => deArrowInstanceStore.set(deArrowUrl)}>
-			<nav>
-				<div class="field label border max">
-					<input bind:value={deArrowUrl} name="dearrow-instance" type="text" />
-					<label for="dearrow-instance">{$_('layout.instanceUrl')}</label>
-				</div>
-				<button class="square round">
-					<i>done</i>
-				</button>
-			</nav>
-		</form>
-
-		<form on:submit|preventDefault={() => deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl)}>
-			<nav>
-				<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
-					>
-				</div>
-				<button class="square round">
-					<i>done</i>
-				</button>
-			</nav>
-		</form>
-
-		<nav class="no-padding">
-			<div class="max">
-				<p>{$_('enabled')}</p>
-			</div>
-			<label class="switch">
-				<input
-					bind:checked={$deArrowEnabledStore}
-					on:click={() => deArrowEnabledStore.set(!$deArrowEnabledStore)}
-					type="checkbox"
-				/>
-				<span></span>
-			</label>
-		</nav>
-	</div>
-
-	<div class="settings">
-		<h6>{$_('layout.bookmarklet')}</h6>
-		<button
-			class="no-margin"
-			on:click={async () => await navigator.clipboard.writeText(bookmarkletSaveToUrl())}
-			>{$_('copyUrl')}</button
-		>
-	</div>
-</dialog>
+<Settings />
 
 <dialog class="right" id="dialog-notifications">
 	<nav>
@@ -780,54 +263,7 @@
 	{/each}
 </dialog>
 
-<dialog id="sync-party">
-	<h6>{$_('layout.syncParty')}</h6>
-	<p>{$_('layout.syncPartyWarning')}</p>
-	{#if $syncPartyPeerStore}
-		<nav>
-			<div class="field label border max">
-				<input
-					name="sync-share"
-					readonly
-					value={`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeerStore.id}`}
-					type="text"
-				/>
-				<label class="active" for="sync-share">Share URL</label>
-			</div>
-			<button
-				on:click={async () => {
-					await navigator.clipboard.writeText(
-						`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeerStore.id}`
-					);
-				}}
-				class="square round"
-			>
-				<i>content_copy</i>
-			</button>
-		</nav>
-	{/if}
-	<div class="space"></div>
-	<button
-		class="no-margin"
-		on:click={startWatchSync}
-		data-ui={`${$syncPartyPeerStore ? '#sync-party' : ''}`}
-		>{#if $syncPartyPeerStore}
-			{$_('layout.endSyncParty')}
-		{:else}
-			{$_('layout.startSyncParty')}
-		{/if}
-	</button>
-</dialog>
-
-<div class="snackbar" id="sync-party-connection-join">
-	<i>person_add</i>
-	<span>{$_('syncParty.userJoined')}</span>
-</div>
-
-<div class="snackbar" id="sync-party-connection-left">
-	<i>person_remove</i>
-	<span>{$_('syncParty.userLeft')}</span>
-</div>
+<SyncParty />
 
 <main class="responsive max root">
 	{#if $navigating}
@@ -841,18 +277,4 @@
 	nav.left a {
 		font-size: 0.8em;
 	}
-
-	.settings h6 {
-		margin: 1em 0 0.3em 0;
-	}
-
-	form {
-		margin: 1em 0;
-	}
-
-	@media screen and (max-width: 650px) {
-		dialog.right {
-			width: 100%;
-		}
-	}
 </style>
diff --git a/materialious/static/style.css b/materialious/static/style.css
index 154776e0..6d9d1058 100644
--- a/materialious/static/style.css
+++ b/materialious/static/style.css
@@ -31,6 +31,11 @@
 	display: none !important;
 }
 
+main.root {
+	max-height: 100vh;
+	overflow-y: scroll;
+}
+
 @media screen and (max-width: 580px) {
 	main {
 		padding-left: 0.1em !important;
@@ -38,7 +43,8 @@
 	}
 }
 
-main.root {
-	max-height: 100vh;
-	overflow-y: scroll;
+@media screen and (max-width: 650px) {
+	dialog.right {
+		width: 100% !important;
+	}
 }

From 48951cc416c7413fb65bdbb445ec4fc0b3675da5 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 30 Apr 2024 17:35:01 +1200
Subject: [PATCH 2/3] Fixed view for tablets

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

diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index b2adaa6f..e9596d4b 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -164,7 +164,7 @@
 	>
 
 	<Logo classes="m l" />
-	<h6 class="m l">Materialious</h6>
+	<h6 class="l">Materialious</h6>
 
 	<div class="max m l"></div>
 

From c3772b2dc34685450ad84c87b7a83f9b70b9176f Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 30 Apr 2024 17:36:06 +1200
Subject: [PATCH 3/3] Added sync party back to mobile view

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

diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index e9596d4b..d0f70826 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -179,7 +179,7 @@
 	{#if mobileSearchShow}
 		<Search on:searchCancelled={() => (mobileSearchShow = false)} />
 	{:else}
-		<button data-ui="#sync-party" class="m l circle large transparent">
+		<button data-ui="#sync-party" class="circle large transparent">
 			<i class:primary-text={$syncPartyPeerStore}>group</i>
 			<div class="tooltip bottom">{$_('layout.syncParty')}</div>
 		</button>