[Summary view] [Print] [Text view]

   1  /* global _wpmejsSettings, MediaElementPlayer */
   2  
   3  (function ($, _, Backbone) {
   4      'use strict';
   5  
   6      /** @namespace wp */
   7      window.wp = window.wp || {};
   8  
   9      var WPPlaylistView = Backbone.View.extend(/** @lends WPPlaylistView.prototype */{
  10          /**
  11           * @constructs
  12           *
  13           * @param {Object} options          The options to create this playlist view with.
  14           * @param {Object} options.metadata The metadata
  15           */
  16          initialize : function (options) {
  17              this.index = 0;
  18              this.settings = {};
  19              this.data = options.metadata || $.parseJSON( this.$('script.wp-playlist-script').html() );
  20              this.playerNode = this.$( this.data.type );
  21  
  22              this.tracks = new Backbone.Collection( this.data.tracks );
  23              this.current = this.tracks.first();
  24  
  25              if ( 'audio' === this.data.type ) {
  26                  this.currentTemplate = wp.template( 'wp-playlist-current-item' );
  27                  this.currentNode = this.$( '.wp-playlist-current-item' );
  28              }
  29  
  30              this.renderCurrent();
  31  
  32              if ( this.data.tracklist ) {
  33                  this.itemTemplate = wp.template( 'wp-playlist-item' );
  34                  this.playingClass = 'wp-playlist-playing';
  35                  this.renderTracks();
  36              }
  37  
  38              this.playerNode.attr( 'src', this.current.get( 'src' ) );
  39  
  40              _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
  41  
  42              if ( ! _.isUndefined( window._wpmejsSettings ) ) {
  43                  this.settings = _.clone( _wpmejsSettings );
  44              }
  45              this.settings.success = this.bindPlayer;
  46              this.setPlayer();
  47          },
  48  
  49          bindPlayer : function (mejs) {
  50              this.mejs = mejs;
  51              this.mejs.addEventListener( 'ended', this.ended );
  52          },
  53  
  54          bindResetPlayer : function (mejs) {
  55              this.bindPlayer( mejs );
  56              this.playCurrentSrc();
  57          },
  58  
  59          setPlayer: function (force) {
  60              if ( this.player ) {
  61                  this.player.pause();
  62                  this.player.remove();
  63                  this.playerNode = this.$( this.data.type );
  64              }
  65  
  66              if (force) {
  67                  this.playerNode.attr( 'src', this.current.get( 'src' ) );
  68                  this.settings.success = this.bindResetPlayer;
  69              }
  70  
  71              // This is also our bridge to the outside world.
  72              this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
  73          },
  74  
  75          playCurrentSrc : function () {
  76              this.renderCurrent();
  77              this.mejs.setSrc( this.playerNode.attr( 'src' ) );
  78              this.mejs.load();
  79              this.mejs.play();
  80          },
  81  
  82          renderCurrent : function () {
  83              var dimensions, defaultImage = 'wp-includes/images/media/video.svg';
  84              if ( 'video' === this.data.type ) {
  85                  if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {
  86                      this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
  87                  }
  88                  dimensions = this.current.get( 'dimensions' );
  89                  if ( dimensions && dimensions.resized ) {
  90                      this.playerNode.attr( dimensions.resized );
  91                  }
  92              } else {
  93                  if ( ! this.data.images ) {
  94                      this.current.set( 'image', false );
  95                  }
  96                  this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
  97              }
  98          },
  99  
 100          renderTracks : function () {
 101              var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
 102              this.tracks.each(function (model) {
 103                  if ( ! self.data.images ) {
 104                      model.set( 'image', false );
 105                  }
 106                  model.set( 'artists', self.data.artists );
 107                  model.set( 'index', self.data.tracknumbers ? i : false );
 108                  tracklist.append( self.itemTemplate( model.toJSON() ) );
 109                  i += 1;
 110              });
 111              this.$el.append( tracklist );
 112  
 113              this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
 114          },
 115  
 116          events : {
 117              'click .wp-playlist-item' : 'clickTrack',
 118              'click .wp-playlist-next' : 'next',
 119              'click .wp-playlist-prev' : 'prev'
 120          },
 121  
 122          clickTrack : function (e) {
 123              e.preventDefault();
 124  
 125              this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
 126              this.setCurrent();
 127          },
 128  
 129          ended : function () {
 130              if ( this.index + 1 < this.tracks.length ) {
 131                  this.next();
 132              } else {
 133                  this.index = 0;
 134                  this.setCurrent();
 135              }
 136          },
 137  
 138          next : function () {
 139              this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
 140              this.setCurrent();
 141          },
 142  
 143          prev : function () {
 144              this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
 145              this.setCurrent();
 146          },
 147  
 148          loadCurrent : function () {
 149              var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
 150                  current = this.current.get( 'src' ).split('.').pop();
 151  
 152              this.mejs && this.mejs.pause();
 153  
 154              if ( last !== current ) {
 155                  this.setPlayer( true );
 156              } else {
 157                  this.playerNode.attr( 'src', this.current.get( 'src' ) );
 158                  this.playCurrentSrc();
 159              }
 160          },
 161  
 162          setCurrent : function () {
 163              this.current = this.tracks.at( this.index );
 164  
 165              if ( this.data.tracklist ) {
 166                  this.$( '.wp-playlist-item' )
 167                      .removeClass( this.playingClass )
 168                      .eq( this.index )
 169                          .addClass( this.playingClass );
 170              }
 171  
 172              this.loadCurrent();
 173          }
 174      });
 175  
 176      /**
 177       * Initialize media playlists in the document.
 178       *
 179       * Only initializes new playlists not previously-initialized.
 180       *
 181       * @since 4.9.3
 182       * @return {void}
 183       */
 184  	function initialize() {
 185          $( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {
 186              new WPPlaylistView( { el: this } );
 187          } );
 188      }
 189  
 190      /**
 191       * Expose the API publicly on window.wp.playlist.
 192       *
 193       * @namespace wp.playlist
 194       * @since 4.9.3
 195       * @type {object}
 196       */
 197      window.wp.playlist = {
 198          initialize: initialize
 199      };
 200  
 201      $( document ).ready( initialize );
 202  
 203      window.WPPlaylistView = WPPlaylistView;
 204  
 205  }(jQuery, _, Backbone));