Fix height in standalone mode and disable non applike gestures

patdx · Jan 5, 2025 · a93b7b5 · a93b7b5
1 parent 544a6d0
commit a93b7b5
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 67 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,23 +1,18 @@
-- syncing between devices
-  - use evolu or one(?) that crsqlite related thing
-- disable unnecessary text highlighting
-  - eg when clicking the next button
-  - and double click triggering highlight instead of another click?
-  - refer to ionic css: https://github.com/ionic-team/ionic-framework/blob/1b11b82eaaa0982f98547f2854563517174c865c/core/src/css/structure.scss#L75
-- better ui for navigating time
-  - like +10s -10s
-  - or a dial
-  - or tapping text in the transcript view
+- fix speed selector
 - fix background for black player page
 - track time for each episode separately
 - remember last time for each episode
 - next episode button
 - markup support
 - have it fade out after a few seconds
-- only show full screen button on platforms that support it (not iOS)
 - add padding
 - add more options to change the font size
 - auto shrink large text if it does not fit
-- Fix untappable buttons in PwA mode
 - fix theme color/background color
 - show title of program inside details page
+- syncing between devices
+  - use evolu or one(?) that crsqlite related thing
+- better ui for navigating time
+  - like +10s -10s
+  - or a dial
+  - or tapping text in the transcript view
diff --git a/app/app.css b/app/app.css
@@ -2,17 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-	user-select: none;
+/*
+Allow pan but disable zoom to avoid messing up the UI chrome
+I found that I need to set it on all elements (*) to be effective in iOS Safari mode
+I guess I could manually override certain elements that need other gestures later
+*/
+html,
+body,
+#app,
+* {
+	touch-action: pan-x pan-y;
+}
 
-	/* Should we use any of the properties set here? https://github.com/ionic-team/ionic-framework/blob/1b11b82eaaa0982f98547f2854563517174c865c/core/src/css/structure.scss#L75 */
-	/* transform: translateZ(0);
+html {
+	overscroll-behavior: none;
+}
+
+/* https://github.com/ionic-team/ionic-framework/blob/1b11b82eaaa0982f98547f2854563517174c865c/core/src/css/structure.scss#L75 */
+/* https://www.heltweg.org/posts/checklist-issues-progressive-web-apps-how-to-fix/ */
 
