1 /*globals window, document, jQuery, _, Backbone, _wpmejsSettings */
3 (function ($, _, Backbone) {
6 var WPPlaylistView = Backbone.View.extend({
7 initialize : function (options) {
10 this.data = options.metadata || $.parseJSON( this.$('script').html() );
11 this.playerNode = this.$( this.data.type );
13 this.tracks = new Backbone.Collection( this.data.tracks );
14 this.current = this.tracks.first();
16 if ( 'audio' === this.data.type ) {
17 this.currentTemplate = wp.template( 'wp-playlist-current-item' );
18 this.currentNode = this.$( '.wp-playlist-current-item' );
23 if ( this.data.tracklist ) {
24 this.itemTemplate = wp.template( 'wp-playlist-item' );
25 this.playingClass = 'wp-playlist-playing';
29 this.playerNode.attr( 'src', this.current.get( 'src' ) );
31 _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
33 if ( ! _.isUndefined( window._wpmejsSettings ) ) {
34 this.settings.pluginPath = _wpmejsSettings.pluginPath;
36 this.settings.success = this.bindPlayer;
40 bindPlayer : function (mejs) {
42 this.player.addEventListener( 'ended', this.ended );
45 bindResetPlayer : function (mejs) {
46 this.bindPlayer( mejs );
47 this.playCurrentSrc();
50 setPlayer: function () {
53 this._player.remove();
54 this.playerNode = this.$( this.data.type );
55 this.playerNode.attr( 'src', this.current.get( 'src' ) );
56 this.settings.success = this.bindResetPlayer;
59 * This is also our bridge to the outside world
61 this._player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
64 playCurrentSrc : function () {
66 this.player.setSrc( this.playerNode.attr( 'src' ) );
71 renderCurrent : function () {
73 if ( 'video' === this.data.type ) {
74 if ( this.data.images && this.current.get( 'image' ) ) {
75 this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
77 dimensions = this.current.get( 'dimensions' ).resized;
78 this.playerNode.attr( dimensions );
80 if ( ! this.data.images ) {
81 this.current.set( 'image', false );
83 this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
87 renderTracks : function () {
88 var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
89 this.tracks.each(function (model) {
90 if ( ! self.data.images ) {
91 model.set( 'image', false );
93 model.set( 'artists', self.data.artists );
94 model.set( 'index', self.data.tracknumbers ? i : false );
95 tracklist.append( self.itemTemplate( model.toJSON() ) );
98 this.$el.append( tracklist );
100 this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
104 'click .wp-playlist-item' : 'clickTrack',
105 'click .wp-playlist-next' : 'next',
106 'click .wp-playlist-prev' : 'prev'
109 clickTrack : function (e) {
112 this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
116 ended : function () {
117 if ( this.index + 1 < this.tracks.length ) {
121 this.current = this.tracks.at( this.index );
127 this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
132 this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
136 loadCurrent : function () {
137 var last = this.playerNode.attr( 'src' ).split('.').pop(),
138 current = this.current.get( 'src' ).split('.').pop();
142 if ( last !== current ) {
145 this.playerNode.attr( 'src', this.current.get( 'src' ) );
146 this.playCurrentSrc();
150 setCurrent : function () {
151 this.current = this.tracks.at( this.index );
153 if ( this.data.tracklist ) {
154 this.$( '.wp-playlist-item' )
155 .removeClass( this.playingClass )
157 .addClass( this.playingClass );
164 $(document).ready(function () {
165 if ( ! $( 'body' ).hasClass( 'wp-admin' ) || $( 'body' ).hasClass( 'about-php' ) ) {
166 $('.wp-playlist').each(function () {
167 return new WPPlaylistView({ el: this });
172 window.WPPlaylistView = WPPlaylistView;
174 }(jQuery, _, Backbone));