Updated version, previews & external outputs

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 12
-        versionName "1.1.0"
+        versionCode 13
+        versionName "1.1.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -60,4 +60,4 @@
 		"svelte-persisted-store": "^0.11.0",
 		"vidstack": "^1.11.21"
 	}
-}
+}

materialious/src/lib/Settings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { bookmarkletSaveToUrl } from '$lib/externalSettings';
 	import { Capacitor } from '@capacitor/core';
+	import ui from 'beercss';
 	import { iso31661 } from 'iso-3166';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
@@ -11,7 +12,10 @@
 		deArrowEnabledStore,
 		deArrowInstanceStore,
 		deArrowThumbnailInstanceStore,
+		deArrowTitlesOnly,
 		instanceStore,
+		interfaceAutoExpandComments,
+		interfaceAutoExpandDesc,
 		interfaceForceCase,
 		interfacePreviewVideoOnHoverStore,
 		interfaceRegionStore,
@@ -170,6 +174,38 @@
 			</nav>
 		</div>
 
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.expandDescription')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$interfaceAutoExpandDesc}
+						on:click={() => interfaceAutoExpandDesc.set(!$interfaceAutoExpandDesc)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
+		<div class="field no-margin">
+			<nav class="no-padding">
+				<div class="max">
+					<div>{$_('layout.expandComments')}</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						bind:checked={$interfaceAutoExpandComments}
+						on:click={() => interfaceAutoExpandComments.set(!$interfaceAutoExpandComments)}
+					/>
+					<span></span>
+				</label>
+			</nav>
+		</div>
+
 		<div class="field label suffix border">
 			<select name="region" bind:value={region} on:change={() => interfaceRegionStore.set(region)}>
 				{#each iso31661 as region}
@@ -533,6 +569,20 @@
 			</nav>
 		</form>
 
+		<nav class="no-padding">
+			<div class="max">
+				<p>{$_('layout.deArrow.titleOnly')}</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$deArrowTitlesOnly}
+					on:click={() => deArrowTitlesOnly.set(!$deArrowTitlesOnly)}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+
 		<nav class="no-padding">
 			<div class="max">
 				<p>{$_('enabled')}</p>

materialious/src/lib/Thumbnail.svelte

@@ -17,6 +17,7 @@
 	import {
 		authStore,
 		deArrowEnabledStore,
+		deArrowTitlesOnly,
 		interfacePreviewVideoOnHoverStore,
 		playerProxyVideosStore,
 		playerSavePlaybackPositionStore,
@@ -113,7 +114,7 @@
 				}
 			} catch {}
 
