.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bullseye"
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.editorconfig

@@ -1,12 +1,14 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
 root = true
 
 [*]
-indent_style = tab
-indent_size = 2
 end_of_line = lf
-charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = true
+charset = utf-8
+indent_style = tab
+indent_size = 2
+
+# YAML doesn't support hard tabs 🙃
+# Templates that will be weird with hard tabs in the website editor
+[{**.yml,**.yaml,**.md,**.rs,**.mdx,justfile,**.json}]
+indent_style = space

.gitignore

@@ -1,10 +1,10 @@
-node_modules
-dist
+.DS_Store
+/node_modules/
 
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+# React Router
+/.react-router/
+/build/
+
+# Cloudflare
+.mf
+.wrangler

.node-version

@@ -0,0 +1 @@
+22

.npmrc

@@ -0,0 +1 @@
+save-prefix=

.prettierignore

@@ -1,4 +1,3 @@
-.yarn
-dist
-node_modules
-pnpm-lock.yaml
+/pnpm-lock.yaml
+/build/**/*
+/auto-imports.d.ts

.prettierrc

@@ -1,6 +1,4 @@
 {
 	"singleQuote": true,
-	"semi": false,
-	"tabWidth": 2,
-	"useTabs": true
+	"semi": false
 }

README.md

@@ -1,15 +1,80 @@
-# subtitle-app
+# patdx-remix-template
 
-## Access here: https://subtitle-app.vercel.app/
+## Create a new project from this template
 
-This is an open-source application to play a subtitle file as if it were a video.
+This will copy the code in `main` branch to a new directory.
 
-It supports SRT files or ZIP archives with SRT files inside.
+```
+npx degit patdx/patdx-remix-template
+```
 
-It can be useful to enjoy content in a second subtitle language.
+## Summary
 
-There are similar tools for computers such as [Language Reactor](https://www.languagereactor.com/) extension but I could not find any good tool that can be used with your TV.
+This is a template for React Router 7 (Remix) apps with the following features already set up:
 
-With this app, you can play the main content via the regular streaming app on your TV, then open up Subtitle App on any old phone/table, queue up the subtitles file and place it next to the TV.
+- Cloudflare Pages Functions deployment using wrangler.toml
+- React 19
+- Auto import plugin with React imports set up
+- Tailwind CSS
 
-I have used it to watch some K-dramas with my partner as both of us have different preferred languages for watching TV, and neither of us know Korean.
+It is largely based on the [React Router 7 Cloudflare D1 Template](https://github.com/remix-run/react-router-templates/tree/main/cloudflare-d1) but using Cloudflare Pages instead of the new Cloudflare Worker Assets feature, and a different plugin to use Worker Proxy mode instead of the Vite Environments API.
+
+## Adding Node-targeted modules
+
+If you need to use a module that is targeted for Node, try adding `nodejs_compat` to the wrangler.json:
+
+```json
+{
+  "compatibility_flags": ["nodejs_compat"]
+}
+```
+
+And add the module to the SSR externals list in vite.config.ts:
+
+```diff
+    ssr: {
+      external: [
+        'node:async_hooks',
++       'nodemailer',
+      ],
+    },
+```
+
+## Development
+
+Run the dev server:
+
+```sh
+pnpm dev
+```
+
+To run Wrangler:
+
+```sh
+pnpm build
+pnpm start
+```
+
+## Deployment
+
+> [!WARNING]
+> Cloudflare does _not_ use `wrangler.toml` to configure deployment bindings.
+> You **MUST** [configure deployment bindings manually in the Cloudflare dashboard][bindings].
+
+First, build your app for production:
+
+```sh
+pnpm build
+```
+
+Then, deploy your app to Cloudflare Pages:
+
+```sh
+pnpm run deploy
+```
+
+[bindings]: https://developers.cloudflare.com/pages/functions/bindings/
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

TODO.md

@@ -0,0 +1,20 @@
+- 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
+- add padding
+- add more options to change the font size
+- auto shrink large text if it does not fit
+- 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
+- fix darkmode
+  - the number inputs seem to have white text in white bg in dark mode

app/.server/context.ts

@@ -0,0 +1,24 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+
+export interface MyCloudflareEnvironment {
+	VALUE_FROM_CLOUDFLARE: string
+}
+
+export interface MyAppLoadContext {
+	request: Request
+	env: MyCloudflareEnvironment
+	executionCtx: ExecutionContext
+	[key: string]: unknown
+}
+
+declare module 'react-router' {
+	interface AppLoadContext extends MyAppLoadContext {}
+}
+
+export const MyAppLoadContext = new AsyncLocalStorage<MyAppLoadContext>()
+
+export function getMyAppLoadContext() {
+	const ctx = MyAppLoadContext.getStore()
+	if (!ctx) throw new Error('MyAppLoadContext not found')
+	return ctx
+}

app/app.css

@@ -0,0 +1,68 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+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;
+}
+
+/* https://x.com/morajabi/status/1846583265072660939 */
+* {
+	user-select: none;
+	user-drag: none;
+	app-region: no-drag;
+}
+
+/* https://forums.developer.apple.com/forums/thread/133399 */
+html {
+	-webkit-touch-callout: none; /* Safari Touch */
+	-webkit-user-select: none; /* Webkit */
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Edge*/
+	user-select: none; /* Future-proof*/
+
+	-webkit-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+	user-drag: none;
+}
+
+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; */
+
+	-webkit-user-drag: none;
+
+	-ms-content-zooming: none;
+
+	word-wrap: break-word;
+
+	overscroll-behavior-y: none;
+	-webkit-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);
+
+ */
+}