Edit File by line

/* global _wpmejsSettings, MediaElementPlayer */

[0] Fix | Delete

[1] Fix | Delete

(function ($, _, Backbone) {

[2] Fix | Delete

'use strict';

[3] Fix | Delete

[4] Fix | Delete

/** @namespace wp */

[5] Fix | Delete

window.wp = window.wp || {};

[6] Fix | Delete

[7] Fix | Delete

var WPPlaylistView = Backbone.View.extend(/** @lends WPPlaylistView.prototype */{

[8] Fix | Delete

/**

[9] Fix | Delete

* @constructs

[10] Fix | Delete

[11] Fix | Delete

* @param {Object} options The options to create this playlist view with.

[12] Fix | Delete

* @param {Object} options.metadata The metadata

[13] Fix | Delete

[14] Fix | Delete

initialize : function (options) {

[15] Fix | Delete

this.index = 0;

[16] Fix | Delete

this.settings = {};

[17] Fix | Delete

this.data = options.metadata || $.parseJSON( this.$('script.wp-playlist-script').html() );

[18] Fix | Delete

this.playerNode = this.$( this.data.type );

[19] Fix | Delete

[20] Fix | Delete

this.tracks = new Backbone.Collection( this.data.tracks );

[21] Fix | Delete

this.current = this.tracks.first();

[22] Fix | Delete

[23] Fix | Delete

if ( 'audio' === this.data.type ) {

[24] Fix | Delete

this.currentTemplate = wp.template( 'wp-playlist-current-item' );

[25] Fix | Delete

this.currentNode = this.$( '.wp-playlist-current-item' );

[26] Fix | Delete

}

[27] Fix | Delete

[28] Fix | Delete

this.renderCurrent();

[29] Fix | Delete

[30] Fix | Delete

if ( this.data.tracklist ) {

[31] Fix | Delete

this.itemTemplate = wp.template( 'wp-playlist-item' );

[32] Fix | Delete

this.playingClass = 'wp-playlist-playing';

[33] Fix | Delete

this.renderTracks();

[34] Fix | Delete

}

[35] Fix | Delete

[36] Fix | Delete

this.playerNode.attr( 'src', this.current.get( 'src' ) );

[37] Fix | Delete

[38] Fix | Delete

_.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );

[39] Fix | Delete

[40] Fix | Delete

if ( ! _.isUndefined( window._wpmejsSettings ) ) {

[41] Fix | Delete

this.settings = _.clone( _wpmejsSettings );

[42] Fix | Delete

}

[43] Fix | Delete

this.settings.success = this.bindPlayer;

[44] Fix | Delete

this.setPlayer();

[45] Fix | Delete

[46] Fix | Delete

[47] Fix | Delete

bindPlayer : function (mejs) {

[48] Fix | Delete

this.mejs = mejs;

[49] Fix | Delete

this.mejs.addEventListener( 'ended', this.ended );

[50] Fix | Delete

[51] Fix | Delete

[52] Fix | Delete

bindResetPlayer : function (mejs) {

[53] Fix | Delete

this.bindPlayer( mejs );

[54] Fix | Delete

this.playCurrentSrc();

[55] Fix | Delete

[56] Fix | Delete

[57] Fix | Delete

setPlayer: function (force) {

[58] Fix | Delete

if ( this.player ) {

[59] Fix | Delete

this.player.pause();

[60] Fix | Delete

this.player.remove();

[61] Fix | Delete

this.playerNode = this.$( this.data.type );

[62] Fix | Delete

}

[63] Fix | Delete

[64] Fix | Delete

if (force) {

[65] Fix | Delete

this.playerNode.attr( 'src', this.current.get( 'src' ) );

[66] Fix | Delete

this.settings.success = this.bindResetPlayer;

[67] Fix | Delete

}

[68] Fix | Delete

[69] Fix | Delete

// This is also our bridge to the outside world.

[70] Fix | Delete

this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );

[71] Fix | Delete

[72] Fix | Delete

[73] Fix | Delete

playCurrentSrc : function () {

[74] Fix | Delete

this.renderCurrent();

[75] Fix | Delete

this.mejs.setSrc( this.playerNode.attr( 'src' ) );

[76] Fix | Delete

this.mejs.load();

[77] Fix | Delete

this.mejs.play();

[78] Fix | Delete

[79] Fix | Delete

[80] Fix | Delete

renderCurrent : function () {

[81] Fix | Delete

var dimensions, defaultImage = 'wp-includes/images/media/video.svg';

[82] Fix | Delete

if ( 'video' === this.data.type ) {

[83] Fix | Delete

if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {

[84] Fix | Delete

this.playerNode.attr( 'poster', this.current.get( 'image' ).src );

[85] Fix | Delete

}

[86] Fix | Delete

dimensions = this.current.get( 'dimensions' );

[87] Fix | Delete

if ( dimensions && dimensions.resized ) {

[88] Fix | Delete

this.playerNode.attr( dimensions.resized );

[89] Fix | Delete

}

[90] Fix | Delete

} else {

[91] Fix | Delete

if ( ! this.data.images ) {

[92] Fix | Delete

this.current.set( 'image', false );

[93] Fix | Delete

}

[94] Fix | Delete

this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );

[95] Fix | Delete

}

[96] Fix | Delete

[97] Fix | Delete

[98] Fix | Delete

renderTracks : function () {

[99] Fix | Delete

var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );

[100] Fix | Delete

this.tracks.each(function (model) {

[101] Fix | Delete

if ( ! self.data.images ) {

[102] Fix | Delete

model.set( 'image', false );

[103] Fix | Delete

}

[104] Fix | Delete

model.set( 'artists', self.data.artists );

[105] Fix | Delete

model.set( 'index', self.data.tracknumbers ? i : false );

[106] Fix | Delete

tracklist.append( self.itemTemplate( model.toJSON() ) );

[107] Fix | Delete

i += 1;

[108] Fix | Delete

});

[109] Fix | Delete

this.$el.append( tracklist );

[110] Fix | Delete

[111] Fix | Delete

this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );

[112] Fix | Delete

[113] Fix | Delete

[114] Fix | Delete

events : {

[115] Fix | Delete

'click .wp-playlist-item' : 'clickTrack',

[116] Fix | Delete

'click .wp-playlist-next' : 'next',

[117] Fix | Delete

'click .wp-playlist-prev' : 'prev'

[118] Fix | Delete

[119] Fix | Delete

[120] Fix | Delete

clickTrack : function (e) {

[121] Fix | Delete

e.preventDefault();

[122] Fix | Delete

[123] Fix | Delete

this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );

[124] Fix | Delete

this.setCurrent();

[125] Fix | Delete

[126] Fix | Delete

[127] Fix | Delete

ended : function () {

[128] Fix | Delete

if ( this.index + 1 < this.tracks.length ) {

[129] Fix | Delete

this.next();

[130] Fix | Delete

} else {

[131] Fix | Delete

this.index = 0;

[132] Fix | Delete

this.setCurrent();

[133] Fix | Delete

}

[134] Fix | Delete

[135] Fix | Delete

[136] Fix | Delete

next : function () {

[137] Fix | Delete

this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;

[138] Fix | Delete

this.setCurrent();

[139] Fix | Delete

[140] Fix | Delete

[141] Fix | Delete

prev : function () {

[142] Fix | Delete

this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;

[143] Fix | Delete

this.setCurrent();

[144] Fix | Delete

[145] Fix | Delete

[146] Fix | Delete

loadCurrent : function () {

[147] Fix | Delete

var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),

[148] Fix | Delete

current = this.current.get( 'src' ).split('.').pop();

[149] Fix | Delete

[150] Fix | Delete

this.mejs && this.mejs.pause();

[151] Fix | Delete

[152] Fix | Delete

if ( last !== current ) {

[153] Fix | Delete

this.setPlayer( true );

[154] Fix | Delete

} else {

[155] Fix | Delete

this.playerNode.attr( 'src', this.current.get( 'src' ) );

[156] Fix | Delete

this.playCurrentSrc();

[157] Fix | Delete

}

[158] Fix | Delete

[159] Fix | Delete

[160] Fix | Delete

setCurrent : function () {

[161] Fix | Delete

this.current = this.tracks.at( this.index );

[162] Fix | Delete

[163] Fix | Delete

if ( this.data.tracklist ) {

[164] Fix | Delete

this.$( '.wp-playlist-item' )

[165] Fix | Delete

.removeClass( this.playingClass )

[166] Fix | Delete

.eq( this.index )

[167] Fix | Delete

.addClass( this.playingClass );

[168] Fix | Delete

}

[169] Fix | Delete

[170] Fix | Delete

this.loadCurrent();

[171] Fix | Delete

}

[172] Fix | Delete

});

[173] Fix | Delete

[174] Fix | Delete

/**

[175] Fix | Delete

* Initialize media playlists in the document.

[176] Fix | Delete

[177] Fix | Delete

* Only initializes new playlists not previously-initialized.

[178] Fix | Delete

[179] Fix | Delete

* @since 4.9.3

[180] Fix | Delete

* @return {void}

[181] Fix | Delete

[182] Fix | Delete

function initialize() {

[183] Fix | Delete

$( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {

[184] Fix | Delete

new WPPlaylistView( { el: this } );

[185] Fix | Delete

} );

[186] Fix | Delete

}

[187] Fix | Delete

[188] Fix | Delete

/**

[189] Fix | Delete

* Expose the API publicly on window.wp.playlist.

[190] Fix | Delete

[191] Fix | Delete

* @namespace wp.playlist

[192] Fix | Delete

* @since 4.9.3

[193] Fix | Delete

* @type {object}

[194] Fix | Delete

[195] Fix | Delete

window.wp.playlist = {

[196] Fix | Delete

initialize: initialize

[197] Fix | Delete

};

[198] Fix | Delete

[199] Fix | Delete

$( document ).ready( initialize );

[200] Fix | Delete

[201] Fix | Delete

window.WPPlaylistView = WPPlaylistView;

[202] Fix | Delete

[203] Fix | Delete

}(jQuery, _, Backbone));

[204] Fix | Delete

[205] Fix | Delete