Changeset 28171

Timestamp:

04/20/2014 03:52:57 AM (10 years ago)

Author:

wonderboymusic

Message:

Add a compatibility layer in wp-playlist.js to avoid VM errors from MediaElement's plugin bridge in the TinyMCE views for playlists by suppressing playback for files whose mime-type is not supported in the user's browser natively.

This is similar to how audio and video shortcodes are handled: file types are whitelisted for native playback.

See #27892.

Location:

trunk/src/wp-includes/js

Files:

• mce-view.js (modified) (1 diff)
• mediaelement/wp-mediaelement.css (modified) (1 diff)
• mediaelement/wp-playlist.js (modified) (4 diffs)

trunk/src/wp-includes/js/mce-view.js

@@ -612 +612 @@
             });
 
-            this.player = p._player;
+            this.player = p.player;
         },
 

trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

@@ -202 +202 @@
     white-space: nowrap;
 }
+
+.wp-audio-playlist .me-cannotplay span {
+    padding: 5px 15px;
+}

trunk/src/wp-includes/js/mediaelement/wp-playlist.js

@@ -8 +8 @@
             this.index = 0;
             this.settings = {};
+            this.compatMode = $( 'body' ).hasClass( 'wp-admin' ) && $( '#content_ifr' ).length;
             this.data = options.metadata || $.parseJSON( this.$('script').html() );
             this.playerNode = this.$( this.data.type );
@@ -27 +28 @@
             }
 
-            this.playerNode.attr( 'src', this.current.get( 'src' ) );
+            if ( this.isCompatibleSrc() ) {
+                this.playerNode.attr( 'src', this.current.get( 'src' ) );
+            }
 
             _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
@@ -39 +42 @@
 
         bindPlayer : function (mejs) {
-            this.player = mejs;
-            this.player.addEventListener( 'ended', this.ended );
+            this.mejs = mejs;
+            this.mejs.addEventListener( 'ended', this.ended );
         },
 
         bindResetPlayer : function (mejs) {
             this.bindPlayer( mejs );
-            this.playCurrentSrc();
-        },
-
-        setPlayer: function () {
-            if ( this._player ) {
-                this._player.pause();
-                this._player.remove();
+            if ( this.isCompatibleSrc() ) {
+                this.playCurrentSrc();
+            }
+        },
+
+        isCompatibleSrc: function () {
+            var testNode;
+
+            if ( this.compatMode ) {
+                testNode = $( '<span><source type="' + this.current.get( 'type' ) + '" /></span>' );
+
+                if ( ! wp.media.mixin.isCompatible( testNode ) ) {
+                    this.playerNode.removeAttr( 'src' );
+                    this.playerNode.removeAttr( 'poster' );
+                    return;
+                }
+            }
+
+            return true;
+        },
+
+        setPlayer: function (force) {
+            if ( this.player ) {
+                this.player.pause();
+                this.player.remove();
                 this.playerNode = this.$( this.data.type );
-                this.playerNode.attr( 'src', this.current.get( 'src' ) );
+            }
+
+            if (force) {
+                if ( this.isCompatibleSrc() ) {
+                    this.playerNode.attr( 'src', this.current.get( 'src' ) );
+                }
                 this.settings.success = this.bindResetPlayer;
             }
+
             /**
              * This is also our bridge to the outside world
              */
-            this._player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
+            this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
         },
 
         playCurrentSrc : function () {
             this.renderCurrent();
-            this.player.setSrc( this.playerNode.attr( 'src' ) );
-            this.player.load();
-            this.player.play();
+            this.mejs.setSrc( this.playerNode.attr( 'src' ) );
+            this.mejs.load();
+            this.mejs.play();
         },
 
@@ -135 +162 @@
 
         loadCurrent : function () {
-            var last = this.playerNode.attr( 'src' ).split('.').pop(),
+            var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
                 current = this.current.get( 'src' ).split('.').pop();
 
-            this.player.pause();
+            this.mejs && this.mejs.pause();
 
             if ( last !== current ) {
-                this.setPlayer();
-            } else {
+                this.setPlayer( true );
+            } else if ( this.isCompatibleSrc() ) {
                 this.playerNode.attr( 'src', this.current.get( 'src' ) );
                 this.playCurrentSrc();