@wordpress/block-library
Version:
Block library for the WordPress editor.
361 lines (357 loc) • 12.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
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"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* 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.onVideoContainerLayout = this.onVideoContainerLayout.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({
id,
url
}) {
const {
setAttributes
} = this.props;
setAttributes({
id,
src: url
});
}
onSelectURL(url) {
const {
createErrorNotice,
onReplace,
setAttributes
} = this.props;
if ((0, _url.isURL)(url) && /^https?:/.test((0, _url.getProtocol)(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({
src: url,
id: undefined,
poster: undefined
});
} else {
createErrorNotice((0, _i18n.__)('Invalid URL.'));
}
}
onVideoContainerLayout(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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _icons.video,
...iconStyle
});
}
render() {
const {
setAttributes,
attributes,
isSelected,
wasBlockJustInserted
} = this.props;
const {
id,
src
} = attributes;
const {
videoContainerHeight
} = this.state;
const toolbarEditButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
allowedTypes: [_blockEditor.MEDIA_TYPE_VIDEO],
isReplacingMedia: true,
onSelect: this.onSelectMediaUploadOption,
onSelectURL: this.onSelectURL,
render: ({
open,
getMediaOptions
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
children: [getMediaOptions(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
label: (0, _i18n.__)('Edit video'),
icon: _icons.replace,
onClick: open
})]
});
}
});
if (!src) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
flex: 1
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
accessible: !isSelected,
onPress: this.onVideoPressed,
disabled: !isSelected,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
flex: 1
},
children: [!this.state.isCaptionSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
children: toolbarEditButton
}), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
title: (0, _i18n.__)('Settings'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editCommonSettings.default, {
setAttributes: setAttributes,
attributes: attributes
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadProgress, {
mediaId: id,
onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
onUpdateMediaProgress: this.updateMediaProgress,
onMediaUploadStateReset: this.mediaUploadStateReset,
renderContent: ({
isUploadInProgress,
isUploadFailed,
retryMessage
}) => {
const showVideo = (0, _url.isURL)(src) && (0, _url.getProtocol)(attributes.src) !== 'file:' && !isUploadInProgress && !isUploadFailed;
const icon = this.getIcon(isUploadFailed ? ICON_TYPE.RETRY : ICON_TYPE.UPLOAD);
const styleIconContainer = isUploadFailed ? _style.default.modalIconRetry : _style.default.modalIcon;
const iconContainer = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styleIconContainer,
children: icon
});
const videoStyle = {
height: videoContainerHeight,
..._style.default.video
};
const containerStyle = showVideo && isSelected ? _style.default.containerFocused : _style.default.container;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
onLayout: this.onVideoContainerLayout,
style: containerStyle,
children: [showVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.videoContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.VideoPlayer, {
isSelected: isSelected && !this.state.isCaptionSelected,
style: videoStyle,
source: {
uri: src
},
paused: true
})
}), !showVideo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
height: videoContainerHeight,
width: '100%',
...this.props.getStylesFromColorScheme(_style.default.placeholderContainer, _style.default.placeholderContainerDark)
},
children: [videoContainerHeight > 0 && iconContainer, isUploadFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: _style.default.uploadFailedText,
children: retryMessage
})]
})]
});
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockCaption, {
accessible: true,
accessibilityLabelCreator: caption => _blockEditor.RichText.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 = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, {
clientId
}) => ({
wasBlockJustInserted: select(_blockEditor.store).wasBlockJustInserted(clientId, 'inserter_menu')
})), (0, _data.withDispatch)(dispatch => {
const {
createErrorNotice
} = dispatch(_notices.store);
return {
createErrorNotice
};
}), _compose.withPreferredColorScheme])(VideoEdit);
//# sourceMappingURL=edit.native.js.map