Video Editor: Add new video-editor block to enable selecting a custom video poster

assets/stylesheets/_components.scss

@@ -68,6 +68,7 @@
 @import 'blocks/taxonomy-manager/style';
 @import 'blocks/term-form-dialog/style';
 @import 'blocks/term-tree-selector/style';
+@import 'blocks/video-editor/style';
 @import 'components/accordion/style';
 @import 'components/animate/style';
 @import 'components/async-load/style';

client/blocks/video-editor/README.md

@@ -0,0 +1,68 @@
+# Video Editor
+
+`VideoEditor` is a block component which enables the selection of a frame or the uploading of a custom image
+to serve as the video poster.
+
+It requires a `media` object to work properly.
+
+## Props
+
+### `className`
+
+<table>
+	<tr><th>Type</th><td>string</td></tr>
+	<tr><th>Required</th><td>No</td></tr>
+</table>
+
+String of classes (class names) appended to the video editor wrapper (`.video-editor [className]`).
+
+### `media`
+
+<table>
+	<tr><th>Type</th><td>Object</td></tr>
+	<tr><th>Required</th><td>Yes</td></tr>
+</table>
+
+This object needs to contain the following property:
+
+`media.videopress_guid` `{string}`: The unique identifier of the video (e.g. 'kUJmAcSf').
+
+It can also contain these optional properties (with defaults set by VideoPress):
+- `media.width` `{number}`: The width of the video. Defaults to `854`.
+- `media.height` `{number}`: The height of the video. Defaults to `480`.
+
+### `onCancel`
+
+<table>
+	<tr><th>Type</th><td>Function</td></tr>
+	<tr><th>Required</th><td>No</td></tr>
+</table>
+
+A function which will get called on clicking the "Cancel" video editor button. If this prop is omitted, the "Cancel"
+button won't be rendered.
+
+### `onUpdatePoster`
+
+<table>
+	<tr><th>Type</th><td>Function</td></tr>
+	<tr><th>Required</th><td>No</td></tr>
+</table>
+
+A function which will get called after selecting a frame or uploading a custom image.
+It receives one argument:
+- the props of the video editor which include the poster URL and the ID of the media item.
+
+## Example
+
+```js
+import VideoEditor from 'blocks/video-editor';
+
+render() {
+	return (
+		<VideoEditor
+			media={ { videopress_guid: 'kUJmAcSf' } }
+		/>
+	);
+}
+``
+

client/blocks/video-editor/docs/example.jsx

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import React, { Component } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import VideoEditor from '../';
+
+class VideoEditorExample extends Component {
+	constructor() {
+		super();
+
+		this.state = {
+			media: {
+				videopress_guid: 'vLAM7Mk6'
+			}
+		};
+	}
+
+	handleUpdatePoster = ( { posterUrl } ) => {
+		this.setState( { posterUrl } );
+	}
+
+	render() {
+		return (
+			<div>
+				<div style={ { height: '50vh' } }>
+					<VideoEditor
+						media={ this.state.media }
+						onUpdatePoster={ this.handleUpdatePoster }
+					/>
+					<div style={ { fontSize: '10px', textAlign: 'center' } }>
+						Free B-Roll provided by <a href="http://Videezy.com">Videezy.com</a>
+					</div>
+				</div>
+
+				<div style={ {
+					textAlign: 'center',
+					margin: '20px auto 0',
+					width: '50%'
+				} }>
+					<h4>Changes to the poster above are shown below</h4>
+					{ this.state.posterUrl &&
+						<img src={ this.state.posterUrl } />
+					}
+				</div>
+			</div>
+		);
+	}
+}
+
+VideoEditorExample.displayName = 'VideoEditor';
+
+export default VideoEditorExample;

client/blocks/video-editor/index.jsx

@@ -0,0 +1,226 @@
+/**
+ * External dependencies
+ */
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { get, noop } from 'lodash';
+import { localize } from 'i18n-calypso';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import ProgressBar from 'components/progress-bar';
+import Notice from 'components/notice';
+import DetailPreviewVideo from 'post-editor/media-modal/detail/detail-preview-video';
+import VideoEditorControls from './video-editor-controls';
+import { updatePoster } from 'state/ui/editor/video-editor/actions';
+import {
+	getPosterUploadProgress,
+	getPosterUrl,
+	shouldShowVideoEditorError,
+} from 'state/selectors';
+
+class VideoEditor extends Component {
+	static propTypes = {
+		className: PropTypes.string,
+		media: PropTypes.object.isRequired,
+		onCancel: PropTypes.func,
+		onUpdatePoster: PropTypes.func,
+
+		// Connected props
+		posterUrl: PropTypes.string,
+		shouldShowError: PropTypes.bool,
+		uploadProgress: PropTypes.number,
+	};
+
+	static defaultProps = {
+		onCancel: noop,
+		onUpdatePoster: noop,
+	};
+
+	state = {
+		error: false,
+		isLoading: true,
+		isSelectingFrame: false,
+		pauseVideo: false,
+	};
+
+	componentWillReceiveProps( nextProps ) {
+		if ( nextProps.shouldShowError && ! this.props.shouldShowError ) {
+			this.setState( {
+				error: true,
+				pauseVideo: false
+			} );
+
+			return;
+		}
+
+		if ( this.props.posterUrl !== nextProps.posterUrl ) {
+			this.props.onUpdatePoster( this.getVideoEditorProps( nextProps.posterUrl ) );
+		}
+	}
+
+	selectFrame = () => {
+		const { isLoading } = this.state;
+
+		if ( isLoading ) {
+			this.setState( { error: true } );
+			return;
+		}
+
+		this.setState( {
+			error: false,
+			isSelectingFrame: true,
+			pauseVideo: true,
+		} );
+	}
+
+	/**
+   * Updates the poster by selecting a particular frame of the video.
+   * @param {number} currentTime - Time at which to capture the frame
+   */
+	updatePoster = ( currentTime ) => {
+		if ( ! this.state.isSelectingFrame ) {
+			return;
+		}
+
+		const { media } = this.props;
+		const guid = get( media, 'videopress_guid', null );
+
+		if ( guid ) {
+			this.props.updatePoster( guid, { atTime: currentTime } );
+		}
+	}
+
+	setError = () => {
+		this.setState( { error: true } );
+	}
+
+	setIsLoading = () => {
+		this.setState( { isLoading: false } );
+	}
+
+	pauseVideo = () => {
+		this.setState( {
+			error: false,
+			isSelectingFrame: false,
+			pauseVideo: true,
+		} );
+	}
+
+	/**
+   * Uploads an image to use as the poster for the video.
+   * @param {object} file - Uploaded image
+   */
+	uploadImage = ( file ) => {
+		if ( ! file ) {
+			return;
+		}
+
+		const { media } = this.props;
+		const guid = get( media, 'videopress_guid', null );
+
+		if ( guid ) {
+			this.props.updatePoster( guid, { file } );
+		}
+	}
+
+	getVideoEditorProps( posterUrl ) {
+		const { media } = this.props;
+		const videoProperties = { posterUrl };
+
+		if ( media && media.ID ) {
+			videoProperties.ID = media.ID;
+		}
+
+		return videoProperties;
+	}
+
+	renderError() {
+		const {
+			onCancel,
+			translate,
+		} = this.props;
+
+		return (
+			<Notice
+				status="is-error"
+				showDismiss={ true }
+				text={ translate( 'We are unable to edit this video.' ) }
+				isCompact={ false }
+				onDismissClick={ onCancel } />
+		);
+	}
+
+	render() {
+		const {
+			className,
+			media,
+			onCancel,
+			uploadProgress,
+			translate,
+		} = this.props;
+		const {
+			error,
+			isLoading,
+			isSelectingFrame,
+			pauseVideo,
+		} = this.state;
+
+		const classes = classNames(
+			'video-editor',
+			className,
+		);
+
+		return (
+			<div className={ classes }>
+			{ error && this.renderError() }
+
+				<figure>
+					<div className="video-editor__content">
+						<div className="video-editor__preview-wrapper">
+							<DetailPreviewVideo
+								className="video-editor__preview"
+								isPlaying={ ! pauseVideo }
+								item={ media }
+								onPause={ this.updatePoster }
+								onScriptLoadError={ this.setError }
+								onVideoLoaded={ this.setIsLoading }
+							/>
+						</div>
+						{ uploadProgress && ! error && ! isSelectingFrame &&
+							<ProgressBar
+								className="video-editor__progress-bar"
+								isPulsing={ true }
+								total={ 100 }
+								value={ uploadProgress } />
+						}
+						<span className="video-editor__text">
+							{ translate( 'Select a frame to use as the thumbnail image or upload your own.' ) }
+						</span>
+						<VideoEditorControls
+							isPosterUpdating={ uploadProgress && ! error }
+							isVideoLoading={ isLoading }
+							onCancel={ onCancel }
+							onSelectFrame={ this.selectFrame }
+							onUploadImage={ this.uploadImage }
+							onUploadImageClick={ this.pauseVideo }
+						/>
+					</div>
+				</figure>
+			</div>
+		);
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			posterUrl: getPosterUrl( state ),
+			shouldShowError: shouldShowVideoEditorError( state ),
+			uploadProgress: getPosterUploadProgress( state ),
+		};
+	},
+	{ updatePoster }
+)( localize( VideoEditor ) );