Improvements to chapter section

materialious/android/app/build.gradle

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

materialious/electron/materialious.metainfo.xml

@@ -63,7 +63,11 @@
     
     
     
-    <release version="1.9.1" date="2025-6-05">
+    
+    <release version="1.9.2" date="2025-6-05">
+      <url>https://github.com/Materialious/Materialious/releases/tag/1.9.2</url>
+    </release>
+<release version="1.9.1" date="2025-6-05">
       <url>https://github.com/Materialious/Materialious/releases/tag/1.9.1</url>
     </release>
 <release version="1.9.0" date="2025-6-04">

materialious/electron/package-lock.json

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

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.9.1",
+	"version": "1.9.2",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",
@@ -44,4 +44,4 @@
 		"capacitor",
 		"electron"
 	]
-}
+}

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.9.1",
+	"version": "1.9.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -70,4 +70,4 @@
 		"svelte-persisted-store": "^0.12.0",
 		"youtubei.js": "^13.4.0"
 	}
-}
+}

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

@@ -17,6 +17,7 @@
 		instanceStore,
 		interfaceAllowInsecureRequests,
 		interfaceAmoledTheme,
+		interfaceAutoExpandChapters,
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
 		interfaceDefaultPage,
@@ -250,6 +251,22 @@
 	</nav>
 </div>
 
+<div class="field no-margin">
+	<nav class="no-padding">
+		<div class="max">
+			<div>{$_('layout.expandChapters')}</div>
+		</div>
+		<label class="switch">
+			<input
+				type="checkbox"
+				bind:checked={$interfaceAutoExpandChapters}
+				onclick={() => interfaceAutoExpandChapters.set(!$interfaceAutoExpandChapters)}
+			/>
+			<span></span>
+		</label>
+	</nav>
+</div>
+
 <div class="field no-margin">
 	<nav class="no-padding">
 		<div class="max">

materialious/src/lib/css/global.css

@@ -13,6 +13,7 @@
 main.root {
 	padding-left: 7em !important;
 	padding-top: 5em !important;
+	padding-bottom: 5em !important;
 	max-height: 100vh;
 	overflow-y: auto;
 }

materialious/src/lib/externalSettings.ts

@@ -31,7 +31,8 @@ import {
 	sponsorBlockUrlStore,
 	synciousInstanceStore,
 	synciousStore,
-	themeColorStore
+	themeColorStore,
+	interfaceAutoExpandChapters
 } from '$lib/store';
 import { get, type Writable } from 'svelte/store';
 
@@ -199,6 +200,11 @@ const persistedStores: {
 		name: 'defaultQuality',
 		store: playerDefaultQualityStore,
 		type: 'string'
+	},
+	{
+		name: 'autoExpandChapters',
+		store: interfaceAutoExpandChapters,
+		type: 'boolean'
 	}
 ];
 

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

@@ -72,6 +72,7 @@
 		"pauseTimer": "Pause timer",
 		"pauseVideoIn": "Pause video in ",
 		"preferredQuality": "Preferred quality",
