From a29e6204d341b273cd26de117a43eba5fb9e0fbe Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 4 Apr 2025 00:59:27 +1300
Subject: [PATCH 1/5] Removed broken audio only mode

---
 materialious/android/app/build.gradle         |  4 +--
 .../electron/materialious.metainfo.xml        |  6 +++-
 materialious/electron/package-lock.json       |  4 +--
 materialious/electron/package.json            |  2 +-
 materialious/package.json                     |  2 +-
 materialious/src/lib/components/Player.svelte | 12 ++-----
 .../src/lib/components/Settings/Player.svelte | 17 ---------
 .../src/lib/css/shaka-player-theme.css        | 36 ++++++++-----------
 materialious/src/lib/externalSettings.ts      |  6 ----
 materialious/src/lib/store.ts                 |  1 -
 .../routes/(app)/watch/[slug]/+page.svelte    | 15 +-------
 update_versions.py                            |  2 +-
 12 files changed, 29 insertions(+), 78 deletions(-)

diff --git a/materialious/android/app/build.gradle b/materialious/android/app/build.gradle
index d7e3df73..ee7ad688 100644
--- a/materialious/android/app/build.gradle
+++ b/materialious/android/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 99
-        versionName "1.7.17"
+        versionCode 100
+        versionName "1.7.18"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
diff --git a/materialious/electron/materialious.metainfo.xml b/materialious/electron/materialious.metainfo.xml
index 87cfb0b5..401b7ee5 100644
--- a/materialious/electron/materialious.metainfo.xml
+++ b/materialious/electron/materialious.metainfo.xml
@@ -60,7 +60,11 @@
     
     
     
-    <release version="1.7.17" date="2025-4-02">
+    
+    <release version="1.7.18" date="2025-4-04">
+      <url>https://github.com/Materialious/Materialious/releases/tag/1.7.18</url>
+    </release>
+<release version="1.7.17" date="2025-4-02">
       <url>https://github.com/Materialious/Materialious/releases/tag/1.7.17</url>
     </release>
 <release version="1.7.16" date="2025-4-02">
