@wordpress/block-library
Version:
Block library for the WordPress editor.
342 lines (337 loc) • 11.2 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 _reactNativeBridge = require("@wordpress/react-native-bridge");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _url = require("@wordpress/url");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _style = _interopRequireDefault(require("./style.scss"));
var _iconRetry = _interopRequireDefault(require("./icon-retry"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Constants
*/const ALLOWED_MEDIA_TYPES = [_blockEditor.MEDIA_TYPE_IMAGE, _blockEditor.MEDIA_TYPE_VIDEO];
const ICON_TYPE = {
PLACEHOLDER: 'placeholder',
RETRY: 'retry'
};
class MediaContainer extends _element.Component {
constructor() {
super(...arguments);
this.updateMediaProgress = this.updateMediaProgress.bind(this);
this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(this);
this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(this);
this.mediaUploadStateReset = this.mediaUploadStateReset.bind(this);
this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(this);
this.onMediaPressed = this.onMediaPressed.bind(this);
this.state = {
isUploadInProgress: false
};
}
componentDidMount() {
const {
mediaId,
mediaUrl
} = this.props;
// Make sure we mark any temporary images as failed if they failed while
// the editor wasn't open.
if (mediaId && mediaUrl && (0, _url.getProtocol)(mediaUrl) === 'file:') {
(0, _reactNativeBridge.mediaUploadSync)();
}
}
onSelectMediaUploadOption(params) {
const {
id,
url,
type
} = params;
const {
onSelectMedia
} = this.props;
onSelectMedia({
media_type: type,
id,
url
});
}
onMediaPressed() {
const {
isUploadInProgress
} = this.state;
const {
mediaId,
mediaUrl,
mediaType,
isMediaSelected,
onMediaSelected
} = this.props;
if (isUploadInProgress) {
(0, _reactNativeBridge.requestImageUploadCancelDialog)(mediaId);
} else if (mediaId && (0, _url.getProtocol)(mediaUrl) === 'file:') {
(0, _reactNativeBridge.requestImageFailedRetryDialog)(mediaId);
} else if (mediaType === _blockEditor.MEDIA_TYPE_IMAGE && isMediaSelected) {
(0, _reactNativeBridge.requestImageFullscreenPreview)(mediaUrl);
} else if (mediaType === _blockEditor.MEDIA_TYPE_IMAGE) {
onMediaSelected();
}
}
getIcon(iconType) {
const {
mediaType,
getStylesFromColorScheme
} = this.props;
let iconStyle;
switch (iconType) {
case ICON_TYPE.RETRY:
iconStyle = mediaType === _blockEditor.MEDIA_TYPE_IMAGE ? _style.default.iconRetry : getStylesFromColorScheme(_style.default.iconRetryVideo, _style.default.iconRetryVideoDark);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _iconRetry.default,
...iconStyle
});
case ICON_TYPE.PLACEHOLDER:
iconStyle = getStylesFromColorScheme(_style.default.iconPlaceholder, _style.default.iconPlaceholderDark);
break;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
icon: _icons.media,
...iconStyle
});
}
updateMediaProgress(payload) {
const {
isUploadInProgress
} = this.state;
const {
mediaUrl,
state
} = payload;
const {
mediaType,
onMediaThumbnailUpdate
} = this.props;
if (!isUploadInProgress) {
this.setState({
isUploadInProgress: true
});
}
if (isUploadInProgress && mediaType === _blockEditor.MEDIA_TYPE_IMAGE && mediaUrl && !state) {
onMediaThumbnailUpdate(mediaUrl);
}
}
finishMediaUploadWithSuccess(payload) {
const {
onMediaUpdate
} = this.props;
onMediaUpdate({
id: payload.mediaServerId,
url: payload.mediaUrl
});
this.setState({
isUploadInProgress: false
});
}
finishMediaUploadWithFailure() {
this.setState({
isUploadInProgress: false
});
}
mediaUploadStateReset() {
const {
onMediaUpdate
} = this.props;
onMediaUpdate({
id: null,
url: null
});
this.setState({
isUploadInProgress: false
});
}
renderImage(params, openMediaOptions) {
const {
isUploadInProgress
} = this.state;
const {
alignmentStyles,
focalPoint,
imageFill,
isMediaSelected,
isSelected,
mediaAlt,
mediaUrl,
mediaWidth,
shouldStack
} = this.props;
const {
isUploadFailed,
isUploadPaused,
retryMessage
} = params;
const focalPointValues = !focalPoint ? _components.IMAGE_DEFAULT_FOCAL_POINT : focalPoint;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [imageFill && _style.default.imageWithFocalPoint, imageFill && shouldStack && {
height: _style.default.imageFill.height
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
accessible: !isSelected,
onPress: this.onMediaPressed,
disabled: !isSelected,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [imageFill && _style.default.imageCropped, _style.default.mediaImageContainer, !isUploadInProgress && alignmentStyles],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
align: "center",
alt: mediaAlt,
focalPoint: imageFill && focalPointValues,
isSelected: isMediaSelected,
isUploadFailed: isUploadFailed,
isUploadPaused: isUploadPaused,
isUploadInProgress: isUploadInProgress,
onSelectMediaUploadOption: this.onSelectMediaUploadOption,
openMediaOptions: openMediaOptions,
retryMessage: retryMessage,
url: mediaUrl,
width: !isUploadInProgress && mediaWidth
})
})
})
});
}
renderVideo(params) {
const {
alignmentStyles,
mediaUrl,
isSelected,
getStylesFromColorScheme
} = this.props;
const {
isUploadInProgress
} = this.state;
const {
isUploadFailed,
retryMessage
} = params;
const showVideo = (0, _url.isURL)(mediaUrl) && !isUploadInProgress && !isUploadFailed;
const videoPlaceholderStyles = getStylesFromColorScheme(_style.default.videoPlaceholder, _style.default.videoPlaceholderDark);
const retryVideoTextStyles = [_style.default.uploadFailedText, getStylesFromColorScheme(_style.default.uploadFailedTextVideo, _style.default.uploadFailedTextVideoDark)];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.mediaVideo,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
accessible: !isSelected,
onPress: this.onMediaPressed,
disabled: !isSelected,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [_style.default.videoContainer, alignmentStyles],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [_style.default.videoContent, {
aspectRatio: _blockEditor.VIDEO_ASPECT_RATIO
}],
children: [showVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.videoPlayer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.VideoPlayer, {
isSelected: isSelected,
style: _style.default.video,
source: {
uri: mediaUrl
},
paused: true
})
}), !showVideo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: videoPlaceholderStyles,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.modalIcon,
children: isUploadFailed ? this.getIcon(ICON_TYPE.RETRY) : this.getIcon(ICON_TYPE.PLACEHOLDER)
}), isUploadFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: retryVideoTextStyles,
children: retryMessage
})]
})]
})
})
})
});
}
renderContent(params, openMediaOptions) {
const {
mediaType
} = this.props;
let mediaElement = null;
switch (mediaType) {
case _blockEditor.MEDIA_TYPE_IMAGE:
mediaElement = this.renderImage(params, openMediaOptions);
break;
case _blockEditor.MEDIA_TYPE_VIDEO:
mediaElement = this.renderVideo(params);
break;
}
return mediaElement;
}
renderPlaceholder() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
icon: this.getIcon(ICON_TYPE.PLACEHOLDER),
labels: {
title: (0, _i18n.__)('Media area')
},
onSelect: this.onSelectMediaUploadOption,
allowedTypes: ALLOWED_MEDIA_TYPES,
onFocus: this.props.onFocus,
className: "no-block-outline"
});
}
render() {
const {
mediaUrl,
mediaId,
mediaType,
onSetOpenPickerRef
} = this.props;
const coverUrl = mediaType === _blockEditor.MEDIA_TYPE_IMAGE ? mediaUrl : null;
if (mediaUrl) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
isReplacingMedia: true,
onSelect: this.onSelectMediaUploadOption,
allowedTypes: ALLOWED_MEDIA_TYPES,
value: mediaId,
render: ({
open,
getMediaOptions
}) => {
onSetOpenPickerRef(open);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [getMediaOptions(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadProgress, {
enablePausedUploads: mediaType === _blockEditor.MEDIA_TYPE_IMAGE,
coverUrl: coverUrl,
mediaId: mediaId,
onUpdateMediaProgress: this.updateMediaProgress,
onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
onMediaUploadStateReset: this.mediaUploadStateReset,
renderContent: params => {
return this.renderContent(params, open);
}
})]
});
}
});
}
return this.renderPlaceholder();
}
}
var _default = exports.default = (0, _compose.compose)([_compose.withPreferredColorScheme])(MediaContainer);
//# sourceMappingURL=media-container.native.js.map