' + jQuery.VideoPress.error.messages.age + "
"); } else { jQuery.VideoPress.video.play(container_el); } }, allowedDomain: function (allowed_domains) { if ( jQuery.type(allowed_domains)==="array" ) { if ( jQuery.inArray( top.document.location.hostname, allowed_domains )===-1 ) { return false; } } return true; } }, video:{ flash:{ // Protocol and domain for player_uri and expressinstall set in video.play() player_uri: ( 'https:' == location.protocol ? 'https://v0.wordpress.com' : 'http://s0.videopress.com' ) + "/player.swf?v=1.04", min_version:"10.0.0", params:{wmode:"direct",quality:"autohigh",seamlesstabbing:"true",allowfullscreen:"true",allowscriptaccess:"always",overstretch:"true"}, expressinstall: ( 'https:' == location.protocol ? 'https://v0.wordpress.com' : 'http://s0.videopress.com' ) + "/playerProductInstall.swf", embedCallback: function(event) { if ( event.success===false ) { jQuery("#" + event.id).html("" + jQuery.VideoPress.error.messages.flash + "
"); } } }, types:{mp4:'video/mp4; codecs="avc1.64001E, mp4a.40.2"',ogv:'video/ogg; codecs="theora, vorbis"'}, canPlay:function () { if ( jQuery.VideoPress.support.flash() ) { jQuery.VideoPress.video.playerSupport = "flash"; } else if ( jQuery.VideoPress.support.html5Video() ) { if ( jQuery.VideoPress.support.html5Video( jQuery.VideoPress.video.types.mp4 ) ) { jQuery.VideoPress.video.playerSupport = "mp4"; } else if ( jQuery.VideoPress.support.html5Video( jQuery.VideoPress.video.types.ogv ) ) { jQuery.VideoPress.video.playerSupport = "ogv"; } else { jQuery.VideoPress.video.playerSupport = "html5"; } } else { jQuery.VideoPress.video.playerSupport = ""; } }, prepare: function ( guid, config, count ) { var video = jQuery.VideoPress.data[guid][count]; if ( config.container === undefined || jQuery.type(video)!=="object" ) { return; } var width = 0; if ( config.width !== undefined ) { width = config.width; } else { config.container.width(); } var height = 0; if ( config.height !== undefined ) { height = config.height; } else { config.container.height(); } var div_id = "#v-" + guid + '-' + count; var parent_width = jQuery( div_id ).parent().width(); var diffw = 0; var diffh = 0; var ratio = 0; if ( width > parent_width ) { diffw = width - parent_width + 11; ratio = ( width * 1.0 ) / ( height * 1.0 ); diffh = diffw / ratio; width -= diffw; height -= Math.round( diffh ); } if ( width < 60 || height < 60 ) { width = 400; height = 300; } jQuery.VideoPress.data[guid][count].dimensions = {}; if( 0 == ratio ) { jQuery.VideoPress.data[guid][count].dimensions.width = width; jQuery.VideoPress.data[guid][count].dimensions.height = height; } else { jQuery.VideoPress.data[guid][count].dimensions.width = width - 7; jQuery.VideoPress.data[guid][count].dimensions.height = height - Math.round( 7 / ratio ); jQuery( div_id ).width( width ); jQuery( div_id ).height( height + 50 ); jQuery( div_id + "-placeholder" ).width( jQuery.VideoPress.data[guid][count].dimensions.width ); jQuery( div_id + "-placeholder" ).height( jQuery.VideoPress.data[guid][count].dimensions.height ); jQuery( div_id + "-placeholder img.videopress-poster" ).width( jQuery.VideoPress.data[guid][count].dimensions.width ); jQuery( div_id + "-placeholder img.videopress-poster" ).height( jQuery.VideoPress.data[guid][count].dimensions.height ); } config.container.data( "guid", guid ); config.container.data( "count", count ); if ( jQuery.VideoPress.video.playerSupport === undefined ) { jQuery.VideoPress.video.canPlay(); } if ( config.freedom===true && jQuery.type(video.ogv)==="string" ) { jQuery.VideoPress.video.insert( config.container, guid, count, video, "ogv", jQuery.VideoPress.data[guid][count].dimensions.width, jQuery.VideoPress.data[guid].dimensions.height ); config.container.data( "player", "ogv" ); } else if ( jQuery.VideoPress.video.playerSupport === "flash" ) { config.container.data( "player", "flash" ); config.container.append( '' + jQuery.VideoPress.error.messages.incompatible + '
'); return false; } return true; }, insert: function( container_el, guid, count, video_data, video_type, width, height ) { var video_id = "v-" + guid + "-" + count + "-video"; var video_el = jQuery(""); video_el.attr( "id", video_id ); video_el.attr( "width", width ); video_el.attr( "height", height ); video_el.attr( "poster", video_data.poster ); if ( video_type==="ogv" ) { video_el.attr( "preload", "metadata" ); } else { video_el.attr( "preload", "none" ); } video_el.attr( "controls", "true" ); video_el.attr( "x-webkit-airplay", "allow" ); if ( video_type==="mp4" && video_data.mp4!==undefined && jQuery.type(video_data.mp4.uri)==="string" ) { video_el.attr( "src", video_data.mp4.uri ); } else if ( video_type==="ogv" && video_data.ogv!==undefined && jQuery.type(video_data.ogv.uri)==="string" ) { video_el.attr( "src", video_data.ogv.uri ); } else { // Purposely omit source type attribute since the browser does not seem to support specifics such as canPlayType if ( video_data.mp4!==undefined && jQuery.type(video_data.mp4.uri)==="string" ) { video_el.append( '' + jQuery.VideoPress.error.messages.incompatible + "
" ); video_el.hide(); container_el.append( video_el ); video_el=null; video_id=null; }, play: function( container_el ) { var player = container_el.data( "player" ); if ( player===undefined ) { player="flash"; } var guid = container_el.data( "guid" ); var count = container_el.data( "count" ); if ( player === "flash" ) { jQuery( "#" + container_el.attr("id") + "-placeholder", container_el ).remove(); var player_uri = jQuery.VideoPress.video.flash.player_uri; var expressinstall = jQuery.VideoPress.video.flash.expressinstall; swfobject.embedSWF( player_uri, "v-" + guid + "-" + count + "-video", jQuery.VideoPress.data[guid][count].dimensions.width, jQuery.VideoPress.data[guid][count].dimensions.height, jQuery.VideoPress.video.flash.min_version, expressinstall, {guid:guid,autoPlay:"true",isDynamicSeeking:"true",hd:jQuery.VideoPress.data[guid][count].hd}, jQuery.VideoPress.video.flash.params, null, jQuery.VideoPress.video.flash.embedCallback ); } else if ( jQuery.inArray( player, ["html5", "mp4", "ogv"] ) ) { var video_el = jQuery("video", container_el); if ( video_el ) { jQuery( "#" + container_el.attr("id") + "-placeholder", container_el ).remove(); if ( player==="html5" ) { player = "mp4"; } jQuery.VideoPress.video.playHTML5( video_el, guid, player ); } } else { jQuery( "#" + container_el.attr("id") + "-placeholder", container_el ).remove(); container_el.append( 'Unable to play video. No suitable player.
' ); } var play_event = new CustomEvent( 'videopress_play_video', { 'detail': { 'video_id': guid } } ); window.dispatchEvent( play_event ); }, playHTML5: function( video_el, guid, filetype ) { video_el.show(); video_el[0].load(); /* It seems load() sometimes does not work, but play() will trigger load. * Tried attaching play() to a data event but data might not load * So we trigger play() even if there is not enough data loaded to begin playback */ video_el[0].play(); jQuery.VideoPress.analytics.played(guid, filetype); video_el.bind( "error stalled", function(e) { var message = jQuery.VideoPress.error.messages.error; try { // provide a more detailed error message if a failure reason is communicated switch (e.target.error.code) { case e.target.error.MEDIA_ERR_NETWORK: message = jQuery.VideoPress.error.messages.network; break; case e.target.error.MEDIA_ERR_DECODE: case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: message = jQuery.VideoPress.error.messages.incapable + " " + filetype.toUpperCase() + "."; break; default: break; } } catch( err ){} // provide an opportunity to silence an error with an empty string if ( message.length > 0 ) { video_el.html( '' + message + "
" ); } message=null; } ); video_el.bind( "durationchange", {guid:guid}, function( event ) { var duration = jQuery(event.target).attr("duration"); if ( jQuery.type(duration)==="number" ) { jQuery.VideoPress.data[event.data.guid].duration = duration; } duration=null; } ); /* Only record stats after video data has loaded * If html5 video seems to work but we could not match on a specific codec descriptor then there may be multiple source elements. Browser chooses a source at runtime in source order. We check the loaded video filetype instead of assuming MP4. */ video_el.one( "loadeddata", {guid:guid, filetype:filetype}, function( event ){ var filetype = event.data.filetype; var loaded_file = jQuery(event.target).attr("currentSrc"); if ( jQuery.type(loaded_file)==="string" && loaded_file.length > 3 ) { var ext = loaded_file.substr( loaded_file.lastIndexOf(".") + 1 ).toLowerCase(); if ( jQuery.inArray( ext, ["mp4","ogv"] ) ) { filetype = ext; } ext=null; } video_el.bind( "play", {guid:event.data.guid,filetype:filetype}, function( event ) { jQuery.VideoPress.analytics.played(event.data.guid, event.data.filetype); } ); video_el.bind( "timeupdate", {guid:event.data.guid,filetype:filetype}, function( event ) { var target = jQuery(event.target); jQuery.VideoPress.analytics.watched( event.data.guid, event.data.filetype, target.attr("currentTime"), target.attr("initialTime") ); target=null; } ); video_el.bind( "ended", {guid:event.data.guid,filetype:filetype}, function( event ) { jQuery.VideoPress.analytics.watched( event.data.guid, event.data.filetype, jQuery.VideoPress.data[guid].duration, jQuery(event.target).attr("initialTime") ); } ); } ); } } }}); ; ( function ( $ ) { function TiledGalleryCollection() { this.galleries = []; this.findAndSetupNewGalleries(); } TiledGalleryCollection.prototype.findAndSetupNewGalleries = function () { var self = this; $( '.tiled-gallery.tiled-gallery-unresized' ).each( function () { self.galleries.push( new TiledGallery( $( this ) ) ); } ); }; TiledGalleryCollection.prototype.resizeAll = function () { $.each( this.galleries, function ( i, gallery ) { gallery.resize(); } ); }; function TiledGallery( galleryElem ) { this.gallery = galleryElem; this.addCaptionEvents(); // Resize when initialized to fit the gallery to window dimensions this.resize(); // Displays the gallery and prevents it from being initialized again this.gallery.removeClass( 'tiled-gallery-unresized' ); } /** * Selector for all resizeable elements inside a Tiled Gallery */ TiledGallery.prototype.resizeableElementsSelector = '.gallery-row, .gallery-group, .tiled-gallery-item img'; /** * Story */ TiledGallery.prototype.addCaptionEvents = function () { // Hide captions this.gallery.find( '.tiled-gallery-caption' ).hide(); // Add hover effects to bring the caption up and down for each item this.gallery.find( '.tiled-gallery-item' ).hover( function () { $( this ).find( '.tiled-gallery-caption' ).stop( true, true ).slideDown( 'fast' ); }, function () { $( this ).find( '.tiled-gallery-caption' ).stop( true, true ).slideUp( 'fast' ); } ); }; TiledGallery.prototype.getExtraDimension = function ( el, attribute, mode ) { if ( mode === 'horizontal' ) { var left = attribute === 'border' ? 'borderLeftWidth' : attribute + 'Left'; var right = attribute === 'border' ? 'borderRightWidth' : attribute + 'Right'; return ( parseInt( el.css( left ), 10 ) || 0 ) + ( parseInt( el.css( right ), 10 ) || 0 ); } else if ( mode === 'vertical' ) { var top = attribute === 'border' ? 'borderTopWidth' : attribute + 'Top'; var bottom = attribute === 'border' ? 'borderBottomWidth' : attribute + 'Bottom'; return ( parseInt( el.css( top ), 10 ) || 0 ) + ( parseInt( el.css( bottom ), 10 ) || 0 ); } else { return 0; } }; TiledGallery.prototype.resize = function () { // Resize everything in the gallery based on the ratio of the current content width // to the original content width; var originalWidth = this.gallery.data( 'original-width' ); var currentWidth = this.gallery.parent().width(); var resizeRatio = Math.min( 1, currentWidth / originalWidth ); var self = this; this.gallery.find( this.resizeableElementsSelector ).each( function () { var thisGalleryElement = $( this ); var marginWidth = self.getExtraDimension( thisGalleryElement, 'margin', 'horizontal' ); var marginHeight = self.getExtraDimension( thisGalleryElement, 'margin', 'vertical' ); var paddingWidth = self.getExtraDimension( thisGalleryElement, 'padding', 'horizontal' ); var paddingHeight = self.getExtraDimension( thisGalleryElement, 'padding', 'vertical' ); var borderWidth = self.getExtraDimension( thisGalleryElement, 'border', 'horizontal' ); var borderHeight = self.getExtraDimension( thisGalleryElement, 'border', 'vertical' ); // Take all outer dimensions into account when resizing so that images // scale with constant empty space between them var outerWidth = thisGalleryElement.data( 'original-width' ) + paddingWidth + borderWidth + marginWidth; var outerHeight = thisGalleryElement.data( 'original-height' ) + paddingHeight + borderHeight + marginHeight; // Subtract margins so that images don't overflow on small browser windows thisGalleryElement .width( Math.floor( resizeRatio * outerWidth ) - marginWidth ) .height( Math.floor( resizeRatio * outerHeight ) - marginHeight ); } ); }; /** * Resizing logic */ var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; function attachResizeInAnimationFrames( tiledGalleries ) { var resizing = false; var resizeTimeout = null; function handleFrame() { tiledGalleries.resizeAll(); if ( resizing ) { requestAnimationFrame( handleFrame ); } } $( window ).resize( function () { clearTimeout( resizeTimeout ); if ( ! resizing ) { requestAnimationFrame( handleFrame ); } resizing = true; resizeTimeout = setTimeout( function () { resizing = false; }, 15 ); } ); } function attachPlainResize( tiledGalleries ) { $( window ).resize( function () { tiledGalleries.resizeAll(); } ); } /** * Ready, set... */ $( document ).ready( function () { var tiledGalleries = new TiledGalleryCollection(); $( 'body' ).on( 'post-load', function ( e, maybeResize ) { if ( 'string' === typeof maybeResize && 'resize' === maybeResize ) { tiledGalleries.resizeAll(); } else { tiledGalleries.findAndSetupNewGalleries(); } } ); $( document ).on( 'page-rendered.wpcom-newdash', function () { tiledGalleries.findAndSetupNewGalleries(); } ); // Chrome is a unique snow flake and will start lagging on occasion // It helps if we only resize on animation frames // // For other browsers it seems like there is no lag even if we resize every // time there is an event if ( window.chrome && requestAnimationFrame ) { attachResizeInAnimationFrames( tiledGalleries ); } else { attachPlainResize( tiledGalleries ); } if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) { wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) { if ( wp.isJetpackWidgetPlaced( placement, 'gallery' ) ) { tiledGalleries.findAndSetupNewGalleries(); } } ); } } ); } )( jQuery ); ;