{"_id":"@asnewyla/video","name":"@asnewyla/video","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@asnewyla/video","version":"0.2.0","description":"Video player with org styling, aspect ratio, and load-error fallback, wrapping the native <video> element","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/video"},"publishConfig":{"access":"public"},"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css","./test-utils":{"types":"./dist/test-utils.d.ts","import":"./dist/test-utils.mjs","require":"./dist/test-utils.js"}},"sideEffects":["*.css"],"keywords":["react","video","media","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0"},"peerDependenciesMeta":{"@testing-library/react":{"optional":true},"@testing-library/user-event":{"optional":true}},"devDependencies":{"@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@vitest/coverage-v8":"^2.0.0","jsdom":"^24.0.0","react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.1.0","typescript":"^5.5.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","type-check":"tsc --noEmit"},"_nodeVersion":"24.19.0","_id":"@asnewyla/video@0.2.0","dist":{"integrity":"sha512-UNJa5OwGNMLlSrX9qni4CsL0YYUGtYozFL/+P7pgIr8EWzYk/nESr5zv0Q/e3c69F7SEt6a8Kxj04Gdrm47EJQ==","shasum":"6f523e3bc0ae3e20909ebeee87472a9cc20750d6","tarball":"https://registry.npmjs.org/@asnewyla/video/-/video-0.2.0.tgz","fileCount":17,"unpackedSize":18947,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIG0CLE6nAruGfDLoWhtUy1RJNsjXpd3rugOZYnJAKKHBAiEA/rIuWxYfzVaDt7hfglBtK+XybSoXTekKMQPY8AoLzxE="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/video_0.2.0_1788128077607_0.3370237817742747"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T22:14:37.438Z","0.2.0":"2026-08-30T22:14:37.736Z","modified":"2026-08-30T22:14:37.978Z"},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"description":"Video player with org styling, aspect ratio, and load-error fallback, wrapping the native <video> element","keywords":["react","video","media","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/video"},"license":"MIT","readme":"# @asnewyla/video\n\nA thin styled wrapper over the native `<video>` element — aspect ratio,\nobject-fit, token-based rounding, and a load-error fallback. Uses the\nbrowser's own controls; no custom play/scrub/volume UI.\n\n## Install\n\n```bash\nnpm install @asnewyla/video\n```\n\n## Usage\n\n```tsx\nimport { Video } from '@asnewyla/video';\n\n<Video src=\"/intro.mp4\" poster=\"/intro-poster.jpg\" controls />\n\n<Video\n  src=\"/hero.mp4\"\n  aspectRatio=\"16 / 9\"\n  radius=\"lg\"\n  autoPlay\n  loop\n  muted\n  playsInline\n/>\n\n// Captions come through as a native <track> child — there is no captions prop\n<Video src=\"/talk.mp4\" controls>\n  <track kind=\"captions\" srcLang=\"en\" label=\"English\" src=\"/talk.en.vtt\" default />\n</Video>\n```\n\n### Props\n\n| Prop | Type | Default |\n|---|---|---|\n| `src` | `string` | — |\n| `aspectRatio` | `string` (any CSS `aspect-ratio` value, e.g. `\"16 / 9\"`) | — |\n| `fit` | `'cover' \\| 'contain' \\| 'fill' \\| 'none' \\| 'scale-down'` | `'cover'` |\n| `radius` | `'sm' \\| 'md' \\| 'lg' \\| 'full'` | none (square corners) |\n| `fallback` | `string` (src to swap to if `src` fails to load) | — |\n\nAll other native `<video>` attributes — `controls`, `autoPlay`, `loop`,\n`muted`, `poster`, `preload`, `playsInline`, `crossOrigin`, `width`,\n`height`, event handlers — pass straight through. Children render as the\nelement's native fallback content (shown when the browser can't play the\nsource) and are where `<track>` elements go.\n\n`fit` only has a visible effect once the box is constrained — set `width`\nand `height`, or an `aspectRatio`.\n\nIf `fallback` also fails to load, `Video` stops swapping — it doesn't loop.\nIf `src` changes to a new value later, the fallback state resets and the new\n`src` gets its own attempt.\n\n### Accessibility\n\nThe native `<video controls>` UI is keyboard operable and labelled by the\nbrowser. For any clip with dialogue, supply a `<track kind=\"captions\">`\nchild — WCAG 1.2.2. Give a decorative/ambient background clip an\n`aria-label` or `aria-hidden` as appropriate.\n\n### Theming\n\n`radius` reads from `@asnewyla/tokens` the same way `@asnewyla/image` does —\noptional import, works standalone with built-in fallbacks:\n\n```ts\nimport '@asnewyla/tokens/tokens.css';\n```\n\nYou must also import the component's own stylesheet:\n\n```ts\nimport '@asnewyla/video/styles.css';\n```\n\n## License\n\nMIT\n","readmeFilename":"","_rev":"1-0b13285fcd259385ef0613917b8e460f"}