+		"chapters": "Chapters",
 		"share": {
 			"title": "Share",
 			"materialiousLink": "Copy Materialious link",
@@ -126,6 +127,7 @@
 		"searchSuggestions": "Search suggestions",
 		"previewVideoOnHover": "Preview video on hover",
 		"expandDescription": "Expand description by default",
+		"expandChapters": "Expand chapters by default",
 		"expandComments": "Expand comments by default",
 		"allowInsecureRequests": "Allow insecure requests",
 		"dataPreferences": {

materialious/src/lib/store.ts

@@ -71,6 +71,10 @@ export const interfaceSearchSuggestionsStore = persisted('searchSuggestions', tr
 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 interfaceAutoExpandChapters: Writable<boolean> = persisted(
+	'autoExpandChapters',
+	false
+);
 export const interfaceAmoledTheme = persisted('amoledTheme', false);
 export const interfaceLowBandwidthMode = persisted('lowBandwidthMode', false);
 export const interfaceDisplayThumbnailAvatars = persisted('disableThumbnailAvatars', false);

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

@@ -22,6 +22,7 @@
 	import type { PlayerEvents } from '$lib/player.js';
 	import {
 		authStore,
+		interfaceAutoExpandChapters,
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
 		interfaceLowBandwidthMode,
@@ -71,12 +72,16 @@
 
 	let playerCurrentTime: number = $state(0);
 
+	function expandSummery(id: string) {
+		const element = document.getElementById(id);
+		if (element) {
+			element.click();
+		}
+	}
+
 	$effect(() => {
 		if ($interfaceAutoExpandComments && comments) {
-			const commentSectionElement = document.getElementById('comment-section');
-			if (commentSectionElement) {
-				commentSectionElement.click();
-			}
+			expandSummery('comment-section');
 		}
 	});
 
@@ -221,10 +226,11 @@
 
 	onMount(async () => {
 		if ($interfaceAutoExpandDesc) {
-			const descriptionElement = document.getElementById('description');
-			if (descriptionElement) {
-				descriptionElement.click();
-			}
+			expandSummery('description');
+		}
+
+		if ($interfaceAutoExpandChapters) {
+			expandSummery('chapter-section');
 		}
 
 		if ($syncPartyConnectionsStore) {
@@ -403,9 +409,6 @@
 
 		ui('#pause-timer');
 	}
-
-	let downloadStage: string | undefined;
-	let downloadProgress: number = 0;
 </script>
 
 <svelte:head>
@@ -422,18 +425,6 @@
 			{/key}
 		</div>
 
-		{#if downloadStage}
-			<article>
-				<h6>
-					{downloadStage}
-					{#if downloadProgress > 0}
-						({Math.round(downloadProgress)}%)
-					{/if}
-				</h6>
-				<progress class="max" value={downloadProgress} max="100"></progress>
-			</article>
-		{/if}
-
 		<h5>{letterCase(data.video.title)}</h5>
 
 		<div class="grid no-padding">
@@ -580,7 +571,8 @@
 				<summary id="description" class="bold none">
 					<nav>
 						<div class="max">
-							{numberWithCommas(data.video.viewCount)} views • {data.video.publishedText}
+							{numberWithCommas(data.video.viewCount)}
+							{$_('views')} • {data.video.publishedText}
 						</div>
 						<i>expand_more</i>
 					</nav>
@@ -590,24 +582,6 @@
 					<div style="white-space: pre-line; overflow-wrap: break-word;">
 						{@html data.content.description}
 					</div>
-					{#if data.content}
-						{#if data.content.timestamps.length > 0}
-							<h6 style="margin-bottom: .3em;">Chapters</h6>
-							{#each data.content.timestamps as timestamp}
-								<button
-									onclick={() => {
-										if (playerElement) playerElement.currentTime = timestamp.time;
-									}}
-									class="timestamps"
-									>{timestamp.timePretty}
-									{#if !timestamp.title.startsWith('-')}
-										-
-									{/if}
-									{timestamp.title}</button
-								>
-							{/each}
-						{/if}
-					{/if}
 				</div>
 
 				<nav class="scroll">
@@ -620,6 +594,43 @@
 			</details>
 		</article>
 
+		{#if data.content.timestamps.length > 0}
+			<article>
+				<details>
+					<summary id="chapter-section" class="bold none">
+						<nav>
+							<div class="max">
+								<p>{$_('player.chapters')}</p>
+							</div>
+							<i>expand_more</i>
+						</nav>
+					</summary>
+					<div class="space"></div>
+					<div>
+						<ul class="list">
+							{#each data.content.timestamps as timestamp}
+								<li
+									onclick={() => {
+										if (playerElement) playerElement.currentTime = timestamp.time;
+									}}
+								>
+									<img
+										class="round large"
+										src={getBestThumbnail(data.video.videoThumbnails) as string}
+										alt="Thumbnail for current video"
+									/>
+									<div class="max" style="white-space: pre-line; overflow-wrap: break-word;">
+										<p>{timestamp.title}</p>
+										<span class="chip fill no-margin">{timestamp.timePretty}</span>
+									</div>
+								</li>
+							{/each}
+						</ul>
+					</div>
+				</details>
+			</article>
+		{/if}
+
 		{#if comments && comments.comments.length > 0}
 			<article>
 				<details>
@@ -767,24 +778,6 @@
 </dialog>
 
 <style>
-	:root {
-		--plyr-color-main: var(--primary);
-	}
-
-	.timestamps {
-		margin-left: 0;
-		margin-bottom: 0.4em;
-		display: block;
-		padding: 0;
-		text-align: left;
-		background-color: transparent;
-		color: var(--on-secondary-container);
-	}
-
-	.timestamps:hover {
-		padding: 0 0.5em;
-	}
-
 	.video-actions {
 		display: flex;
 		align-items: center;

update_versions.py

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