react-hls-video-player
Version:
A simple and easy to use react component for playing an hls live stream
91 lines (90 loc) • 3.77 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { useEffect } from 'react';
import Hls from 'hls.js';
var ReactHlsPlayer = function (_a) {
var hlsConfig = _a.hlsConfig, playerRef = _a.playerRef, getHLSInstance = _a.getHLSInstance, src = _a.src, autoPlay = _a.autoPlay, props = __rest(_a, ["hlsConfig", "playerRef", "getHLSInstance", "src", "autoPlay"]);
var internalRef = playerRef || React.useRef(null);
useEffect(function () {
var hls;
function initPlayer() {
if (hls != null) {
hls.destroy();
}
var newHls = new Hls(__assign({ enableWorker: false }, hlsConfig));
newHls.on(Hls.Events.MEDIA_ATTACHED, function () {
newHls.loadSource(src);
});
newHls.on(Hls.Events.MANIFEST_PARSED, function () {
var _a;
if (!autoPlay) {
return;
}
try {
(_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.play();
}
catch (error) {
console.warn('Play is not supported in this environment', error);
}
});
newHls.on(Hls.Events.ERROR, function (event, data) {
if (!data.fatal) {
return;
}
console.warn("HLS.js Error: ".concat(data.type, " - ").concat(data.details));
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
newHls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
newHls.recoverMediaError();
break;
default:
initPlayer();
break;
}
});
if (internalRef.current) {
newHls.attachMedia(internalRef.current);
}
hls = newHls;
getHLSInstance === null || getHLSInstance === void 0 ? void 0 : getHLSInstance(newHls);
}
if (Hls.isSupported()) {
initPlayer();
}
else {
console.warn('HLS is not supported in this browser');
}
return function () {
if (hls != null) {
hls.destroy();
}
};
}, [autoPlay, hlsConfig, playerRef, getHLSInstance, src]);
if (!Hls.isSupported()) {
return (React.createElement("video", __assign({ ref: internalRef, src: src, autoPlay: autoPlay, "data-testid": "react-hls-player-fallback" }, props), "Your browser does not support the video tag."));
}
return React.createElement("video", __assign({ ref: internalRef, "data-testid": "react-hls-player" }, props));
};
export default ReactHlsPlayer;