Merge pull request #1423 from Materialious/update/1.15.2

Update/1.15.2

.github/workflows/prod-android.yml

@@ -28,13 +28,13 @@ jobs:
                   node-version: latest
 
             - name: Install modules
-              run: cd ../ && npm install
+              run: cd ../ && npm ci
 
             - name: Build android nodejs packages
-              run: cd ../static/nodejsAndroid && npm install
+              run: cd ../static/nodejsAndroid && npm ci
 
             - name: Build package
-              run: cd ../ && npm run build
+              run: cd ../ && npm run build && npm prune --omit=dev
 
             - name: Sync package
               run: cd ../ && npx cap sync

.github/workflows/prod-desktop.yml

@@ -42,10 +42,10 @@ jobs:
                   node-version: ${{ matrix.node-version }}
 
             - name: Install modules
-              run: cd ./materialious && npm install
+              run: cd ./materialious && npm ci
 
             - name: Build package
-              run: cd ./materialious && npm run build
+              run: cd ./materialious && npm run build && npm prune --omit=dev
 
             - name: Sync electron package
               run: cd ./materialious && npx cap sync @capacitor-community/electron
@@ -54,7 +54,7 @@ jobs:
               run: cd ./materialious/electron && python patch_capacitor_plugin.py
 
             - name: Install electron modules
-              run: cd ./materialious/electron && npm install
+              run: cd ./materialious/electron && npm ci
 
             - name: Set up environment variables
               run: echo "GH_TOKEN=${{ secrets.GITHUB_TOKEN }}" >> $GITHUB_ENV

.github/workflows/pull-android.yml

@@ -22,13 +22,13 @@ jobs:
                   node-version: latest
 
             - name: Install modules
-              run: cd ../ && npm install
+              run: cd ../ && npm ci
 
             - name: Build android nodejs packages
-              run: cd ../static/nodejsAndroid && npm install
+              run: cd ../static/nodejsAndroid && npm ci
 
             - name: Build package
-              run: cd ../ && npm run build
+              run: cd ../ && npm run build && npm prune --omit=dev
 
             - name: Sync package
               run: cd ../ && npx cap sync

.github/workflows/pull-desktop.yml

@@ -32,10 +32,10 @@ jobs:
                   node-version: ${{ matrix.node-version }}
 
             - name: Install modules
-              run: cd ./materialious && npm install
+              run: cd ./materialious && npm ci
 
             - name: Build package
-              run: cd ./materialious && npm run build
+              run: cd ./materialious && npm run build && npm prune --omit=dev
 
             - name: Sync electron package
               run: cd ./materialious && npx cap sync @capacitor-community/electron
@@ -44,7 +44,7 @@ jobs:
               run: cd ./materialious/electron && python patch_capacitor_plugin.py
 
             - name: Install electron modules
-              run: cd ./materialious/electron && npm install
+              run: cd ./materialious/electron && npm ci
 
             - name: Build desktop packages
               run: cd ./materialious/electron && npm run electron:make-no-publish

.github/workflows/pull-web.yml

@@ -17,10 +17,10 @@ jobs:
               with:
                   node-version: latest
             - name: Install modules
-              run: npm install
+              run: npm ci
             - name: Run svelte checks
               run: npm run check
             - name: Check linting
               run: npm run eslint
             - name: Attempt to build codebase
-              run: npm run build
+              run: npm run build && npm prune --omit=dev

materialious/Dockerfile

@@ -28,7 +28,11 @@ RUN echo "VITE_DEFAULT_INVIDIOUS_INSTANCE=VITE_DEFAULT_INVIDIOUS_INSTANCE_PLACEH
     echo "VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE=VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE_PLACEHOLDER" >> .env
 
 # Install dependencies and build the project
-RUN npm install && npm run build
+
+RUN npm ci
+
+RUN npm run build
+RUN npm prune --omit=dev
 
 FROM nginx:alpine
 

materialious/electron/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.15.0",
+	"version": "1.15.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.15.0",
+			"version": "1.15.1",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",

