From 95c06636841d658fbdc1d539ec09f1841d9519aa Mon Sep 17 00:00:00 2001 From: Akshay Shekher Date: Sun, 10 May 2020 10:51:34 -0700 Subject: [PATCH 1/3] Made video muted by default and added overlay to ask the user to unmute --- static/css/site.css | 24 +++++++++++++++++++++--- static/js/video.js | 27 ++++++++++++++++++--------- static/main.html | 13 +++++++++---- 3 files changed, 48 insertions(+), 16 deletions(-) diff --git a/static/css/site.css b/static/css/site.css index 7cc40e3..d2e5886 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -191,10 +191,28 @@ input[type=text] { border-bottom-right-radius: 5px; } -#videoElement { +#videoWrapper { + position: relative; + display: flex; +} + +#videoOverlay { + height: 100%; + width: 100%; + position: absolute; + background-color: rgb(200,200,200, 0.5); + z-index: 3; + text-align: center; + vertical-align: middle; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +#videoElement { + z-index: 1; position: relative; - top: 50%; - transform: translateY(-50%); width: 100%; } diff --git a/static/js/video.js b/static/js/video.js index c7b9add..03a3d4c 100644 --- a/static/js/video.js +++ b/static/js/video.js @@ -2,16 +2,25 @@ function initPlayer() { - if (flvjs.isSupported()) { - var videoElement = document.getElementById("videoElement"); - var flvPlayer = flvjs.createPlayer({ - type: "flv", - url: "/live" - }); - flvPlayer.attachMediaElement(videoElement); - flvPlayer.load(); - flvPlayer.play(); + if (!flvjs.isSupported()) { + console.warn('flvjs not supported'); + return; } + + let videoElement = document.querySelector("#videoElement"); + let flvPlayer = flvjs.createPlayer({ + type: "flv", + url: "/live" + }); + flvPlayer.attachMediaElement(videoElement); + flvPlayer.load(); + flvPlayer.play(); + + let overlay = document.querySelector('#videoOverlay'); + overlay.onclick = () => { + overlay.style.display = 'none'; + videoElement.muted = false; + }; } window.addEventListener("load", initPlayer); diff --git a/static/main.html b/static/main.html index 8f900b4..40b2c9d 100644 --- a/static/main.html +++ b/static/main.html @@ -35,10 +35,15 @@ {{define "body"}} {{if .Video}} - +
+
+ 🔇 +
+ +
{{end}} {{if .Chat}} From 5e5cb2d5b464054e63086ca029e5cdd2c31e6ae0 Mon Sep 17 00:00:00 2001 From: Akshay Shekher Date: Tue, 12 May 2020 20:33:00 -0700 Subject: [PATCH 2/3] updated the mute icon --- static/img/mute-icon.png | Bin 0 -> 10316 bytes static/main.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 static/img/mute-icon.png diff --git a/static/img/mute-icon.png b/static/img/mute-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..7d3d8cfd0a633dff1fcaeb49ff522be3c2b017a9 GIT binary patch literal 10316 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 C*mmgv literal 0 HcmV?d00001 diff --git a/static/main.html b/static/main.html index 40b2c9d..4a49acc 100644 --- a/static/main.html +++ b/static/main.html @@ -37,7 +37,7 @@ {{if .Video}}
- 🔇 +