diff --git a/static/css/audience_display.css b/static/css/audience_display.css index 9de52cc..55e8fff 100644 --- a/static/css/audience_display.css +++ b/static/css/audience_display.css @@ -13,7 +13,7 @@ html { position: absolute; bottom: -210px; width: 100%; - height: 180px; + height: 170px; display: flex; flex-direction: column; align-items: center; diff --git a/static/js/audience_display.js b/static/js/audience_display.js index 0267a48..fb48b08 100644 --- a/static/js/audience_display.js +++ b/static/js/audience_display.js @@ -9,13 +9,18 @@ var transitionMap; var currentScreen = "blank"; var redSide; var blueSide; +var overlayCenteringHideParams; +var overlayCenteringShowParams; var allianceSelectionTemplate = Handlebars.compile($("#allianceSelectionTemplate").html()); var sponsorImageTemplate = Handlebars.compile($("#sponsorImageTemplate").html()); var sponsorTextTemplate = Handlebars.compile($("#sponsorTextTemplate").html()); // Constants for overlay positioning. The CSS is the source of truth for the values that represent initial state. -var overlayCenteringHidden = $("#overlayCentering").css("bottom"); -var overlayCenteringPresent = "0px"; +var overlayCenteringTopUp = "-130px"; +var overlayCenteringBottomHideParams = {queue: false, bottom: $("#overlayCentering").css("bottom")}; +var overlayCenteringBottomShowParams = {queue: false, bottom: "0px"}; +var overlayCenteringTopHideParams = {queue: false, top: overlayCenteringTopUp}; +var overlayCenteringTopShowParams = {queue: false, top: "50px"}; var eventMatchInfoDown = "30px"; var eventMatchInfoUp = $("#eventMatchInfo").css("height"); var logoUp = "-3px"; @@ -161,7 +166,7 @@ var handleLowerThird = function(data) { }; var transitionBlankToIntro = function(callback) { - $("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function() { + $("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function() { $(".teams").css("display", "flex"); $(".avatars").css("display", "flex"); $(".avatars").css("opacity", 1); @@ -190,13 +195,13 @@ var transitionIntroToBlank = function(callback) { $(".avatars").css("opacity", 0); $(".avatars").hide(); $(".teams").hide(); - $("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback); + $("#overlayCentering").transition(overlayCenteringHideParams, 1000, "ease", callback); }); }); }; var transitionBlankToInMatch = function(callback) { - $("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function() { + $("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function() { $(".teams").css("display", "flex"); $("#logo").transition({queue: false, top: logoUp}, 500, "ease"); $(".score").transition({queue: false, width: scoreOut}, 500, "ease", function() { @@ -227,7 +232,7 @@ var transitionInMatchToBlank = function(callback) { $("#logo").transition({queue: false, top: logoDown}, 500, "ease"); $(".score").transition({queue: false, width: scoreIn}, 500, "ease", function() { $(".teams").hide(); - $("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback); + $("#overlayCentering").transition(overlayCenteringHideParams, 1000, "ease", callback); }); }); }; @@ -358,7 +363,7 @@ var transitionSponsorToScore = function(callback) { }; var transitionBlankToTimeout = function(callback) { - $("#overlayCentering").transition({queue: false, bottom: overlayCenteringPresent}, 500, "ease", function () { + $("#overlayCentering").transition(overlayCenteringShowParams, 500, "ease", function () { $("#logo").transition({queue: false, top: logoUp}, 500, "ease", function() { $("#matchTime").transition({queue: false, opacity: 1}, 750, "ease", callback); }); @@ -382,7 +387,7 @@ var transitionIntroToTimeout = function(callback) { var transitionTimeoutToBlank = function(callback) { $("#matchTime").transition({queue: false, opacity: 0}, 300, "linear", function() { $("#logo").transition({queue: false, top: logoDown}, 500, "ease", function() { - $("#overlayCentering").transition({queue: false, bottom: overlayCenteringHidden}, 1000, "ease", callback); + $("#overlayCentering").transition(overlayCenteringHideParams, 1000, "ease", callback); }); }); }; @@ -462,6 +467,14 @@ $(function() { } $(".reversible-left").attr("data-reversed", reversed); $(".reversible-right").attr("data-reversed", reversed); + if (urlParams.get("overlayLocation") === "top") { + overlayCenteringHideParams = overlayCenteringTopHideParams; + overlayCenteringShowParams = overlayCenteringTopShowParams; + $("#overlayCentering").css("top", overlayCenteringTopUp); + } else { + overlayCenteringHideParams = overlayCenteringBottomHideParams; + overlayCenteringShowParams = overlayCenteringBottomShowParams; + } // Fall back to a blank avatar if one doesn't exist for the team. $(".avatar, .final-avatar").attr("onerror", "this.src='" + getAvatarUrl(0) + "';"); diff --git a/web/audience_display.go b/web/audience_display.go index 883a85c..e83a9a3 100644 --- a/web/audience_display.go +++ b/web/audience_display.go @@ -18,7 +18,8 @@ func (web *Web) audienceDisplayHandler(w http.ResponseWriter, r *http.Request) { return } - if !web.enforceDisplayConfiguration(w, r, map[string]string{"background": "#0f0", "reversed": "false"}) { + if !web.enforceDisplayConfiguration(w, r, map[string]string{"background": "#0f0", "reversed": "false", + "overlayLocation": "bottom"}) { return }