From ed9b67ceba0eb858f07d040e757951aae867ab18 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Wed, 5 Feb 2025 18:43:15 +1300
Subject: [PATCH] Fixed linting errors

---
 materialious/android/.idea/other.xml          | 22 +++++++++++++++++
 materialious/package-lock.json                |  6 ++---
 materialious/package.json                     |  4 ++--
 .../lib/components/PlaylistThumbnail.svelte   |  4 ++--
 materialious/src/lib/components/Search.svelte |  2 +-
 .../src/lib/components/Thumbnail.svelte       | 24 +++++++++----------
 .../routes/(app)/channel/[slug]/+page.svelte  |  5 ++--
 .../routes/(app)/hashtag/[slug]/+page.svelte  |  9 +++----
 .../src/routes/(app)/playlists/+page.svelte   |  2 +-
 .../routes/(app)/subscriptions/+page.svelte   | 11 +++++----
 .../(app)/subscriptions/manage/+page.svelte   |  2 +-
 .../routes/(app)/watch/[slug]/+page.svelte    |  4 ++--
 .../(no-layout)/embed/[slug]/+page@.svelte    |  2 +-
 13 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/materialious/android/.idea/other.xml b/materialious/android/.idea/other.xml
index 95424375..dba9935d 100644
--- a/materialious/android/.idea/other.xml
+++ b/materialious/android/.idea/other.xml
@@ -124,6 +124,17 @@
           <option name="screenX" value="2220" />
           <option name="screenY" value="1080" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="dm2q" />
+          <option name="id" value="dm2q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="S23 Plus" />
+          <option name="screenDensity" value="450" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2340" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="samsung" />
@@ -267,6 +278,17 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2400" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="motorola" />
+          <option name="codename" value="maui" />
+          <option name="id" value="maui" />
+          <option name="manufacturer" value="Motorola" />
+          <option name="name" value="moto g play - 2023" />
+          <option name="screenDensity" value="280" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1600" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="31" />
           <option name="brand" value="google" />
diff --git a/materialious/package-lock.json b/materialious/package-lock.json
index 7dd40316..4e673ff1 100644
--- a/materialious/package-lock.json
+++ b/materialious/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "materialious",
-	"version": "1.7.4",
+	"version": "1.7.5",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "materialious",
-			"version": "1.7.4",
+			"version": "1.7.5",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.1",
 				"@capacitor/android": "^6.1.2",
@@ -39,7 +39,7 @@
 				"svelte-infinite-loading": "^1.4.0",
 				"svelte-persisted-store": "^0.12.0",
 				"terser": "^5.34.1",
-				"vidstack": "^1.12.9",
+				"vidstack": "^1.12.12",
 				"youtubei.js": "^12.2.0"
 			},
 			"devDependencies": {
diff --git a/materialious/package.json b/materialious/package.json
index f62f5c13..9a7b6fcf 100644
--- a/materialious/package.json
+++ b/materialious/package.json
@@ -72,7 +72,7 @@
 		"svelte-infinite-loading": "^1.4.0",
 		"svelte-persisted-store": "^0.12.0",
 		"terser": "^5.34.1",
-		"vidstack": "^1.12.9",
+		"vidstack": "^1.12.12",
 		"youtubei.js": "^12.2.0"
 	}
-}
\ No newline at end of file
+}
diff --git a/materialious/src/lib/components/PlaylistThumbnail.svelte b/materialious/src/lib/components/PlaylistThumbnail.svelte
index c22ec33b..5b80f2e0 100644
--- a/materialious/src/lib/components/PlaylistThumbnail.svelte
+++ b/materialious/src/lib/components/PlaylistThumbnail.svelte
@@ -17,7 +17,7 @@
 
 	let loading = $state(true);
 
-	let img: HTMLImageElement = $state();
+	let img: HTMLImageElement | undefined = $state();
 
 	const playlistLink = `/playlist/${playlist.playlistId}`;
 
