From 66be4349bc0900d323e760dc843229a67a632d79 Mon Sep 17 00:00:00 2001
From: Christopher Van Wiemeersch <hearcomestreble@gmail.com>
Date: Wed, 25 Apr 2018 21:23:11 -0700
Subject: [PATCH] handle playback of background video when page loses focus
(fixes issue #310)
---
src/react-components/home-root.js | 34 +++++++++++++++++++++++++++++--
1 file changed, 32 insertions(+), 2 deletions(-)
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 63353a411..2800db055 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -30,9 +30,39 @@ class HomeRoot extends Component {
componentDidMount() {
this.loadEnvironments();
this.setState({ dialogType: this.props.dialogType });
- document.querySelector("#background-video").playbackRate = 0.75;
+ this.loadHomeVideo();
}
+ loadHomeVideo = () => {
+ const videoEl = document.querySelector("#background-video");
+ function initVideo() {
+ videoEl.playbackRate = 0.75;
+ videoEl.play();
+ let inIframe = false;
+ try {
+ inIframe = !!window.frameElement || window.self !== window.top;
+ } catch (e) {
+ inIframe = false;
+ }
+ function toggleVideo() {
+ // Play the video if the window/tab is visible (or is within an `<iframe>`).
+ if (document.hasFocus() || inIframe) {
+ videoEl.play();
+ } else {
+ videoEl.pause();
+ }
+ }
+ document.addEventListener("visibilitychange", toggleVideo);
+ window.addEventListener("focus", toggleVideo);
+ window.addEventListener("blur", toggleVideo);
+ }
+ if (videoEl.readyState >= videoEl.HAVE_FUTURE_DATA) {
+ initVideo();
+ } else {
+ videoEl.addEventListener("canplay", initVideo);
+ }
+ };
+
showDialog = dialogType => {
return e => {
e.preventDefault();
@@ -181,7 +211,7 @@ class HomeRoot extends Component {
</div>
</div>
</div>
- <video playsInline autoPlay muted loop className="background-video" id="background-video">
+ <video playsInline muted loop className="background-video" id="background-video">
<source src={homeVideoWebM} type="video/webm" />
<source src={homeVideoMp4} type="video/mp4" />
</video>
--
GitLab