Live stream in home screen

giannisdaras · Mar 22, 2018 · 6ed3fc7 · 6ed3fc7
1 parent 0c5d75f
commit 6ed3fc7
Show file tree

Hide file tree

Showing 8 changed files with 351 additions and 123 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
+	}
 };
 
 /***/ }),