Changeset 28171

Timestamp:

04/20/2014 03:52:57 AM (12 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();