diff --git a/materialious/electron/package-lock.json b/materialious/electron/package-lock.json
index 9af6e2c2..a13de3d1 100644
--- a/materialious/electron/package-lock.json
+++ b/materialious/electron/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.7.17",
+	"version": "1.7.18",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.7.17",
+			"version": "1.7.18",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",
diff --git a/materialious/electron/package.json b/materialious/electron/package.json
index afebc13e..2de4195a 100644
--- a/materialious/electron/package.json
+++ b/materialious/electron/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.7.17",
+	"version": "1.7.18",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",
diff --git a/materialious/package.json b/materialious/package.json
index 0a164a3d..40018caa 100644
--- a/materialious/package.json
+++ b/materialious/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.7.17",
+	"version": "1.7.18",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 9f530ee2..83ab9c47 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -38,7 +38,6 @@
 
 	interface Props {
 		data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
-		audioMode?: boolean;
 		isSyncing?: boolean;
 		isEmbed?: boolean;
 		segments?: Segment[];
@@ -47,7 +46,6 @@
 
 	let {
 		data,
-		audioMode = false,
 		isEmbed = false,
 		segments = $bindable([]),
 		playerElement = $bindable()
@@ -144,8 +142,8 @@
 		shakaUi.configure({
 			controlPanelElements: [
 				'play_pause',
+				Capacitor.getPlatform() === 'android' ? '' : 'volume',
 				'spacer',
-				Capacitor.getPlatform() === 'electron' ? 'volume' : '',
 				'chapter',
 				'time_and_duration',
 				'overflow_menu',
@@ -472,9 +470,7 @@
 			overflowMenuButton.innerHTML = 'settings';
 		}
 
-		const backToOverflowButton = document.querySelector(
-			'.shaka-back-to-overflow-button .material-icons-round'
-		);
+		const backToOverflowButton = document.querySelector('.shaka-back-to-overflow-button');
 		if (backToOverflowButton) {
 			backToOverflowButton.innerHTML = 'arrow_back_ios_new';
 		}
@@ -556,10 +552,6 @@
 	});
 </script>
 
-{#if audioMode}
-	<div style="margin-top: 40vh;"></div>
-{/if}
-
 <div
 	id="shaka-container"
 	class="youtube-theme"
diff --git a/materialious/src/lib/components/Settings/Player.svelte b/materialious/src/lib/components/Settings/Player.svelte
index 735aa191..09e2bd3f 100644
--- a/materialious/src/lib/components/Settings/Player.svelte
+++ b/materialious/src/lib/components/Settings/Player.svelte
@@ -10,7 +10,6 @@
 		playerAutoPlayStore,
 		playerAutoplayNextByDefaultStore,
 		playerDefaultLanguage,
-		playerListenByDefaultStore,
 		playerProxyVideosStore,
 		playerSavePlaybackPositionStore,
 		playerTheatreModeByDefaultStore,
@@ -126,22 +125,6 @@
 	</nav>
 </div>
 
-<div class="field no-margin">
-	<nav class="no-padding">
-		<div class="max">
-			<div>{$_('layout.player.listenByDefault')}</div>
-		</div>
-		<label class="switch">
-			<input
-				type="checkbox"
-				bind:checked={$playerListenByDefaultStore}
-				onclick={() => playerListenByDefaultStore.set(!$playerListenByDefaultStore)}
-			/>
-			<span></span>
-		</label>
-	</nav>
-</div>
-
 <div class="field no-margin m l">
 	<nav class="no-padding">
 		<div class="max">
diff --git a/materialious/src/lib/css/shaka-player-theme.css b/materialious/src/lib/css/shaka-player-theme.css
index 7a006a42..8eb6d9ce 100644
--- a/materialious/src/lib/css/shaka-player-theme.css
+++ b/materialious/src/lib/css/shaka-player-theme.css
@@ -25,6 +25,11 @@
   order: 1;
 }
 
+.youtube-theme > .shaka-controls-container button {
+  width: 60px;
+  height: 50px;
+}
+
 .youtube-theme .shaka-controls-button-panel {
   -webkit-box-ordinal-group: 3;
   -ms-flex-order: 2;
@@ -53,30 +58,23 @@
 .youtube-theme .shaka-controls-button-panel>* {
   margin: 0;
   padding: 3px 8px;
-  color: var(--primary-text);
-  height: 40px;
+  color: var(--white-text);
+  height: 50px;
+}
+
+.youtube-theme .shaka-controls-button-panel>*:hover {
+  color: var(--primary);
 }
 
 .youtube-theme .shaka-controls-button-panel>*:focus {
   outline: none;
   -webkit-box-shadow: inset 0 0 0 2px var(--primary);
   box-shadow: inset 0 0 0 2px var(--primary);
-  color: var(--surface-bright);
+  color: var(--primary);
 }
 
-.youtube-theme .shaka-controls-button-panel>*:hover {
-  color: var(--surface-variant);
-}
 
 .youtube-theme .shaka-controls-button-panel .shaka-volume-bar-container {
-  position: relative;
-  z-index: 10;
-  left: -1px;
-  -webkit-box-ordinal-group: 0;
-  -ms-flex-order: -1;
-  order: -1;
-  opacity: 0;
-  width: 0px;
   -webkit-transition: width 0.2s cubic-bezier(0.4, 0, 1, 1);
   transition: width 0.2s cubic-bezier(0.4, 0, 1, 1);
   height: 3px;
@@ -99,7 +97,8 @@
 
 .youtube-theme .shaka-current-time {
   padding: 0 10px;
-  font-size: 12px;
+  font-size: 1em;
+  color: var(--white-text) !important;
 }
 
 .youtube-theme .shaka-seek-bar-container {
@@ -151,9 +150,6 @@
   text-shadow: 0 0 2px rgb(0 0 0%);
   -webkit-transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
   transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
   right: 10px;
   bottom: 50px;
   padding: 8px 0;
@@ -308,7 +304,3 @@
   -webkit-transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1);
   transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1);
 }
-
-.youtube-theme .shaka-controls-button-panel>*:hover {
-  color: var(--primary) !important;
-}
\ No newline at end of file
diff --git a/materialious/src/lib/externalSettings.ts b/materialious/src/lib/externalSettings.ts
index 362ac66c..6c6707c6 100644
--- a/materialious/src/lib/externalSettings.ts
+++ b/materialious/src/lib/externalSettings.ts
@@ -18,7 +18,6 @@ import {
 	playerAutoPlayStore,
 	playerAutoplayNextByDefaultStore,
 	playerDefaultLanguage,
-	playerListenByDefaultStore,
 	playerProxyVideosStore,
 	playerSavePlaybackPositionStore,
 	playerTheatreModeByDefaultStore,
@@ -66,11 +65,6 @@ const persistedStores: { name: string, store: Writable<any>, type: 'string' | 'b
 		store: playerProxyVideosStore,
 		type: 'boolean'
 	},
-	{
-		name: 'listenByDefault',
-		store: playerListenByDefaultStore,
-		type: 'boolean'
-	},
 	{
 		name: 'savePlaybackPosition',
 		store: playerSavePlaybackPositionStore,
diff --git a/materialious/src/lib/store.ts b/materialious/src/lib/store.ts
index 186151d1..720fc746 100644
--- a/materialious/src/lib/store.ts
+++ b/materialious/src/lib/store.ts
@@ -33,7 +33,6 @@ export const activePageStore: Writable<string | null> = writable('home');
 export const playerAutoPlayStore = persisted('autoPlay', true);
 export const playerAlwaysLoopStore = persisted('alwaysLoop', false);
 export const playerProxyVideosStore = persisted('proxyVideos', true);
-export const playerListenByDefaultStore = persisted('listenByDefault', false);
 export const playerSavePlaybackPositionStore = persisted('savePlaybackPosition', true);
 export const playerTheatreModeByDefaultStore = persisted('theatreModeByDefault', false);
 export const playerAutoplayNextByDefaultStore = persisted('autoplayNextByDefault', false);
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index 65ddbf87..cfcb6941 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -26,7 +26,6 @@
 		interfaceAutoExpandDesc,
 		interfaceLowBandwidthMode,
 		playerAutoplayNextByDefaultStore,
-		playerListenByDefaultStore,
 		playerTheatreModeByDefaultStore,
 		playlistSettingsStore,
 		syncPartyConnectionsStore,
@@ -67,8 +66,6 @@
 
 	let theatreMode = $state(get(playerTheatreModeByDefaultStore));
 
-	let audioMode = $state(get(playerListenByDefaultStore));
-
 	let segments: Segment[] = $state([]);
 
 	let pauseTimerSeconds: number = $state(-1);
@@ -407,13 +404,7 @@
 	<div class={`s12 m12 l${theatreMode ? '12' : '9'}`}>
 		<div style="display: flex;justify-content: center;">
 			{#key data.video.videoId}
-				<Player
-					bind:playerElement
-					bind:segments
-					{data}
-					{audioMode}
-					isSyncing={$syncPartyPeerStore !== null}
-				/>
+				<Player bind:playerElement bind:segments {data} isSyncing={$syncPartyPeerStore !== null} />
 			{/key}
 		</div>
 
@@ -493,10 +484,6 @@
 				{/await}
 
 				<div>
-					<button onclick={() => (audioMode = !audioMode)} class:border={!audioMode}>
-						<i>headphones</i>
-						<div class="tooltip">{$_('player.audioOnly')}</div>
-					</button>
 					<button onclick={toggleTheatreMode} class="m l" class:border={!theatreMode}>
 						<i>width_wide</i>
 						<div class="tooltip">{$_('player.theatreMode')}</div>
diff --git a/update_versions.py b/update_versions.py
index ca3df735..474c39a9 100644
--- a/update_versions.py
+++ b/update_versions.py
@@ -3,7 +3,7 @@ import os
 import re
 from datetime import datetime
 
-LATEST_VERSION = "1.7.17"
+LATEST_VERSION = "1.7.18"
 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")

From f8a1db0e217538d075f39a23cb71308095d00be0 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 4 Apr 2025 02:09:18 +1300
Subject: [PATCH 2/5] Fix quality changes

---
 materialious/src/lib/components/Player.svelte | 51 +++++++++++++------
 .../src/lib/css/shaka-player-theme.css        | 13 ++---
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 83ab9c47..3511fe8d 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -9,6 +9,7 @@
 	import { NavigationBar } from '@hugotomazi/capacitor-navigation-bar';
 	import { type Page } from '@sveltejs/kit';
 	import { GoogleVideo, Protos } from 'googlevideo';
+	import ISO6391 from 'iso-639-1';
 	import 'shaka-player/dist/controls.css';
 	import shaka from 'shaka-player/dist/shaka-player.ui';
 	import { SponsorBlock, type Category, type Segment } from 'sponsorblock-api';
@@ -77,10 +78,10 @@
 	function restorePreferences() {
 		const savedQuality =
 			localStorage.getItem(STORAGE_KEY_QUALITY) ??
-			(import.meta.env.VITE_DEFAULT_DASH_BITRATE as string);
+			(import.meta.env.VITE_DEFAULT_DASH_BITRATE as string | undefined);
 
 		if (savedQuality) {
-			const qualityBandwidth = parseInt(savedQuality, 10);
+			const qualityBandwidth = parseInt(savedQuality);
 			const tracks = player.getVariantTracks();
 
 			let preferredTrack = tracks.find((track) => track.bandwidth === qualityBandwidth);
@@ -94,7 +95,6 @@
 
 			if (preferredTrack) {
 				player.selectVariantTrack(preferredTrack, true);
-				player.configure({ abr: { enabled: false } });
 			}
 		}
 
@@ -136,9 +136,6 @@
 			playerElement
 		);
 
-		player.addEventListener('adaptation', () => setTimeout(saveQualityPreference, 10000));
-		playerElement.addEventListener('volumechange', saveVolumePreference);
-
 		shakaUi.configure({
 			controlPanelElements: [
 				'play_pause',
@@ -146,10 +143,22 @@
 				'spacer',
 				'chapter',
 				'time_and_duration',
+				'captions',
 				'overflow_menu',
 				'fullscreen'
 			],
-			overflowMenuButtons: ['cast', 'airplay', 'captions', 'quality', 'loop', 'language']
+			overflowMenuButtons: [
+				'cast',
+				'airplay',
+				'captions',
+				'quality',
+				'playback_rate',
+				'loop',
+				'language',
+				'save_video_frame',
+				'statistics'
+			],
+			enableTooltips: true
 		});
 
 		player.configure({
@@ -399,14 +408,6 @@
 
 			await loadPlayerPos();
 
-			const defaultLanguage = get(playerDefaultLanguage);
-			if (defaultLanguage) {
-				const audioLanguages = player.getAudioLanguages();
-				if (audioLanguages.includes(defaultLanguage)) {
-					player.selectAudioLanguage(defaultLanguage);
-				}
-			}
-
 			if (Capacitor.getPlatform() === 'android' && data.video.adaptiveFormats.length > 0) {
 				const videoFormats = data.video.adaptiveFormats.filter((format) =>
 					format.type.startsWith('video/')
@@ -463,7 +464,25 @@
 			ui('#snackbar-alert');
 		}
 
-		restorePreferences();
+		player.addEventListener('buffering', saveQualityPreference);
+		playerElement.addEventListener('volumechange', saveVolumePreference);
+
+		player.addEventListener('loaded', () => {
+			restorePreferences();
+
+			const defaultLanguage = get(playerDefaultLanguage);
+			if (defaultLanguage) {
+				const audioLanguages = player.getAudioLanguages();
+				const langCode = ISO6391.getCode(defaultLanguage);
+
+				for (const audioLanguage of audioLanguages) {
+					if (audioLanguage.startsWith(langCode)) {
+						player.selectAudioLanguage(audioLanguage);
+						break;
+					}
+				}
+			}
+		});
 
 		const overflowMenuButton = document.querySelector('.shaka-overflow-menu-button');
 		if (overflowMenuButton) {
diff --git a/materialious/src/lib/css/shaka-player-theme.css b/materialious/src/lib/css/shaka-player-theme.css
index 8eb6d9ce..a2194644 100644
--- a/materialious/src/lib/css/shaka-player-theme.css
+++ b/materialious/src/lib/css/shaka-player-theme.css
@@ -25,11 +25,6 @@
   order: 1;
 }
 
-.youtube-theme > .shaka-controls-container button {
-  width: 60px;
-  height: 50px;
-}
-
 .youtube-theme .shaka-controls-button-panel {
   -webkit-box-ordinal-group: 3;
   -ms-flex-order: 2;
@@ -58,8 +53,9 @@
 .youtube-theme .shaka-controls-button-panel>* {
   margin: 0;
   padding: 3px 8px;
-  color: var(--white-text);
-  height: 50px;
+  color: #fff;
+  height: 40px;
+  font-size: 2em;
 }
 
 .youtube-theme .shaka-controls-button-panel>*:hover {
@@ -84,7 +80,6 @@
 .youtube-theme .shaka-controls-button-panel .shaka-volume-bar-container:hover,
 .youtube-theme .shaka-controls-button-panel .shaka-volume-bar-container:focus {
   display: block;
-  width: 50px;
   opacity: 1;
   padding: 0 6px;
 }
@@ -303,4 +298,4 @@
   font-size: 25px;
   -webkit-transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1);
   transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1);
-}
+}
\ No newline at end of file

From 57c668fb03e1860bb1942d6959ed8dba28108b72 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 4 Apr 2025 02:13:18 +1300
Subject: [PATCH 3/5] Fixed volume not changing

---
 materialious/src/lib/components/Player.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 3511fe8d..9f7fa4b4 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -75,7 +75,7 @@
 		localStorage.setItem(STORAGE_KEY_VOLUME, playerElement.volume.toString());
 	}
 
-	function restorePreferences() {
+	function restoreQualityPreference() {
 		const savedQuality =
 			localStorage.getItem(STORAGE_KEY_QUALITY) ??
 			(import.meta.env.VITE_DEFAULT_DASH_BITRATE as string | undefined);
@@ -97,11 +97,6 @@
 				player.selectVariantTrack(preferredTrack, true);
 			}
 		}
-
-		const savedVolume = localStorage.getItem(STORAGE_KEY_VOLUME);
-		if (savedVolume) {
-			playerElement.volume = parseFloat(savedVolume);
-		}
 	}
 
 	function loadTimeFromUrl(page: Page): boolean {
@@ -467,8 +462,13 @@
 		player.addEventListener('buffering', saveQualityPreference);
 		playerElement.addEventListener('volumechange', saveVolumePreference);
 
+		const savedVolume = localStorage.getItem(STORAGE_KEY_VOLUME);
+		if (savedVolume) {
+			playerElement.volume = parseFloat(savedVolume);
+		}
+
 		player.addEventListener('loaded', () => {
-			restorePreferences();
+			restoreQualityPreference();
 
 			const defaultLanguage = get(playerDefaultLanguage);
 			if (defaultLanguage) {

From 2a1cc6978a8048569ec881f70123428b33c4ddbf Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 4 Apr 2025 02:14:14 +1300
Subject: [PATCH 4/5] Improved volume loading

---
 materialious/src/lib/components/Player.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 9f7fa4b4..59a65271 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -124,6 +124,12 @@
 		player = new shaka.Player();
 		playerElement = document.getElementById('player') as HTMLMediaElement;
 
+		// Change instantly to stop video from being loud for a second
+		const savedVolume = localStorage.getItem(STORAGE_KEY_VOLUME);
+		if (savedVolume) {
+			playerElement.volume = parseFloat(savedVolume);
+		}
+
 		await player.attach(playerElement);
 		shakaUi = new shaka.ui.Overlay(
 			player,
@@ -462,11 +468,6 @@
 		player.addEventListener('buffering', saveQualityPreference);
 		playerElement.addEventListener('volumechange', saveVolumePreference);
 
-		const savedVolume = localStorage.getItem(STORAGE_KEY_VOLUME);
-		if (savedVolume) {
-			playerElement.volume = parseFloat(savedVolume);
-		}
-
 		player.addEventListener('loaded', () => {
 			restoreQualityPreference();
 

From 355142707f9bdea14f00ea50021d85571dac59eb Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 4 Apr 2025 02:18:38 +1300
Subject: [PATCH 5/5] Fixed share menu being cut off

---
 materialious/src/lib/css/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css
index 6bb54200..ba4ae4ec 100644
--- a/materialious/src/lib/css/global.css
+++ b/materialious/src/lib/css/global.css
@@ -77,7 +77,7 @@ button.row:hover {
 	menu.mobile {
 		z-index: 9999 !important;
 		position: fixed !important;
-		top: 30% !important;
+		top: 20% !important;
 		width: 100% !important;
 		background-color: var(--surface-variant) !important;
 	}