Graceful failures for TinyMCE views of video/audio playlists.

props gcorne.
fixes #27821.

Built from https://develop.svn.wordpress.org/trunk@28144


git-svn-id: http://core.svn.wordpress.org/trunk@27975 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/mce-view.js

@@ -602,6 +602,10 @@ window.wp = window.wp || {};
 				}
 			}, this );
 
+			if ( ! this.data.tracks ) {
+				return;
+			}
+
 			p = new WPPlaylistView({
 				el: $( self.node ).find( '.wp-playlist' ).get(0),
 				metadata: this.data
@@ -623,7 +627,8 @@ window.wp = window.wp || {};
 				attachments,
 				tracks = [];
 
-			if ( ! this.attachments.length ) {
+			// Don't render errors while still fetching attachments
+			if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
 				return;
 			}
 
@@ -631,8 +636,6 @@ window.wp = window.wp || {};
 				data[ key ] = model.coerce( data, key );
 			});
 
-			attachments = this.attachments.toJSON();
-
 			options = {
 				type: data.type,
 				style: data.style,
@@ -642,6 +645,12 @@ window.wp = window.wp || {};
 				artists: data.artists
 			};
 
+			if ( ! this.attachments.length ) {
+				return this.template( options );
+			}
+
+			attachments = this.attachments.toJSON();
+
 			_.each( attachments, function( attachment ) {
 				var size = {}, resize = {}, track = {
 					src : attachment.url,

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -289,6 +289,30 @@ audio {
 	background-image: url(images/dashicon-no-alt.png);
 }
 
+.wpview-error {
+	border: 1px solid #dedede;
+	padding: 20px 0;
+	margin: 0;
+}
+
+.selected .wpview-error {
+	border-color: transparent;
+}
+
+.wpview-error .dashicons {
+	display: block;
+	margin: 0 auto;
+	width: 32px;
+	height: 32px;
+	font-size: 32px;
+}
+
+.wpview-error p {
+	margin: 0;
+	text-align: center;
+	font-family: 'Open Sans', sans-serif;
+}
+
 
 .wpview-wrap .toolbar div:hover,
 #wp-image-toolbar div:hover {
@@ -350,29 +374,6 @@ audio {
 	margin: auto;
 }
 
-.gallery-error {
-	border: 1px solid #dedede;
-	padding: 20px 0;
-	margin: 0;
-}
-
-.selected .gallery-error {
-	border-color: transparent;
-}
-
-.gallery-error .dashicons {
-	display: block;
-	margin: 0 auto;
-	width: 32px;
-	height: 32px;
-	font-size: 32px;
-}
-
-.gallery-error p {
-	margin: 0;
-	text-align: center;
-	font-family: 'Open Sans', sans-serif;
-}
 
 .gallery .gallery-item {
 	float: left;
@@ -443,6 +444,8 @@ audio {
 .gallery img {
 	max-width: 100%;
 	height: auto;
+	border: none;
+	padding: 0;
 }
 
 img.wp-oembed {

wp-includes/media-template.php

@@ -1001,7 +1001,7 @@ function wp_print_media_templates() {
 				<# } ); #>
 			</div>
 		<# } else { #>
-			<div class="gallery-error">
+			<div class="wpview-error">
 				<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
 			</div>
 		<# } #>
@@ -1032,17 +1032,23 @@ function wp_print_media_templates() {
 			<div class="dashicons dashicons-edit edit"></div>
 			<div class="dashicons dashicons-no-alt remove"></div>
 		</div>
-		<div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
-			<# if ( 'audio' === data.type ){ #>
-			<div class="wp-playlist-current-item"></div>
-			<# } #>
-			<{{ data.type }} controls="controls" preload="none" <#
-				if ( data.width ) { #> width="{{ data.width }}"<# }
-				#><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
-			<div class="wp-playlist-next"></div>
-			<div class="wp-playlist-prev"></div>
-		</div>
-		<div class="wpview-overlay"></div>
+		<# if ( data.tracks ) { #>
+			<div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
+				<# if ( 'audio' === data.type ){ #>
+				<div class="wp-playlist-current-item"></div>
+				<# } #>
+				<{{ data.type }} controls="controls" preload="none" <#
+					if ( data.width ) { #> width="{{ data.width }}"<# }
+					#><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
+				<div class="wp-playlist-next"></div>
+				<div class="wp-playlist-prev"></div>
+			</div>
+			<div class="wpview-overlay"></div>
+		<# } else { #>
+			<div class="wpview-error">
+				<div class="dashicons dashicons-video-alt3"></div><p><?php _e( 'No items found.' ); ?></p>
+			</div>
+		<# } #>
 	</script>
 
 	<script type="text/html" id="tmpl-crop-content">