Fix liniting

.github/workflows/vite-checks.yml

@@ -0,0 +1,26 @@
+name: Development Vite workflow
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./materialious
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install modules
+        run: npm install
+      - name: Check linting
+        run: npm run check
+      - name: Attempt to build codebase
+        run: npm run build

materialious/src/.d.ts

@@ -1 +1,2 @@
-declare module 'virtual:pwa-info';
+declare module 'virtual:pwa-info';
+declare type ui = import('beercss').ui;

materialious/src/lib/Api/index.ts

@@ -34,14 +34,14 @@ export async function fetchErrorHandle(response: Response): Promise<Response> {
 		try {
 			const json = await response.json();
 			message = 'errorBacktrace' in json ? json.errorBacktrace : json.error;
-		} catch { }
+		} catch {}
 		throw Error(message);
 	}
 
 	return response;
 }
 
-export function buildAuthHeaders(): { headers: { Authorization: string; }; } {
+export function buildAuthHeaders(): { headers: { Authorization: string } } {
 	return { headers: { Authorization: `Bearer ${get(authStore)?.token}` } };
 }
 
@@ -191,7 +191,10 @@ export async function deleteUnsubscribe(authorId: string) {
 
 export async function getHistory(page: number = 1, maxResults: number = 20): Promise<string[]> {
 	const resp = await fetchErrorHandle(
-		await fetch(buildPath(`auth/history?page=${page}&max_results=${maxResults}`), buildAuthHeaders())
+		await fetch(
+			buildPath(`auth/history?page=${page}&max_results=${maxResults}`),
+			buildAuthHeaders()
+		)
 	);
 	return await resp.json();
 }
@@ -320,39 +323,30 @@ export async function saveVideoProgress(videoId: string, time: number) {
 	headers['headers']['Content-type'] = 'application/json';
 
 	await fetchErrorHandle(
-		await fetch(
-			`${get(synciousInstanceStore)}/video/${encodeURIComponent(videoId)}`,
-			{
-				...headers,
-				method: "POST",
-				body: JSON.stringify({
-					time: time
-				})
-			}
-		)
+		await fetch(`${get(synciousInstanceStore)}/video/${encodeURIComponent(videoId)}`, {
+			...headers,
+			method: 'POST',
+			body: JSON.stringify({
+				time: time
+			})
+		})
 	);
 }
 
 export async function deleteVideoProgress(videoId: string) {
 	await fetchErrorHandle(
-		await fetch(
-			`${get(synciousInstanceStore)}/video/${videoId}`,
-			{
-				method: "DELETE",
-				...buildAuthHeaders()
-			}
-		)
+		await fetch(`${get(synciousInstanceStore)}/video/${videoId}`, {
+			method: 'DELETE',
+			...buildAuthHeaders()
+		})
 	);
 }
 
 export async function deleteAllVideoProgress() {
 	await fetchErrorHandle(
-		await fetch(
-			`${get(synciousInstanceStore)}/videos`,
-			{
-				method: "DELETE",
-				...buildAuthHeaders()
-			}
-		)
+		await fetch(`${get(synciousInstanceStore)}/videos`, {
+			method: 'DELETE',
+			...buildAuthHeaders()
+		})
 	);
-}
+}

materialious/src/lib/Player.svelte

@@ -5,7 +5,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
-	import type { MediaTimeUpdateEvent, PlayerSrc } from 'vidstack';
+	import type { MediaTimeUpdateEvent, PlayerSrc, VideoSrc } from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
 	import {
 		authStore,
@@ -140,7 +140,7 @@
 						height: Number(quality[1]),
 						width: Number(quality[0])
 					};
-				});
+				}) as VideoSrc[];
 
 				await loadPlayerPos();
 			}

materialious/src/lib/i18n/locales/en.json

@@ -116,4 +116,4 @@
 		},
 		"bookmarklet": "Bookmarklet"
 	}
-}
+}

materialious/src/lib/i18n/locales/ru.json

@@ -95,4 +95,4 @@
 		},
 		"bookmarklet": "Закладка"
 	}
