diff --git a/public/css/controls.css b/public/css/controls.css index b74bf5f4..e9d47c11 100755 --- a/public/css/controls.css +++ b/public/css/controls.css @@ -30,7 +30,6 @@ /* Big Button */ #controls-big-play-button { - display: none; width: 57px; height: 66px; background: url( "../resources/controls/icon_play.png" ) no-repeat; diff --git a/public/src/embed.js b/public/src/embed.js index 2ebca940..ec49b453 100644 --- a/public/src/embed.js +++ b/public/src/embed.js @@ -266,8 +266,6 @@ function init() { "popcorn" ], function( URI, Controls, TextboxWrapper ) { - // cornfield writes out the Popcorn initialization code as popcornDataFn() - window.popcornDataFn(); /** * Expose Butter so we can get version info out of the iframe doc's embed. * This "butter" is never meant to live in a page with the full "butter". @@ -276,7 +274,7 @@ function init() { var Butter = { version: "Butter-Embed-@VERSION@" }, - popcorn = Popcorn.byId( "Butter-Generated" ), + popcorn, config, qs = URI.parse( window.location.href ).queryKey, container = document.querySelectorAll( ".container" )[ 0 ]; @@ -321,10 +319,7 @@ function init() { showinfo: qs.showinfo === "0" ? false : true }; - // Always show controls. See #2284 and #2298 on supporting - // options.controls, options.autohide. - popcorn.controls( true ); - Controls.create( "controls", popcorn, { + Controls.create( "controls", { onShareClick: function() { shareClick( popcorn ); }, @@ -333,6 +328,43 @@ function init() { }, onFullscreenClick: function() { fullscreenClick(); + }, + init: function( setPopcorn ) { + // cornfield writes out the Popcorn initialization code as popcornDataFn() + window.popcornDataFn(); + popcorn = Popcorn.byId( "Butter-Generated" ); + setPopcorn( popcorn ); + // Always show controls. See #2284 and #2298 on supporting + // options.controls, options.autohide. + popcorn.controls( true ); + + if ( config.loop ) { + popcorn.loop( true ); + } + + // Either the video is ready, or we need to wait. + if ( popcorn.readyState() >= 1 ) { + onLoad(); + } else { + popcorn.media.addEventListener( "canplay", onLoad ); + } + + if ( config.branding ) { + setupClickHandlers( popcorn, config ); + setupEventHandlers( popcorn, config ); + + // Wrap textboxes so they click-to-highlight and are readonly + TextboxWrapper.applyTo( $( "#share-url" ), { readOnly: true } ); + TextboxWrapper.applyTo( $( "#share-iframe" ), { readOnly: true } ); + + // Write out the iframe HTML necessary to embed this + $( "#share-iframe" ).value = buildIFrameHTML(); + + // Get the page's canonical URL and put in share URL + $( "#share-url" ).value = getCanonicalURL(); + } + + setupAttribution( popcorn ); } }); @@ -341,9 +373,6 @@ function init() { var embedInfo = document.getElementById( "embed-info" ); embedInfo.parentNode.removeChild( embedInfo ); } - if ( config.loop ) { - popcorn.loop( true ); - } // Some config options want the video to be ready before we do anything. function onLoad() { @@ -388,30 +417,6 @@ function init() { } } - // Either the video is ready, or we need to wait. - if ( popcorn.readyState() >= 1 ) { - onLoad(); - } else { - popcorn.media.addEventListener( "canplay", onLoad ); - } - - if ( config.branding ) { - setupClickHandlers( popcorn, config ); - setupEventHandlers( popcorn, config ); - - // Wrap textboxes so they click-to-highlight and are readonly - TextboxWrapper.applyTo( $( "#share-url" ), { readOnly: true } ); - TextboxWrapper.applyTo( $( "#share-iframe" ), { readOnly: true } ); - - // Write out the iframe HTML necessary to embed this - $( "#share-iframe" ).value = buildIFrameHTML(); - - // Get the page's canonical URL and put in share URL - $( "#share-url" ).value = getCanonicalURL(); - } - - setupAttribution( popcorn ); - if ( window.Butter && console && console.warn ) { console.warn( "Butter Warning: page already contains Butter, removing." ); delete window.Butter; diff --git a/public/src/ui/widget/controls.js b/public/src/ui/widget/controls.js index 77077f9a..979095b5 100644 --- a/public/src/ui/widget/controls.js +++ b/public/src/ui/widget/controls.js @@ -2,16 +2,16 @@ * If a copy of the MIT license was not distributed with this file, you can * obtain one at https://raw.github.com/mozilla/butter/master/LICENSE */ -define( [ "util/lang", "util/time", "text!layouts/controls.html" ], - function( LangUtils, Time, CONTROLS_LAYOUT ) { +define( [ "util/lang", "util/time", "util/uri", "text!layouts/controls.html" ], + function( LangUtils, Time, URI, CONTROLS_LAYOUT ) { - function Controls( container, p, options ) { + function Controls( container, options ) { var LEFT_MOUSE_BUTTON = 0, SPACE_BAR = 32; var _controls = LangUtils.domFragment( CONTROLS_LAYOUT ).querySelector( "#butter-controls" ), - _container = typeof container === "string" ? document.getElementById( container ) : container, + _container = typeof container === "string" ? document.getElementById( container ) : container, p, // variables muteButton, playButton, currentTimeDialog, fullscreenButton, durationDialog, timebar, progressBar, bigPlayButton, @@ -30,10 +30,26 @@ define( [ "util/lang", "util/time", "text!layouts/controls.html" ], onShareClick = options.onShareClick || nop, onRemixClick = options.onRemixClick || nop, onFullscreenClick = options.onFullscreenClick || nop, - onLogoClick = options.onLogoClick || nop; + onLogoClick = options.onLogoClick || nop, + init = options.init || nop; - p.controls( false ); - _container.appendChild( _controls ); + function onInit() { + + document.removeEventListener( "click", onInit, false ); + function setPopcorn( popcorn ) { + p = popcorn; + } + init( setPopcorn ); + + p.controls( false ); + if ( p.readyState() >= 1 ) { + + ready(); + } else { + + p.media.addEventListener( "loadedmetadata", ready, false ); + } + } var ready = function() { p.media.removeEventListener( "loadedmetadata", ready, false ); @@ -73,6 +89,7 @@ define( [ "util/lang", "util/time", "text!layouts/controls.html" ], p.media.removeEventListener( "play", bigPlayClicked, false ); bigPlayButton.removeEventListener( "click", bigPlayClicked, false ); bigPlayButton.classList.remove( "controls-ready" ); + bigPlayButton.classList.add( "hide-button" ); p.media.addEventListener( "mouseover", activate, false ); if ( p.paused() ) { p.play(); @@ -407,19 +424,20 @@ define( [ "util/lang", "util/time", "text!layouts/controls.html" ], } }; + _container.appendChild( _controls ); + + // If we're not autoPlay, wait for user interaction before we're ready. + if ( URI.parse( window.location ).queryKey[ "preload" ] === "none" ) { + document.addEventListener( "click", onInit, false ); + } else { + onInit(); + } + if ( !_container ) { return; } - if ( p.readyState() >= 1 ) { - - ready(); - } else { - - p.media.addEventListener( "loadedmetadata", ready, false ); - } - return _container; }