Reconfigure Video options to optimize for user's settings around au…

…toplay (#276) * show video controls on hover; show play button for browsers with disabled autoplay * Merge branch 'main' into video-controls * main: Add the catalog site (#137) Delete dependabot.yml Only direct dependencies Create dependabot.yml (#296) Update Travis bad Update devDependencies (#294) * Add example * More comments * Reduce changes * eslint and fix button styles * Clean up button * Set playsInline to true if autoPlay is true; make `muted` a prop * Update test cases description to indicate the autoplay state * Update description * Update snapshots * Update CHANGELOG.md * Create `playsInline` prop * Append hash to src to enable preview on iOS * Update video.js * Adds optional `poster` prop * Remove hack * Add poster example * Fix paths * Update descriptions * Apply suggestions from code review
mapbox · Apr 22, 2021 · f54d0a3 · f54d0a3
1 parent 979d521
commit f54d0a3
Show file tree

Hide file tree

Showing 9 changed files with 407 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ hideFromSearchEngines: true
 - Replace `id` with `aria-label` in `VimeoPlayImage` to prevent duplicated `id`s when more than one instance is on the same page. [#438](https://github.com/mapbox/dr-ui/pull/438)
 - Make `filename` optional for `CodeSnippetTitle`.
 - Use passive event listeners on `Search`, `NumberedCodeSnippet`, and `OnThisPage` to improve performance. [#437](https://github.com/mapbox/dr-ui/pull/437)
+- Make `Video` disable autoplay by default. [#276](https://github.com/mapbox/dr-ui/pull/276)
 
 ## 3.3.1
 

diff --git a/src/components/phone/__tests__/__snapshots__/phone.test.js.snap b/src/components/phone/__tests__/__snapshots__/phone.test.js.snap
@@ -302,26 +302,52 @@ exports[`phone iOS landscape renders as expected 1`] = `
     <div
       className="relative"
     >
-      <div>
+      <div
+        className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+        onFocus={[Function]}
+        onMouseLeave={[Function]}
+        onMouseOver={[Function]}
+      >
+        <button
+          className="bg-darken75 bg-darken50-on-hover w60 h60 py12 px12 w120-mm h120-mm py18-mm px18-mm round cursor-pointer z1 absolute"
+          onClick={[Function]}
+        >
+          <svg
+            aria-label="Play"
+            fill="#fff"
+            focusable="false"
+            role="img"
+            viewBox="0 0 20 20"
+            width="100%"
+          >
+            <polygon
+              points="1,0 20,10 1,20"
+            />
+          </svg>
+        </button>
         <video
           autoPlay={true}
           className="block mx-auto"
           loop={true}
           muted={true}
+          onEnded={[Function]}
+          onPause={[Function]}
+          onPlay={[Function]}
+          playsInline={true}
           src="../files/browser-example.mp4"
           title="example"
           type="video/mp4"
           width="100%"
         >
           <p>
-            Your browser doesn't support HTML5 video. Here is a
+            Your browser doesn't support HTML5 video. Open
              
             <a
               href="../files/browser-example.mp4"
             >
               link to the video
             </a>
-             instead.
+            .
           </p>
         </video>
       </div>

diff --git a/src/components/video/__tests__/__snapshots__/video.test.js.snap b/src/components/video/__tests__/__snapshots__/video.test.js.snap
@@ -1,51 +1,207 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`video Basic renders as expected 1`] = `
-<div>
+exports[`video Basic. Your system settings do not prefer reduced motion, the video will autoplay (unless your browser settings block autoplay). renders as expected 1`] = `
+<div
+  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+>
+  <button
+    className="bg-darken75 bg-darken50-on-hover w60 h60 py12 px12 w120-mm h120-mm py18-mm px18-mm round cursor-pointer z1 absolute"
+    onClick={[Function]}
+  >
+    <svg
+      aria-label="Play"
+      fill="#fff"
+      focusable="false"
+      role="img"
+      viewBox="0 0 20 20"
+      width="100%"
+    >
+      <polygon
+        points="1,0 20,10 1,20"
+      />
+    </svg>
+  </button>
   <video
     autoPlay={true}
     className="block mx-auto"
     loop={true}
     muted={true}
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
     src="../files/browser-example.mp4"
     title="A video!"
     type="video/mp4"
     width="100%"
   >
     <p>
-      Your browser doesn't support HTML5 video. Here is a
+      Your browser doesn't support HTML5 video. Open
        
       <a
         href="../files/browser-example.mp4"
       >
         link to the video
       </a>
-       instead.
+      .
     </p>
   </video>
 </div>
 `;
 
 exports[`video Reduced motion renders as expected 1`] = `
-<div>
+<div
+  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+>
+  <button
+    className="bg-darken75 bg-darken50-on-hover w60 h60 py12 px12 w120-mm h120-mm py18-mm px18-mm round cursor-pointer z1 absolute"
+    onClick={[Function]}
+  >
+    <svg
+      aria-label="Play"
+      fill="#fff"
+      focusable="false"
+      role="img"
+      viewBox="0 0 20 20"
+      width="100%"
+    >
+      <polygon
+        points="1,0 20,10 1,20"
+      />
+    </svg>
+  </button>
+  <video
+    className="block mx-auto"
+    muted={true}
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
+    src="../files/browser-example.mp4"
+    title="A video!"
+    type="video/mp4"
+    width="100%"
+  >
+    <p>
+      Your browser doesn't support HTML5 video. Open
+       
+      <a
+        href="../files/browser-example.mp4"
+      >
+        link to the video
+      </a>
+      .
+    </p>
+  </video>
+</div>
+`;
+
+exports[`video The video will not autoplay. Sets autoplay={false} and loop={false}. A preview image will not appear on iOS. renders as expected 1`] = `
+<div
+  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+>
+  <button
+    className="bg-darken75 bg-darken50-on-hover w60 h60 py12 px12 w120-mm h120-mm py18-mm px18-mm round cursor-pointer z1 absolute"
+    onClick={[Function]}
+  >
+    <svg
+      aria-label="Play"
+      fill="#fff"
+      focusable="false"
+      role="img"
+      viewBox="0 0 20 20"
+      width="100%"
+    >
+      <polygon
+        points="1,0 20,10 1,20"
+      />
+    </svg>
+  </button>
   <video
+    autoPlay={false}
     className="block mx-auto"
-    controls={true}
+    loop={false}
+    muted={true}
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
+    src="../files/browser-example.mp4"
+    title="A video!"
+    type="video/mp4"
+    width="100%"
+  >
+    <p>
+      Your browser doesn't support HTML5 video. Open
+       
+      <a
+        href="../files/browser-example.mp4"
+      >
+        link to the video
+      </a>
+      .
+    </p>
+  </video>
+</div>
+`;
+
+exports[`video The video will not autoplay. Uses \`poster\` to set preview image. renders as expected 1`] = `
+<div
+  className="relative flex-parent flex-parent--center-main flex-parent--center-cross bg-gray"
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+>
+  <button
+    className="bg-darken75 bg-darken50-on-hover w60 h60 py12 px12 w120-mm h120-mm py18-mm px18-mm round cursor-pointer z1 absolute"
+    onClick={[Function]}
+  >
+    <svg
+      aria-label="Play"
+      fill="#fff"
+      focusable="false"
+      role="img"
+      viewBox="0 0 20 20"
+      width="100%"
+    >
+      <polygon
+        points="1,0 20,10 1,20"
+      />
+    </svg>
+  </button>
+  <video
+    autoPlay={false}
+    className="block mx-auto"
+    loop={true}
     muted={true}
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
+    poster="../files/browser-example-mp4-poster.png"
     src="../files/browser-example.mp4"
     title="A video!"
     type="video/mp4"
     width="100%"
   >
     <p>
-      Your browser doesn't support HTML5 video. Here is a
+      Your browser doesn't support HTML5 video. Open
        
       <a
         href="../files/browser-example.mp4"
       >
         link to the video
       </a>
-       instead.
+      .
     </p>
   </video>
 </div>

diff --git a/src/components/video/__tests__/video-test-cases.js b/src/components/video/__tests__/video-test-cases.js
@@ -1,15 +1,38 @@
 import React from 'react';
 import Basic from '../examples/basic';
+import Settings from '../examples/settings';
+import Poster from '../examples/poster';
 import Video from '../video';
 
 const testCases = {};
 const noRenderCases = {};
 
+const prefersReducedMotion =
+  typeof window !== 'undefined' && window.matchMedia !== undefined
+    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    : false;
+
 testCases.basic = {
-  description: 'Basic',
+  description: `Basic. Your system settings${
+    prefersReducedMotion ? ' ' : ' do not '
+  }prefer reduced motion, the video will${
+    prefersReducedMotion ? ' not ' : ' '
+  }autoplay (unless your browser settings block autoplay).`,
   element: <Basic />
 };
 
+testCases.settings = {
+  description:
+    'The video will not autoplay. Sets autoplay={false} and loop={false}. A preview image will not appear on iOS.',
+  element: <Settings />
+};
+
+testCases.poster = {
+  description:
+    'The video will not autoplay. Uses `poster` to set preview image.',
+  element: <Poster />
+};
+
 noRenderCases.reducedMotion = {
   component: Video,
   description: 'Reduced motion',

diff --git a/src/components/video/__tests__/video.test.js b/src/components/video/__tests__/video.test.js
@@ -29,6 +29,48 @@ describe('video', () => {
     });
   });
 
+  describe(testCases.settings.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      window.matchMedia = jest.fn().mockImplementation((query) => {
+        return {
+          matches: false,
+          media: query,
+          onchange: null,
+          addListener: jest.fn(),
+          removeListener: jest.fn()
+        };
+      });
+
+      testCase = testCases.settings;
+      wrapper = renderer.create(testCase.element);
+      tree = wrapper.toJSON();
+    });
+
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe(testCases.poster.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      testCase = testCases.poster;
+      wrapper = renderer.create(testCase.element);
+      tree = wrapper.toJSON();
+    });
+
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe(noRenderCases.reducedMotion.description, () => {
     let testCase;
     let wrapper;

diff --git a/src/components/video/examples/poster.js b/src/components/video/examples/poster.js
@@ -0,0 +1,18 @@
+/*
+The video will not autoplay. Uses `poster` to set preview image.
+*/
+import React from 'react';
+import Video from '../video';
+
+export default class Example extends React.PureComponent {
+  render() {
+    return (
+      <Video
+        autoplay={false}
+        poster="../files/browser-example-mp4-poster.png"
+        src="../files/browser-example.mp4"
+        title="A video!"
+      />
+    );
+  }
+}