1 | import { useState } from 'react';
|
---|
2 | import screenfull from 'screenfull';
|
---|
3 | import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
|
---|
4 | import { noop, off, on } from './misc/util';
|
---|
5 | var useFullscreen = function (ref, enabled, options) {
|
---|
6 | if (options === void 0) { options = {}; }
|
---|
7 | var video = options.video, _a = options.onClose, onClose = _a === void 0 ? noop : _a;
|
---|
8 | var _b = useState(enabled), isFullscreen = _b[0], setIsFullscreen = _b[1];
|
---|
9 | useIsomorphicLayoutEffect(function () {
|
---|
10 | if (!enabled) {
|
---|
11 | return;
|
---|
12 | }
|
---|
13 | if (!ref.current) {
|
---|
14 | return;
|
---|
15 | }
|
---|
16 | var onWebkitEndFullscreen = function () {
|
---|
17 | if (video === null || video === void 0 ? void 0 : video.current) {
|
---|
18 | off(video.current, 'webkitendfullscreen', onWebkitEndFullscreen);
|
---|
19 | }
|
---|
20 | onClose();
|
---|
21 | };
|
---|
22 | var onChange = function () {
|
---|
23 | if (screenfull.isEnabled) {
|
---|
24 | var isScreenfullFullscreen = screenfull.isFullscreen;
|
---|
25 | setIsFullscreen(isScreenfullFullscreen);
|
---|
26 | if (!isScreenfullFullscreen) {
|
---|
27 | onClose();
|
---|
28 | }
|
---|
29 | }
|
---|
30 | };
|
---|
31 | if (screenfull.isEnabled) {
|
---|
32 | try {
|
---|
33 | screenfull.request(ref.current);
|
---|
34 | setIsFullscreen(true);
|
---|
35 | }
|
---|
36 | catch (error) {
|
---|
37 | onClose(error);
|
---|
38 | setIsFullscreen(false);
|
---|
39 | }
|
---|
40 | screenfull.on('change', onChange);
|
---|
41 | }
|
---|
42 | else if (video && video.current && video.current.webkitEnterFullscreen) {
|
---|
43 | video.current.webkitEnterFullscreen();
|
---|
44 | on(video.current, 'webkitendfullscreen', onWebkitEndFullscreen);
|
---|
45 | setIsFullscreen(true);
|
---|
46 | }
|
---|
47 | else {
|
---|
48 | onClose();
|
---|
49 | setIsFullscreen(false);
|
---|
50 | }
|
---|
51 | return function () {
|
---|
52 | setIsFullscreen(false);
|
---|
53 | if (screenfull.isEnabled) {
|
---|
54 | try {
|
---|
55 | screenfull.off('change', onChange);
|
---|
56 | screenfull.exit();
|
---|
57 | }
|
---|
58 | catch (_a) { }
|
---|
59 | }
|
---|
60 | else if (video && video.current && video.current.webkitExitFullscreen) {
|
---|
61 | off(video.current, 'webkitendfullscreen', onWebkitEndFullscreen);
|
---|
62 | video.current.webkitExitFullscreen();
|
---|
63 | }
|
---|
64 | };
|
---|
65 | }, [enabled, video, ref]);
|
---|
66 | return isFullscreen;
|
---|
67 | };
|
---|
68 | export default useFullscreen;
|
---|