@wordpress/block-editor/build-module/components/video-player/index.native.js

Generic block editor.

/**
 * WordPress dependencies
 */
import { Component } from '@wordpress/element';
import { Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * External dependencies
 */
import { View, TouchableOpacity, Platform, Linking, Alert } from 'react-native';
import { default as VideoPlayer } from 'react-native-video';

/**
 * Internal dependencies
 */
import styles from './styles.scss';
import PlayIcon from './gridicon-play';

// Default Video ratio 16:9
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const VIDEO_ASPECT_RATIO = 16 / 9;
class Video extends Component {
  constructor() {
    super(...arguments);
    this.isIOS = 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) {
    Linking.canOpenURL(url).then(supported => {
      if (!supported) {
        Alert.alert(__('Problem opening the video'), __('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 Linking.openURL(url);
      }
    }).catch(err => {
      Alert.alert(__('Problem opening the video'), __('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__*/_jsxs(View, {
      style: styles.videoContainer,
      children: [/*#__PURE__*/_jsx(VideoPlayer, {
        ...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.
      _jsxs(TouchableOpacity, {
        disabled: !isSelected,
        onPress: this.onPressPlay,
        style: [style, styles.overlayContainer],
        children: [/*#__PURE__*/_jsx(View, {
          style: styles.blackOverlay
        }), /*#__PURE__*/_jsx(Icon, {
          icon: PlayIcon,
          style: styles.playIcon,
          size: styles.playIcon.size
        })]
      })]
    });
  }
}
export default Video;
//# sourceMappingURL=index.native.js.map