materialious/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "materialious",
-	"version": "1.15.0",
+	"version": "1.15.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "materialious",
-			"version": "1.15.0",
+			"version": "1.15.1",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.1",

materialious/src/lib/components/Question.svelte

@@ -27,19 +27,25 @@
 <div class="grid">
 	{#each answers as answer (answer)}
 		<div class={`s12 m${coloumSize} l${coloumSize}`}>
-			<article
-				style="cursor: pointer;"
-				role="presentation"
-				tabindex="-1"
+			<button
 				onclick={() => selectAnswer(answer)}
 				class:primary={selectedAnswer === answer.text}
 				class:surface-container-highest={selectedAnswer !== answer.text}
 			>
 				<h6>{answer.text}</h6>
-			</article>
+			</button>
 		</div>
 	{/each}
 </div>
+
 {#if info}
 	<p><i>info</i> {info}</p>
 {/if}
+
+<style>
+	button {
+		width: 100%;
+		box-sizing: border-box;
+		height: 4rem;
+	}
+</style>

materialious/src/lib/components/settings/Settings.svelte

@@ -37,10 +37,6 @@
 		}
 	]);
 
-	let tabIds: string[] = $state([]);
-
-	setTabIds();
-
 	if (isUnrestrictedPlatform()) {
 		tabs.splice(1, 0, {
 			id: 'engine',
@@ -50,12 +46,6 @@
 		});
 	}
 
-	function setTabIds() {
-		tabs.forEach((tab) => {
-			tabIds.push(tab.id);
-		});
-	}
-
 	rawMasterKeyStore.subscribe((value) => {
 		if (isOwnBackend()?.internalAuth && value) {
 			tabs.splice(1, 0, {
@@ -69,8 +59,6 @@
 				return tab.id !== 'account';
 			});
 		}
-
-		setTabIds();
 	});
 
 	let dialogType = $state('');
@@ -129,25 +117,29 @@
 
 	<div style="height: 100%;">
 		<nav class="wrap s">
