react-native-theoplayer
Version:
A THEOplayer video component for react-native.
84 lines (82 loc) • 4.28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WebPresentationModeManager = void 0;
var _reactNativeTheoplayer = require("react-native-theoplayer");
var _PlayerEvents = require("../event/PlayerEvents");
var _FullscreenAPI = require("./FullscreenAPI");
var _CommonUtils = require("../../utils/CommonUtils");
class WebPresentationModeManager {
_presentationMode = _reactNativeTheoplayer.PresentationMode.inline;
constructor(player, eventForwarder) {
this._player = player;
this._eventForwarder = eventForwarder;
this._player.presentation.addEventListener('presentationmodechange', this.updatePresentationMode);
this.maybePrepareForPresentationModeChanges();
}
get presentationMode() {
return this._presentationMode;
}
set presentationMode(presentationMode) {
if (presentationMode === this._presentationMode) {
// Ignore if presentationMode did not change.
return;
}
if (_FullscreenAPI.fullscreenAPI !== undefined) {
// If the browser supports the fullscreenAPI, put the element that encloses the player & UI in fullscreen.
if (presentationMode === _reactNativeTheoplayer.PresentationMode.fullscreen) {
const appElement = document.getElementById('theoplayer-root-container');
if (appElement !== null) {
appElement[_FullscreenAPI.fullscreenAPI.requestFullscreen_]()?.then?.(_CommonUtils.noOp, _CommonUtils.noOp);
}
} else if (presentationMode === _reactNativeTheoplayer.PresentationMode.pip) {
this._player.presentation.requestMode('native-picture-in-picture');
} else {
if (this._presentationMode === _reactNativeTheoplayer.PresentationMode.fullscreen) {
document[_FullscreenAPI.fullscreenAPI.exitFullscreen_]()?.then?.(_CommonUtils.noOp, _CommonUtils.noOp);
}
if (this._presentationMode === _reactNativeTheoplayer.PresentationMode.pip) {
this._player.presentation.requestMode(_reactNativeTheoplayer.PresentationMode.inline);
}
}
} else {
// Some browsers, like iOS Safari, can only put a videoElement in fullscreen; let the player decide which one.
if (presentationMode === _reactNativeTheoplayer.PresentationMode.fullscreen) {
this._player.presentation.requestMode(_reactNativeTheoplayer.PresentationMode.fullscreen);
} else if (presentationMode === _reactNativeTheoplayer.PresentationMode.pip) {
this._player.presentation.requestMode('native-picture-in-picture');
} else {
this._player.presentation.requestMode(_reactNativeTheoplayer.PresentationMode.inline);
}
}
}
maybePrepareForPresentationModeChanges() {
// listen for fullscreen updates on document
if (_FullscreenAPI.fullscreenAPI !== undefined) {
document.addEventListener(_FullscreenAPI.fullscreenAPI.fullscreenchange_, this.updatePresentationMode);
document.addEventListener(_FullscreenAPI.fullscreenAPI.fullscreenerror_, this.updatePresentationMode);
}
}
updatePresentationMode = () => {
// detect new presentation mode
let newPresentationMode = _reactNativeTheoplayer.PresentationMode.inline;
if (
// Check if we went into fullscreen using the fullscreen API.
_FullscreenAPI.fullscreenAPI !== undefined && document[_FullscreenAPI.fullscreenAPI.fullscreenElement_] !== null ||
// or otherwise using player APi
this._player.presentation.currentMode === _reactNativeTheoplayer.PresentationMode.fullscreen) {
newPresentationMode = _reactNativeTheoplayer.PresentationMode.fullscreen;
} else if (this._player.presentation.currentMode === 'native-picture-in-picture') {
newPresentationMode = _reactNativeTheoplayer.PresentationMode.pip;
}
// when changed, notify by dispatching presentationModeChange event
const previousPresentationMode = this._presentationMode;
if (newPresentationMode !== previousPresentationMode) {
this._presentationMode = newPresentationMode;
this._eventForwarder.dispatchEvent(new _PlayerEvents.DefaultPresentationModeChangeEvent(this._presentationMode, previousPresentationMode));
}
};
}
exports.WebPresentationModeManager = WebPresentationModeManager;
//# sourceMappingURL=WebPresentationModeManager.js.map