https://aaanupeskonfidential.org/wp-includes/js/mediaelement/wp-playlist.js?ver=6.9.9

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));