Graceful failures for TinyMCE views of video/audio playlists.

props gcorne.
fixes #27821.


git-svn-id: https://develop.svn.wordpress.org/trunk@28144 602fd350-edb4-49c9-b593-d223f7449a82

src/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,

src/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 {