[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.png';
  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' ).resized;
  89                  this.playerNode.attr( dimensions );
  90              } else {
  91                  if ( ! this.data.images ) {
  92                      this.current.set( 'image', false );
  93                  }
  94                  this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
  95              }
  96          },
  97  
  98          renderTracks : function () {
  99              var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
 100              this.tracks.each(function (model) {
 101                  if ( ! self.data.images ) {
 102                      model.set( 'image', false );
 103                  }
 104                  model.set( 'artists', self.data.artists );
 105                  model.set( 'index', self.data.tracknumbers ? i : false );
 106                  tracklist.append( self.itemTemplate( model.toJSON() ) );
 107                  i += 1;
 108              });
 109              this.$el.append( tracklist );
 110  
 111              this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
 112          },
 113  
 114          events : {
 115              'click .wp-playlist-item' : 'clickTrack',
 116              'click .wp-playlist-next' : 'next',
 117              'click .wp-playlist-prev' : 'prev'
 118          },
 119  
 120          clickTrack : function (e) {
 121              e.preventDefault();
 122  
 123              this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
 124              this.setCurrent();
 125          },
 126  
 127          ended : function () {
 128              if ( this.index + 1 < this.tracks.length ) {
 129                  this.next();
 130              } else {
 131                  this.index = 0;
 132                  this.setCurrent();
 133              }
 134          },
 135  
 136          next : function () {
 137              this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
 138              this.setCurrent();
 139          },
 140  
 141          prev : function () {
 142              this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
 143              this.setCurrent();
 144          },
 145  
 146          loadCurrent : function () {
 147              var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
 148                  current = this.current.get( 'src' ).split('.').pop();
 149  
 150              this.mejs && this.mejs.pause();
 151  
 152              if ( last !== current ) {
 153                  this.setPlayer( true );
 154              } else {
 155                  this.playerNode.attr( 'src', this.current.get( 'src' ) );
 156                  this.playCurrentSrc();
 157              }
 158          },
 159  
 160          setCurrent : function () {
 161              this.current = this.tracks.at( this.index );
 162  
 163              if ( this.data.tracklist ) {
 164                  this.$( '.wp-playlist-item' )
 165                      .removeClass( this.playingClass )
 166                      .eq( this.index )
 167                          .addClass( this.playingClass );
 168              }
 169  
 170              this.loadCurrent();
 171          }
 172      });
 173  
 174      /**
 175       * Initialize media playlists in the document.
 176       *
 177       * Only initializes new playlists not previously-initialized.
 178       *
 179       * @since 4.9.3
 180       * @return {void}
 181       */
 182  	function initialize() {
 183          $( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {
 184              new WPPlaylistView( { el: this } );
 185          } );
 186      }
 187  
 188      /**
 189       * Expose the API publicly on window.wp.playlist.
 190       *
 191       * @namespace wp.playlist
 192       * @since 4.9.3
 193       * @type {object}
 194       */
 195      window.wp.playlist = {
 196          initialize: initialize
 197      };
 198  
 199      $( document ).ready( initialize );
 200  
 201      window.WPPlaylistView = WPPlaylistView;
 202  
 203  }(jQuery, _, Backbone));