Skip to content

feat: add reusable record player packages#5

Open
vibium-agent wants to merge 4 commits into
VibiumDev:mainfrom
vibium-agent:feat/reusable-record-player-packages
Open

feat: add reusable record player packages#5
vibium-agent wants to merge 4 commits into
VibiumDev:mainfrom
vibium-agent:feat/reusable-record-player-packages

Conversation

@vibium-agent

@vibium-agent vibium-agent commented Jun 15, 2026

Copy link
Copy Markdown

Summary

Adds reusable player-core, player-react, and player-element entry points under src/packages/, while preserving the hosted Vite app. The custom element is a minimal, self-contained player built on the new public contracts; the hosted RecordStudio is left intact apart from dropping its runtime CDN dependency.

Note: this PR's implementation was consolidated — it now builds the element on top of the reusable player-core/player-react contracts (a single clean dependency chain) rather than mounting the full studio. See "Architecture notes" and "Deferred" below.

What's here

  • player-core — framework-free ZIP loading/parsing (parseRecording, loadRecording) plus LoadedRecording, TimelineModel, RecordingEvent, ScreenshotIndex, and PlayerError contracts. URL loading uses fetch with browser same-origin credentials by default and accepts an injected fetch/AbortSignal. A test enforces that this module imports no React.
  • player-reactRecordPlayer (renders an already-loaded recording) and RecordPlayerLoader (fetches a recording from src, owns loading/error state).
  • player-elementdefineVibiumRecordPlayerElement() registers <vibium-record-player src="/record.zip">, an idempotent custom element that wraps RecordPlayerLoader (element → player-react → player-core). It dispatches vibium-player-ready with { recording } and vibium-player-error with { error }.
  • RecordStudio — now uses the bundled jszip dependency instead of injecting a <script> from cdnjs at runtime (no CDN requirement; offline/CSP-friendly), guarded by a regression test.
  • Element buildnpm run build:element (vite.element.config.ts) emits a self-contained ESM bundle to dist-element/, with copyPublicDir:false so the hosted app's demo recordings are excluded.

Architecture notes

The element renders the minimal RecordPlayer (transport, screenshot, timeline, event inspector) backed by player-core, rather than mounting the full hosted RecordStudio. This keeps a single clean dependency chain (element → player-react → player-core) and dogfoods the public contracts.

Deferred (intentional follow-ups)

  • Publishing surface — the package is not yet renamed or exports-mapped, so consumers can't import "@vibium/record-player/element" yet. A later PR should add exports pointing at built dist artifacts.
  • Parser consolidationplayer-core currently parses independently of RecordStudio's in-component parser; a later PR should make RecordStudio consume player-core so there is a single source of truth.
  • Studio-grade embed — if the embed needs the full network/console/filmstrip/skip-idle experience, the element would mount the studio UI rather than the minimal player.

Test plan

  • npm test — 18 tests pass (player-core, player-react, player-element, record-studio)
  • npx tsc -p tsconfig.app.json --noEmit
  • npm run build:element — bundles to dist-element/vibium-record-player.js with no stray public assets
  • Browser-verified: the built <vibium-record-player> loads the demo recording (213 events, ~19.5s) and plays back; the hosted app loads recordings via the bundled JSZip with no cdnjs request

@paulsmith paulsmith marked this pull request as draft June 16, 2026 00:56
@paulsmith paulsmith force-pushed the feat/reusable-record-player-packages branch from 66023e3 to 795dd19 Compare June 17, 2026 22:57
@paulsmith paulsmith marked this pull request as ready for review June 17, 2026 23:01
- RecordStudio: use bundled jszip instead of runtime cdnjs loader (+regression test)
- player-core: fix numberFrom treating null/empty string as 0
- player-element: drop dead storage-key attribute; add happy-path render test
- vite.element.config: copyPublicDir:false to keep demo zips out of dist-element
@paulsmith paulsmith force-pushed the feat/reusable-record-player-packages branch from 795dd19 to e6d84a6 Compare June 18, 2026 02:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant