More player improvements

materialious/package-lock.json

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

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

@@ -33,6 +33,8 @@
 		}
 	];
 
+	const tabIds = tabs.map((tab) => tab.id);
+
 	let dialogType = $state('');
 
 	function checkWidth() {
@@ -82,13 +84,35 @@
 </script>
 
 <dialog id="dialog-settings" class={dialogType + ' surface-container'}>
-	<nav style="margin-bottom: 1em;">
+	<nav class="s" style="margin-bottom: 1em;">
 		<h4 class="max">{$_('layout.settings')}</h4>
 		<button class="circle transparent" data-ui="#dialog-settings"><i>close</i></button>
 	</nav>
 
 	<div>
-		<nav class="tabbed small" style="outline: none" role="tablist" tabindex="0">
+		<nav class="wrap s">
+			<button class="large max small-round secondary">
+				<i>{tabs[tabIds.indexOf(activeTab)].icon}</i>
+				<span>{tabs[tabIds.indexOf(activeTab)].label}</span>
+				<menu class="wrap max">
+					{#each tabs as tab, _}
+						<li
+							role="presentation"
+							class:active={isActive(tab.id)}
+							onclick={() => {
+								activeTab = tab.id;
+								(document.activeElement as HTMLElement)?.blur();
+							}}
+						>
+							<i>{tab.icon}</i>
+							<span>{tab.label}</span>
+						</li>
+					{/each}
+				</menu>
+			</button>
+		</nav>
+
+		<nav class="tabbed small m l" style="outline: none" role="tablist" tabindex="0">
 			{#each tabs as tab, index}
 				<a
 					role="tab"
@@ -128,6 +152,8 @@
 				</a>
 			{/if}
 		</nav>
+		<div class="space"></div>
+		<div class="divider"></div>
 		{#each tabs as tab, _}
 			<div
 				class="page padding"
@@ -146,35 +172,7 @@
 </dialog>
 
 <style>
-	dialog {
-		width: 1320px;
-	}
-
 	.tabbed > a {
 		flex: none;
 	}
-
-	@media screen and (max-width: 1320px) {
-		.tabbed {
-			display: flex !important;
-			gap: 0 !important;
-			flex: 0 !important;
-			align-items: start !important;
-			padding: 1em 0 !important;
-			overflow-x: scroll !important;
-			background-color: transparent;
-			border-bottom: solid 1px var(--outline-variant);
-		}
-
-		.tabbed > a {
-			font-size: 1.5rem !important;
-			padding: 0.5em 0.3em !important;
-			border-radius: 3em !important;
-		}
-
-		.tabbed.small {
-			block-size: 100% !important;
-			border-radius: 0 !important;
-		}
-	}
 </style>

materialious/src/lib/components/Watch/Description.svelte

@@ -22,7 +22,6 @@
 				{numberWithCommas(video.viewCount)}
 				{$_('views')} • {video.publishedText}
 			</div>
-			<i>expand_more</i>
 		</nav>
 	</summary>
 	<div class="space"></div>

materialious/src/lib/components/Watch/LikesDislikes.svelte

@@ -9,21 +9,19 @@
 </script>
 
 {#await returnYTDislikes then returnYTDislikes}
-	{#if returnYTDislikes}
-		<nav class="no-space">
-			<button style="cursor: default;" class="border left-round">
+	<nav class="no-space">
+		{#if returnYTDislikes}
+			<button style="cursor: default;margin-right: 0.5em;" class="border">
 				<i class="small">thumb_up</i>
 				<span>{cleanNumber(returnYTDislikes.likes)}</span>
-			</button>
-			<button style="cursor: default;margin-right: 0.5em;" class="border right-round">
-				<i class="small">thumb_down_alt</i>
+				<i class="small" style="margin-left: 0.5em;">thumb_down_alt</i>
 				<span>{cleanNumber(returnYTDislikes.dislikes)}</span>
 			</button>
-		</nav>
-	{:else}
-		<button style="cursor: default;margin-right: 0.5em;" class="border">
-			<i class="small">thumb_up</i>
-			<span>{cleanNumber(video.likeCount)}</span>
-		</button>
-	{/if}
+		{:else}
+			<button style="cursor: default;margin-right: 0.5em;" class="border">
+				<i class="small">thumb_up</i>
+				<span>{cleanNumber(video.likeCount)}</span>
+			</button>
+		{/if}
+	</nav>
 {/await}

materialious/src/lib/css/global.css

@@ -2,6 +2,12 @@ article {
 	box-shadow: none !important;
 }
 
+a,
+button,
+.button {
+	border-radius: 0.5rem !important;
+}
+
 .thumbnail-corner {
 	padding: 0.1em 0.4em;
 }

materialious/src/lib/css/shaka-player-theme.css

@@ -19,11 +19,14 @@
 	z-index: 99999999 !important;
 	pointer-events: auto !important;
 	pointer-events: auto !important;
+	max-height: 400px !important;
 }
 
 .shaka-overflow-menu button,
 .shaka-settings-menu button {
 	color: var(--text) !important;
+	border: none !important;
+	outline: none !important;
 }
 
 @media screen and (max-width: 650px) {

materialious/src/routes/(app)/+layout.svelte

@@ -302,10 +302,10 @@
 
 		{#if Capacitor.getPlatform() === 'electron'}
 			<nav class="no-space">
-				<button onclick={() => window.history.back()} class="border left-round">
+				<button onclick={() => window.history.back()} class="border">
 					<i>arrow_back</i>
 				</button>
-				<button onclick={() => window.history.forward()} class="border right-round">
+				<button onclick={() => window.history.forward()} class="border">
 					<i>arrow_forward</i>
 				</button>
 			</nav>

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

@@ -426,10 +426,8 @@
 							<div class="max">
 								<p>{$_('player.chapters')}</p>
 							</div>
-							<i>expand_more</i>
 						</nav>
 					</summary>
-					<div class="space"></div>
 					<div class="chapter-list" id="chapters">
 						<ul class="list">
 							{#each data.content.timestamps as timestamp}
@@ -467,7 +465,6 @@
 					<summary id="comment-section" class="none bold">
 						<nav>
 							<div class="max">{numberWithCommas(comments.commentCount)} {$_('comments')}</div>
-							<i>expand_more</i>
 						</nav>
 					</summary>