From b3b22308019ea36158da36563e9523ffeefe3c5e Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Mon, 27 Feb 2023 09:18:15 +0100
Subject: [PATCH] Add video interactivity scripts

It's a very dirty code, but there is no time to do optimizations with
the current deadline.
---
 index.html          | 13 +++++++------
 sass/style.scss     |  2 ++
 static/js/player.js | 30 ++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 static/js/player.js

diff --git a/index.html b/index.html
index 1721044..494f559 100644
--- a/index.html
+++ b/index.html
@@ -36,14 +36,14 @@
 						<p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>
 					</div>
 					<div class="player">
-						<video>
-							<source src="/static/vid/pestouni.mp4" type="video/mp4">
+						<video id="video" poster="/static/vid/pestouni.jpg">
+							<source src="/static/vid/pestouni.mp4" type="video/mp4" id="source">
 						</video>
 					</div>
-					<div class="video-list">
-						<img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" class="active">
-						<img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/tyrani.mp4">
-						<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4">
+					<div class="video-list" id="video-list">
+						<img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" data-shadow="0 0 42px 0 rgba(194,66,66,0.75)" class="active">
+						<img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/vid/tyrani.mp4" data-shadow="0 0 42px 0 rgba(81, 52, 147, 0.75)">
+						<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4" data-shadow="0px 0px 42px 0px rgba(172, 102, 59, 0.75)">
 					</div>
 					<a href="" class="button">Vyhledat pomoc</a>
 				</div>
@@ -220,6 +220,7 @@
 		</footer>
 
 	<script type="text/javascript" src="/static/js/nav.js"></script>
+	<script type="text/javascript" src="/static/js/player.js"></script>
 	<script type="text/javascript" src="/static/js/accordion.js"></script>
 	<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
 	</body>
diff --git a/sass/style.scss b/sass/style.scss
index c6e12df..db4a40d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -188,11 +188,13 @@ body.noscroll {
 		}
 
 		.player {
+			cursor: pointer;
 
 			video {
 				width: 100%;
 				border-radius: 2rem;
 				box-shadow: 0 0 42px 0 rgba(194,66,66,0.75);
+				transition: box-shadow 1s ease;
 			}
 		}
 
diff --git a/static/js/player.js b/static/js/player.js
new file mode 100644
index 0000000..9f91c2c
--- /dev/null
+++ b/static/js/player.js
@@ -0,0 +1,30 @@
+let video = document.getElementById("video");
+let source = document.getElementById("source");
+
+
+let video_list = document.getElementById("video-list").getElementsByTagName("img");
+var i;
+
+for (i = 0; i < video_list.length; i++) {
+	video_list[i].addEventListener("click", function() {
+		video.setAttribute("poster", this.getAttribute("src"));
+		source.setAttribute("src", this.dataset.video);
+		video.pause();
+		video.currentTime = 0;
+		video.load();
+
+		for (i = 0; i < video_list.length; i++) {
+			video_list[i].classList.remove("active");
+		}
+		this.classList.add("active");
+
+		video.style["box-shadow"] = this.dataset.shadow;
+	});
+}
+
+video.addEventListener("click", function() {
+	if (this.paused)
+		this.play();
+	else
+		this.pause();
+});