Make android tap an additional time to do control the video

materialious/src/lib/components/Player.svelte

@@ -939,6 +939,7 @@
 		playerTimelineTooltipVisible = false;
 	}
 
+	let androidFirstTap = true;
 	function onVideoClick(
 		event: MouseEvent & {
 			currentTarget: EventTarget & HTMLDivElement;
@@ -948,11 +949,16 @@
 			event.target &&
 			event.target instanceof HTMLElement &&
 			event.target.id === 'player-tap-controls-area' &&
-			parseFloat(getComputedStyle(event.target).opacity) > 0 &&
 			playerElement
 		) {
 			clickCount++;
 
+			// Force android to tap an addtional time.
+			if (Capacitor.getPlatform() === 'android' && androidFirstTap) {
+				androidFirstTap = false;
+				return;
+			}
+
 			const container = event.currentTarget;
 
 			const rect = container.getBoundingClientRect();
@@ -966,6 +972,17 @@
 					toggleVideoPlaybackStatus();
 				}
 
+				if (
+					Capacitor.getPlatform() === 'android' &&
+					event.target &&
+					event.target instanceof HTMLElement &&
+					parseFloat(getComputedStyle(event.target).opacity) > 0
+				) {
+					androidFirstTap = false;
+				} else {
+					androidFirstTap = true;
+				}
+
 				clickCount = 0;
 			}, 300);
 
@@ -1392,6 +1409,7 @@
 		opacity: 0;
 		transition: opacity 2s ease;
 		padding: 10px;
+		user-select: none;
 	}
 
 	#player-controls span {
@@ -1439,6 +1457,7 @@
 	#player-container:hover #player-controls {
 		opacity: 1;
 		transition: opacity 0.3s ease;
+		user-select: all;
 	}
 
 	#player-container:focus-within #mobile-time,

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

@@ -16,7 +16,6 @@
 		playerMiniplayerEnabled,
 		playerProxyVideosStore,
 		playerSavePlaybackPositionStore,
-		playerStatisticsByDefault,
 		playerTheatreModeByDefaultStore,
 		playerYouTubeJsAlways,
 		playerYouTubeJsFallback
@@ -294,20 +293,3 @@
 		</label>
 	</nav>
 </div>
-
-<div class="field no-margin">
-	<nav class="no-padding">
-		<div class="max">
-			<div>{$_('layout.player.playerStatistics')}</div>
-		</div>
-		<label class="switch" tabindex="0">
-			<input
-				type="checkbox"
-				bind:checked={$playerStatisticsByDefault}
-				onclick={() => playerStatisticsByDefault.set(!$playerStatisticsByDefault)}
-				role="switch"
-			/>
-			<span></span>
-		</label>
-	</nav>
-</div>

materialious/src/lib/externalSettings.ts

@@ -34,7 +34,6 @@ import {
 	themeColorStore,
 	interfaceAutoExpandChapters,
 	playerDefaultPlaybackSpeed,
-	playerStatisticsByDefault,
 	playerCCByDefault,
 	playerMiniplayerEnabled
 } from '$lib/store';
@@ -215,11 +214,6 @@ const persistedStores: {
 		store: playerDefaultPlaybackSpeed,
 		type: 'number'
 	},
-	{
-		name: 'playerStatistics',
-		store: playerStatisticsByDefault,
-		type: 'boolean'
-	},
 	{
 		name: 'CCByDefault',
 		store: playerCCByDefault,

materialious/src/lib/store.ts

@@ -165,11 +165,6 @@ export const playerDefaultPlaybackSpeed: Writable<number> = persist(
 	createStorage(),
 	'defaultPlaybackSpeed'
 );
-export const playerStatisticsByDefault = persist(
-	writable(false),
-	createStorage(),
-	'playerStatistics'
-);
 export const playerMiniplayerEnabled = persist(
 	writable(true),
 	createStorage(),