wp-includes/js/mediaelement/wp-playlist.js

   1 /*globals window, document, jQuery, _, Backbone, _wpmejsSettings */
   2
   3 (function ($, _, Backbone) {
   4         "use strict";
   5
   6         var WPPlaylistView = Backbone.View.extend({
   7                 initialize : function (options) {
   8                         this.index = 0;
   9                         this.settings = {};
  10                         this.data = options.metadata || $.parseJSON( this.$('script.wp-playlist-script').html() );
  11                         this.playerNode = this.$( this.data.type );
  12
  13                         this.tracks = new Backbone.Collection( this.data.tracks );
  14                         this.current = this.tracks.first();
  15
  16                         if ( 'audio' === this.data.type ) {
  17                                 this.currentTemplate = wp.template( 'wp-playlist-current-item' );
  18                                 this.currentNode = this.$( '.wp-playlist-current-item' );
  19                         }
  20
  21                         this.renderCurrent();
  22
  23                         if ( this.data.tracklist ) {
  24                                 this.itemTemplate = wp.template( 'wp-playlist-item' );
  25                                 this.playingClass = 'wp-playlist-playing';
  26                                 this.renderTracks();
  27                         }
  28
  29                         this.playerNode.attr( 'src', this.current.get( 'src' ) );
  30
  31                         _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
  32
  33                         if ( ! _.isUndefined( window._wpmejsSettings ) ) {
  34                                 this.settings = _wpmejsSettings;
  35                         }
  36                         this.settings.success = this.bindPlayer;
  37                         this.setPlayer();
  38                 },
  39
  40                 bindPlayer : function (mejs) {
  41                         this.mejs = mejs;
  42                         this.mejs.addEventListener( 'ended', this.ended );
  43                 },
  44
  45                 bindResetPlayer : function (mejs) {
  46                         this.bindPlayer( mejs );
  47                         this.playCurrentSrc();
  48                 },
  49
  50                 setPlayer: function (force) {
  51                         if ( this.player ) {
  52                                 this.player.pause();
  53                                 this.player.remove();
  54                                 this.playerNode = this.$( this.data.type );
  55                         }
  56
  57                         if (force) {
  58                                 this.playerNode.attr( 'src', this.current.get( 'src' ) );
  59                                 this.settings.success = this.bindResetPlayer;
  60                         }
  61
  62                         /**
  63                          * This is also our bridge to the outside world
  64                          */
  65                         this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
  66                 },
  67
  68                 playCurrentSrc : function () {
  69                         this.renderCurrent();
  70                         this.mejs.setSrc( this.playerNode.attr( 'src' ) );
  71                         this.mejs.load();
  72                         this.mejs.play();
  73                 },
  74
  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 );
  80                                 }
  81                                 dimensions = this.current.get( 'dimensions' ).resized;
  82                                 this.playerNode.attr( dimensions );
  83                         } else {
  84                                 if ( ! this.data.images ) {
  85                                         this.current.set( 'image', false );
  86                                 }
  87                                 this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
  88                         }
  89                 },
  90
  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 );
  96                                 }
  97                                 model.set( 'artists', self.data.artists );
  98                                 model.set( 'index', self.data.tracknumbers ? i : false );
  99                                 tracklist.append( self.itemTemplate( model.toJSON() ) );
 100                                 i += 1;
 101                         });
 102                         this.$el.append( tracklist );
 103
 104                         this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
 105                 },
 106
 107                 events : {
 108                         'click .wp-playlist-item' : 'clickTrack',
 109                         'click .wp-playlist-next' : 'next',
 110                         'click .wp-playlist-prev' : 'prev'
 111                 },
 112
 113                 clickTrack : function (e) {
 114                         e.preventDefault();
 115
 116                         this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
 117                         this.setCurrent();
 118                 },
 119
 120                 ended : function () {
 121                         if ( this.index + 1 < this.tracks.length ) {
 122                                 this.next();
 123                         } else {
 124                                 this.index = 0;
 125                                 this.setCurrent();
 126                         }
 127                 },
 128
 129                 next : function () {
 130                         this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
 131                         this.setCurrent();
 132                 },
 133
 134                 prev : function () {
 135                         this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
 136                         this.setCurrent();
 137                 },
 138
 139                 loadCurrent : function () {
 140                         var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
 141                                 current = this.current.get( 'src' ).split('.').pop();
 142
 143                         this.mejs && this.mejs.pause();
 144
 145                         if ( last !== current ) {
 146                                 this.setPlayer( true );
 147                         } else {
 148                                 this.playerNode.attr( 'src', this.current.get( 'src' ) );
 149                                 this.playCurrentSrc();
 150                         }
 151                 },
 152
 153                 setCurrent : function () {
 154                         this.current = this.tracks.at( this.index );
 155
 156                         if ( this.data.tracklist ) {
 157                                 this.$( '.wp-playlist-item' )
 158                                         .removeClass( this.playingClass )
 159                                         .eq( this.index )
 160                                                 .addClass( this.playingClass );
 161                         }
 162
 163                         this.loadCurrent();
 164                 }
 165         });
 166
 167     $(document).ready(function () {
 168                 $('.wp-playlist').each( function() {
 169                         return new WPPlaylistView({ el: this });
 170                 } );
 171     });
 172
 173         window.WPPlaylistView = WPPlaylistView;
 174
 175 }(jQuery, _, Backbone));