react-native-video-basic-controls
Version:
Controls for the React Native <Video> component at react-native-video.
341 lines (294 loc) • 11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _MediaControls = _interopRequireDefault(require("./MediaControls.style"));
var _playerStates = require("./constants/playerStates");
var _Controls = require("./Controls");
var _Slider = require("./Slider");
var _Toolbar = require("./Toolbar");
var _reactNativeOrientationLocker = _interopRequireWildcard(require("react-native-orientation-locker"));
var _reactNativeSystemSetting = _interopRequireDefault(require("react-native-system-setting"));
var _VerticalSlider = _interopRequireDefault(require("./VerticalSlider"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
let SystemSettings = require('react-native-system-setting') ? _reactNativeSystemSetting.default : null;
const MediaControls = props => {
const {
children,
containerStyle: customContainerStyle = {},
duration,
bufferValue = 0,
fadeOutDelay = 5000,
isLoading = false,
mainColor = 'rgba(12, 83, 175, 0.9)',
bufferColor = '#fff',
onFullScreen,
fullScreenIconP,
fullScreenIconL,
// onReplay=()=>{},
onReplay: onReplayCallback = () => {},
onSkipFor = () => {},
onSkipBack = () => {},
onSeek,
onSeeking,
playerState,
progress,
showOnStart = true,
sliderStyle,
// defaults are applied in Slider.tsx
iconStyle,
toolbarStyle: customToolbarStyle = {},
VSliderOuterStyles,
VSliderInnerStyles,
showVolume = false,
showBrightness = false,
sliderScale = 10,
sliderType = 'Slider'
} = props;
const {
initialOpacity,
initialIsVisible
} = (() => {
if (showOnStart) {
return {
initialOpacity: 1,
initialIsVisible: true
};
}
return {
initialOpacity: 0,
initialIsVisible: false
};
})();
const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
const [opacity] = (0, _react.useState)(new _reactNative.Animated.Value(initialOpacity));
const [isVisible, setIsVisible] = (0, _react.useState)(initialIsVisible);
const [isLocked, setLocked] = (0, _react.useState)(false);
const [volume, setVolume] = (0, _react.useState)(0);
const [brightness, setBrightness] = (0, _react.useState)(0);
const [isChild, setIsChild] = (0, _react.useState)(false);
(0, _reactNativeOrientationLocker.useOrientationChange)(o => {
if (o === 'PORTRAIT') {
setIsFullscreen(false);
} else {
setIsFullscreen(true);
}
});
(0, _reactNativeOrientationLocker.useLockListener)(o => {
if (o === 'PORTRAIT') {
setIsFullscreen(false);
} else {
setIsFullscreen(true);
}
});
function checkLocked() {
const locked = _reactNativeOrientationLocker.default.isLocked();
if (locked !== isLocked) {
setLocked(locked);
}
}
(0, _react.useEffect)(() => {
_reactNative.LogBox.ignoreAllLogs();
if (children === undefined || children === null) {
setIsChild(false);
} else {
setIsChild(true);
}
if (showBrightness) {
SystemSettings === null || SystemSettings === void 0 ? void 0 : SystemSettings.getBrightness().then(bright => {
setBrightness(bright);
});
}
_reactNativeOrientationLocker.default.getOrientation(o => {
if (o === 'PORTRAIT') {
setIsFullscreen(false);
} else {
setIsFullscreen(true);
}
});
if (showVolume) {
var _SystemSettings$getVo;
SystemSettings === null || SystemSettings === void 0 ? void 0 : (_SystemSettings$getVo = SystemSettings.getVolume()) === null || _SystemSettings$getVo === void 0 ? void 0 : _SystemSettings$getVo.then(vol => {
setVolume(vol);
});
}
const volumeListener = SystemSettings === null || SystemSettings === void 0 ? void 0 : SystemSettings.addVolumeListener(data => {
setVolume(data.value);
});
checkLocked();
fadeOutControls(fadeOutDelay);
return () => SystemSettings === null || SystemSettings === void 0 ? void 0 : SystemSettings.removeVolumeListener(volumeListener);
}, []);
const onVolumeChange = value => {
SystemSettings === null || SystemSettings === void 0 ? void 0 : SystemSettings.setVolume(value);
volume !== value ? setVolume(value) : null;
};
const onBrightnessChange = value => {
SystemSettings === null || SystemSettings === void 0 ? void 0 : SystemSettings.setAppBrightness(value);
volume !== value ? setBrightness(value) : null;
};
const fadeOutControls = function () {
let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
_reactNative.Animated.timing(opacity, {
toValue: 0,
duration: 30,
delay,
useNativeDriver: false
}).start(result => {
/* I noticed that the callback is called twice, when it is invoked and when it completely finished
This prevents some flickering */
if (result.finished) {
setIsVisible(false);
}
});
};
const fadeInControls = () => {
setIsVisible(true);
_reactNative.Animated.timing(opacity, {
toValue: 1,
duration: 300,
delay: 0,
useNativeDriver: false
}).start();
};
const onReplay = () => {
fadeOutControls(fadeOutDelay);
onReplayCallback();
};
const onFullScreenFunction = () => {
if (isFullscreen) {
_reactNativeOrientationLocker.default.lockToPortrait();
checkLocked();
setIsFullscreen(false);
} else {
_reactNativeOrientationLocker.default.lockToLandscape();
checkLocked();
setIsFullscreen(true);
}
};
const cancelAnimation = () => opacity.stopAnimation(() => setIsVisible(true));
const onPause = () => {
const {
onPaused
} = props;
const {
PLAYING,
PAUSED,
ENDED
} = _playerStates.PLAYER_STATES;
switch (playerState) {
case PLAYING:
{
cancelAnimation();
break;
}
case PAUSED:
{
fadeOutControls(fadeOutDelay);
break;
}
case ENDED:
break;
}
const newPlayerState = playerState === PLAYING ? PAUSED : PLAYING;
return onPaused(newPlayerState);
};
const toggleControls = () => {
// value is the last value of the animation when stop animation was called.
// As this is an opacity effect, I used the value (0 or 1) as a boolean
opacity.stopAnimation(value => {
setIsVisible(!!value);
return value ? fadeOutControls() : fadeInControls();
});
};
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
accessible: false,
onPress: toggleControls
}, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
style: [_MediaControls.default.container, customContainerStyle, {
opacity
}]
}, isFullscreen && /*#__PURE__*/_react.default.createElement(_reactNative.StatusBar, {
hidden: true
}), isVisible && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [_MediaControls.default.container, customContainerStyle]
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [{ ..._MediaControls.default.controlsRow,
flex: isChild ? 1 : 0.5
}, _MediaControls.default.toolbarRow, customToolbarStyle]
}, children), /*#__PURE__*/_react.default.createElement(_Controls.Controls, {
isChild: isChild,
brightness: brightness,
volume: volume,
showBrightness: showBrightness,
showVolume: showVolume,
onBrightness: onBrightnessChange,
onVolume: onVolumeChange,
showSlider: isFullscreen && sliderType === 'Swipe',
onPause: onPause,
onReplay: onReplay,
onSkipFor: onSkipFor,
onSkipBack: onSkipBack,
isLoading: isLoading,
playerState: playerState,
customIconStyle: iconStyle
}), /*#__PURE__*/_react.default.createElement(_Slider.Slider, {
progress: progress,
duration: duration,
bufferValue: bufferValue,
mainColor: mainColor,
bufferColor: bufferColor,
onFullScreen: onFullScreen ? onFullScreen : onFullScreenFunction,
isFullscreen: isFullscreen,
fullScreenIconL: fullScreenIconL,
fullScreenIconP: fullScreenIconP,
playerState: playerState,
onSeek: onSeek,
onSeeking: onSeeking,
onPause: onPause,
customSliderStyle: sliderStyle
}), isFullscreen && sliderType === 'Slider' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showBrightness && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: _MediaControls.default.VSliderLeft
}, /*#__PURE__*/_react.default.createElement(_VerticalSlider.default, {
value: brightness,
disabled: false,
min: 0,
max: 1,
step: 0.01,
onChange: onBrightnessChange,
onComplete: onBrightnessChange,
width: 4,
height: 200,
borderRadius: 50,
SliderMaxStyles: VSliderOuterStyles,
SliderMinStyles: VSliderInnerStyles,
ballColor: mainColor,
sliderScale: sliderScale
})), showVolume && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: _MediaControls.default.VSliderRight
}, /*#__PURE__*/_react.default.createElement(_VerticalSlider.default, {
value: volume,
disabled: false,
min: 0,
max: 1,
step: 0.01,
onChange: onVolumeChange,
onComplete: onVolumeChange,
width: 4,
height: 200,
borderRadius: 50,
SliderMaxStyles: VSliderOuterStyles,
SliderMinStyles: VSliderInnerStyles,
ballColor: mainColor,
sliderScale: sliderScale
}))))));
};
MediaControls.Toolbar = _Toolbar.Toolbar;
var _default = MediaControls;
exports.default = _default;
//# sourceMappingURL=MediaControls.js.map