-}
+}

materialious/src/lib/misc.ts

@@ -42,11 +42,11 @@ export function videoLength(lengthSeconds: number): string {
 
 export interface PhasedDescription {
 	description: string;
-	timestamps: { title: string; time: number; timePretty: string; }[];
+	timestamps: { title: string; time: number; timePretty: string }[];
 }
 
 export function phaseDescription(content: string): PhasedDescription {
-	const timestamps: { title: string; time: number; timePretty: string; }[] = [];
+	const timestamps: { title: string; time: number; timePretty: string }[] = [];
 	const lines = content.split('\n');
 
 	const urlRegex = /<a href="([^"]+)"/;
@@ -138,20 +138,23 @@ export function peerJsOptions(): PeerOptions {
 export function getBestThumbnail(
 	images: Image[] | null,
 	maxWidthDimension: number = 480,
-	maxHeightDimension = 360): string | null {
+	maxHeightDimension = 360
+): string | null {
 	if (images && images.length > 0) {
-		images = images.filter(image => image.width < maxWidthDimension && image.height < maxHeightDimension);
+		images = images.filter(
+			(image) => image.width < maxWidthDimension && image.height < maxHeightDimension
+		);
 
 		if (images.length === 0) {
 			return null;
 		}
 
 		images.sort((a, b) => {
-			return (b.width * b.height) - (a.width * a.height);
+			return b.width * b.height - a.width * a.height;
 		});
 
 		return images[0].url;
 	} else {
 		return null;
 	}
-}
+}

materialious/src/routes/+error.svelte

@@ -7,7 +7,9 @@
 
 <div class="space"></div>
 
-<div style="display: flex;align-items: center;flex-direction: column;text-align: center;padding: 90px;">
+<div
+	style="display: flex;align-items: center;flex-direction: column;text-align: center;padding: 90px;"
+>
 	<svg xmlns="http://www.w3.org/2000/svg" height="200" viewBox="0 -960 960 960" width="200"
 		><path
 			d="M480-420q-68 0-123.5 38.5T276-280h408q-25-63-80.5-101.5T480-420Zm-168-60 44-42 42 42 42-42-42-42 42-44-42-42-42 42-44-42-42 42 42 44-42 42 42 42Zm250 0 42-42 44 42 42-42-42-42 42-44-42-42-44 42-42-42-42 42 42 44-42 42 42 42ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"

materialious/src/routes/search/[slug]/+page.ts