+body {
+	user-select: none;
 	text-rendering: optimizeLegibility;
 
 	overflow: hidden;
 
-	touch-action: manipulation;
+	/* touch-action: manipulation; */
 
 	-webkit-user-drag: none;
 
@@ -23,5 +38,10 @@ body {
 	overscroll-behavior-y: none;
 	-webkit-text-size-adjust: none;
 
-	text-size-adjust: none; */
+	text-size-adjust: none;
+
+	/* Should we use any of the properties set here? https://github.com/ionic-team/ionic-framework/blob/1b11b82eaaa0982f98547f2854563517174c865c/core/src/css/structure.scss#L75 */
+	/* transform: translateZ(0);
+
+ */
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -7,28 +7,38 @@ import {
 	Outlet,
 	Scripts,
 	ScrollRestoration,
+	useRouteLoaderData,
 } from 'react-router'
 import type { Route } from './+types/root'
 import stylesheet from './app.css?url'
 
 export const links: Route.LinksFunction = () => [
-	{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-	{
-		rel: 'preconnect',
-		href: 'https://fonts.gstatic.com',
-		crossOrigin: 'anonymous',
-	},
-	{
-		rel: 'stylesheet',
-		href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
-	},
+	// { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+	// {
+	// 	rel: 'preconnect',
+	// 	href: 'https://fonts.gstatic.com',
+	// 	crossOrigin: 'anonymous',
+	// },
+	// {
+	// 	rel: 'stylesheet',
+	// 	href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+	// },
 	{ rel: 'stylesheet', href: stylesheet },
 ]
 
 // Create a client
 const queryClient = new QueryClient()
 
+export function clientLoader() {
+	const isIos = window.navigator.userAgent.match(/iPhone|iPad|iPod/i)
+	return {
+		isIos,
+	}
+}
+
 export function Layout({ children }: { children: React.ReactNode }) {
+	const { isIos } = useRouteLoaderData<typeof clientLoader>('root') ?? {}
+
 	return (
 		<html lang="en">
 			<head>
@@ -42,6 +52,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 					href="/webmanifest.json"
 					crossOrigin="use-credentials"
 				/>
+				<meta name="apple-mobile-web-app-capable" content="yes" />
 				<meta
 					name="apple-mobile-web-app-status-bar-style"
 					content="black-translucent"
@@ -74,8 +85,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
 					<konsta.App
 						id="app"
 						safeAreas
-						theme="ios"
-						className="min-h-svh max-h-svh h-svh"
+						theme={isIos ? 'ios' : 'material'}
+						component={AppDiv as any}
 					>
 						{children}
 					</konsta.App>
@@ -87,6 +98,29 @@ export function Layout({ children }: { children: React.ReactNode }) {
 	)
 }
 
+// const isIosStandalone = globalThis.navigator
+
+// https://thomashunter.name/posts/2021-12-11-detecting-if-pwa-twa-is-installed
+
+/**
+ * This is a special wrapper for the Konsta App component internal div
+ * so I can override some of the default app classes using my own `cn()`
+ * classname function that includes tailwind-merge support
+ */
+function AppDiv(props: { className?: string; children: React.ReactNode }) {
+	const { className, ...rest } = props
+	return (
+		<div
+			className={cn(
+				className,
+				'min-h-svh max-h-svh h-svh',
+				'pwa:min-h-lvh pwa:max-h-lvh pwa:h-lvh',
+			)}
+			{...rest}
+		/>
+	)
+}
+
 export default function App() {
 	return <Outlet />
 }

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,18 +1,10 @@
-import {
-	Navbar,
-	Page,
-	Block,
-	BlockTitle,
-	List,
-	ListItem,
-	Button,
-} from 'konsta/react'
-import type { Route } from './+types/_index'
 import { useQuery } from '@tanstack/react-query'
-import sampleSrtUrl from '../assets/sample.srt?url'
-import { Link as RouterLink } from 'react-router'
+import { Block, Button, List, ListItem, Navbar, Page } from 'konsta/react'
 import { once } from 'lodash-es'
 import { use } from 'react'
+import { Link as RouterLink } from 'react-router'
+import sampleSrtUrl from '../assets/sample.srt?url'
+import type { Route } from './+types/_index'
 
 const parseVideoPromise = once(() =>
 	import('video-name-parser').then((mod) => mod.default),
@@ -28,7 +20,7 @@ export function meta({}: Route.MetaArgs) {
 export default function Home({ loaderData }: Route.ComponentProps) {
 	return (
 		<Page>
-			<Navbar title="Subtitle App" />
+			<Navbar title="Subtitle App" large transparent centerTitle />
 			<EditFilesPage />
 		</Page>
 	)
@@ -91,7 +83,6 @@ const EditFilesPage = () => {
 
 	return (
 		<>
-			<BlockTitle className="text-2xl px-4">Subtitle Files</BlockTitle>
 			<Block className="px-4">
 				<p className="text-sm text-gray-600">
 					Import and manage your subtitle files
@@ -160,7 +151,7 @@ const EditFilesPage = () => {
 							<ListItem
 								key={file.id}
 								link
-								linkComponent={RouterLink}
+								linkComponent={RouterLink as any}
 								linkProps={{ to: `/play?id=${file.id}` }}
 								title={file.name}
 								after={

diff --git a/app/shared/utils.ts b/app/shared/utils.ts
@@ -102,17 +102,7 @@ class ControlState {
 		this.showTranscript = !this.showTranscript
 	}
 }
-export const controlState = mobx.makeAutoObservable({
-	isOpen: true,
-	showTranscript: false,
-	showFullScreenButton: false,
-	toggle() {
-		this.isOpen = !this.isOpen
-	},
-	toggleTranscript() {
-		this.showTranscript = !this.showTranscript
-	},
-})
+export const controlState = new ControlState()
 
 const getNoSleep = once(async () => {
 	const { default: NoSleep } = await import('nosleep.js')

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -14,6 +14,7 @@ declare global {
   const For: typeof import('./app/shared/solid-helpers')['For']
   const FullScreenIcon: typeof import('./app/shared/icons')['FullScreenIcon']
   const GoBackIcon: typeof import('./app/shared/icons')['GoBackIcon']
+  const KonstaApp: typeof import('./app/shared/konsta-app')['KonstaApp']
   const LeftIcon: typeof import('./app/shared/icons')['LeftIcon']
   const LoadingIcon: typeof import('./app/shared/icons')['LoadingIcon']
   const MenuIcon: typeof import('./app/shared/icons')['MenuIcon']

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -5,17 +5,8 @@ const config = {
 	content: ['./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}'],
 	theme: {
 		extend: {
-			fontFamily: {
-				sans: [
-					'"Inter"',
-					'ui-sans-serif',
-					'system-ui',
-					'sans-serif',
-					'"Apple Color Emoji"',
-					'"Segoe UI Emoji"',
-					'"Segoe UI Symbol"',
-					'"Noto Color Emoji"',
-				],
+			screens: {
+				pwa: { raw: '(display-mode: standalone)' },
 			},
 		},
 	},