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