{"_id":"@ashetian/next-hls-lite","_rev":"6-2784dc900c8d3d5821d204b797d88b18","name":"@ashetian/next-hls-lite","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@ashetian/next-hls-lite","version":"1.0.0","author":{"url":"ashetian","name":"Caner Görez"},"license":"MIT","_id":"@ashetian/next-hls-lite@1.0.0","maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"homepage":"https://github.com/ashetian/next-hls-lite#readme","bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"dist":{"shasum":"32b1651623980dc9cfdb4501da84a76387a1e67b","tarball":"https://registry.npmjs.org/@ashetian/next-hls-lite/-/next-hls-lite-1.0.0.tgz","fileCount":13,"integrity":"sha512-tte6R/ITufPrhb2fDwnFVKB/jgoarrePxTWgbKtvGZNJOvQG0NkTWlFBar/FiwaxGIZnLOBF+Su9Mfi/d5SnpA==","signatures":[{"sig":"MEUCIDIEK+ntUuaYAUXQ3rmX+02mS5WhGTMA+YaIWRuPgqoaAiEA25PES37PjFhxbJmjbKhb84zMSQhTYmy9lu+YOMej5PU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15022},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"b53125c767f7cfcfa044b5e4edaf41e8e01c0d9a","scripts":{"test":"test","build":"tsc -p tsconfig.json"},"_npmUser":{"name":"ashetian","email":"caner19741@outlook.com"},"repository":{"url":"git+https://github.com/ashetian/next-hls-lite.git","type":"git"},"_npmVersion":"11.4.2","description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"react":"^18.2.0","hls.js":"^1.6.10","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"hls.js":"^1.6.10","typescript":"^5.9.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/next-hls-lite_1.0.0_1755467735469_0.9869924485145909","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ashetian/next-hls-lite","version":"1.0.1","author":{"url":"ashetian","name":"Caner Görez"},"license":"MIT","_id":"@ashetian/next-hls-lite@1.0.1","maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"homepage":"https://github.com/ashetian/next-hls-lite#readme","bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"dist":{"shasum":"a71b1da17f4d03a19b0eeffcadc02f9fa406a9dd","tarball":"https://registry.npmjs.org/@ashetian/next-hls-lite/-/next-hls-lite-1.0.1.tgz","fileCount":14,"integrity":"sha512-XV9ye/Fu7/IvoTcW+kwTqfoyNR7dWHJcqUonEIKdk2rjCXf2rtzvHId0soFjdUw5vWerdKKqNJcdX3bkk40cTw==","signatures":[{"sig":"MEQCIE7N2CtkhAQLVtPktL+4dyyGWDSZUBtsT2u2ZQMylhjfAiAKv30Y33abGNZiAYOs54EkgaIpTHDIQ5xLtVCRvO38ng==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18229},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"17c8f3358a522db415e18e00ec58c70543ece76e","scripts":{"test":"test","build":"tsc -p tsconfig.json"},"_npmUser":{"name":"ashetian","email":"caner19741@outlook.com"},"repository":{"url":"git+https://github.com/ashetian/next-hls-lite.git","type":"git"},"_npmVersion":"11.4.2","description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"react":"^18.2.0","hls.js":"^1.6.10","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/next-hls-lite_1.0.1_1755469557926_0.505270712031556","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ashetian/next-hls-lite","version":"1.0.2","author":{"url":"ashetian","name":"Caner Görez"},"license":"MIT","_id":"@ashetian/next-hls-lite@1.0.2","maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"homepage":"https://github.com/ashetian/next-hls-lite#readme","bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"dist":{"shasum":"7b4c96d4002fb509610e2180348fc39caa3793db","tarball":"https://registry.npmjs.org/@ashetian/next-hls-lite/-/next-hls-lite-1.0.2.tgz","fileCount":14,"integrity":"sha512-asGDAQXYflh9PD8QHwvVGF/hbkkqKOtm+qvZ+dlLP5qDbCGeFLVTooY1s50A8CWHyHWol2nAhh8Rppxl3G4tVQ==","signatures":[{"sig":"MEQCIFUTEFZWIM5Ny2CyZTDyLxiosl5xZn7318763BSVtvZPAiB8sTrJSxny2/yjtNJNEM1uOIQW9E6YEilj4EIoxVswHQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21769},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"17c8f3358a522db415e18e00ec58c70543ece76e","scripts":{"test":"test","build":"tsc -p tsconfig.json"},"_npmUser":{"name":"ashetian","email":"caner19741@outlook.com"},"repository":{"url":"git+https://github.com/ashetian/next-hls-lite.git","type":"git"},"_npmVersion":"11.4.2","description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"react":"^18.2.0","hls.js":"^1.6.10","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/next-hls-lite_1.0.2_1755469652796_0.42909616863566","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ashetian/next-hls-lite","version":"1.1.0","author":{"url":"ashetian","name":"Caner Görez"},"license":"MIT","_id":"@ashetian/next-hls-lite@1.1.0","maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"homepage":"https://github.com/ashetian/next-hls-lite#readme","bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"dist":{"shasum":"7789e73c4e5bc17d8c9b91e9752b3fd48182f25c","tarball":"https://registry.npmjs.org/@ashetian/next-hls-lite/-/next-hls-lite-1.1.0.tgz","fileCount":14,"integrity":"sha512-p5j9WmHCmCT+Am26ip27uQ3cUeBeLxcIaYdcknnk3Duyh21zvf97KRnRkYoj1AT1CWvDO5aaS5hDfuXxAIQ3Gg==","signatures":[{"sig":"MEQCIBk1cq7Rxj3VIPEi1I8zO4UstMYYX1ab2FtHWvHA5uS7AiBCEgtR+Dcv7PmTpkCfdwQRJrmin022qBUJmE0/NHwLpA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24702},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"33653a1d28582e07530dc920c2925de95211c42f","scripts":{"test":"test","build":"tsc -p tsconfig.json"},"_npmUser":{"name":"ashetian","email":"caner19741@outlook.com"},"repository":{"url":"git+https://github.com/ashetian/next-hls-lite.git","type":"git"},"_npmVersion":"11.4.2","description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"react":"^18.2.0","hls.js":"^1.6.10","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/next-hls-lite_1.1.0_1755522348012_0.8101521280542259","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@ashetian/next-hls-lite","version":"1.1.1","author":{"url":"ashetian","name":"Caner Görez"},"license":"MIT","_id":"@ashetian/next-hls-lite@1.1.1","maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"homepage":"https://github.com/ashetian/next-hls-lite#readme","bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"dist":{"shasum":"c14a507eeb4d30f927e70bc22b89749ef9889cd6","tarball":"https://registry.npmjs.org/@ashetian/next-hls-lite/-/next-hls-lite-1.1.1.tgz","fileCount":14,"integrity":"sha512-oB1ZJFQczFGfNyHNuqye7s0nJqnIZmfmGHAOYely4fJOAFAA1TZbjVlBxQKUz0aNvIiMUhxm3LaWcU/QCHqWxQ==","signatures":[{"sig":"MEUCIQDlYz1skktmwT+tNtmUwg25Lf0T+7eYrTg8SNP0QOqtPgIgBsOhMfA0Iw1YGEXCNtrC/TH2BMrxXGyh9jR54muVwms=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26829},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"ed398d14faf9a777f98f7b2b858d4e3cf880e73f","scripts":{"test":"test","build":"tsc -p tsconfig.json"},"_npmUser":{"name":"ashetian","email":"caner19741@outlook.com"},"repository":{"url":"git+https://github.com/ashetian/next-hls-lite.git","type":"git"},"_npmVersion":"11.4.2","description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"react":"^18.2.0","hls.js":"^1.6.10","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/next-hls-lite_1.1.1_1755525308307_0.019027859968738126","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@ashetian/next-hls-lite","version":"1.1.2","description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","homepage":"https://github.com/ashetian/next-hls-lite#readme","bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"repository":{"type":"git","url":"git+https://github.com/ashetian/next-hls-lite.git"},"license":"MIT","author":{"name":"Caner Görez","url":"ashetian"},"type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"test":"test","build":"tsc -p tsconfig.json"},"dependencies":{"hls.js":"^1.6.10"},"devDependencies":{"@types/react":"^18","@types/react-dom":"^18","typescript":"^5.9.2"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_id":"@ashetian/next-hls-lite@1.1.2","gitHead":"591c69ab833c2ccd3d4aee15920716baddaa55e5","_nodeVersion":"22.17.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-rrbixpZ9bQWlsw6ExFo0No5dMqUo+7LP8CBjkMRjFE1jtw0Mto49V3ZMenOCN6ZyDgo9AEZRooAT8WHQ9RxNWw==","shasum":"89a850ace72abb56d185e56f83769a009d6639e1","tarball":"https://registry.npmjs.org/@ashetian/next-hls-lite/-/next-hls-lite-1.1.2.tgz","fileCount":14,"unpackedSize":26774,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDrsF1dDBX5nGfUlrPLJM10VCy8PYx78SjQRQpUa0NyoAiEAnEXQIs56mx6uLcVSjE4Qbg2ciG09wf3YMckpbW4qfoE="}]},"_npmUser":{"name":"ashetian","email":"caner19741@outlook.com"},"directories":{},"maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/next-hls-lite_1.1.2_1755526594480_0.07037731969812477"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-17T21:55:35.386Z","modified":"2025-08-18T14:16:34.844Z","1.0.0":"2025-08-17T21:55:35.665Z","1.0.1":"2025-08-17T22:25:58.138Z","1.0.2":"2025-08-17T22:27:32.972Z","1.1.0":"2025-08-18T13:05:48.192Z","1.1.1":"2025-08-18T13:55:08.494Z","1.1.2":"2025-08-18T14:16:34.656Z"},"bugs":{"url":"https://github.com/ashetian/next-hls-lite/issues"},"author":{"name":"Caner Görez","url":"ashetian"},"license":"MIT","homepage":"https://github.com/ashetian/next-hls-lite#readme","repository":{"type":"git","url":"git+https://github.com/ashetian/next-hls-lite.git"},"description":"A tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.","maintainers":[{"name":"ashetian","email":"caner19741@outlook.com"}],"readme":"# next-hls-lite\n\nA tiny, Next.js-friendly React component that plays HLS streams with graceful fallbacks, mobile autoplay fixes, and zero layout jank.\n\n![npm](https://img.shields.io/npm/v/@ashetian/next-hls-lite)\n![npm downloads](https://img.shields.io/npm/dw/@ashetian/next-hls-lite)\n![license](https://img.shields.io/npm/l/@ashetian/next-hls-lite)\n![bundle size](https://deno.bundlejs.com/badge?q=@ashetian/next-hls-lite@1.1.1)\n\n---\n\n## Why?\n\nMost `hls.js` wrappers don’t play well with **Next.js SSR** and often break on mobile autoplay.\nThis package solves those pain points:\n\n- ✅ **SSR-friendly** → No window errors in Next.js.\n- ✅ **Mobile-ready** → Autoplay + playsInline fixes included.\n- ✅ **Layout-safe** → Controlled entirely by the parent container, no jank.\n\n---\n\n## Installation\n\n```bash\nnpm install @ashetian/next-hls-lite\n```\n\n## Usage\n\nComponent works by covering its parent so make sure you have a parent for video in your layout.\n\n```tsx\nimport { HlsVideo } from '@ashetian/next-hls-lite';\n\nexport default function MyPage() {\n  return (\n    <div className=\"w-screen h-screen\">\n      <HlsVideo\n        src=\"https://example.com/video.m3u8\"\n        poster=\"https://example.com/poster.jpg\"\n        muted\n        autoPlay\n        playsInline\n        loop\n        fit=\"cover\"\n      />\n    </div>\n  );\n}\n```\n\nYou can also pass children to the component to render overlays.\nThis is perfect for Hero components.\n\n```tsx\nimport { HlsVideo } from '@ashetian/next-hls-lite';\n\nexport default function MyPage() {\n  return (\n    <div className=\"flex items-center justify-center w-screen h-screen\">\n      <HlsVideo\n        src=\"https://example.com/video.m3u8\"\n        poster=\"https://example.com/poster.jpg\"\n        autoPlay\n        playsInline\n        loop\n        overlayPointerEvents=\"none\"\n        fit=\"cover\"\n      >\n        <div className=\"absolute inset-0 bg-black/50 flex items-center justify-center\">\n          <h1 className=\"text-white text-3xl\">\n            This is an overlay\n          </h1>\n        </div>\n      </HlsVideo>\n    </div>\n  );\n}\n```\n\n## Advanced usage\n\nError handling & custom overlay:\n\n```tsx\nimport { HlsVideo } from '@ashetian/next-hls-lite';\n\nreturn (\n  <HlsVideo\n    src=\"https://example.com/video.m3u8\"\n    poster=\"/poster.jpg\"\n    muted\n    autoPlay\n    playsInline\n    loop\n    fit=\"cover\"\n    onError={(err) => console.error(\"Video error:\", err)}\n  >\n    <div className=\"absolute inset-0 flex items-center justify-center bg-black/30\">\n      <button className=\"px-4 py-2 bg-white text-black\">Play Again</button>\n    </div>\n  </HlsVideo>\n);\n```\n\n## Props\n\n| Prop                   | Type                   | Default | Description                     |\n| ---------------------- | ---------------------- | ------- | ------------------------------- |\n| `src`                  | `string`               | -       | HLS (.m3u8) source              |\n| `poster`               | `string`               | -       | Fallback image                  |\n| `muted`                | `boolean`              | `true`  | Mute audio                      |\n| `autoPlay`             | `boolean`              | `true`  | Autoplay on mobile              |\n| `playsInline`          | `boolean`              | `true`  | Plays inline on mobile          |\n| `loop`                 | `boolean`              | `true`  | Loop video                      |\n| `fit`                  | `'cover' \\| 'contain'` | `cover` | Fit mode for parent             |\n| `overlayPointerEvents` | `'auto' \\| 'none'`     | `auto`  | Control overlay interactions    |\n| `overlayZIndex`        | `number`               | `2`     | Overlay z-index                 |\n| `onLoadStart`          | `() => void`           | -       | Fired when video starts loading |\n| `onCanPlay`            | `() => void`           | -       | Fired when video can play       |\n| `onError`              | `(err: Error) => void` | -       | Fired on video error            |\n| ...videoProps          | `HTMLVideoElement`     | -       | Other props inherited from video|\n\n## Contributing\n\nPRs and issues are welcome.\nIf you want to add features or fix bugs, just fork and open a pull request.\n\n## License\n\nMIT© [ashetian](https://github.com/ashetian)\n","readmeFilename":"readme.md"}