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').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.pluginPath = _wpmejsSettings.pluginPath;
  35                         }
  36                         this.settings.success = this.bindPlayer;
  37                         this.setPlayer();
  38                 },
  39
  40                 bindPlayer : function (mejs) {
  41                         this.player = mejs;
  42                         this.player.addEventListener( 'ended', this.ended );
  43                 },
  44
  45                 bindResetPlayer : function (mejs) {
  46                         this.bindPlayer( mejs );
  47                         this.playCurrentSrc();
  48                 },
  49
  50                 setPlayer: function () {
  51                         if ( this._player ) {
  52                                 this._player.pause();
  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;
  57                         }
  58                         /**
  59                          * This is also our bridge to the outside world
  60                          */
  61                         this._player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
  62                 },
  63
  64                 playCurrentSrc : function () {
  65                         this.renderCurrent();
  66                         this.player.setSrc( this.playerNode.attr( 'src' ) );
  67                         this.player.load();
  68                         this.player.play();
  69                 },
  70
  71                 renderCurrent : function () {
  72                         var dimensions;
  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 );
  76                                 }
  77                                 dimensions = this.current.get( 'dimensions' ).resized;
  78                                 this.playerNode.attr( dimensions );
  79                         } else {
  80                                 if ( ! this.data.images ) {
  81                                         this.current.set( 'image', false );
  82                                 }
  83                                 this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
  84                         }
  85                 },
  86
  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 );
  92                                 }
  93                                 model.set( 'artists', self.data.artists );
  94                                 model.set( 'index', self.data.tracknumbers ? i : false );
  95                                 tracklist.append( self.itemTemplate( model.toJSON() ) );
  96                                 i += 1;
  97                         });
  98                         this.$el.append( tracklist );
  99
 100                         this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
 101                 },
 102
 103                 events : {
 104                         'click .wp-playlist-item' : 'clickTrack',
 105                         'click .wp-playlist-next' : 'next',
 106                         'click .wp-playlist-prev' : 'prev'
 107                 },
 108
 109                 clickTrack : function (e) {
 110                         e.preventDefault();
 111
 112                         this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
 113                         this.setCurrent();
 114                 },
 115
 116                 ended : function () {
 117                         if ( this.index + 1 < this.tracks.length ) {
 118                                 this.next();
 119                         } else {
 120                                 this.index = 0;
 121                                 this.current = this.tracks.at( this.index );
 122                                 this.loadCurrent();
 123                         }
 124                 },
 125
 126                 next : function () {
 127                         this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
 128                         this.setCurrent();
 129                 },
 130
 131                 prev : function () {
 132                         this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
 133                         this.setCurrent();
 134                 },
 135
 136                 loadCurrent : function () {
 137                         var last = this.playerNode.attr( 'src' ).split('.').pop(),
 138                                 current = this.current.get( 'src' ).split('.').pop();
 139
 140                         this.player.pause();
 141
 142                         if ( last !== current ) {
 143                                 this.setPlayer();
 144                         } else {
 145                                 this.playerNode.attr( 'src', this.current.get( 'src' ) );
 146                                 this.playCurrentSrc();
 147                         }
 148                 },
 149
 150                 setCurrent : function () {
 151                         this.current = this.tracks.at( this.index );
 152
 153                         if ( this.data.tracklist ) {
 154                                 this.$( '.wp-playlist-item' )
 155                                         .removeClass( this.playingClass )
 156                                         .eq( this.index )
 157                                                 .addClass( this.playingClass );
 158                         }
 159
 160                         this.loadCurrent();
 161                 }
 162         });
 163
 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 });
 168                         });
 169                 }
 170     });
 171
 172         window.WPPlaylistView = WPPlaylistView;
 173
 174 }(jQuery, _, Backbone));