{"_id":"bitmovin-player-react","_rev":"12-e384d1816c72250075a79c88c3990a2a","name":"bitmovin-player-react","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0-beta.1":{"name":"bitmovin-player-react","version":"1.0.0-beta.1","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.0-beta.1","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"e1085387a2ba09877ac363424c7956b5b8b109bd","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.0-beta.1.tgz","fileCount":13,"integrity":"sha512-9EU7ZdCPdjsOA/dyik11vEbTVw4OE1nIbGF0dm5aDyclU37PxY9LtmELLvnDkaWDr8Tzhu3y+F0q04JDldz3Ow==","signatures":[{"sig":"MEUCIGmOFZ56C8rJIlqjFS47cNTgk8YHxjaXiSPlgyza3nOpAiEAkCeUMnZ8bJp4GcN3uqofqEefeQ9f0KZkPoa4EAbiFNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26191},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"16bee4fd5548c40fe8fb1c90418d0b347cbea781","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","release":"./release/release.sh","lint:fix":"npm run lint -- --fix"},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"_nodeVersion":"20.12.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","@types/react":"^18.2.75","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.0-beta.1_1713275341541_0.16811819084845392","host":"s3://npm-registry-packages"}},"1.0.0-beta.2":{"name":"bitmovin-player-react","version":"1.0.0-beta.2","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.0-beta.2","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"8babaab4f53e8db9ba232298064bda7ae9827eca","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.0-beta.2.tgz","fileCount":13,"integrity":"sha512-iDARiCgxgWs49v5R/vfPpXstLosFH7fwO5NV3dRdtnDUsa4jnFW4pNDR0JLLCPVGUz5pKAsNAa7FMJrzT5apEQ==","signatures":[{"sig":"MEUCIQDyIJwi/p5xA2mE9MS+JFq3+AsPtPIgj1ECMfC2l/l/UgIgG+lYMglxkQpS9+ivOhToSpQI3mHjKqaASAEnxI3eK64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30125},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"656aa1f5701183f7db1343b18af3298832bc179a","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.0-beta.2_1713878235223_0.4332847681530898","host":"s3://npm-registry-packages"}},"1.0.0-beta.3":{"name":"bitmovin-player-react","version":"1.0.0-beta.3","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.0-beta.3","homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"e9734114b327cabb3fefae5970d4b4b4a59c87cf","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.0-beta.3.tgz","fileCount":13,"integrity":"sha512-/B7JHI76TuRfUC/kxQLFbFnpHxpEkLegEUc+OmNYMum4mSqFtt2ySSqdrP7SCneCzw3HxVFluL5W/QrqsAN/vQ==","signatures":[{"sig":"MEUCIQDK/gp1sS6hO31saHckFjc185NzGSWulZQsQXgkGCya7wIgOr+MGOlcbnu+Kgm9TQhTVxSySZUbFpI3FyZN6zOSuHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31527},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"2a47dcb65ff9efc390622a36dd4ab24d3a493ab1","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.0-beta.3_1718972368604_0.09589736479553856","host":"s3://npm-registry-packages"}},"1.0.0-beta.4":{"name":"bitmovin-player-react","version":"1.0.0-beta.4","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.0-beta.4","homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"e7b957c4dd6ea6adcf4c7f5b7801ebe2eadbdd65","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.0-beta.4.tgz","fileCount":13,"integrity":"sha512-QJHVRrP8Zt1VQ6F1OfEqk8qiN9XzBagGDIGGK/zUAFm7Iq1zXIgQKfT/Q2YNDMZkr6klyC9Pw8ANLSBTZpEhpw==","signatures":[{"sig":"MEUCIQDk41SLIof4uWQjRcXXjFrgVN3xAl0pbV3oT3F/F1Aj+AIgVMwpO5h3va3GJUCGS/ZdIbBGRWjE/Yy+49ihXrYXMFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32113},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"5fd98296ed5429d03e5b0df2cf7d86c4191f9ba7","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.0-beta.4_1718975041401_0.7096285547129797","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"bitmovin-player-react","version":"1.0.0","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.0","homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"0740bbbc16f19c1b2b1ded08af03d3880d0da2c1","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.0.tgz","fileCount":13,"integrity":"sha512-UTlTaUzeJbLh3mttdeweLP5qqQJxTqKUuLOVMV2LcZlSOEJ5wagFtuJ6wm/FIcZlG+Zmkh/a5qpPKLdNjRGQAw==","signatures":[{"sig":"MEUCIGZaQxYJRbaZQ6rILA6YInVrvAdaP/LHjUVf7fYH+2zxAiEA+Isqm1DW9a/M6QX4lAljqlA/QiRuLMAb9wgH2l67cFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32106},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"1949ee11335fdb5af98ea2b261865539c5972045","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.0_1719318274777_0.298861414485013","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"bitmovin-player-react","version":"1.0.1","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.1","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"69d69c07bd44c4e151d8c21df67741f473c4b2cc","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.1.tgz","fileCount":13,"integrity":"sha512-mB7uLjEBEY93E1wdeWUp26KEupEAyu1oqY9d/UA5fzMWWehigjSns95PikeKlwvxUPICXF34ZWcb8CulY+iuNA==","signatures":[{"sig":"MEUCIQD3cl4SIlPiSPYzcD8yM32UyIbegIcW+dfmgSzy5eKA+AIgSv0KYgnjXsEOpV+pyV9hedXbOMszXMJaMQGHeslzv0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32140},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"7dd3f6bb24b4ab43e7507c5041b822ca2ab61501","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.1_1727775610965_0.26409182251641505","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"bitmovin-player-react","version":"1.0.2","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.2","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"7917f1f68f46075dde08afe3d0cc9a3102b5649e","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.2.tgz","fileCount":13,"integrity":"sha512-/lfIUE6s+5JgPEFtWSazKzvH3L9OrRT7oGN6I+03wMfIg1jZ/rsD2uC6YjdyAvKvvI4NR7+jsp6jARKKxsZn2g==","signatures":[{"sig":"MEYCIQCdglA33+oqi01RBDm8yGi01W+k6krjMlOI5lHQAbc/xgIhAN0r5DFnKeLiSSgRLWFqtKWMlthNoiWe/2vBmIEE/BaO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32534},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"11789f7b187178c8ece8c822e55ba3b292ab1731","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.2_1732297899284_0.10112729342614224","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"bitmovin-player-react","version":"1.0.3","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.0.3","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"77c2071da73b89c28451530dba3e2d8611ae676b","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.0.3.tgz","fileCount":13,"integrity":"sha512-YFDRDj9Q8SefHuxYRsdq/IuEhuiBGVPIRwLyZSGeJ6L+GfYc8+RE8s06cf8LGuPHKgW2clvZ3POa0pKGnwhnbw==","signatures":[{"sig":"MEUCIEzFu2GwiIujYvLSijn4BXvQGXYVrfqjj/IxrM4lhWU5AiEAoJagiM9qTHmznSE8u1VrwrXeC4U0w/chetYAfe+yoJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32621},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"5d1d7d39a7965527aef66d246b23e64cf80766d3","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3.60.0"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.0.3_1734420667571_0.3197176971197768","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"bitmovin-player-react","version":"1.1.0","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.1.0","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"cb0adca1f3814e263cada17ba5411cde39303373","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.1.0.tgz","fileCount":13,"integrity":"sha512-fD8cs1UDbFSeVi2ZSOXFUGOxuC4KuFzHTdnyWPY+U0G++WeB4XbbaFp+6WhR21hdC1zDBAkS4lMG+LOe7nLdRg==","signatures":[{"sig":"MEUCIQCJIF8BDY1fuKwHctQViDAsYJ82SjVms4srgnj5sKtChwIgWnsdsuBfL5Whf6lvljjeH+sPs0PijXIlB4d/EH4rJog=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36556},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"4d1977c67bedd519f1534fe6e1454c3d506c03b0","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^18.2.75","concurrently":"^8.2.2","@types/react-dom":"^18.2.24","eslint-plugin-react":"^7.34.1","@testing-library/react":"^14.3.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.1.0_1765895806557_0.5856303299723531","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"bitmovin-player-react","version":"1.2.0","keywords":["bitmovin","player","react"],"author":{"name":"Bitmovin"},"license":"MIT","_id":"bitmovin-player-react@1.2.0","maintainers":[{"name":"bitadmin","email":"admin@bitmovin.com"}],"homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"dist":{"shasum":"9fba1c4950eed6f9f3cfb4a4740e776811701491","tarball":"https://registry.npmjs.org/bitmovin-player-react/-/bitmovin-player-react-1.2.0.tgz","fileCount":13,"integrity":"sha512-IdorfkTLxUq2ju/paeA1J8k7O+snoLvLMvILW3cdUM8bOoFgDmmRszCFRtBNZRIxTobUJeBVHrFY5hQ5jfxHlA==","signatures":[{"sig":"MEQCIAY4ibT0gjIjPrly5vzkRjvaf6fCntxkCwPWyT4wABRXAiBvVKXy0TfkPly73ln/1crNW4Q37Ad9QigCGajwKXXzHw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36635},"main":"./dist/cjs/index.js","type":"module","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/esm/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"}},"gitHead":"8f638cc5c0c8360a114ef945680b0df111889304","scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" \"example/src/**/*.{ts,tsx}\"","test":"jest","build":"rm -fr dist/* && tsc -p tsconfig.build.esm.json && tsc -p tsconfig.build.cjs.json && ./build/addPackageType.sh","prepare":"husky","release":"./release/release.sh","lint:fix":"npm run lint -- --fix","bootstrap":"npm ci && npm run build && npm ci --prefix ./example","start:dev":"concurrently --kill-others \"tsc -p tsconfig.build.esm.json -w\" \"npm run start:dev --prefix ./example\""},"_npmUser":{"name":"bitadmin","email":"admin@bitmovin.com"},"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component that creates an instance of Bitmovin player","directories":{},"lint-staged":{"*.(ts|tsx|js|jsx|json)":"eslint --fix"},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.0.11","react":"^19.0.0","eslint":"^8.57.0","ts-jest":"^29.1.2","prettier":"^3.2.5","react-dom":"^19.0.0","typescript":"^5.4.4","@types/jest":"^29.5.12","lint-staged":"^15.2.2","@types/react":"^19.0.0","concurrently":"^8.2.2","@types/react-dom":"^19.0.0","eslint-plugin-react":"^7.34.1","@testing-library/react":"^16.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.2","@typescript-eslint/parser":"^7.6.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","@typescript-eslint/eslint-plugin":"^7.6.0","eslint-plugin-require-extensions":"^0.1.3","eslint-plugin-simple-import-sort":"^12.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0","bitmovin-player":"^8.0.0","bitmovin-player-ui":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/bitmovin-player-react_1.2.0_1771239029920_0.9380626587418386","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2024-04-16T13:49:01.540Z","modified":"2026-09-25T08:55:01.982Z","1.0.0-beta.1":"2024-04-16T13:49:01.737Z","1.0.0-beta.2":"2024-04-23T13:17:15.369Z","1.0.0-beta.3":"2024-06-21T12:19:28.755Z","1.0.0-beta.4":"2024-06-21T13:04:01.578Z","1.0.0":"2024-06-25T12:24:34.934Z","1.0.1":"2024-10-01T09:40:11.177Z","1.0.2":"2024-11-22T17:51:39.472Z","1.0.3":"2024-12-17T07:31:07.731Z","1.1.0":"2025-12-16T14:36:46.705Z","1.2.0":"2026-02-16T10:50:30.106Z"},"bugs":{"url":"https://github.com/bitmovin/bitmovin-player-react/issues"},"author":{"name":"Bitmovin"},"license":"MIT","homepage":"https://github.com/bitmovin/bitmovin-player-react#readme","keywords":["bitmovin","player","react"],"repository":{"url":"git+https://github.com/bitmovin/bitmovin-player-react.git","type":"git"},"description":"A React component that creates an instance of Bitmovin player","maintainers":[{"email":"admin@bitmovin.com","name":"bitadmin"},{"email":"laura.rieder-mayring@bitmovin.com","name":"lrieder"},{"email":"saeid.malekhosseini@bitmovin.com","name":"saeidmh"}],"readme":"# Bitmovin Player React\n\nThis is an open-source project created to enable customers to integrate the Bitmovin Player into React projects. It has been created to provide customers with a starting point, which can be built upon through active collaboration and contributions. We look forward to seeing this library expand and grow.\n\n[![CI](https://github.com/bitmovin/bitmovin-player-react/actions/workflows/ci.yml/badge.svg)](https://github.com/bitmovin/bitmovin-player-react/actions/workflows/ci.yml)\n[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)\n[![Bitmovin Community](https://img.shields.io/discourse/users?label=community&server=https%3A%2F%2Fcommunity.bitmovin.com)](https://community.bitmovin.com/?utm_source=github&utm_medium=bitmovin-player-react&utm_campaign=dev-community)\n[![npm version](https://img.shields.io/npm/v/bitmovin-player-react)](https://www.npmjs.com/package/bitmovin-player-react)\n[![npm dm](https://img.shields.io/npm/dm/bitmovin-player-react.svg)](https://www.npmjs.com/package/bitmovin-player-react)\n[![npm dt](https://img.shields.io/npm/dt/bitmovin-player-react.svg)](https://www.npmjs.com/package/bitmovin-player-react)\n\n\n# Getting Started\n\n1. `npm i bitmovin-player-react bitmovin-player bitmovin-player-ui --save`\n2. Add `import \"bitmovin-player-ui/dist/css/bitmovinplayer-ui.css\";` to your entry point file\n3. Use the player in your React components:\n\n```tsx\nimport { PlayerConfig, SourceConfig } from \"bitmovin-player\";\nimport { BitmovinPlayer } from \"bitmovin-player-react\";\nimport { Fragment } from \"react\";\n\nconst playerConfig: PlayerConfig = {\n  key: \"<key>\",\n  playback: {\n    muted: true,\n    autoplay: true,\n  },\n};\n\nconst playerSource: SourceConfig = {\n  hls: \"https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8\",\n};\n\nexport function MyComponent() {\n  return (\n    <Fragment>\n      <h1>Simple demo</h1>\n      <BitmovinPlayer config={playerConfig} source={playerSource} />\n    </Fragment>\n  );\n}\n```\n\n# Documentation\n\n## Dynamically update player source config\n\n`BitmovinPlayer` keeps track of the source config and reloads the source on changes:\n\n```tsx\nconst playerSources: Array<SourceConfig | undefined> = [\n  {\n    hls: \"https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8\",\n  },\n  {\n    hls: \"https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8\",\n  },\n  // To demonstrate that the source can be unloaded as well.\n  undefined,\n];\n\nexport function MyComponent() {\n  const [playerSource, setPlayerSource] = useState(playerSources[0]);\n\n  useEffect(() => {\n    let lastSourceIndex = 0;\n\n    const intervalId = setInterval(() => {\n      const newIndex = ++lastSourceIndex % playerSources.length;\n\n      console.log(`Switching to source ${newIndex}`, playerSources[newIndex]);\n\n      setPlayerSource(playerSources[newIndex]);\n    }, 15_000);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <Fragment>\n      <h1>Dynamic source demo</h1>\n      <BitmovinPlayer config={playerConfig} source={playerSource} />\n    </Fragment>\n  );\n}\n```\n\n## Dynamically update player config and UI config\n\n`BitmovinPlayer` keeps track of the player config and UI config and reinitializes the player (destroys the old instance and creates a new one) on changes :\n\n```ts\nconst playerConfigs: Array<PlayerConfig> = [\n  {\n    key: \"<key>\",\n    playback: {\n      autoplay: true,\n      muted: true,\n    },\n  },\n  {\n    key: \"<key>\",\n    playback: {\n      autoplay: false,\n      muted: false,\n    },\n  },\n];\n\nexport function MyComponent() {\n  const [playerConfig, setPlayerConfig] = useState(playerConfigs[0]);\n\n  useEffect(() => {\n    let lastConfigIndex = 0;\n\n    const intervalId = setInterval(() => {\n      const newIndex = ++lastConfigIndex % playerConfigs.length;\n\n      console.log(`Switching to player config ${newIndex}`, playerConfigs[newIndex]);\n\n      setPlayerConfig(playerConfigs[newIndex]);\n    }, 15_000);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <Fragment>\n      <h1>Dynamic player config demo</h1>\n      <BitmovinPlayer config={playerConfig} source={playerSource} />\n    </Fragment>\n  );\n}\n```\n\nThe same applies to the `customUi` object.\n\n## Attach event listeners\n\n```tsx\nimport { useMemo } from \"react\";\nimport { PlayerConfig, PlayerEvent } from \"bitmovin-player\";\n\nexport function MyComponent() {\n  const playerConfig: PlayerConfig = useMemo(\n    () => ({\n      key: '<key>',\n      playback: {\n        muted: true,\n        autoplay: true,\n      },\n      events: {\n        [PlayerEvent.Play]: event => {\n          console.log('Play event fired', event);\n        },\n      },\n    }),\n    [],\n  );\n\n  return (\n    <Fragment>\n      <h1>Events demo</h1>\n      <BitmovinPlayer config={playerConfig} source={playerSource} />\n    </Fragment>\n  );\n}\n```\n\n## Get player instance\n\n```tsx\nimport { PlayerAPI } from \"bitmovin-player\";\n\nexport function MyComponent() {\n  const handlePlayerRef = (player: PlayerAPI) => {\n    console.log(\"Player version\", player.version);\n  };\n\n  return (\n    <Fragment>\n      <h1>Player instance demo</h1>\n      <BitmovinPlayer\n        playerRef={handlePlayerRef}\n        config={playerConfig}\n        source={playerSource}\n      />\n    </Fragment>\n  );\n}\n```\n\n## Customize player UI\n\nThis library supports both `bitmovin-player-ui` v3 and v4. The version is automatically detected at runtime based on which version you install in your project.\n\nTo control which version is used, specify it in your `package.json`:\n\n```json\n{\n  \"dependencies\": {\n    \"bitmovin-player-ui\": \"^3.104.0\"  // for v3\n    // or\n    \"bitmovin-player-ui\": \"^4.0.0\"    // for v4\n  }\n}\n```\n\nFor `bitmovin-player` versions 8.226.0 and above, you can also use `StyleConfig.uiManagerFactory` to provide a custom UI manager factory directly in the player configuration:\n\n```tsx\nimport { PlayerConfig } from \"bitmovin-player\";\nimport { UIManager } from \"bitmovin-player-ui\";\n\nconst playerConfig: PlayerConfig = {\n  key: \"<key>\",\n  styleConfig: {\n    uiManagerFactory: (player, uiConfig) => {\n      // Return your custom UIManager instance\n      return new UIManager(player, yourCustomUIContainer, uiConfig);\n    }\n  }\n};\n```\n\n**Note:** The `styleConfig.uiManagerFactory` option requires `bitmovin-player` 8.226.0 or higher.\n\n### Use UI container\n\nYou can use `UIContainer` from https://www.npmjs.com/package/bitmovin-player-ui to customize the player UI:\n\n```tsx\nimport { PlaybackToggleOverlay, UIContainer, CustomUi } from \"bitmovin-player-ui\";\n\n// Ensure this function returns a new instance of the `UIContainer` on every call.\nconst uiContainerFactory = () =>\n  new UIContainer({\n    components: [new PlaybackToggleOverlay()],\n  });\n\nconst customUi: CustomUi = {\n  containerFactory: uiContainerFactory\n};\n\nexport function MyComponent() {\n  return (\n    <Fragment>\n      <h1>UI container demo</h1>\n      <BitmovinPlayer\n        source={playerSource}\n        config={playerConfig}\n        customUi={customUi}\n      />\n    </Fragment>\n  );\n}\n```\n\n### Use UI variants\n\nYou can use `UIVariant`s from https://www.npmjs.com/package/bitmovin-player-ui to customize the player UI:\n\n```tsx\nimport { UIVariant, CustomUi } from \"bitmovin-player-ui\";\n\n// Ensure this function returns a new instance of the `UIVariant[]` on every call.\nconst uiVariantsFactory = (): UIVariant[] => [\n  {\n    ui: new UIContainer({\n      components: [\n        new PlaybackToggleOverlay(),\n        new ControlBar({\n          components: [new SeekBar()],\n          hidden: false,\n        }),\n      ],\n    }),\n    condition: (context) => context.isFullscreen,\n  },\n  {\n    ui: new UIContainer({\n      components: [new PlaybackToggleOverlay()],\n    }),\n    condition: (context) => !context.isFullscreen,\n  },\n];\n\nconst customUi: CustomUi = {\n  variantsFactory: uiVariantsFactory\n};\n\nexport function MyComponent() {\n  return (\n    <Fragment>\n      <h1>UI variants demo</h1>\n      <BitmovinPlayer\n        source={playerSource}\n        config={playerConfig}\n        customUi={customUi}\n      />\n    </Fragment>\n  );\n}\n```\n\n### Use custom UIManager factory\n\nYou can provide a custom `UIManager` factory function to have full control over UI initialization:\n\n```tsx\nimport { PlayerAPI, UIConfig } from \"bitmovin-player\";\nimport { UIManager, UIContainer, PlaybackToggleOverlay, CustomUi } from \"bitmovin-player-ui\";\n\nconst uiManagerFactory = (player: PlayerAPI, config: UIConfig): UIManager => {\n  const customContainer = new UIContainer({\n    components: [new PlaybackToggleOverlay()],\n  });\n\n  return new UIManager(player, customContainer, config);\n};\n\nconst customUi: CustomUi = {\n  managerFactory: uiManagerFactory\n};\n\nexport function MyComponent() {\n  return (\n    <Fragment>\n      <h1>Custom UIManager factory demo</h1>\n      <BitmovinPlayer\n        source={playerSource}\n        config={playerConfig}\n        customUi={customUi}\n      />\n    </Fragment>\n  );\n}\n```\n\nThis approach gives you the most flexibility, as you can customize both the UI container and the UIManager initialization logic.\n\n### Use custom CSS\n\nYou either can implement your own CSS for the default player UI or build on top of `bitmovin-player-ui/dist/css/bitmovinplayer-ui.css`.\n\nCreate a new CSS file:\n\n```css\n/* customStyles.css */\n\n.bmpui-ui-playbacktimelabel {\n  color: red;\n}\n```\n\nImport the CSS file:\n\n```tsx\nimport \"./customStyles.css\";\n\nexport function MyComponent() {\n  return (\n    <Fragment>\n      <h1>Custom CSS demo</h1>\n      <BitmovinPlayer source={playerSource} config={playerConfig} />\n    </Fragment>\n  );\n}\n\n```\n\n### Disable UI\n\n```tsx\nimport { PlayerConfig } from \"bitmovin-player\";\n\nconst playerConfig: PlayerConfig = {\n  key: \"<key>\",\n  playback: {\n    muted: true,\n    autoplay: true,\n  },\n  // Disable UI\n  ui: false,\n};\n\nexport function MyComponent() {\n  return (\n    <Fragment>\n      <h1>Disable UI demo</h1>\n      <BitmovinPlayer\n        source={playerSource}\n        config={playerConfig}\n      />\n    </Fragment>\n  );\n}\n```\n\n## Possible pitfalls\n\n### Avoid player config, UI config, and source objects recreation on every render\n\n```tsx\nexport function MyComponent() {\n  const [_counter, setCounter] = useState(0);\n\n  // This will create a new source object on every render and the player will be reloaded unnecessarily.\n  const playerSource: SourceConfig = {\n    hls: \"https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8\",\n  };\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      setCounter((previousCounter) => previousCounter + 1);\n    }, 500);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <Fragment>\n      <h1>Wrong source usage demo</h1>\n      <BitmovinPlayer config={playerConfig} source={playerSource} />\n    </Fragment>\n  );\n}\n```\n\nInstead do one of the following:\n\n- Create a source object outside of the component (refer to the \"Simple demo\" above)\n- Use `useState` (refer to the \"Dynamic source demo\" above)\n- Use `useMemo`:\n\nThe same applies to the `config`, `source`, and `customUi` objects.\n\n```tsx\nexport function MyComponent() {\n  const [_counter, setCounter] = useState(0);\n\n  // Ensure that the source object is created only once.\n  const playerSource: SourceConfig = useMemo(\n    () => ({\n      hls: \"https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8\",\n    }),\n    // Add dependencies here if needed to build the source object.\n    [],\n  );\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      setCounter((previousCounter) => previousCounter + 1);\n    }, 500);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <Fragment>\n      <h1>Right source usage demo</h1>\n      <BitmovinPlayer config={playerConfig} source={playerSource} />\n    </Fragment>\n  );\n}\n```\n\n# Maintenance and Updates\n\nAs an open source project, this library is not part of a regular maintenance or update schedule and is updated on an adhoc basis when contributions are made.\n\n# Contributing to this project\n\nWe are pleased to accept changes, updates and fixes from the community wishing to use and expand this project. Bitmovin will review any Pull Requests made. We do our best to provide timely feedback, but please note that no SLAs apply. New releases are tagged and published on our discretion. Please see [CONTRIBUTING.md](CONTRIBUTING.md) for more details on how to contribute.\n\n## Raising a Feature Suggestion\n\nIf you see something missing that might be useful but are unable to contribute the feature yourself, please feel free to [submit a feature request](https://community.bitmovin.com/t/how-to-submit-a-feature-request-to-us/1463) through the Bitmovin Community. Feature suggestions will be considered by Bitmovin’s Product team for future roadmap plans.\n\n## Reporting a bug\n\nIf you come across a bug related to the Bitmovin Player React, please raise this through the support ticketing system accessible in your [Bitmovin Dashboard](https://dashboard.bitmovin.com/support/tickets).\n\n## Support and SLA Disclaimer\n\nAs an open-source project and not a core product offering, any request, issue or query related to this project is excluded from any SLA and Support terms that a customer might have with either Bitmovin or another third-party service provider or Company contributing to this project. Any and all updates are purely at the contributor's discretion.\n\n## Need more help?\n\nShould you need further help, please raise your request to your Bitmovin account team. We can assist in a number of ways, from providing you professional services help to putting you in touch with preferred system integrators who can work with you to achieve your goals.\n","readmeFilename":"README.md"}