1/* global _wpmejsSettings, MediaElementPlayer */
  2
  3(function ($, _, Backbone) {
  4	'use strict';
  5
  6	/** @namespace wp */
  7	window.wp = window.wp || {};
  8
  9	var WPPlaylistView = Backbone.View.extend(/** @lends WPPlaylistView.prototype */{
 10		/**
 11		 * @constructs
 12		 *
 13		 * @param {Object} options          The options to create this playlist view with.
 14		 * @param {Object} options.metadata The metadata
 15		 */
 16		initialize : function (options) {
 17			this.index = 0;
 18			this.settings = {};
 19			this.data = options.metadata || $.parseJSON( this.$('script.wp-playlist-script').html() );
 20			this.playerNode = this.$( this.data.type );
 21
 22			this.tracks = new Backbone.Collection( this.data.tracks );
 23			this.current = this.tracks.first();
 24
 25			if ( 'audio' === this.data.type ) {
 26				this.currentTemplate = wp.template( 'wp-playlist-current-item' );
 27				this.currentNode = this.$( '.wp-playlist-current-item' );
 28			}
 29
 30			this.renderCurrent();
 31
 32			if ( this.data.tracklist ) {
 33				this.itemTemplate = wp.template( 'wp-playlist-item' );
 34				this.playingClass = 'wp-playlist-playing';
 35				this.renderTracks();
 36			}
 37
 38			this.playerNode.attr( 'src', this.current.get( 'src' ) );
 39
 40			_.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
 41
 42			if ( ! _.isUndefined( window._wpmejsSettings ) ) {
 43				this.settings = _.clone( _wpmejsSettings );
 44			}
 45			this.settings.success = this.bindPlayer;
 46			this.setPlayer();
 47		},
 48
 49		bindPlayer : function (mejs) {
 50			this.mejs = mejs;
 51			this.mejs.addEventListener( 'ended', this.ended );
 52		},
 53
 54		bindResetPlayer : function (mejs) {
 55			this.bindPlayer( mejs );
 56			this.playCurrentSrc();
 57		},
 58
 59		setPlayer: function (force) {
 60			if ( this.player ) {
 61				this.player.pause();
 62				this.player.remove();
 63				this.playerNode = this.$( this.data.type );
 64			}
 65
 66			if (force) {
 67				this.playerNode.attr( 'src', this.current.get( 'src' ) );
 68				this.settings.success = this.bindResetPlayer;
 69			}
 70
 71			// This is also our bridge to the outside world.
 72			this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
 73		},
 74
 75		playCurrentSrc : function () {
 76			this.renderCurrent();
 77			this.mejs.setSrc( this.playerNode.attr( 'src' ) );
 78			this.mejs.load();
 79			this.mejs.play();
 80		},
 81
 82		renderCurrent : function () {
 83			var dimensions, defaultImage = 'wp-includes/images/media/video.svg';
 84			if ( 'video' === this.data.type ) {
 85				if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {
 86					this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
 87				}
 88				dimensions = this.current.get( 'dimensions' );
 89				if ( dimensions && dimensions.resized ) {
 90					this.playerNode.attr( dimensions.resized );
 91				}
 92			} else {
 93				if ( ! this.data.images ) {
 94					this.current.set( 'image', false );
 95				}
 96				this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
 97			}
 98		},
 99
100		renderTracks : function () {
101			var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
102			this.tracks.each(function (model) {
103				if ( ! self.data.images ) {
104					model.set( 'image', false );
105				}
106				model.set( 'artists', self.data.artists );
107				model.set( 'index', self.data.tracknumbers ? i : false );
108				tracklist.append( self.itemTemplate( model.toJSON() ) );
109				i += 1;
110			});
111			this.$el.append( tracklist );
112
113			this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
114		},
115
116		events : {
117			'click .wp-playlist-item' : 'clickTrack',
118			'click .wp-playlist-next' : 'next',
119			'click .wp-playlist-prev' : 'prev'
120		},
121
122		clickTrack : function (e) {
123			e.preventDefault();
124
125			this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
126			this.setCurrent();
127		},
128
129		ended : function () {
130			if ( this.index + 1 < this.tracks.length ) {
131				this.next();
132			} else {
133				this.index = 0;
134				this.setCurrent();
135			}
136		},
137
138		next : function () {
139			this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
140			this.setCurrent();
141		},
142
143		prev : function () {
144			this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
145			this.setCurrent();
146		},
147
148		loadCurrent : function () {
149			var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
150				current = this.current.get( 'src' ).split('.').pop();
151
152			this.mejs && this.mejs.pause();
153
154			if ( last !== current ) {
155				this.setPlayer( true );
156			} else {
157				this.playerNode.attr( 'src', this.current.get( 'src' ) );
158				this.playCurrentSrc();
159			}
160		},
161
162		setCurrent : function () {
163			this.current = this.tracks.at( this.index );
164
165			if ( this.data.tracklist ) {
166				this.$( '.wp-playlist-item' )
167					.removeClass( this.playingClass )
168					.eq( this.index )
169						.addClass( this.playingClass );
170			}
171
172			this.loadCurrent();
173		}
174	});
175
176	/**
177	 * Initialize media playlists in the document.
178	 *
179	 * Only initializes new playlists not previously-initialized.
180	 *
181	 * @since 4.9.3
182	 * @return {void}
183	 */
184	function initialize() {
185		$( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {
186			new WPPlaylistView( { el: this } );
187		} );
188	}
189
190	/**
191	 * Expose the API publicly on window.wp.playlist.
192	 *
193	 * @namespace wp.playlist
194	 * @since 4.9.3
195	 * @type {object}
196	 */
197	window.wp.playlist = {
198		initialize: initialize
199	};
200
201	$( document ).ready( initialize );
202
203	window.WPPlaylistView = WPPlaylistView;
204
205}(jQuery, _, Backbone));
206