@@ -53,7 +53,7 @@
 	{#if playlist.videoCount > 0 && !$interfaceLowBandwidthMode}
 		{#if loading}
 			<progress class="circle"></progress>
-		{:else if img.src !== ''}
+		{:else if img && img.src !== ''}
 			<img
 				class="responsive"
 				style="max-width: 100%;height: 100%;"
diff --git a/materialious/src/lib/components/Search.svelte b/materialious/src/lib/components/Search.svelte
index 2cef78a3..37784ae5 100644
--- a/materialious/src/lib/components/Search.svelte
+++ b/materialious/src/lib/components/Search.svelte
@@ -17,7 +17,7 @@
 	let searchSuggestions = $state(false);
 	interfaceSearchSuggestionsStore.subscribe((value) => (searchSuggestions = value));
 
-	let search: string = $state();
+	let search: string = $state('');
 	let suggestionsForSearch: string[] = $state([]);
 	let selectedSuggestionIndex: number = $state(-1);
 
diff --git a/materialious/src/lib/components/Thumbnail.svelte b/materialious/src/lib/components/Thumbnail.svelte
index a6ed9118..5a4d9703 100644
--- a/materialious/src/lib/components/Thumbnail.svelte
+++ b/materialious/src/lib/components/Thumbnail.svelte
@@ -39,7 +39,7 @@
 	let videoPreview: VideoPlay | null = $state(null);
 	let videoPreviewMuted: boolean = $state(true);
 	let videoPreviewVolume: number = $state(0.4);
-	let imgHeight: number = $state();
+	let imgHeight: number = $state(0);
 
 	let authorImg: HTMLImageElement | undefined = $state();
 
@@ -62,17 +62,17 @@
 	let loading = $state(true);
 	let loaded = $state(false);
 
-	let img: HTMLImageElement = $state();
+	let img: HTMLImageElement | undefined = $state();
 
-	let progress: string | null = $state();
+	let progress: string | undefined = $state();
 	if (get(playerSavePlaybackPositionStore)) {
 		try {
-			progress = localStorage.getItem(`v_${video.videoId}`);
+			progress = localStorage.getItem(`v_${video.videoId}`) ?? undefined;
 		} catch {
-			progress = null;
+			progress = undefined;
 		}
 	} else {
-		progress = null;
+		progress = undefined;
 	}
 
 	let startedSideways = sideways === true;
@@ -90,11 +90,11 @@
 
 		try {
 			const channel = await getChannel(video.authorId, { priority: 'low' });
-			const img = new Image();
-			img.src = proxyGoogleImage(getBestThumbnail(channel.authorThumbnails, 75, 75));
+			const loadedPfp = new Image();
+			loadedPfp.src = proxyGoogleImage(getBestThumbnail(channel.authorThumbnails, 75, 75));
 
-			img.onload = () => {
-				authorImg = img;
+			loadedPfp.onload = () => {
+				authorImg = loadedPfp;
 			};
 		} catch {}
 	}
@@ -297,7 +297,7 @@
 							style="width: 100%;height: {placeholderHeight}px;"
 						></div>
 					{:else if loaded}
-						{#if showVideoPreview && videoPreview}
+						{#if showVideoPreview && videoPreview && img}
 							<div style="max-width: 100%; max-height: {imgHeight}px;">
 								<video
 									id="video-preview"
@@ -315,7 +315,7 @@
 								>
 								</video>
 							</div>
-						{:else}
+						{:else if img}
 							<img class="responsive" src={img.src} alt="Thumbnail for video" />
 						{/if}
 					{:else}
diff --git a/materialious/src/routes/(app)/channel/[slug]/+page.svelte b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
index a481f03d..ad1453d4 100644
--- a/materialious/src/routes/(app)/channel/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
@@ -23,7 +23,8 @@
 
 	let tab: 'videos' | 'playlists' | 'streams' | 'shorts' = $state('videos');
 
-	let displayContent: ChannelContentPlaylists | ChannelContentVideos | undefined = $state(undefined);
+	let displayContent: ChannelContentPlaylists | ChannelContentVideos | undefined =
+		$state(undefined);
 
 	async function loadMore(event: InfiniteEvent) {
 		if (typeof displayContent === 'undefined') return;
@@ -61,7 +62,7 @@
 		displayContent = await getChannelContent(data.channel.authorId, { type: tab });
 	}
 
-	let channelPfp: string = $state();
+	let channelPfp: string | undefined = $state();
 	onMount(async () => {
 		displayContent = await getChannelContent(data.channel.authorId, { type: 'videos' });
 
diff --git a/materialious/src/routes/(app)/hashtag/[slug]/+page.svelte b/materialious/src/routes/(app)/hashtag/[slug]/+page.svelte
index 82cf9f21..66fd65d4 100644
--- a/materialious/src/routes/(app)/hashtag/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/hashtag/[slug]/+page.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { getHashtag } from '$lib/api';
+	import type { Video } from '$lib/api/model.js';
 	import VideoList from '$lib/components/VideoList.svelte';
 	import { activePageStore } from '$lib/store';
+	import { onMount } from 'svelte';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 
 	let { data } = $props();
 
 	let currentPage = 1;
-	let videos;
-	run(() => {
+	let videos: Video[] = $state([]);
+
+	onMount(() => {
 		videos = [...data.hashTagVideos.results];
 	});
 
diff --git a/materialious/src/routes/(app)/playlists/+page.svelte b/materialious/src/routes/(app)/playlists/+page.svelte
index f7fbb71e..58bdb64b 100644
--- a/materialious/src/routes/(app)/playlists/+page.svelte
+++ b/materialious/src/routes/(app)/playlists/+page.svelte
@@ -13,7 +13,7 @@
 	activePageStore.set('playlists');
 
 	let playlistPrivacy: 'public' | 'private' | 'unlisted' = 'public';
-	let playlistTitle: string = $state();
+	let playlistTitle: string = $state('');
 
 	function onPrivacyChange(event: any) {
 		playlistPrivacy = event.currentTarget.value;
diff --git a/materialious/src/routes/(app)/subscriptions/+page.svelte b/materialious/src/routes/(app)/subscriptions/+page.svelte
index aac32fb1..f5bc92aa 100644
--- a/materialious/src/routes/(app)/subscriptions/+page.svelte
+++ b/materialious/src/routes/(app)/subscriptions/+page.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { getFeed } from '$lib/api/index';
+	import type { Notification, Video } from '$lib/api/model.js';
 	import VideoList from '$lib/components/VideoList.svelte';
 	import { activePageStore } from '$lib/store';
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 
 	let { data } = $props();
 
 	let currentPage = 1;
-	let videos;
-	run(() => {
+	let videos: (Notification | Video)[] = $state([]);
+
+	onMount(() => {
 		videos = [...data.feed.notifications, ...data.feed.videos];
 	});
 
@@ -37,6 +38,6 @@
 	</a>
 </nav>
 
-<VideoList bind:videos />
+<VideoList {videos} />
 
 <InfiniteLoading on:infinite={loadMore} />
diff --git a/materialious/src/routes/(app)/subscriptions/manage/+page.svelte b/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
index 5907166a..578c5318 100644
--- a/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
+++ b/materialious/src/routes/(app)/subscriptions/manage/+page.svelte
@@ -10,7 +10,7 @@
 
 	let subscriptions = $state(structuredClone(data.subscriptions));
 
-	let search: string = $state();
+	let search: string = $state('');
 
 	const fuse = new Fuse(subscriptions, {
 		keys: ['author']
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index b3f264de..769faa5b 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -72,7 +72,7 @@
 	let theatreMode = $state(get(playerTheatreModeByDefaultStore));
 
 	let audioMode = $state(get(playerListenByDefaultStore));
-	let player: MediaPlayerElement = $state();
+	let player: MediaPlayerElement;
 
 	let segments: Segment[] = $state([]);
 
@@ -415,7 +415,7 @@
 		theatreMode = !theatreMode;
 	}
 
-	let pauseTimeout: NodeJS.Timeout = $state();
+	let pauseTimeout: NodeJS.Timeout | undefined = $state();
 	function setPauseTimer() {
 		if (pauseTimeout) {
 			clearTimeout(pauseTimeout);
diff --git a/materialious/src/routes/(no-layout)/embed/[slug]/+page@.svelte b/materialious/src/routes/(no-layout)/embed/[slug]/+page@.svelte
index dc578922..7e8fe770 100644
--- a/materialious/src/routes/(no-layout)/embed/[slug]/+page@.svelte
+++ b/materialious/src/routes/(no-layout)/embed/[slug]/+page@.svelte
@@ -4,7 +4,7 @@
 
 	let { data } = $props();
 
-	let player: MediaPlayerElement = $state();
+	let player: MediaPlayerElement;
 </script>
 
 <Player bind:player isEmbed={true} {data} />