@ducanh2912/react-hls-player
Version:
A simple and easy to use react component for playing an hls live stream
3 lines (2 loc) • 1.77 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("hls.js"),require("react")):"function"==typeof define&&define.amd?define(["hls.js","react"],t):(e||self).reactHlsPlayer=t(e.Hls,e.react)}(this,function(e,t){function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/r(e),a=/*#__PURE__*/r(t);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}var u=["hlsConfig","playerRef","src","autoPlay"];return function(e){var r=e.hlsConfig,l=e.playerRef,f=e.src,i=e.autoPlay,c=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(a[r]=e[r]);return a}(e,u),s=t.useState(!1),d=s[0],p=s[1],y=t.useRef(null),E=null!=l?l:y;return t.useEffect(function(){var e;return n.default.isSupported()&&(function t(){null!=e&&e.destroy();var a=new n.default(o({enableWorker:!1},r));null!=E.current&&a.attachMedia(E.current),a.on(n.default.Events.MEDIA_ATTACHED,function(){a.loadSource(f),a.on(n.default.Events.MANIFEST_PARSED,function(){var e;i&&(null==E||null==(e=E.current)||e.play().catch(function(){return console.log("Unable to autoplay prior to user interaction with the dom.")}))})}),a.on(n.default.Events.ERROR,function(e,r){if(r.fatal)switch(r.type){case n.default.ErrorTypes.NETWORK_ERROR:a.startLoad();break;case n.default.ErrorTypes.MEDIA_ERROR:a.recoverMediaError();break;default:t()}}),e=a}(),p(!0)),function(){null!=e&&e.destroy()}},[i,r,E,f]),a.default.createElement("video",o(d?{ref:E}:{ref:E,src:f,autoPlay:i},c))}});
//# sourceMappingURL=ducanh2912-react-hls.umd.cjs.map