-			if (!locatedThumbnail) {
+			if (!locatedThumbnail && !get(deArrowTitlesOnly)) {
 				// Process thumbnail locally.
 				const canvas = document.getElementById('canvas') as HTMLCanvasElement | null;
 				function generateThumbnail(): Promise<string> {
@@ -318,20 +319,19 @@
 					<a
 						href={watchUrl.toString()}
 						data-sveltekit-preload-data="off"
-						class:ellipsis-container={!sideways}
+						class:ellipsis-root={!sideways}
 						><div class="bold" class:ellipsis={!sideways}>
 							{truncate(letterCase(video.title.trim()), 40)}
 						</div>
 
-						<div class="tooltip bottom small">{letterCase(video.title.trim())}</div>
+						<div class="tooltip bottom small">{letterCase(video.title)}</div>
 					</a>
-					<div>
-						<a class:author={!sideways} href={`/channel/${video.authorId}`}>{video.author}</a>
-						<span>
-							{#if !('publishedText' in video) && 'viewCountText' in video}
-								&nbsp;• {video.viewCountText}{/if}
-						</span>
-					</div>
+
+					<a class:author={!sideways} href={`/channel/${video.authorId}`}>{video.author}</a>
+					<span>
+						{#if !('publishedText' in video) && 'viewCountText' in video}
+							&nbsp;• {video.viewCountText}{/if}
+					</span>
 					<nav class="no-margin">
 						{#if 'publishedText' in video}
 							<div class="max">
@@ -367,7 +367,7 @@
 		width: 200px;
 	}
 
-	.ellipsis-container {
+	.ellipsis-root {
 		display: flex;
 		justify-content: flex-start;
 		position: absolute;

materialious/src/lib/externalSettings.ts

@@ -4,6 +4,9 @@ import {
 	deArrowEnabledStore,
 	deArrowInstanceStore,
 	deArrowThumbnailInstanceStore,
+	deArrowTitlesOnly,
+	interfaceAutoExpandComments,
+	interfaceAutoExpandDesc,
 	interfaceForceCase,
 	interfacePreviewVideoOnHoverStore,
 	interfaceRegionStore,
@@ -153,6 +156,21 @@ const persistedStores = [
 		name: 'forceCase',
 		store: interfaceForceCase,
 		type: 'string'
+	},
+	{
+		name: 'autoExpandComments',
+		store: interfaceAutoExpandComments,
+		type: 'boolean'
+	},
+	{
+		name: 'autoExpandDesc',
+		store: interfaceAutoExpandDesc,
+		type: 'boolean'
+	},
+	{
+		name: 'deArrowTitlesOnly',
+		store: deArrowTitlesOnly,
+		type: 'boolean'
 	}
 ];
 

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

@@ -93,6 +93,8 @@
 		},
 		"searchSuggestions": "Search suggestions",
 		"previewVideoOnHover": "Preview video on hover",
+		"expandDescription": "Expand description by default",
+		"expandComments": "Expand comments by default",
 		"dataPreferences": {
 			"content": "Looking to import/export subscriptions, change password or delete account? Click here and scroll to the bottom of the page.",
 			"dataPreferences": "Data preferences"
@@ -123,7 +125,8 @@
 		},
 		"deArrow": {
 			"title": "DeArrow",
-			"thumbnailInstanceUrl": "Thumbnail instance URL"
+			"thumbnailInstanceUrl": "Thumbnail instance URL",
+			"titleOnly": "Title only"
 		}
 	},
 	"subscribe": "Subscribe"

materialious/src/lib/store.ts

@@ -47,6 +47,8 @@ export const interfaceRegionStore: Writable<string> = persisted('interfaceRegion
 export const interfaceSearchSuggestionsStore = persisted('searchSuggestions', true);
 export const interfacePreviewVideoOnHoverStore = persisted('previewVideoOnHover', true);
 export const interfaceForceCase: Writable<TitleCase> = persisted('forceCase', null);
+export const interfaceAutoExpandComments: Writable<boolean> = persisted('autoExpandComments', true);
+export const interfaceAutoExpandDesc: Writable<boolean> = persisted('autoExpandDesc', false);
 
 export const sponsorBlockStore = persisted('sponsorBlock', true);
 export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(
@@ -63,6 +65,7 @@ export const deArrowInstanceStore = persisted(
 	import.meta.env.VITE_DEFAULT_DEARROW_INSTANCE || 'https://sponsor.ajay.app'
 );
 export const deArrowEnabledStore = persisted('deArrowEnabled', false);
+export const deArrowTitlesOnly = persisted('deArrowTitlesOnly', true);
 export const deArrowThumbnailInstanceStore = persisted(
 	'deArrowThumbnailInstance',
 	import.meta.env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE || 'https://dearrow-thumb.ajay.app'

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -26,6 +26,8 @@
 	import {
 		activePageStore,
 		authStore,
+		interfaceAutoExpandComments,
+		interfaceAutoExpandDesc,
 		miniPlayerSrcStore,
 		playerAutoplayNextByDefaultStore,
 		playerListenByDefaultStore,
@@ -555,7 +557,7 @@
 		</div>
 
 		<article>
-			<details>
+			<details open={$interfaceAutoExpandDesc}>
 				<summary class="bold none">
 					<nav>
 						<div class="max">
@@ -597,7 +599,7 @@
 
 		{#if comments && comments.comments.length > 0}
 			<article>
-				<details open>
+				<details open={$interfaceAutoExpandComments}>
 					<summary class="none bold">
 						<nav>
 							<div class="max">{numberWithCommas(comments.commentCount)} comments</div>

update_versions.py

@@ -5,7 +5,7 @@ import json
 import os
 import re
 
-LATEST_VERSION = "1.1.0"
+LATEST_VERSION = "1.1.1"
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")
 
 ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")