react-use
Version:
Collection of React Hooks
69 lines (68 loc) • 2.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var screenfull_1 = tslib_1.__importDefault(require("screenfull"));
var noop = function () { };
var useFullscreen = function (ref, on, options) {
if (options === void 0) { options = {}; }
var video = options.video, _a = options.onClose, onClose = _a === void 0 ? noop : _a;
var _b = react_1.useState(on), isFullscreen = _b[0], setIsFullscreen = _b[1];
react_1.useLayoutEffect(function () {
if (!on) {
return;
}
if (!ref.current) {
return;
}
var onWebkitEndFullscreen = function () {
video.current.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
onClose();
};
var onChange = function () {
if (screenfull_1.default.isEnabled) {
var isScreenfullFullscreen = screenfull_1.default.isFullscreen;
setIsFullscreen(isScreenfullFullscreen);
if (!isScreenfullFullscreen) {
onClose();
}
}
};
if (screenfull_1.default.isEnabled) {
try {
screenfull_1.default.request(ref.current);
setIsFullscreen(true);
}
catch (error) {
onClose(error);
setIsFullscreen(false);
}
screenfull_1.default.on('change', onChange);
}
else if (video && video.current && video.current.webkitEnterFullscreen) {
video.current.webkitEnterFullscreen();
video.current.addEventListener('webkitendfullscreen', onWebkitEndFullscreen);
setIsFullscreen(true);
}
else {
onClose();
setIsFullscreen(false);
}
return function () {
setIsFullscreen(false);
if (screenfull_1.default.isEnabled) {
try {
screenfull_1.default.off('change', onChange);
screenfull_1.default.exit();
}
catch (_a) { }
}
else if (video && video.current && video.current.webkitExitFullscreen) {
video.current.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
video.current.webkitExitFullscreen();
}
};
}, [on, video, ref]);
return isFullscreen;
};
exports.default = useFullscreen;