Improved mobile support for player

materialious/src/lib/components/Player.svelte

@@ -58,6 +58,7 @@
 	import { Network, type ConnectionStatus } from '@capacitor/network';
 	import { fade } from 'svelte/transition';
 	import { addToast } from './Toast.svelte';
+	import { isMobile } from '$lib/misc';
 
 	interface Props {
 		data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
@@ -1075,7 +1076,7 @@
 	) {
 		seekDirection = undefined;
 
-		if (Capacitor.getPlatform() === 'android') {
+		if (isMobile()) {
 			const initalControlsState = showControls.valueOf();
 
 			if (playerAndroidUITimeout) {
@@ -1311,7 +1312,7 @@
 								{/if}
 							</i>
 						</button>
-						{#if Capacitor.getPlatform() !== 'android'}
+						{#if !isMobile()}
 							<div
 								bind:this={playerVolumeElement}
 								class="player-slider volume m l"

materialious/src/lib/misc.ts

@@ -22,6 +22,19 @@ import { Capacitor } from '@capacitor/core';
 import { Share } from '@capacitor/share';
 import { Clipboard } from '@capacitor/clipboard';
 
+export function isMobile(): boolean {
+	const userAgent = navigator.userAgent;
+
+	const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+	const isSmallScreen = window.innerWidth < 768;
+	const isUserAgentMobile =
+		/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+
+	return (
+		(hasTouchSupport && isSmallScreen && isUserAgentMobile) || Capacitor.getPlatform() === 'android'
+	);
+}
+
 export function isVideoID(videoId: string): boolean {
 	const regExp = /^[a-zA-Z0-9_-]{11}$/;
 	return regExp.test(videoId);