Add/805-playlist-refactor-2

block-library/index.js

@@ -33,6 +33,7 @@ import * as latestPosts from '../packages/block-library/src/latest-posts';
 import * as list from '../packages/block-library/src/list';
 import * as more from '../packages/block-library/src/more';
 import * as nextpage from '../packages/block-library/src/nextpage';
+import * as playlist from '../packages/block-library/src/playlist';
 import * as preformatted from '../packages/block-library/src/preformatted';
 import * as pullquote from '../packages/block-library/src/pullquote';
 import * as reusableBlock from '../packages/block-library/src/block';
@@ -82,6 +83,7 @@ export const registerCoreBlocks = () => {
 		latestPosts,
 		more,
 		nextpage,
+		playlist,
 		preformatted,
 		pullquote,
 		separator,

edit-post/hooks/components/media-upload/index.js

@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import { castArray, pick } from 'lodash';
+import { castArray, defaults, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ const getGalleryDetailsMediaFrame = () => {
 					multiple: 'add',
 					editable: false,
 
-					library: wp.media.query( _.defaults( {
+					library: wp.media.query( defaults( {
 						type: 'image',
 					}, this.options.library ) ),
 				} ),
@@ -56,11 +56,103 @@ const getGalleryDetailsMediaFrame = () => {
 	} );
 };
 
+const getPlaylistDetailsMediaFrame = () => {
+	/**
+	 * Custom Playlist details frame.
+	 *
+	 * @link https://github.com/xwp/wp-core-media-widgets/blob/905edbccfc2a623b73a93dac803c5335519d7837/wp-admin/js/widgets/media-gallery-widget.js
+	 * @class PlaylistDetailsMediaFrame
+	 * @constructor
+	 */
+	return wp.media.view.MediaFrame.Post.extend( {
+
+		/**
+		 * Create the default states.
+		 *
+		 * @return {void}
+		 */
+		createStates: function createStates() {
+			this.states.add( [
+				new wp.media.controller.Library( {
+					id: 'playlist',
+					title: wp.media.view.l10n.createPlaylistTitle,
+					priority: 60,
+					toolbar: 'main-playlist',
+					filterable: 'uploaded',
+					multiple: 'add',
+					editable: false,
+
+					library: wp.media.query( defaults( {
+						type: 'audio',
+					}, this.options.library ) ),
+				} ),
+
+				new wp.media.controller.CollectionEdit( {
+					type: 'audio',
+					collectionType: 'playlist',
+					title: wp.media.view.l10n.editPlaylistTitle,
+					library: this.options.selection,
+					SettingsView: wp.media.view.Settings.Playlist,
+					editing: this.options.editing,
+					menu: 'playlist',
+					dragInfoText: wp.media.view.l10n.playlistDragInfo,
+					dragInfo: true,
+				} ),
+
+				new wp.media.controller.CollectionAdd( {
+					type: 'audio',
+					collectionType: 'playlist',
+					title: wp.media.view.l10n.addToPlaylistTitle,
+				} ),
+
+				new wp.media.controller.Library( {
+					id: 'video-playlist',
+					title: wp.media.view.l10n.createVideoPlaylistTitle,
+					priority: 60,
+					toolbar: 'main-video-playlist',
+					filterable: 'uploaded',
+					multiple: 'add',
+					editable: false,
+
+					library: wp.media.query( defaults( {
+						type: 'video',
+					}, this.options.library ) ),
+				} ),
+
+				new wp.media.controller.CollectionEdit( {
+					type: 'video',
+					collectionType: 'playlist',
+					title: wp.media.view.l10n.editVideoPlaylistTitle,
+					library: this.options.selection,
+					editing: this.options.editing,
+					SettingsView: wp.media.view.Settings.Playlist,
+					menu: 'video-playlist',
+					dragInfoText: wp.media.view.l10n.videoPlaylistDragInfo,
+					dragInfo: false,
+				} ),
+
+				new wp.media.controller.CollectionAdd( {
+					type: 'video',
+					collectionType: 'playlist',
+					title: wp.media.view.l10n.addToVideoPlaylistTitle,
+				} ),
+
+			] );
+		},
+	} );
+};
+
 // the media library image object contains numerous attributes
 // we only need this set to display the image in the library
 const slimImageObject = ( img ) => {
-	const attrSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt', 'link', 'caption' ];
-	return pick( img, attrSet );
+	const attributeSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'alt', 'link', 'caption' ];
+	return pick( img, attributeSet );
+};
+
+// the playlist object contains attributes required for render. These will be used for playlist
+const slimPlaylistItemObject = ( playlistMedia ) => {
+	const attributeSet = [ 'sizes', 'mime', 'type', 'subtype', 'id', 'url', 'link', 'caption', 'album', 'artist', 'image', 'title' ];
+	return pick( playlistMedia, attributeSet );
 };
 
 const getAttachmentsCollection = ( ids ) => {
@@ -75,7 +167,7 @@ const getAttachmentsCollection = ( ids ) => {
 };
 
 class MediaUpload extends Component {
-	constructor( { multiple = false, type, gallery = false, title = __( 'Select or Upload Media' ), modalClass, value } ) {
+	constructor( { multiple = false, type, gallery = false, playlist = false, title = __( 'Select or Upload Media' ), modalClass, value } ) {
 		super( ...arguments );
 		this.openModal = this.openModal.bind( this );
 		this.onOpen = this.onOpen.bind( this );
@@ -115,6 +207,24 @@ class MediaUpload extends Component {
 			this.frame = wp.media( frameConfig );
 		}
 
+		if ( playlist ) {
+			const PlaylistDetailsMediaFrame = getPlaylistDetailsMediaFrame();
+			if ( type === 'video' ) {
+				this.frame = new PlaylistDetailsMediaFrame( {
+					frame: 'select',
+					mimeType: 'video',
+					state: 'video-playlist',
+				} );
+			} else {
+				this.frame = new PlaylistDetailsMediaFrame( {
+					frame: 'select',
+					mimeType: 'audio',
+					state: 'playlist',
+				} );
+			}
+			wp.media.frame = this.frame;
+		}
+
 		if ( modalClass ) {
 			this.frame.$el.addClass( modalClass );
 		}
@@ -131,15 +241,17 @@ class MediaUpload extends Component {
 	}
 
 	onUpdate( selections ) {
-		const { onSelect, multiple = false } = this.props;
+		const { onSelect, multiple = false, playlist = false } = this.props;
 		const state = this.frame.state();
 		const selectedImages = selections || state.get( 'selection' );
 
 		if ( ! selectedImages || ! selectedImages.models.length ) {
 			return;
 		}
 
-		if ( multiple ) {
+		if ( playlist ) {
+			onSelect( selectedImages.models.map( ( model ) => slimPlaylistItemObject( model.toJSON() ) ) );
+		} else if ( multiple ) {
 			onSelect( selectedImages.models.map( ( model ) => this.processMediaCaption( slimImageObject( model.toJSON() ) ) ) );
 		} else {
 			onSelect( this.processMediaCaption( slimImageObject( ( selectedImages.models[ 0 ].toJSON() ) ) ) );
@@ -197,4 +309,3 @@ class MediaUpload extends Component {
 }
 
 export default MediaUpload;
-

packages/block-library/src/editor.scss

@@ -14,6 +14,7 @@
 @import "./list/editor.scss";
 @import "./more/editor.scss";
 @import "./nextpage/editor.scss";
+@import "./playlist/editor.scss";
 @import "./preformatted/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./quote/editor.scss";

packages/block-library/src/index.js

@@ -29,6 +29,7 @@ import * as latestPosts from './latest-posts';
 import * as list from './list';
 import * as more from './more';
 import * as nextpage from './nextpage';
+import * as playlist from './playlist';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
@@ -70,6 +71,7 @@ export const registerCoreBlocks = () => {
 		latestPosts,
 		more,
 		nextpage,
+		playlist,
 		preformatted,
 		pullquote,
 		separator,