1 /*globals window, document, jQuery, _, Backbone, _wpmejsSettings */
3 (function ($, _, Backbone) {
6 var WPPlaylistView = Backbone.View.extend({
7 initialize : function (options) {
10 this.compatMode = $( 'body' ).hasClass( 'wp-admin' ) && $( '#content_ifr' ).length;
11 this.data = options.metadata || $.parseJSON( this.$('script').html() );
12 this.playerNode = this.$( this.data.type );
14 this.tracks = new Backbone.Collection( this.data.tracks );
15 this.current = this.tracks.first();
17 if ( 'audio' === this.data.type ) {
18 this.currentTemplate = wp.template( 'wp-playlist-current-item' );
19 this.currentNode = this.$( '.wp-playlist-current-item' );
24 if ( this.data.tracklist ) {
25 this.itemTemplate = wp.template( 'wp-playlist-item' );
26 this.playingClass = 'wp-playlist-playing';
30 if ( this.isCompatibleSrc() ) {
31 this.playerNode.attr( 'src', this.current.get( 'src' ) );
34 _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
36 if ( ! _.isUndefined( window._wpmejsSettings ) ) {
37 this.settings.pluginPath = _wpmejsSettings.pluginPath;
39 this.settings.success = this.bindPlayer;
43 bindPlayer : function (mejs) {
45 this.mejs.addEventListener( 'ended', this.ended );
48 bindResetPlayer : function (mejs) {
49 this.bindPlayer( mejs );
50 if ( this.isCompatibleSrc() ) {
51 this.playCurrentSrc();
55 isCompatibleSrc: function () {
58 if ( this.compatMode ) {
59 testNode = $( '<span><source type="' + this.current.get( 'type' ) + '" /></span>' );
61 if ( ! wp.media.mixin.isCompatible( testNode ) ) {
62 this.playerNode.removeAttr( 'src' );
63 this.playerNode.removeAttr( 'poster' );
71 setPlayer: function (force) {
75 this.playerNode = this.$( this.data.type );
79 if ( this.isCompatibleSrc() ) {
80 this.playerNode.attr( 'src', this.current.get( 'src' ) );
82 this.settings.success = this.bindResetPlayer;
86 * This is also our bridge to the outside world
88 this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
91 playCurrentSrc : function () {
93 this.mejs.setSrc( this.playerNode.attr( 'src' ) );
98 renderCurrent : function () {
99 var dimensions, defaultImage = 'wp-includes/images/media/video.png';
100 if ( 'video' === this.data.type ) {
101 if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {
102 this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
104 dimensions = this.current.get( 'dimensions' ).resized;
105 this.playerNode.attr( dimensions );
107 if ( ! this.data.images ) {
108 this.current.set( 'image', false );
110 this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
114 renderTracks : function () {
115 var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
116 this.tracks.each(function (model) {
117 if ( ! self.data.images ) {
118 model.set( 'image', false );
120 model.set( 'artists', self.data.artists );
121 model.set( 'index', self.data.tracknumbers ? i : false );
122 tracklist.append( self.itemTemplate( model.toJSON() ) );
125 this.$el.append( tracklist );
127 this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
131 'click .wp-playlist-item' : 'clickTrack',
132 'click .wp-playlist-next' : 'next',
133 'click .wp-playlist-prev' : 'prev'
136 clickTrack : function (e) {
139 this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
143 ended : function () {
144 if ( this.index + 1 < this.tracks.length ) {
148 this.current = this.tracks.at( this.index );
154 this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
159 this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
163 loadCurrent : function () {
164 var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
165 current = this.current.get( 'src' ).split('.').pop();
167 this.mejs && this.mejs.pause();
169 if ( last !== current ) {
170 this.setPlayer( true );
171 } else if ( this.isCompatibleSrc() ) {
172 this.playerNode.attr( 'src', this.current.get( 'src' ) );
173 this.playCurrentSrc();
177 setCurrent : function () {
178 this.current = this.tracks.at( this.index );
180 if ( this.data.tracklist ) {
181 this.$( '.wp-playlist-item' )
182 .removeClass( this.playingClass )
184 .addClass( this.playingClass );
191 $(document).ready(function () {
192 if ( ! $( 'body' ).hasClass( 'wp-admin' ) || $( 'body' ).hasClass( 'about-php' ) ) {
193 $('.wp-playlist').each(function () {
194 return new WPPlaylistView({ el: this });
199 window.WPPlaylistView = WPPlaylistView;
201 }(jQuery, _, Backbone));