JS bundle

The field UI is TypeScript, built with Vite. Source files are at src/web/assets/field/src/. The built output is committed at src/web/assets/field/dist/ — Craft publishes it to cpresources/ automatically on the next request.

Build

cd plugins/video-scribe
npm install
npm run build

Watch mode

npm run dev

Key source files

File	Purpose
main.ts	Entry point. MutationObserver-based field init.
controller.ts	Field UI: drop zone, upload card, thumbnail capture, progress bars.
transcoder.ts	ffmpeg.wasm wrapper: loads core, runs encode, captures thumbnail.
uploader.ts	POSTs variant blobs and thumbnail to actions/assets/upload.
errors.ts	Translates ffmpeg log output into plain-English messages.
types.ts	TypeScript type definitions.
video-scribe.css	Field styles.

Notes

• base: './' in vite.config.ts is required. Without it, Vite outputs the ffmpeg worker URL as an absolute path from the server root, missing the cpresources/{hash}/ prefix and returning a 404.
• The field script loads with type="module" via $jsOptions on the AssetBundle, because the Emscripten ESM output uses import.meta.
• The MutationObserver in main.ts catches Live Preview re-renders, Matrix slide-outs, and any other dynamic injection, regardless of which Craft mechanism added the field HTML to the DOM.