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

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { Component } from '@gechiui/element';
import { Icon } from '@gechiui/components';
import { __ } from '@gechiui/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

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 createElement(View, {
      style: styles.videoContainer
    }, createElement(VideoPlayer, _extends({}, 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 && // 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.
    createElement(TouchableOpacity, {
      disabled: !isSelected,
      onPress: this.onPressPlay,
      style: [style, styles.overlayContainer]
    }, createElement(View, {
      style: styles.blackOverlay
    }), createElement(Icon, {
      icon: PlayIcon,
      style: styles.playIcon,
      size: styles.playIcon.size
    })));
  }

}

export default Video;
//# sourceMappingURL=index.native.js.map