{"_id":"@ayan4m1/react-shaka-player","name":"@ayan4m1/react-shaka-player","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@ayan4m1/react-shaka-player","version":"2.0.0","description":"React video player built with Shaka-Player","main":"dist/index.js","types":"dist/index.d.ts","author":{"name":"Muhammad K. Huda"},"license":"MIT","scripts":{"nodeminify":"node ./node_modules/.bin/node-minify","build-css":"yarn nodeminify --compressor clean-css --input \"src/styles/ui.css\" --output \"dist/ui.css\"","build":"rimraf dist && rollup -c --perf","start":"yarn build","test":"jest","watch":"rollup -c --watch"},"dependencies":{"shaka-player":"3.x"},"devDependencies":{"@babel/core":"^7.25.2","@babel/preset-env":"^7.25.2","@babel/preset-react":"^7.24.7","@node-minify/clean-css":"^8.0.6","@node-minify/cli":"^8.0.6","@rollup/plugin-alias":"^5.1.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-strip":"^3.0.4","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/enzyme":"^3.10.18","@types/jest":"^29.5.12","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@types/react-test-renderer":"^18.3.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.40","prettier":"^3.3.3","react":"^18.3.1","react-dom":"^18.3.1","react-test-renderer":"^18.3.1","rimraf":"^6.0.1","rollup":"^4.19.1","rollup-plugin-analyzer":"^4.0.0","rollup-plugin-bundle-html":"^0.2.2","rollup-plugin-copy":"^3.5.0","rollup-plugin-html2":"^4.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","ts-jest":"^29.2.3","tslib":"^2.6.3","typescript":"^5.5.4"},"peerDependencies":{"react":"16.8.x || 17 || 18","shaka-player":"3.x"},"directories":{"demo":"demo","test":"test"},"jest":{"transform":{"^.+\\.tsx?$":"ts-jest"},"testEnvironment":"jsdom","testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","moduleFileExtensions":["ts","tsx","js"],"setupFilesAfterEnv":["/test/app.test.tsx"]},"repository":{"type":"git","url":"git+https://github.com/ayan4m1/react-shaka-player.git"},"bugs":{"url":"https://github.com/ayan4m1/react-shaka-player/issues"},"homepage":"https://github.com/ayan4m1/react-shaka-player#readme","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"keywords":["react","shaka-player","video-player","mpd","hls"],"_id":"@ayan4m1/react-shaka-player@2.0.0","gitHead":"01f24ce0ed9eb701465ecf83b7a2bf9bf808cb97","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-PMQqZbiOAyoVh/zDGCVvGZcofDFywkzfNB3NhbGURuPGxcmwGnRkQKPmccAZLxRCP7c+YjsFAdUF6lu+yU6fuA==","shasum":"a241709e881fb4418c24e149e559dfe199bd006c","tarball":"https://registry.npmjs.org/@ayan4m1/react-shaka-player/-/react-shaka-player-2.0.0.tgz","fileCount":25,"unpackedSize":71219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpsDgbyG6wKgz9R/T7+sLAIek7mi1PUP2pQ1XLyrpi/AiEAovw8eHBpJejh9tEahilpLuhXBqG+cKkhLRGkMlrC5zw="}]},"_npmUser":{"name":"ayan4m1","email":"andrew@bulletlogic.com"},"maintainers":[{"name":"ayan4m1","email":"andrew@bulletlogic.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-shaka-player_2.0.0_1722318340548_0.545538091308555"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-30T05:45:40.433Z","2.0.0":"2024-07-30T05:45:40.746Z","modified":"2024-07-30T05:45:41.019Z"},"maintainers":[{"name":"ayan4m1","email":"andrew@bulletlogic.com"}],"description":"React video player built with Shaka-Player","homepage":"https://github.com/ayan4m1/react-shaka-player#readme","keywords":["react","shaka-player","video-player","mpd","hls"],"repository":{"type":"git","url":"git+https://github.com/ayan4m1/react-shaka-player.git"},"author":{"name":"Muhammad K. Huda"},"bugs":{"url":"https://github.com/ayan4m1/react-shaka-player/issues"},"license":"MIT","readme":"# @ayan4m1/react-shaka-player\r\n\r\n[![Build Status](https://app.travis-ci.com/ayan4m1/react-shaka-player.svg?branch=main)](https://app.travis-ci.com/ayan4m1/react-shaka-player) [![npm version](https://badge.fury.io/js/%40ayan4m1%2Freact-shaka-player.svg)](https://badge.fury.io/js/%40ayan4m1%2Freact-shaka-player) ![npm](https://img.shields.io/npm/v/shaka-player?label=shaka-player)\r\n\r\nReact video player built on top of [Shaka Player](https://github.com/google/shaka-player).\r\n\r\n> [DEMO](https://csb-pygk8-ayan4m1.vercel.app/)\r\n\r\n> [CODESANDBOX](https://codesandbox.io/s/keen-dewdney-pygk8)\r\n\r\n> [ROADMAP](https://github.com/ayan4m1/react-shaka-player/wiki/Initial-Roadmap)\r\n\r\n> [EXAMPLE & USAGES](https://github.com/ayan4m1/react-shaka-player/wiki/Usages-&-Examples)\r\n\r\n## Installation\r\n\r\nUse the package manager [yarn](https://classic.yarnpkg.com/en/) or [npm](https://www.npmjs.com/) to install `@ayan4m1/react-shaka-player`.\r\n\r\n```bash\r\nyarn add @ayan4m1/react-shaka-player shaka-player\r\n\r\nor\r\n\r\nnpm install @ayan4m1/react-shaka-player shaka-player\r\n```\r\n\r\n## Usage\r\n\r\n```javascript\r\n// import the css. Now we have custom ui.css\r\nimport \"@ayan4m1/react-shaka-player/dist/ui.css\";\r\nimport { ReactShakaPlayer } from \"@ayan4m1/react-shaka-player\";\r\n\r\nfunction App() {\r\n return ;\r\n}\r\n```\r\n\r\n## Manual Handle Usage\r\n\r\n```javascript\r\nimport \"@ayan4m1/react-shaka-player/dist/ui.css\";\r\nimport { ReactShakaPlayer } from \"@ayan4m1/react-shaka-player\";\r\n\r\nfunction App() {\r\n let [mainPlayer, setMainPlayer] = useState({});\r\n\r\n useEffect(() => {\r\n const { player, videoElement } = mainPlayer;\r\n\r\n if (player) {\r\n async function play() {\r\n await player.load(\"https://yourvideomaster.mpd\");\r\n videoElement.play();\r\n }\r\n play();\r\n }\r\n }, [mainPlayer]);\r\n\r\n return (\r\n
\r\n
\r\n setMainPlayer(player)}\r\n />\r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n## Props\r\n\r\nThis is main props for the components:\r\n\r\n| Props | Optional | Description | Type |\r\n| -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |\r\n| src | No | MPD or HLS to play | string |\r\n| className | Yes | string of ui overlay classname | string |\r\n| autoPlay | Yes | as it described | boolean |\r\n| superConfig | Yes | The special configs for Streaming or VOD. Will add more `superConfig` soon. | string (\"STREAMING\" / \"VOD\") |\r\n| config | Yes | Changes configuration settings on Shaka Player. Reference: [shaka.extern.PlayerConfiguration](https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html#.PlayerConfiguration). This config will override `superConfig`. | object |\r\n| uiConfig | Yes | Changes configuration settings for UI elements. Reference: [shaka.extern.UIConfiguration](https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html#.UIConfiguration). This config will override `superConfig`. | object |\r\n| onLoad | Yes | Catch `Shaka.Player`, `Shaka.ui.Overlay` and `HTMLVideoElement` for manual usages or improvement of configuration. see: [PlayerRefs](https://github.com/ayan4m1/react-shaka-player/blob/c4459e31027a08165007d03c9a08ff8a3e5de3dc/src/types/index.ts#L3) | object: PlayerRefs => func |\r\n| onPlay | Yes | Catch when media is playing | func |\r\n| onPlause | Yes | Catch when media is paused | func |\r\n| onEnded | Yes | Catch when video is end | func |\r\n| onBuffering | Yes | Catch `onBuffering` status when playing | bool => func |\r\n| onPlayerError | Yes | Catch `error` when playing. Reference: [Shaka.Player.ErrorEvent](https://shaka-player-demo.appspot.com/docs/api/shaka.Player.html#.event:ErrorEvent) | {Shaka.extern.Error} => func |\r\n| onStatsChanged | Yes | Catch `stats` when playing video, including currentTime (current seek position), and currentEndTime (length of video duration if VOD) (in seconds) of media player element [`IStats`]. Reference: [IStats & Shaka.extern.Stats](https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html#.Stats) | {Shaka.extern.Stats} => func |\r\n\r\n## Contributing\r\n\r\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\r\n\r\nPlease make sure to update tests as appropriate.\r\n\r\n## License\r\n\r\n[MIT](https://choosealicense.com/licenses/mit/)\r\n","readmeFilename":"README.md"}