Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make video controls appear on hover or focus #1043

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

make video controls appear on hover or focus #1043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2916f5
make video controls appear on hover or focus
fstorr Sep 19, 2019
c22196e
Merge branch 'master' of https://github.com/hackoregon/civic into pre…
Sep 26, 2019
40470db
Pause video for prefers reduced motion users
Sep 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added packages/2018/src/assets/main_video_poster.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 43 additions & 3 deletions packages/2018/src/components/NewHomePage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/** @jsx jsx */
import { css, jsx, Global } from "@emotion/core";
import emotionReset from "emotion-reset";
import { Fragment } from "react";
import { Fragment, useState, useRef, useEffect } from "react";
import {
Button,
BrandColors,
Expand All @@ -17,7 +17,7 @@ import indexStyle from "./index.styles";
import placeholderWorkImg from "../../assets/new-home-page-2.png";
import placeholderContributorsImg from "../../assets/new-home-page-3.png";
import test from "../../assets/test.mp4";
// import placeholderCivicImg from "../../assets/new-home-page-5.png";
import videoPoster from "../../assets/main_video_poster.png";

const greatestWidth = 1200;
const collapseWidth = 845;
Expand Down Expand Up @@ -65,6 +65,32 @@ const sectionCivicLayout = css`
`;

const HomePage = () => {
// Make controls accessible
const [controlSettings, setControlSettings] = useState(false);

const showControls = () => {
setControlSettings(true);
};
const hideControls = () => {
setControlSettings(false);
};

// Pause the video for reduced motion users & show a poster instead
// prefersReducedMotion has incorrect value on firefox only
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)");
const videoRef = useRef(null);

const toggleMotion = () => {
if (prefersReducedMotion.matches) {
videoRef.current.pause();
// TODO: Should now show the poster... but it shows the first frame which is a white screen
} else {
videoRef.current.play();
}
};

useEffect(toggleMotion, []);

return (
<Fragment>
<Global
Expand All @@ -81,7 +107,21 @@ const HomePage = () => {
A system for public data, built on public collaboration
</p>
<div className="intro-wrapper">
<video className="placeholder-intro-image" autoPlay playsInline muted loop>
<video
className="placeholder-intro-image"
ref={videoRef}
autoPlay
poster={videoPoster}
controls={controlSettings}
playsInline
muted
loop
tabIndex="0"
onMouseEnter={showControls}
onMouseLeave={hideControls}
onFocus={showControls}
onBlur={hideControls}
>
<source type="video/mp4" src={test} />
</video>
<p className="intro-text">
Expand Down