@@ -6,7 +6,7 @@ export async function load({ params, url }) {
 
 	const queryFlag = url.searchParams.get('type');
 	if (queryFlag && ['playlist', 'video', 'channel', 'all'].includes(queryFlag)) {
-		type = queryFlag;
+		type = queryFlag as 'playlist' | 'all' | 'video' | 'channel';
 	} else {
 		type = 'all';
 	}

materialious/src/routes/watch/[slug]/+page.ts

@@ -9,7 +9,12 @@ import {
 import { phaseDescription } from '$lib/misc';
 import { error } from '@sveltejs/kit';
 import { get } from 'svelte/store';
-import { authStore, playerProxyVideosStore, returnYTDislikesInstanceStore, returnYtDislikesStore } from '../../../store';
+import {
+	authStore,
+	playerProxyVideosStore,
+	returnYTDislikesInstanceStore,
+	returnYtDislikesStore
+} from '../../../store';
 
 export async function load({ params, url }) {
 	let video;
@@ -19,7 +24,7 @@ export async function load({ params, url }) {
 		error(500, errorMessage);
 	}
 
-	let downloadOptions: { title: string; url: string; }[] = [];
+	let downloadOptions: { title: string; url: string }[] = [];
 
 	if (!video.hlsUrl) {
 		video.formatStreams.forEach((format) => {
@@ -56,10 +61,10 @@ export async function load({ params, url }) {
 
 	let returnYTDislikes = null;
 	const returnYTDislikesInstance = get(returnYTDislikesInstanceStore);
-	if (returnYTDislikesInstance && returnYTDislikesInstance !== "") {
+	if (returnYTDislikesInstance && returnYTDislikesInstance !== '') {
 		try {
 			returnYTDislikes = get(returnYtDislikesStore) ? getDislikes(params.slug) : null;
-		} catch { }
+		} catch {}
 	}
 
 	return {
@@ -71,7 +76,7 @@ export async function load({ params, url }) {
 			personalPlaylists: personalPlaylists,
 			returnYTDislikes: returnYTDislikes,
 			comments: comments,
-			subscribed: amSubscribed(video.authorId),
+			subscribed: amSubscribed(video.authorId)
 		}
 	};
 }

materialious/src/store.ts

@@ -4,12 +4,11 @@ import type { DataConnection } from 'peerjs';
 import { persisted } from 'svelte-persisted-store';
 import { writable, type Writable } from 'svelte/store';
 
-export const authStore: Writable<null | { username: string; token: string; }> = persisted(
+export const authStore: Writable<null | { username: string; token: string }> = persisted(
 	'authToken',
 	null
 );
 
-
 export const darkModeStore: Writable<null | boolean> = persisted('darkMode', null);
 export const themeColorStore: Writable<null | string> = persisted('themeColor', null);
 
@@ -45,7 +44,10 @@ export const sponsorBlockUrlStore: Writable<string | null | undefined> = persist
 	'sponsorBlockUrl',
 	import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE
 );
-export const sponsorBlockCategoriesStore: Writable<string[]> = persisted('sponsorBlockCategories', []);
+export const sponsorBlockCategoriesStore: Writable<string[]> = persisted(
+	'sponsorBlockCategories',
+	[]
+);
 
 export const deArrowInstanceStore = persisted(
 	'deArrowInstance',
@@ -60,6 +62,8 @@ export const deArrowThumbnailInstanceStore = persisted(
 export const syncPartyPeerStore: Writable<Peer | null> = writable(null);
 export const syncPartyConnectionsStore: Writable<DataConnection[] | null> = writable();
 
-export const playlistSettingsStore: Writable<Record<string, { shuffle: boolean, loop: boolean; }>> = writable({});
+export const playlistSettingsStore: Writable<Record<string, { shuffle: boolean; loop: boolean }>> =
+	writable({});
 
-export const miniPlayerSrcStore: Writable<{ video: VideoPlay; time: number; } | null> = writable(null);
+export const miniPlayerSrcStore: Writable<{ video: VideoPlay; time: number } | null> =
+	writable(null);

materialious/tsconfig.json

@@ -10,20 +10,12 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-		"types": [
-			"vidstack/svelte"
-		]
+		"types": ["vidstack/svelte"]
 	},
-	"include": [
-		"src/**/*.ts",
-		"src/**/*.d.ts"
-	],
-	"exclude": [
-		"node_modules",
-		"dist"
-	]
+	"include": ["src/**/*.ts", "src/**/*.d.ts"],
+	"exclude": ["node_modules", "dist"]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
+}

materialious/vite.config.ts

@@ -9,25 +9,25 @@ export default defineConfig({
 			injectRegister: 'inline',
 			manifest: {
 				description: 'Modern material design for Invidious.',
-				theme_color: "#8936FF",
-				background_color: "#1e1b1e",
+				theme_color: '#8936FF',
+				background_color: '#1e1b1e',
 				icons: [
 					{
-						purpose: "maskable",
-						sizes: "512x512",
-						src: "icon512_maskable.png",
-						type: "image/png"
+						purpose: 'maskable',
+						sizes: '512x512',
+						src: 'icon512_maskable.png',
+						type: 'image/png'
 					},
 					{
-						purpose: "any",
-						sizes: "512x512",
-						src: "icon512_rounded.png",
-						type: "image/png"
+						purpose: 'any',
+						sizes: '512x512',
+						src: 'icon512_rounded.png',
+						type: 'image/png'
 					}
 				],
-				orientation: "any",
-				display: "standalone",
-				name: "Materialious",
+				orientation: 'any',
+				display: 'standalone',
+				name: 'Materialious'
 			}
 		}),
 		vidstack(),