@wordpress/block-editor
Version:
135 lines (130 loc) • 4.39 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.VIDEO_ASPECT_RATIO = void 0;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _reactNative = require("react-native");
var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
var _styles = _interopRequireDefault(require("./styles.scss"));
var _gridiconPlay = _interopRequireDefault(require("./gridicon-play"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* External dependencies
*/
/**
* Internal dependencies
*/
// Default Video ratio 16:9
const VIDEO_ASPECT_RATIO = exports.VIDEO_ASPECT_RATIO = 16 / 9;
class Video extends _element.Component {
constructor() {
super(...arguments);
this.isIOS = _reactNative.Platform.OS === 'ios';
this.state = {
isFullScreen: false,
videoContainerHeight: 0
};
this.onPressPlay = this.onPressPlay.bind(this);
this.onVideoLayout = this.onVideoLayout.bind(this);
}
onVideoLayout(event) {
const {
height
} = event.nativeEvent.layout;
if (height !== this.state.videoContainerHeight) {
this.setState({
videoContainerHeight: height
});
}
}
onPressPlay() {
if (this.isIOS) {
if (this.player) {
this.player.presentFullscreenPlayer();
}
} else {
const {
source
} = this.props;
if (source && source.uri) {
this.openURL(source.uri);
}
}
}
// Tries opening the URL outside of the app
openURL(url) {
_reactNative.Linking.canOpenURL(url).then(supported => {
if (!supported) {
_reactNative.Alert.alert((0, _i18n.__)('Problem opening the video'), (0, _i18n.__)('No application can handle this request. Please install a Web browser.'));
window.console.warn('No application found that can open the video with URL: ' + url);
} else {
return _reactNative.Linking.openURL(url);
}
}).catch(err => {
_reactNative.Alert.alert((0, _i18n.__)('Problem opening the video'), (0, _i18n.__)('An unknown error occurred. Please try again.'));
window.console.error('An error occurred while opening the video URL: ' + url, err);
});
}
render() {
const {
isSelected,
style
} = this.props;
const {
isFullScreen,
videoContainerHeight
} = this.state;
const showPlayButton = videoContainerHeight > 0;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _styles.default.videoContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeVideo.default, {
...this.props,
ref: ref => {
this.player = ref;
}
// Using built-in player controls is messing up the layout on iOS.
// So we are setting controls=false and adding a play button that
// will trigger presentFullscreenPlayer()
,
controls: false,
ignoreSilentSwitch: "ignore",
paused: !isFullScreen,
onLayout: this.onVideoLayout,
onFullscreenPlayerWillPresent: () => {
this.setState({
isFullScreen: true
});
},
onFullscreenPlayerDidDismiss: () => {
this.setState({
isFullScreen: false
});
}
}), showPlayButton &&
/*#__PURE__*/
// If we add the play icon as a subview to VideoPlayer then react-native-video decides to show control buttons
// even if we set controls={ false }, so we are adding our play button as a sibling overlay view.
(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
disabled: !isSelected,
onPress: this.onPressPlay,
style: [style, _styles.default.overlayContainer],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _styles.default.blackOverlay
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _gridiconPlay.default,
style: _styles.default.playIcon,
size: _styles.default.playIcon.size
})]
})]
});
}
}
var _default = exports.default = Video;
//# sourceMappingURL=index.native.js.map