@wordpress/block-library/build/video/edit.native.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _reactNative = require("react-native");

var _lodash = require("lodash");

var _reactNativeBridge = require("@wordpress/react-native-bridge");

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _blockEditor = require("@wordpress/block-editor");

var _i18n = require("@wordpress/i18n");

var _url = require("@wordpress/url");

var _hooks = require("@wordpress/hooks");

var _icons = require("@wordpress/icons");

var _data = require("@wordpress/data");

var _notices = require("@wordpress/notices");

var _util = require("../embed/util");

var _style = _interopRequireDefault(require("./style.scss"));

var _iconRetry = _interopRequireDefault(require("./icon-retry"));

var _editCommonSettings = _interopRequireDefault(require("./edit-common-settings"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ICON_TYPE = {
  PLACEHOLDER: 'placeholder',
  RETRY: 'retry',
  UPLOAD: 'upload'
};

class VideoEdit extends _element.Component {
  constructor(props) {
    super(props);
    this.state = {
      isCaptionSelected: false,
      videoContainerHeight: 0
    };
    this.mediaUploadStateReset = this.mediaUploadStateReset.bind(this);
    this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(this);
    this.onSelectURL = this.onSelectURL.bind(this);
    this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(this);
    this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(this);
    this.updateMediaProgress = this.updateMediaProgress.bind(this);
    this.onVideoPressed = this.onVideoPressed.bind(this);
    this.onVideoContanerLayout = this.onVideoContanerLayout.bind(this);
    this.onFocusCaption = this.onFocusCaption.bind(this);
  }

  componentDidMount() {
    const {
      attributes
    } = this.props;

    if (attributes.id && (0, _url.getProtocol)(attributes.src) === 'file:') {
      (0, _reactNativeBridge.mediaUploadSync)();
    }
  }

  componentWillUnmount() {
    // This action will only exist if the user pressed the trash button on the block holder.
    if ((0, _hooks.hasAction)('blocks.onRemoveBlockCheckUpload') && this.state.isUploadInProgress) {
      (0, _hooks.doAction)('blocks.onRemoveBlockCheckUpload', this.props.attributes.id);
    }
  }

  static getDerivedStateFromProps(props, state) {
    // Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
    // is updated immediately any time the isSelected prop becomes false.
    return {
      isCaptionSelected: props.isSelected && state.isCaptionSelected
    };
  }

  onVideoPressed() {
    const {
      attributes
    } = this.props;

    if (this.state.isUploadInProgress) {
      (0, _reactNativeBridge.requestImageUploadCancelDialog)(attributes.id);
    } else if (attributes.id && (0, _url.getProtocol)(attributes.src) === 'file:') {
      (0, _reactNativeBridge.requestImageFailedRetryDialog)(attributes.id);
    }

    this.setState({
      isCaptionSelected: false
    });
  }

  onFocusCaption() {
    if (!this.state.isCaptionSelected) {
      this.setState({
        isCaptionSelected: true
      });
    }
  }

  updateMediaProgress(payload) {
    const {
      setAttributes
    } = this.props;

    if (payload.mediaUrl) {
      setAttributes({
        url: payload.mediaUrl
      });
    }

    if (!this.state.isUploadInProgress) {
      this.setState({
        isUploadInProgress: true
      });
    }
  }

  finishMediaUploadWithSuccess(payload) {
    const {
      setAttributes
    } = this.props;
    setAttributes({
      src: payload.mediaUrl,
      id: payload.mediaServerId
    });
    this.setState({
      isUploadInProgress: false
    });
  }

  finishMediaUploadWithFailure(payload) {
    const {
      setAttributes
    } = this.props;
    setAttributes({
      id: payload.mediaId
    });
    this.setState({
      isUploadInProgress: false
    });
  }

  mediaUploadStateReset() {
    const {
      setAttributes
    } = this.props;
    setAttributes({
      id: null,
      src: null
    });
    this.setState({
      isUploadInProgress: false
    });
  }

  onSelectMediaUploadOption(_ref) {
    let {
      id,
      url
    } = _ref;
    const {
      setAttributes
    } = this.props;
    setAttributes({
      id,
      src: url
    });
  }

  onSelectURL(url) {
    const {
      createErrorNotice,
      onReplace,
      setAttributes
    } = this.props;

    if ((0, _url.isURL)(url)) {
      // Check if there's an embed block that handles this URL.
      const embedBlock = (0, _util.createUpgradedEmbedBlock)({
        attributes: {
          url
        }
      });

      if (undefined !== embedBlock) {
        onReplace(embedBlock);
        return;
      }

      setAttributes({
        id: url,
        src: url
      });
    } else {
      createErrorNotice((0, _i18n.__)('Invalid URL.'));
    }
  }

  onVideoContanerLayout(event) {
    const {
      width
    } = event.nativeEvent.layout;
    const height = width / _blockEditor.VIDEO_ASPECT_RATIO;

    if (height !== this.state.videoContainerHeight) {
      this.setState({
        videoContainerHeight: height
      });
    }
  }

  getIcon(iconType) {
    let iconStyle;

    switch (iconType) {
      case ICON_TYPE.RETRY:
        return (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
          icon: _iconRetry.default
        }, _style.default.icon));

      case ICON_TYPE.PLACEHOLDER:
        iconStyle = this.props.getStylesFromColorScheme(_style.default.icon, _style.default.iconDark);
        break;

      case ICON_TYPE.UPLOAD:
        iconStyle = this.props.getStylesFromColorScheme(_style.default.iconUploading, _style.default.iconUploadingDark);
        break;
    }

    return (0, _element.createElement)(_components.Icon, (0, _extends2.default)({
      icon: _icons.video
    }, iconStyle));
  }

  render() {
    const {
      setAttributes,
      attributes,
      isSelected,
      wasBlockJustInserted
    } = this.props;
    const {
      id,
      src
    } = attributes;
    const {
      videoContainerHeight
    } = this.state;
    const toolbarEditButton = (0, _element.createElement)(_blockEditor.MediaUpload, {
      allowedTypes: [_blockEditor.MEDIA_TYPE_VIDEO],
      isReplacingMedia: true,
      onSelect: this.onSelectMediaUploadOption,
      onSelectURL: this.onSelectURL,
      render: _ref2 => {
        let {
          open,
          getMediaOptions
        } = _ref2;
        return (0, _element.createElement)(_components.ToolbarGroup, null, getMediaOptions(), (0, _element.createElement)(_components.ToolbarButton, {
          label: (0, _i18n.__)('Edit video'),
          icon: _icons.replace,
          onClick: open
        }));
      }
    });

    if (!id) {
      return (0, _element.createElement)(_reactNative.View, {
        style: {
          flex: 1
        }
      }, (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
        allowedTypes: [_blockEditor.MEDIA_TYPE_VIDEO],
        onSelect: this.onSelectMediaUploadOption,
        onSelectURL: this.onSelectURL,
        icon: this.getIcon(ICON_TYPE.PLACEHOLDER),
        onFocus: this.props.onFocus,
        autoOpenMediaUpload: isSelected && wasBlockJustInserted
      }));
    }

    return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
      accessible: !isSelected,
      onPress: this.onVideoPressed,
      disabled: !isSelected
    }, (0, _element.createElement)(_reactNative.View, {
      style: {
        flex: 1
      }
    }, !this.state.isCaptionSelected && (0, _element.createElement)(_blockEditor.BlockControls, null, toolbarEditButton), isSelected && (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
      title: (0, _i18n.__)('Settings')
    }, (0, _element.createElement)(_editCommonSettings.default, {
      setAttributes: setAttributes,
      attributes: attributes
    }))), (0, _element.createElement)(_blockEditor.MediaUploadProgress, {
      mediaId: id,
      onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
      onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
      onUpdateMediaProgress: this.updateMediaProgress,
      onMediaUploadStateReset: this.mediaUploadStateReset,
      renderContent: _ref3 => {
        let {
          isUploadInProgress,
          isUploadFailed,
          retryMessage
        } = _ref3;
        const showVideo = (0, _url.isURL)(src) && !isUploadInProgress && !isUploadFailed;
        const icon = this.getIcon(isUploadFailed ? ICON_TYPE.RETRY : ICON_TYPE.UPLOAD);
        const styleIconContainer = isUploadFailed ? _style.default.modalIconRetry : _style.default.modalIcon;
        const iconContainer = (0, _element.createElement)(_reactNative.View, {
          style: styleIconContainer
        }, icon);
        const videoStyle = {
          height: videoContainerHeight,
          ..._style.default.video
        };
        const containerStyle = showVideo && isSelected ? _style.default.containerFocused : _style.default.container;
        return (0, _element.createElement)(_reactNative.View, {
          onLayout: this.onVideoContanerLayout,
          style: containerStyle
        }, showVideo && (0, _element.createElement)(_reactNative.View, {
          style: _style.default.videoContainer
        }, (0, _element.createElement)(_blockEditor.VideoPlayer, {
          isSelected: isSelected && !this.state.isCaptionSelected,
          style: videoStyle,
          source: {
            uri: src
          },
          paused: true
        })), !showVideo && (0, _element.createElement)(_reactNative.View, {
          style: {
            height: videoContainerHeight,
            width: '100%',
            ...this.props.getStylesFromColorScheme(_style.default.placeholderContainer, _style.default.placeholderContainerDark)
          }
        }, videoContainerHeight > 0 && iconContainer, isUploadFailed && (0, _element.createElement)(_reactNative.Text, {
          style: _style.default.uploadFailedText
        }, retryMessage)));
      }
    }), (0, _element.createElement)(_blockEditor.BlockCaption, {
      accessible: true,
      accessibilityLabelCreator: caption => (0, _lodash.isEmpty)(caption) ?
      /* translators: accessibility text. Empty video caption. */
      (0, _i18n.__)('Video caption. Empty') : (0, _i18n.sprintf)(
      /* translators: accessibility text. %s: video caption. */
      (0, _i18n.__)('Video caption. %s'), caption),
      clientId: this.props.clientId,
      isSelected: this.state.isCaptionSelected,
      onFocus: this.onFocusCaption,
      onBlur: this.props.onBlur // Always assign onBlur as props.
      ,
      insertBlocksAfter: this.props.insertBlocksAfter
    })));
  }

}

var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref4) => {
  let {
    clientId
  } = _ref4;
  return {
    wasBlockJustInserted: select(_blockEditor.store).wasBlockJustInserted(clientId, 'inserter_menu')
  };
}), (0, _data.withDispatch)(dispatch => {
  const {
    createErrorNotice
  } = dispatch(_notices.store);
  return {
    createErrorNotice
  };
}), _compose.withPreferredColorScheme])(VideoEdit);

exports.default = _default;
//# sourceMappingURL=edit.native.js.map