dtoro
af96922e89
Replace PreviewOverlay's bare <video controls> with a vidstack-driven player wrapping the same source URL. Vidstack's default video layout provides a polished chrome (gradient bottom bar, large play overlay, hover-revealed scrubber) and registers <media-player>/<media-provider> custom elements that vendor the browser quirks. To keep first-frame latency low, PhotoTile starts a hover-warm fetch of the playback URL after a short (120 ms) delay — a single Range request of the first 512 KB pages the backend's pre-transcoded MP4 cache file into the OS page cache and lands in the browser's HTTP cache, so when the player mounts and issues its own bytes=0- request the response is satisfied from disk. Each hash is warmed at most once per session; AbortController cancels hovers that don't commit. The vidstack modules are dynamically imported on mount so they never run during SvelteKit's static prerender — they side-effect customElements.define() calls which would crash under SSR.
sv
Everything you need to build a Svelte project, powered by sv.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project
npx sv create my-app
To recreate this project with the same configuration:
# recreate this project
npx sv@0.15.3 create --template minimal --types ts --install npm web
Developing
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.