From fbc335bcbc07f476dbe027e237e27b6acd62f07c Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Thu, 23 Mar 2023 10:26:54 +0100
Subject: [PATCH] Video autoplay and logic for unmuting

---
 index.html          |  4 ++--
 sass/style.scss     | 17 +++++++++++++++++
 static/img/mute.svg |  1 +
 static/js/player.js | 10 ++++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 static/img/mute.svg

diff --git a/index.html b/index.html
index f99c624..8e1259e 100644
--- a/index.html
+++ b/index.html
@@ -36,8 +36,8 @@
 						<p>Provází je traumata a problémy, které se promítají do jejich prospěchu i chování.</p>
 						<p>Buďme jim oporou.</p>
 					</div>
-					<div class="player">
-						<video id="video" poster="/static/vid/pestouni.jpg">
+					<div class="player muted">
+						<video id="video" poster="/static/vid/pestouni.jpg" autoplay muted>
 							<source src="/static/vid/pestouni.mp4" type="video/mp4" id="source">
 						</video>
 					</div>
diff --git a/sass/style.scss b/sass/style.scss
index c10a05a..7f5a6bb 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -212,12 +212,29 @@ body.noscroll {
 
 		.player {
 			cursor: pointer;
+			position: relative;
+
+			&.muted:after {
+				content: "";
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				height: 5rem;
+				width: 5rem;
+				transform: translate(-2rem, -2.5rem);
+				background-image: url("/static/img/mute.svg");
+				background-position: center;
+				background-size: contain;
+				background-repeat: no-repeat;
+				pointer-events: none;
+			}
 
 			video {
 				width: 100%;
 				border-radius: 2rem;
 				box-shadow: 0 0 90px 20px rgba(194,66,66,0.75);
 				transition: box-shadow 1s ease;
+
 			}
 		}
 
diff --git a/static/img/mute.svg b/static/img/mute.svg
new file mode 100644
index 0000000..07b7104
--- /dev/null
+++ b/static/img/mute.svg
@@ -0,0 +1 @@
+<svg width="1339.018" height="1338.921" viewBox="0 0 354.282 354.256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:#fff;stroke-width:.264583" d="M50.091 436.322c-1.062-.278-2.67-.887-3.572-1.352-1.453-.75-20.262-19.468-164.78-163.984-153.526-153.523-163.197-163.247-164.086-164.99-1.309-2.564-1.846-4.819-1.828-7.673.028-4.588 1.39-7.837 4.665-11.136 3.188-3.21 6.395-4.602 10.593-4.599 2.826.002 5.398.575 7.805 1.739 1.94.938 2.998 1.973 46.569 45.512l44.585 44.553 42.595-41.84c24.676-24.24 43.465-42.492 44.663-43.389 12.283-9.192 25.35-4.53 27.689 9.878.18 1.108.27 33.186.272 96.123l.003 94.46 60.978 60.967c60.418 60.406 60.99 60.987 62.066 63.11.82 1.62 1.19 2.777 1.509 4.726.386 2.36.386 2.783 0 4.956-1.663 9.384-10.692 15.306-19.725 12.94zm-124.137-1.583c-3.593-.97-7.285-3.031-10.484-5.851-.888-.783-25.394-24.64-54.458-53.017l-52.843-51.594-29.15-.132-29.151-.132-1.724-.587c-4.777-1.626-8.77-5.509-10.33-10.044-.292-.846-.65-2.67-.798-4.053-.175-1.635-.24-19.543-.187-51.198.091-54.453-.085-49.681 1.986-53.686 1.297-2.508 4.334-5.539 6.687-6.675 3.657-1.765 3.7-1.77 14.267-1.885l9.637-.104 87.928 87.928 87.929 87.928v22.358c0 18.396-.07 22.782-.39 24.754-1.322 8.152-5.002 13.586-10.66 15.74-2.208.842-5.68.947-8.258.25z" transform="translate(284.175 -82.588)"/></svg>
\ No newline at end of file
diff --git a/static/js/player.js b/static/js/player.js
index 9f91c2c..c039c7b 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -23,6 +23,16 @@ for (i = 0; i < video_list.length; i++) {
 }
 
 video.addEventListener("click", function() {
+
+	if (this.muted) {
+		this.parentNode.classList.remove("muted");
+		this.pause();
+		this.muted = false;
+		this.currentTime = 0;
+		this.play();
+		return;
+	}
+
 	if (this.paused)
 		this.play();
 	else