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.wp-playlist-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 = _wpmejsSettings;
36 this.settings.success = this.bindPlayer;
40 bindPlayer : function (mejs) {
42 this.mejs.addEventListener( 'ended', this.ended );
45 bindResetPlayer : function (mejs) {
46 this.bindPlayer( mejs );
47 this.playCurrentSrc();
50 setPlayer: function (force) {
54 this.playerNode = this.$( this.data.type );
58 this.playerNode.attr( 'src', this.current.get( 'src' ) );
59 this.settings.success = this.bindResetPlayer;
63 * This is also our bridge to the outside world
65 this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
68 playCurrentSrc : function () {
70 this.mejs.setSrc( this.playerNode.attr( 'src' ) );
75 renderCurrent : function () {
76 var dimensions, defaultImage = 'wp-includes/images/media/video.png';
77 if ( 'video' === this.data.type ) {
78 if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {
79 this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
81 dimensions = this.current.get( 'dimensions' ).resized;
82 this.playerNode.attr( dimensions );
84 if ( ! this.data.images ) {
85 this.current.set( 'image', false );
87 this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
91 renderTracks : function () {
92 var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
93 this.tracks.each(function (model) {
94 if ( ! self.data.images ) {
95 model.set( 'image', false );
97 model.set( 'artists', self.data.artists );
98 model.set( 'index', self.data.tracknumbers ? i : false );
99 tracklist.append( self.itemTemplate( model.toJSON() ) );
102 this.$el.append( tracklist );
104 this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
108 'click .wp-playlist-item' : 'clickTrack',
109 'click .wp-playlist-next' : 'next',
110 'click .wp-playlist-prev' : 'prev'
113 clickTrack : function (e) {
116 this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
120 ended : function () {
121 if ( this.index + 1 < this.tracks.length ) {
130 this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
135 this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
139 loadCurrent : function () {
140 var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
141 current = this.current.get( 'src' ).split('.').pop();
143 this.mejs && this.mejs.pause();
145 if ( last !== current ) {
146 this.setPlayer( true );
148 this.playerNode.attr( 'src', this.current.get( 'src' ) );
149 this.playCurrentSrc();
153 setCurrent : function () {
154 this.current = this.tracks.at( this.index );
156 if ( this.data.tracklist ) {
157 this.$( '.wp-playlist-item' )
158 .removeClass( this.playingClass )
160 .addClass( this.playingClass );
167 $(document).ready(function () {
168 $('.wp-playlist').each( function() {
169 return new WPPlaylistView({ el: this });
173 window.WPPlaylistView = WPPlaylistView;
175 }(jQuery, _, Backbone));