-			{#if tabIds}
-				<button class="large small-round surface-container-highest max" data-ui="#tab-menu">
-					<i>{tabs[tabIds.indexOf(activeTab)]?.icon}</i>
-					<span>{tabs[tabIds.indexOf(activeTab)]?.label}</span>
-					<menu style="width: 100%;" data-ui="#tab-menu" id="tab-menu">
-						{#each tabs as tab (tab)}
-							<li
-								onclick={() => {
-									activeTab = tab.id;
-								}}
-								role="presentation"
-								data-ui="#tab-menu"
-							>
-								<i>{tab.icon}</i>
-								<span>{tab.label}</span>
-							</li>
-						{/each}
-					</menu>
-				</button>
+			{#if tabs}
+				{@const currentTab = tabs.find((tab) => tab.id === activeTab)}
+
+				{#if currentTab}
+					<button class="large small-round surface-container-highest max" data-ui="#tab-menu">
+						<i>{currentTab.icon}</i>
+						<span>{currentTab.label}</span>
+						<menu style="width: 100%;" data-ui="#tab-menu" id="tab-menu">
+							{#each tabs as tab (tab)}
+								<li
+									onclick={() => {
+										activeTab = tab.id;
+									}}
+									role="presentation"
+									data-ui="#tab-menu"
+								>
+									<i>{tab.icon}</i>
+									<span>{tab.label}</span>
+								</li>
+							{/each}
+						</menu>
+					</button>
+				{/if}
 			{/if}
 		</nav>
 

materialious/src/routes/(app)/+page.ts

@@ -2,7 +2,7 @@ import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
 import { getPopular } from '$lib/api/index';
 import { isYTBackend } from '$lib/misc';
-import { feedCacheStore } from '$lib/store';
+import { feedCacheStore, invidiousInstanceStore } from '$lib/store';
 import { error } from '@sveltejs/kit';
 import { get } from 'svelte/store';
 
@@ -12,6 +12,12 @@ export async function load() {
 		return;
 	}
 
+	if (!get(invidiousInstanceStore)) {
+		return {
+			popularDisabled: true
+		};
+	}
+
 	let popular = get(feedCacheStore).popular;
 	let popularDisabled: boolean = false;
 

materialious/src/routes/(app)/playlist/+page.ts

@@ -1,11 +1,10 @@
-import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 
 export async function load({ url }) {
 	const playlistId = url.searchParams.get('list');
 	if (playlistId) {
-		goto(resolve(`/playlist/[playlistId]`, { playlistId }));
+		throw redirect(302, resolve(`/playlist/[playlistId]`, { playlistId }));
 	} else {
 		error(404);
 	}

materialious/src/routes/(app)/setup/+page.svelte

@@ -15,7 +15,9 @@
 	let invidiousInstanceValid: boolean = $state(true);
 	let invidiousInstance: string = $state(defaultInstance ?? '');
 
-	async function setupCompleted() {
+	async function setupCompleted(event?: Event) {
+		event?.preventDefault();
+
 		invidiousInstanceValid = await setInvidiousInstance(invidiousInstance);
 
 		if (!invidiousInstanceValid) {
@@ -54,11 +56,6 @@
 				work.
 			</p>
 		{:else}
-			<h3 class="center-align">{$_('initalSetup.required')}</h3>
-			<div class="space"></div>
-			<div class="divider"></div>
-			<div class="space"></div>
-
 			<Question
 				question={$_('initalSetup.useInvidious')}
 				answers={[
@@ -110,29 +107,29 @@
 
 				<div class="space"></div>
 				<h3>{$_('initalSetup.configureInstance')}</h3>
-				<div
-					class="field label prefix surface-container-highest"
-					class:invalid={!invidiousInstanceValid && invidiousInstance !== ''}
-				>
-					<i>link</i>
-					<input bind:value={invidiousInstance} name="instanceUrl" type="text" tabindex="0" />
-					<label for="instanceUrl" tabindex="-1">{$_('layout.instanceUrl')}</label>
-					{#if !invidiousInstanceValid && invidiousInstance !== ''}
-						<span class="error">{$_('invalidInstance')}</span>
-					{/if}
-				</div>
+				<form onsubmit={setupCompleted}>
+					<nav class="center-align">
+						<div
+							class="field label prefix surface-container-highest"
+							class:invalid={!invidiousInstanceValid && invidiousInstance !== ''}
+						>
+							<i>link</i>
+							<input bind:value={invidiousInstance} name="instanceUrl" type="text" tabindex="0" />
+							<label for="instanceUrl" tabindex="-1">{$_('layout.instanceUrl')}</label>
+						</div>
 
-				<div class="space"></div>
-
-				<button onclick={setupCompleted}>
-					<i>done_all</i>
-					<span>{$_('initalSetup.done')}</span>
-				</button>
+						<button type="submit">
+							<i>done_all</i>
+						</button>
+					</nav>
+				</form>
 			{/if}
 		{/if}
 	</div>
 </nav>
 
+<div style="margin-bottom: 20rem;"></div>
+
 <style>
 	.setup {
 		width: 600px;

materialious/src/routes/(app)/shorts/[slug]/+page.ts

@@ -1,6 +1,6 @@
-import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
+import { redirect } from '@sveltejs/kit';
 
 export async function load({ params }) {
-	goto(resolve('/watch/[videoId]', { videoId: params.slug }));
+	throw redirect(302, resolve('/watch/[videoId]', { videoId: params.slug }));
 }

materialious/src/routes/(app)/watch/+page.ts

@@ -1,7 +1,8 @@
-import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
 import { error } from '@sveltejs/kit';
 
+import { redirect } from '@sveltejs/kit';
+
 export async function load({ url }) {
 	const videoId = url.searchParams.get('v');
 	const playlistId = url.searchParams.get('list');
@@ -18,8 +19,7 @@ export async function load({ url }) {
 			goToUrl.searchParams.set('time', timestamp);
 		}
 
-		// eslint-disable-next-line svelte/no-navigation-without-resolve
-		goto(goToUrl);
+		throw redirect(302, goToUrl);
 	} else {
 		error(404);
 	}

materialious/src/routes/+layout.ts

@@ -1,9 +1,9 @@
 import { browser } from '$app/environment';
-import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
+import { redirect } from '@sveltejs/kit';
 import androidTv from '$lib/android/plugins/androidTv';
 import { getResolveUrl } from '$lib/api';
-import '$lib/i18n'; // Import to initialize. Important :)
+import '$lib/i18n';
 import { initI18n } from '$lib/i18n';
 import { getPages } from '$lib/navPages';
 import {
@@ -32,8 +32,6 @@ export async function load({ url }) {
 	isAndroidTvStore.set((await androidTv.isAndroidTv()).value);
 
 	if (Capacitor.getPlatform() === 'android') {
-		// Due to race condition with how we set & save persistent store values
-		// we manually set stores like auth & instance before load.
 		const preferenceKey: Record<string, Writable<any>> = {
 			invidiousInstance: invidiousInstanceStore,
 			authToken: invidiousAuthStore,
@@ -42,22 +40,30 @@ export async function load({ url }) {
 		};
 
 		for (const [key, store] of Object.entries(preferenceKey)) {
-			const result = await Preferences.get({ key: key });
-			if (result.value !== null) store.set(deserialize(result.value));
+			const result = await Preferences.get({ key });
+			if (result.value !== null) {
+				store.set(deserialize(result.value));
+			}
 		}
 	}
 
 	const resolvedRoot = resolve('/', {});
+
 	if (url.pathname.startsWith(resolvedRoot + '@')) {
 		const username = url.pathname.substring(resolvedRoot.length).split('/')[0];
 
 		try {
 			const resolvedUrl = await getResolveUrl(`www.youtube.com/${username}`);
 			if (resolvedUrl.pageType === 'WEB_PAGE_TYPE_CHANNEL') {
-				goto(resolve(`/channel/[authorId]`, { authorId: resolvedUrl.ucid }));
+				throw redirect(
+					302,
+					resolve(`/channel/[authorId]`, {
+						authorId: resolvedUrl.ucid
+					})
+				);
 			}
 		} catch {
-			// continue regardless of error
+			// ignore errors
 		}
 	}
 
@@ -70,11 +76,11 @@ export async function load({ url }) {
 		url.pathname === resolvedRoot &&
 		window.history.length < 3
 	) {
-		getPages().forEach((page) => {
+		for (const page of getPages()) {
 			if (page.href === defaultPage && (!page.requiresAuth || get(invidiousAuthStore))) {
-				goto(resolve(defaultPage, {}));
+				throw redirect(302, resolve(defaultPage, {}));
 			}
-		});
+		}
 	}
 
 	const isLoginPage = url.pathname.endsWith('/internal/login');
@@ -82,9 +88,13 @@ export async function load({ url }) {
 
 	if (!isLoginPage) {
 		if (isOwnBackend()?.requireAuth && !get(rawMasterKeyStore)) {
-			goto(resolve('/internal/login', {}), { replaceState: true });
-		} else if (!get(invidiousInstanceStore) && !isYTBackend() && !isSetupPage) {
-			goto(resolve('/setup', {}), { replaceState: true });
+			throw redirect(302, resolve('/internal/login', {}));
+		}
+
+		if (!get(invidiousInstanceStore) && !isYTBackend() && !isSetupPage) {
+			throw redirect(302, resolve('/setup', {}));
 		}
 	}
+
+	return {};
 }

update_versions.py

@@ -3,7 +3,7 @@ import os
 import re
 from datetime import datetime
 
-LATEST_VERSION = "1.15.1"
+LATEST_VERSION = "1.15.2"
 RELEASE_DATE = datetime.now().strftime("%Y-%-m-%d")  # Format: YYYY-M-D
 
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")