From 6ed3fc7b4256f6e5653980d327d0bb17b1c54e88 Mon Sep 17 00:00:00 2001 From: Theo Diamantidis Date: Thu, 22 Mar 2018 17:14:14 +0200 Subject: [PATCH] Live stream in home screen --- app/Http/Controllers/HomeController.php | 6 +- public/css/app.css | 119 ++++++++++++++++++------ public/js/app.js | 55 +++++++++-- public/js/home-animations.js | 68 +++++++------- resources/assets/js/home-animations.js | 68 +++++++------- resources/assets/js/home.js | 46 ++++++++- resources/assets/sass/app.scss | 86 ++++++++++++++--- resources/views/home.twig | 26 +++++- 8 files changed, 351 insertions(+), 123 deletions(-) diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index b25b249..1b6c9d3 100644 --- a/app/Http/Controllers/HomeController.php +++ b/app/Http/Controllers/HomeController.php @@ -23,13 +23,15 @@ public function index(Request $request) { } $speakers = $query->get()->sortByAppearance(); + $now = date("Y-m-d H:m"); + $isToday = $request->testLive == "yes" || ($now >= "2018-03-24 10:30" && $now <= "2018-03-24 21:00"); $isPjax = $request->header('X-PJAX'); if ($isPjax) { - return response()->view('home', compact('isPjax', 'speakers'), 200) + return response()->view('home', compact('isPjax', 'isToday', 'speakers'), 200) ->header('X-PJAX-URL', LaravelLocalization::getLocalizedURL()); } - return view('home', compact('speakers')); + return view('home', compact('speakers', 'isToday')); } } diff --git a/public/css/app.css b/public/css/app.css index a419954..ab35fb6 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -12891,6 +12891,20 @@ a:hover { top: calc(100% - 8px); } +/* VERTICAL ALIGN HELPER */ + +.vertical-align { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + /* NAVIGATION MENU */ header.dark { @@ -13508,11 +13522,12 @@ article.home a:hover { color: #ff1505; } -article.home #mainContainer { - margin-top: 8rem; +article.home .home-sections { + margin-top: 2rem; } -article.home #leftStripe { +article.home #leftStripe, +article.home #rightStripe { width: 80%; height: 100%; position: absolute; @@ -13523,12 +13538,6 @@ article.home #leftStripe { article.home #rightStripe { margin-left: 2rem; - width: 80%; - height: 100%; - position: absolute; - background-image: url("/images/stripeFull-mini.png"); - background-size: 100% auto; - background-repeat: repeat-y; -webkit-transform: scaleX(-1); transform: scaleX(-1); } @@ -13587,7 +13596,7 @@ article.home #hero { color: white; border-bottom: 0; background: #202020; - min-height: 480px; + height: 480px; position: relative; } @@ -13716,6 +13725,60 @@ article.home #hero svg#logo-animation .secondary { stroke: #E66557; } +article.home #hero.live { + position: static; + height: auto; +} + +article.home #hero.live .section-content { + position: static; + /* outer height of nav = 4rem (height) + 1.2rem (padding) = 5.2rem */ + padding-top: 5.2rem; +} + +article.home #hero.live .live-container { + overflow: visible; +} + +article.home #hero.live .live-container .close { + display: none; + position: absolute; + top: -2rem; + left: -2rem; + font-size: 2rem; + color: white; + cursor: pointer; + z-index: 9999; + opacity: .75; +} + +article.home #hero.live .live-container .close:hover { + opacity: 1; +} + +article.home #hero.live.popup .live-container { + position: fixed; + bottom: 3vw; + right: 3vw; + width: 39vw; + max-width: 576px; + -webkit-box-shadow: 0 0 30px 8px #FFF; + box-shadow: 0 0 30px 8px #FFF; + z-index: 9998; +} + +article.home #hero.live.popup .live-container iframe#live { + opacity: .9; +} + +article.home #hero.live.popup .live-container iframe#live:hover { + opacity: 1; +} + +article.home #hero.live.popup .live-container .close { + display: inline-block; +} + article.home #chaos h2 img { width: auto; height: 0; @@ -14604,6 +14667,11 @@ article.license { margin: 0 6rem; } + article.home #hero.live .section-content { + /* outer height of nav = 4.2rem (height) + 1.2rem (padding) = 5.4rem */ + padding-top: 5.4rem; + } + article.home #speakers .speaker-container a { font-size: 1.2rem; } @@ -14688,11 +14756,11 @@ article.license { margin-bottom: 0; } - article.home #hero { + article.home #hero:not(.live) { height: 720px; } - article.home #hero .section-content { + article.home #hero:not(.live) .section-content { opacity: 0; bottom: -2rem; -webkit-transition: opacity 3s, bottom 3s; @@ -14701,19 +14769,19 @@ article.license { transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } - article.home #hero .section-content.slideIn { + article.home #hero:not(.live) .section-content.slideIn { opacity: 1; bottom: 0; } - article.home #hero h1 { + article.home #hero:not(.live) h1 { margin-top: 25rem; font-size: 3.5rem; font-weight: bold; } - article.home #hero canvas#lorenz, - article.home #hero svg#logo-animation { + article.home #hero:not(.live) canvas#lorenz, + article.home #hero:not(.live) svg#logo-animation { display: block; } @@ -15050,6 +15118,11 @@ article.license { padding: .5rem 0; } + article.home #hero.live .section-content { + /* outer height of nav = 4.8rem (height) + 1.2rem (padding) = 6rem */ + padding-top: 6rem; + } + article.home #speakers .speaker-container a { font-size: 1.25rem; } @@ -15067,15 +15140,9 @@ article.license { } } -.vertical-align { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; +@media screen and (orientation: portrait) { + article.home #hero.live.popup .live-container { + width: 84vw; + } } diff --git a/public/js/app.js b/public/js/app.js index 79592e5..4066273 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -36590,21 +36590,56 @@ $(function () { $(function () { - $(document).on("mouseover", "#hero .info a", function (e) { + /* IMPORTANT: Use debounce with scroll events for better performance */ - $(this).addClass("blink"); - }).on("mouseout", "#hero .info a", function (e) { + var sT, liveOffsetY, liveH; - $(this).removeClass("blink"); - }); + $(window).on("scroll resize", _.debounce(function () { - if ($("article.home").length > 0) { + if ($("#hero.live").length > 0) { - /* trigger home animations */ - homeAnimations(); + sT = $(window).scrollTop(); - $("body > header").addClass("home"); - } + if (!$("#hero.live").hasClass("popup")) { + liveOffsetY = $("#live").offset().top, liveH = $("#live").height(); + } + + if (!$("#hero.live").hasClass("popup") && !$("#hero.live").hasClass("no-popup") && sT > liveOffsetY + liveH / 2) { + + $("#hero.live h2").css("padding-bottom", liveH); + $("#hero.live").addClass("popup"); + } else if ($("#hero.live").hasClass("popup") && sT <= liveOffsetY + liveH / 2) { + + $("#hero.live h2").css("padding-bottom", 0); + $("#hero.live").removeClass("popup"); + } + } + })); + + $(document).on("click", ".live-container button.close", function (e) { + + if ($("#hero.live").hasClass("popup")) { + + $("#hero.live h2").css("padding-bottom", 0); + $("#hero.live").removeClass("popup").addClass("no-popup"); + } + }); + + $(document).on("mouseover", "#hero .info a", function (e) { + + $(this).addClass("blink"); + }).on("mouseout", "#hero .info a", function (e) { + + $(this).removeClass("blink"); + }); + + if ($("article.home").length > 0) { + + /* trigger home animations */ + homeAnimations(); + + $("body > header").addClass("home"); + } }); /***/ }), diff --git a/public/js/home-animations.js b/public/js/home-animations.js index 33d79d5..3b80108 100644 --- a/public/js/home-animations.js +++ b/public/js/home-animations.js @@ -79,41 +79,45 @@ module.exports = __webpack_require__(52); __webpack_require__(53); window.homeAnimations = function () { - var l = Lorenz({ - target: "lorenz", - length: 1000, - color: "#E62B1E", - pointSize: 4, - initial: { - x: 30, - y: 0, - z: 400 - }, - scale: { - x: 15, - y: 6, - z: -8 - }, - project: "xz", - velocity: 0.008, - sigma: 10, - rho: 28, - beta: 8 / 3 - }); + if ($("#lorenz").length > 0) { + var l = Lorenz({ + target: "lorenz", + length: 1000, + color: "#E62B1E", + pointSize: 4, + initial: { + x: 30, + y: 0, + z: 400 + }, + scale: { + x: 15, + y: 6, + z: -8 + }, + project: "xz", + velocity: 0.008, + sigma: 10, + rho: 28, + beta: 8 / 3 + }); + } - var trX = parseInt($("#logo-animation").width() / 2), - trY = parseInt($("#logo-animation").height() / 2), - tr = $("#logo-animation .container").attr("transform"); + if ($("#logo-animation").length > 0) { + var trX = parseInt($("#logo-animation").width() / 2), + trY = parseInt($("#logo-animation").height() / 2), + tr = $("#logo-animation .container").attr("transform"); - $("#logo-animation .container").attr("transform", "translate(" + trX + ", " + trY + ")" + tr); - /* start animation */ - $("#logo-animation .container g").css("animation-play-state", "running"); + $("#logo-animation .container").attr("transform", "translate(" + trX + ", " + trY + ")" + tr); + /* start animation */ + $("#logo-animation .container g").css("animation-play-state", "running"); - window.setTimeout(function () { - l.run(); - $("#logo-animation").fadeOut(2000); - $("#hero .section-content").addClass("slideIn"); - }, 5000); + window.setTimeout(function () { + l.run(); + $("#logo-animation").fadeOut(2000); + $("#hero .section-content").addClass("slideIn"); + }, 5000); + } }; /***/ }), diff --git a/resources/assets/js/home-animations.js b/resources/assets/js/home-animations.js index 28aae48..c8213f9 100644 --- a/resources/assets/js/home-animations.js +++ b/resources/assets/js/home-animations.js @@ -1,39 +1,43 @@ require('./lorenz'); window.homeAnimations = function() { - var l = Lorenz({ - target: "lorenz", - length: 1000, - color: "#E62B1E", - pointSize: 4, - initial: { - x: 30, - y: 0, - z: 400, - }, - scale: { - x: 15, - y: 6, - z: -8 - }, - project: "xz", - velocity: 0.008, - sigma: 10, - rho: 28, - beta: 8 / 3 - }) + if($("#lorenz").length > 0) { + var l = Lorenz({ + target: "lorenz", + length: 1000, + color: "#E62B1E", + pointSize: 4, + initial: { + x: 30, + y: 0, + z: 400, + }, + scale: { + x: 15, + y: 6, + z: -8 + }, + project: "xz", + velocity: 0.008, + sigma: 10, + rho: 28, + beta: 8 / 3 + }) + } - let trX = parseInt($("#logo-animation").width() / 2), - trY = parseInt($("#logo-animation").height() / 2), - tr = $("#logo-animation .container").attr("transform") + if($("#logo-animation").length > 0) { + let trX = parseInt($("#logo-animation").width() / 2), + trY = parseInt($("#logo-animation").height() / 2), + tr = $("#logo-animation .container").attr("transform") - $("#logo-animation .container").attr("transform", "translate(" + trX + ", " + trY + ")" + tr) - /* start animation */ - $("#logo-animation .container g").css("animation-play-state", "running") + $("#logo-animation .container").attr("transform", "translate(" + trX + ", " + trY + ")" + tr) + /* start animation */ + $("#logo-animation .container g").css("animation-play-state", "running") - window.setTimeout(function() { - l.run() - $("#logo-animation").fadeOut(2000) - $("#hero .section-content").addClass("slideIn") - }, 5000) + window.setTimeout(function() { + l.run() + $("#logo-animation").fadeOut(2000) + $("#hero .section-content").addClass("slideIn") + }, 5000) + } } \ No newline at end of file diff --git a/resources/assets/js/home.js b/resources/assets/js/home.js index a31d4a6..018adbc 100644 --- a/resources/assets/js/home.js +++ b/resources/assets/js/home.js @@ -1,5 +1,50 @@ $(function(){ + /* IMPORTANT: Use debounce with scroll events for better performance */ + + var sT, liveOffsetY, liveH + + $(window).on("scroll resize", _.debounce(function() { + + if($("#hero.live").length > 0) { + + sT = $(window).scrollTop() + + if(!$("#hero.live").hasClass("popup")) { + liveOffsetY = $("#live").offset().top, + liveH = $("#live").height() + } + + if(!$("#hero.live").hasClass("popup") + && !$("#hero.live").hasClass("no-popup") + && sT > liveOffsetY + liveH / 2) { + + $("#hero.live h2").css("padding-bottom", liveH) + $("#hero.live").addClass("popup") + + } else if($("#hero.live").hasClass("popup") + && sT <= liveOffsetY + liveH / 2) { + + $("#hero.live h2").css("padding-bottom", 0) + $("#hero.live").removeClass("popup") + + } + + } + + })) + + $(document).on("click", ".live-container button.close", function(e) { + + if($("#hero.live").hasClass("popup")) { + + $("#hero.live h2").css("padding-bottom", 0) + $("#hero.live").removeClass("popup").addClass("no-popup") + + } + + }) + $(document).on("mouseover", "#hero .info a", function(e){ $(this).addClass("blink") @@ -19,5 +64,4 @@ $(function(){ } - }); diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 407f05d..9760372 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -115,6 +115,14 @@ a { } } +/* VERTICAL ALIGN HELPER */ + +.vertical-align { + display: flex; + align-items: center; + justify-content: center; +} + /* NAVIGATION MENU */ header.dark { @@ -623,11 +631,11 @@ article.home { color: saturate($brand-primary, 20%); } - #mainContainer{ - margin-top:8rem; + .home-sections { + margin-top: 2rem; } - #leftStripe { + #leftStripe, #rightStripe { width: 80%; height: 100%; position: absolute; @@ -638,12 +646,6 @@ article.home { #rightStripe { margin-left: 2rem; - width: 80%; - height: 100%; - position: absolute; - background-image: url("/images/stripeFull-mini.png"); - background-size: 100% auto; - background-repeat: repeat-y; transform: scaleX(-1); } @@ -688,7 +690,7 @@ article.home { color: white; border-bottom: 0; background: #202020; - min-height: 480px; + height: 480px; position: relative; .section-content { position: relative; @@ -791,6 +793,52 @@ article.home { stroke: #E66557; } } + &.live { + position: static; + height: auto; + .section-content { + position: static; + /* outer height of nav = 4rem (height) + 1.2rem (padding) = 5.2rem */ + padding-top: 5.2rem; + } + .live-container { + overflow: visible; + .close { + display: none; + position: absolute; + top: -2rem; + left: -2rem; + font-size: 2rem; + color: white; + cursor: pointer; + z-index: 9999; + opacity: .75; + &:hover { + opacity: 1; + } + } + } + &.popup { + .live-container { + position: fixed; + bottom: 3vw; + right: 3vw; + width: 39vw; + max-width: 576px; + box-shadow: 0 0 30px 8px #FFF; + z-index: 9998; + iframe#live { + opacity: .9; + &:hover { + opacity: 1; + } + } + .close { + display: inline-block; + } + } + } + } } @@ -1512,6 +1560,10 @@ article.privacy, article.license { #hero .info a { margin: 0 6rem; } + #hero.live .section-content { + /* outer height of nav = 4.2rem (height) + 1.2rem (padding) = 5.4rem */ + padding-top: 5.4rem; + } #speakers { .speaker-container { a { @@ -1584,7 +1636,7 @@ article.privacy, article.license { margin-bottom: 0; } } - #hero { + #hero:not(.live) { height: 720px; .section-content { opacity: 0; @@ -1895,6 +1947,10 @@ article.privacy, article.license { padding: .5rem 0; } article.home { + #hero.live .section-content { + /* outer height of nav = 4.8rem (height) + 1.2rem (padding) = 6rem */ + padding-top: 6rem; + } #speakers { .speaker-container { a { @@ -1914,8 +1970,8 @@ article.privacy, article.license { } } -.vertical-align { - display: flex; - align-items: center; - justify-content: center; +@media screen and (orientation: portrait) { + article.home #hero.live.popup .live-container { + width: 84vw; + } } \ No newline at end of file diff --git a/resources/views/home.twig b/resources/views/home.twig index ab01756..11ebdc1 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -11,7 +11,9 @@ {% block content %}
+ {% if not isToday %}
+

TEDxNTUA Chaos

@@ -44,11 +46,26 @@ +

+ + {%- else %} +
+ +
+

We are live!

+
+ + +
+
+ {%- endif %} -
+
@@ -147,11 +164,10 @@
-
+
-
+ - - {% endblock %} +{% endblock %}