Video Editor: Add VideoPress poster picker

client/my-sites/media/main.jsx

@@ -13,6 +13,7 @@ import SidebarNavigation from 'my-sites/sidebar-navigation';
 import Dialog from 'components/dialog';
 import { EditorMediaModalDetail } from 'post-editor/media-modal/detail';
 import ImageEditor from 'blocks/image-editor';
+import VideoEditor from 'blocks/video-editor';
 import MediaActions from 'lib/media/actions';
 import MediaUtils from 'lib/media/utils';
 import MediaLibrarySelectedData from 'components/data/media-library-selected-data';
@@ -28,9 +29,10 @@ class Media extends Component {
 	};
 
 	state = {
-		editedItem: null,
 		currentDetail: null,
-		selectedImages: [],
+		editedImageItem: null,
+		editedVideoItem: null,
+		selectedItems: [],
 	};
 
 	componentDidMount() {
@@ -56,7 +58,7 @@ class Media extends Component {
 	openDetailsModalForASingleImage = ( image ) => {
 		this.setState( {
 			currentDetail: 0,
-			selectedImages: [ image ],
+			selectedItems: [ image ],
 		} );
 	};
 
@@ -66,21 +68,25 @@ class Media extends Component {
 
 		this.setState( {
 			currentDetail: 0,
-			selectedImages: selected
+			selectedItems: selected
 		} );
 	};
 
 	closeDetailsModal = () => {
-		this.setState( { editedItem: null, currentDetail: null, selectedImages: [] } );
+		this.setState( { editedImageItem: null, editedVideoItem: null, currentDetail: null, selectedItems: [] } );
 	};
 
 	editImage = () => {
-		this.setState( { currentDetail: null, editedItem: this.state.currentDetail } );
+		this.setState( { currentDetail: null, editedImageItem: this.state.currentDetail } );
+	};
+
+	editVideo = () => {
+		this.setState( { currentDetail: null, editedVideoItem: this.state.currentDetail } );
 	};
 
 	onImageEditorCancel = ( imageEditorProps ) => {
 		const {	resetAllImageEditorState } = imageEditorProps;
-		this.setState( { currentDetail: this.state.editedItem, editedItem: null } );
+		this.setState( { currentDetail: this.state.editedImageItem, editedImageItem: null } );
 
 		resetAllImageEditorState();
 	};
@@ -112,12 +118,12 @@ class Media extends Component {
 
 		MediaActions.update( site.ID, item, true );
 		resetAllImageEditorState();
-		this.setState( { currentDetail: null, editedItem: null, selectedImages: [] } );
+		this.setState( { currentDetail: null, editedImageItem: null, selectedItems: [] } );
 	};
 
 	getModalButtons() {
-		// do not render buttons if the media image editor is opened
-		if ( this.state.editedItem !== null ) {
+		// do not render buttons if the media image or video editor is opened
+		if ( ( this.state.editedImageItem !== null ) || ( this.state.editedVideoItem !== null ) ) {
 			return null;
 		}
 
@@ -142,12 +148,36 @@ class Media extends Component {
 		];
 	}
 
+	onVideoEditorCancel = () => {
+		this.setState( { currentDetail: this.state.editedVideoItem, editedVideoItem: null } );
+	};
+
+	onVideoEditorUpdatePoster = ( { ID, posterUrl } ) => {
+		const site = this.props.selectedSite;
+
+		// Photon does not support URLs with a querystring component.
+		const urlBeforeQuery = ( posterUrl || '' ).split( '?' )[ 0 ];
+
+		if ( site ) {
+			MediaActions.edit( site.ID, {
+				ID,
+				thumbnails: {
+					fmt_hd: urlBeforeQuery,
+					fmt_dvd: urlBeforeQuery,
+					fmt_std: urlBeforeQuery,
+				}
+			} );
+		}
+
+		this.setState( { currentDetail: null, editedVideoItem: null, selectedItems: [] } );
+	};
+
 	restoreOriginalMedia = ( siteId, item ) => {
 		if ( ! siteId || ! item ) {
 			return;
 		}
 		MediaActions.update( siteId, { ID: item.ID, media_url: item.guid }, true );
-		this.setState( { currentDetail: null, editedItem: null, selectedImages: [] } );
+		this.setState( { currentDetail: null, editedImageItem: null, selectedItems: [] } );
 	};
 
 	setDetailSelectedIndex = ( index ) => {
@@ -198,8 +228,8 @@ class Media extends Component {
 			return;
 		}
 
-		const selected = this.state.selectedImages && this.state.selectedImages.length
-			? this.state.selectedImages
+		const selected = this.state.selectedItems && this.state.selectedItems.length
+			? this.state.selectedItems
 			: MediaLibrarySelectedStore.getAll( site.ID );
 
 		MediaActions.delete( site.ID, selected );
@@ -210,7 +240,7 @@ class Media extends Component {
 		return (
 			<div ref="container" className="main main-column media" role="main">
 				<SidebarNavigation />
-				{ ( this.state.editedItem !== null || this.state.currentDetail !== null ) &&
+				{ ( this.state.editedImageItem !== null || this.state.editedVideoItem !== null || this.state.currentDetail !== null ) &&
 					<Dialog
 						isVisible={ true }
 						additionalClassNames="editor-media-modal media__item-dialog"
@@ -220,22 +250,30 @@ class Media extends Component {
 					{ this.state.currentDetail !== null &&
 						<EditorMediaModalDetail
 							site={ site }
-							items={ this.state.selectedImages }
+							items={ this.state.selectedItems }
 							selectedIndex={ this.state.currentDetail }
 							onReturnToList={ this.closeDetailsModal }
-							onEditItem={ this.editImage }
+							onEditImageItem={ this.editImage }
+							onEditVideoItem={ this.editVideo }
 							onRestoreItem={ this.restoreOriginalMedia }
 							onSelectedIndexChange={ this.setDetailSelectedIndex }
 						/>
 					}
-					{ this.state.editedItem !== null &&
+					{ this.state.editedImageItem !== null &&
 						<ImageEditor
 							siteId={ site && site.ID }
-							media={ this.state.selectedImages[ this.state.editedItem ] }
+							media={ this.state.selectedItems[ this.state.editedImageItem ] }
 							onDone={ this.onImageEditorDone }
 							onCancel={ this.onImageEditorCancel }
 						/>
 					}
+					{ this.state.editedVideoItem !== null &&
+						<VideoEditor
+							media={ this.state.selectedItems[ this.state.editedVideoItem ] }
+							onCancel={ this.onVideoEditorCancel }
+							onUpdatePoster={ this.onVideoEditorUpdatePoster }
+						/>
+					}
 					</Dialog>
 				}
 				{ site && site.ID && (

client/post-editor/media-modal/detail/detail-item.jsx

@@ -2,8 +2,9 @@
  * External dependencies
  */
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
 import classNames from 'classnames';
-import { noop } from 'lodash';
+import { flowRight, includes, noop } from 'lodash';
 import { localize } from 'i18n-calypso';
 import url from 'url';
 import Gridicon from 'gridicons';
@@ -19,18 +20,21 @@ import EditorMediaModalDetailPreviewVideo from './detail-preview-video';
 import EditorMediaModalDetailPreviewAudio from './detail-preview-audio';
 import EditorMediaModalDetailPreviewDocument from './detail-preview-document';
 import Button from 'components/button';
+import QueryJetpackModules from 'components/data/query-jetpack-modules';
 import { userCan } from 'lib/site/utils';
 import versionCompare from 'lib/version-compare';
 import MediaUtils, { isItemBeingUploaded } from 'lib/media/utils';
 import config from 'config';
+import { getSelectedSiteId } from 'state/ui/selectors';
+import { getSiteOption, isJetpackModuleActive, isJetpackSite } from 'state/sites/selectors';
 
 /**
  * This function return true if the image editor can be
  * enabled/shown
  *
  * @param  {object} item - media item
  * @param  {object} site - current site
- * @return {boolean} `true` is the image-editor can be enabled.
+ * @return {boolean} `true` if the image-editor can be enabled.
  */
 const enableImageEditing = ( item, site ) => {
 	// do not allow if, for some reason, there isn't a valid item yet
@@ -80,6 +84,41 @@ class EditorMediaModalDetailItem extends Component {
 		onRestore: noop,
 	};
 
+	/**
+	 * This function returns true if the video editor can be enabled/shown.
+	 *
+	 * @param  {Object}  item Media item
+	 * @return {Boolean} Whether the video editor can be enabled
+	 */
+	enableVideoEditing( item ) {
+		if ( ! config.isEnabled( 'post-editor/video-editor' ) ) {
+			return false;
+		}
+
+		const {
+			isJetpack,
+			isVideoPressEnabled,
+			isVideoPressModuleActive,
+		} = this.props;
+
+		// Not a VideoPress video
+		if ( ! MediaUtils.isVideoPressItem( item ) ) {
+			return false;
+		}
+
+		// Jetpack and VideoPress disabled
+		if ( isJetpack ) {
+			if ( ! isVideoPressModuleActive ) {
+				return false;
+			}
+		// WP.com and VideoPress disabled
+		} else if ( ! isVideoPressEnabled ) {
+			return false;
+		}
+
+		return true;
+	}
+
 	renderEditButton() {
 		const {
 			item,
@@ -94,17 +133,21 @@ class EditorMediaModalDetailItem extends Component {
 
 		const mimePrefix = MediaUtils.getMimePrefix( item );
 
-		if ( 'image' !== mimePrefix ) {
+		if ( ! includes( [ 'image', 'video' ], mimePrefix ) ) {
 			return null;
 		}
 
+		const editText = 'video' === mimePrefix
+			? translate( 'Edit Thumbnail' )
+			: translate( 'Edit Image' );
+
 		return (
 			<Button
 				className="editor-media-modal-detail__edit"
 				onClick={ onEdit }
 				disabled={ isItemBeingUploaded( item ) }
 			>
-				<Gridicon icon="pencil" size={ 36 } /> { translate( 'Edit Image' ) }
+				<Gridicon icon="pencil" size={ 36 } /> { editText }
 			</Button>
 		);
 	}
@@ -144,10 +187,22 @@ class EditorMediaModalDetailItem extends Component {
 		);
 	}
 
-	renderImageEditorButtons( item, classname = 'is-desktop' ) {
+	renderMediaEditorButtons( item, classname = 'is-desktop' ) {
+		if ( ! item ) {
+			return null;
+		}
+
+		const mimePrefix = MediaUtils.getMimePrefix( item );
+
+		return 'video' === mimePrefix
+			? this.renderVideoEditorButtons( item, classname )
+			: this.renderImageEditorButtons( classname );
+	}
+
+	renderImageEditorButtons( classname ) {
 		const { site } = this.props;
 
-		if ( ! enableImageEditing( item, site ) ) {
+		if ( ! enableImageEditing( site ) ) {
 			return null;
 		}
 
@@ -161,6 +216,20 @@ class EditorMediaModalDetailItem extends Component {
 		);
 	}
 
+	renderVideoEditorButtons( item, classname ) {
+		if ( ! this.enableVideoEditing( item ) ) {
+			return null;
+		}
+
+		const classes = classNames( 'editor-media-modal-detail__edition-bar', classname );
+
+		return (
+			<div className={ classes }>
+				{ this.renderEditButton() }
+			</div>
+		);
+	}
+
 	renderFields() {
 		const { site, item } = this.props;
 
@@ -250,7 +319,7 @@ class EditorMediaModalDetailItem extends Component {
 	}
 
 	render() {
-		const { item } = this.props;
+		const { isJetpack, item, siteId } = this.props;
 
 		const classes = classNames( 'editor-media-modal-detail__item', {
 			'is-loading': ! item
@@ -262,13 +331,14 @@ class EditorMediaModalDetailItem extends Component {
 
 					<div className="editor-media-modal-detail__preview-wrapper">
 						{ this.renderItem() }
-						{ this.renderImageEditorButtons( item ) }
+						{ this.renderMediaEditorButtons( item ) }
 						{ this.renderPreviousItemButton() }
 						{ this.renderNextItemButton() }
 					</div>
 
 					<div className="editor-media-modal-detail__sidebar">
-						{ this.renderImageEditorButtons( item, 'is-mobile' ) }
+						{ isJetpack && <QueryJetpackModules siteId={ siteId } /> /* Is the VideoPress module active? */ }
+						{ this.renderMediaEditorButtons( item, 'is-mobile' ) }
 						{ this.renderFields() }
 						<EditorMediaModalDetailFileInfo
 							item={ item } />
@@ -280,4 +350,20 @@ class EditorMediaModalDetailItem extends Component {
 	}
 }
 
-export default localize( EditorMediaModalDetailItem );
+const connectComponent = connect(
+	( state ) => {
+		const siteId = getSelectedSiteId( state );
+
+		return {
+			isJetpack: isJetpackSite( state, siteId ),
+			isVideoPressEnabled: getSiteOption( state, siteId, 'videopress_enabled' ),
+			isVideoPressModuleActive: isJetpackModuleActive( state, siteId, 'videopress' ),
+			siteId,
+		};
+	}
+);
+
+export default flowRight(
+	connectComponent,
+	localize,
+)( EditorMediaModalDetailItem );