From cf7ec6175c2e3768f037b24f0867329b06ac7aaa Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 5 May 2024 16:39:30 +1200
Subject: [PATCH] Minor fixes to cor issues on mobile

---
 materialious/src/lib/MiniPlayer.svelte |   8 +-
 materialious/src/lib/Settings.svelte   | 110 +++++++++++++++----------
 materialious/src/lib/Thumbnail.svelte  |   5 +-
 materialious/src/lib/misc.ts           |   6 ++
 4 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/materialious/src/lib/MiniPlayer.svelte b/materialious/src/lib/MiniPlayer.svelte
index 37492524..62eba32f 100644
--- a/materialious/src/lib/MiniPlayer.svelte
+++ b/materialious/src/lib/MiniPlayer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { miniPlayerSrcStore } from '../store';
+	import { get } from 'svelte/store';
+	import { miniPlayerSrcStore, playerProxyVideosStore } from '../store';
 	import { proxyVideoUrl } from './misc';
 
 	let currentTime: number = 0;
@@ -48,7 +49,6 @@
 				></progress>
 			</div>
 			<video
-				crossorigin="anonymous"
 				on:click={() => {
 					goto(`/watch/${$miniPlayerSrcStore.video.videoId}?time=${currentTime}`);
 					miniPlayerSrcStore.set(null);
@@ -59,7 +59,9 @@
 				on:loadedmetadata={setTime}
 				controls={false}
 				autoplay
-				src={proxyVideoUrl($miniPlayerSrcStore.video.formatStreams[0].url)}
+				src={get(playerProxyVideosStore)
+					? proxyVideoUrl($miniPlayerSrcStore.video.formatStreams[0].url)
+					: $miniPlayerSrcStore.video.formatStreams[0].url}
 			>
 			</video>
 		</article>
diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte
index db2a5e47..e09eecdd 100644
--- a/materialious/src/lib/Settings.svelte
+++ b/materialious/src/lib/Settings.svelte
@@ -4,6 +4,7 @@
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import {
+		authStore,
 		darkModeStore,
 		deArrowEnabledStore,
 		deArrowInstanceStore,
@@ -29,6 +30,7 @@
 		synciousStore,
 		themeColorStore
 	} from '../store';
+	import { ensureNoTrailingSlash } from './misc';
 
 	let sponsorCategoriesList: string[] = [];
 	sponsorBlockCategoriesStore.subscribe((value) => (sponsorCategoriesList = value));
@@ -107,7 +109,12 @@
 	{#if Capacitor.isNativePlatform()}
 		<div class="settings">
 			<h6>Invidious</h6>
-			<form on:submit|preventDefault={() => instanceStore.set(invidiousInstance)}>
+			<form
+				on:submit|preventDefault={() => {
+					authStore.set(null);
+					instanceStore.set(ensureNoTrailingSlash(invidiousInstance));
+				}}
+			>
 				<nav>
 					<div class="field label border max">
 						<input bind:value={invidiousInstance} name="returnyt-instance" type="text" />
@@ -222,21 +229,23 @@
 			</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>
+		{#if !Capacitor.isNativePlatform()}
+			<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>
+		{/if}
 
 		<div class="field no-margin">
 			<nav class="no-padding">
@@ -303,27 +312,32 @@
 			</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>
+		{#if !Capacitor.isNativePlatform()}
+			<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>
+		{/if}
 	</div>
 
 	<div class="settings">
 		<h6>Return YT Dislikes</h6>
 
-		<form on:submit|preventDefault={() => returnYTDislikesInstanceStore.set(returnYTInstance)}>
+		<form
+			on:submit|preventDefault={() =>
+				returnYTDislikesInstanceStore.set(ensureNoTrailingSlash(returnYTInstance))}
+		>
 			<nav>
 				<div class="field label border max">
 					<input bind:value={returnYTInstance} name="returnyt-instance" type="text" />
@@ -353,7 +367,10 @@
 	<div class="settings">
 		<h6>Syncious</h6>
 
-		<form on:submit|preventDefault={() => synciousInstanceStore.set(synciousInstance)}>
+		<form
+			on:submit|preventDefault={() =>
+				synciousInstanceStore.set(ensureNoTrailingSlash(synciousInstance))}
+		>
 			<nav>
 				<div class="field label border max">
 					<input bind:value={synciousInstance} name="syncious-instance" type="text" />
@@ -383,7 +400,10 @@
 	<div class="settings">
 		<h6>Sponsorblock</h6>
 
-		<form on:submit|preventDefault={() => sponsorBlockUrlStore.set(sponsorBlockInstance)}>
+		<form
+			on:submit|preventDefault={() =>
+				sponsorBlockUrlStore.set(ensureNoTrailingSlash(sponsorBlockInstance))}
+		>
 			<nav>
 				<div class="field label border max">
 					<input bind:value={sponsorBlockInstance} name="sponsorblock-instance" type="text" />
@@ -431,7 +451,9 @@
 	<div class="settings">
 		<h6>{$_('layout.deArrow.title')}</h6>
 
-		<form on:submit|preventDefault={() => deArrowInstanceStore.set(deArrowUrl)}>
+		<form
+			on:submit|preventDefault={() => deArrowInstanceStore.set(ensureNoTrailingSlash(deArrowUrl))}
+		>
 			<nav>
 				<div class="field label border max">
 					<input bind:value={deArrowUrl} name="dearrow-instance" type="text" />
@@ -471,14 +493,16 @@
 		</nav>
 	</div>
 
-	<div class="settings">
-		<h6>{$_('layout.bookmarklet')}</h6>
-		<button
-			class="no-margin"
-			on:click={async () => await navigator.clipboard.writeText(bookmarkletSaveToUrl())}
-			>{$_('copyUrl')}</button
-		>
-	</div>
+	{#if !Capacitor.isNativePlatform()}
+		<div class="settings">
+			<h6>{$_('layout.bookmarklet')}</h6>
+			<button
+				class="no-margin"
+				on:click={async () => await navigator.clipboard.writeText(bookmarkletSaveToUrl())}
+				>{$_('copyUrl')}</button
+			>
+		</div>
+	{/if}
 </dialog>
 
 <style>
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 14685cdd..f1cd2b1b 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -94,9 +94,10 @@
 
 							mockVideo.preload = 'auto';
 							mockVideo.id = 'video';
-							mockVideo.crossOrigin = location.origin;
 							const videoToThumbnail = (await getVideo(video.videoId)).formatStreams[0].url;
-							mockVideo.src = proxyVideoUrl(videoToThumbnail);
+							mockVideo.src = get(playerProxyVideosStore)
+								? proxyVideoUrl(videoToThumbnail)
+								: videoToThumbnail;
 
 							mockVideo.addEventListener('loadeddata', () => {
 								mockVideo.currentTime = mockVideo.duration / 100;
diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts
index 0cd6616f..1f49faa6 100644
--- a/materialious/src/lib/misc.ts
+++ b/materialious/src/lib/misc.ts
@@ -159,3 +159,9 @@ export function getBestThumbnail(
 		return null;
 	}
 }
+
+export function ensureNoTrailingSlash(url: any): string {
+	if (typeof url !== 'string') return '';
+
+	return url.endsWith('/') ? url.slice(0, -1) : url;
+}