[ Index ] |
PHP Cross Reference of WordPress |
[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));
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Thu Dec 5 01:00:03 2024 | Cross-referenced by PHPXref 0.7.1 |