Reconfigure Video options to optimize for user's settings around autoplay

CHANGELOG.md

@@ -15,6 +15,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`.
+- Make `Video` disable autoplay by default. [#276](https://github.com/mapbox/dr-ui/pull/276)
 
 ## 3.3.1
 

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}
-          src="../files/browser-example.mp4"
+          onEnded={[Function]}
+          onPause={[Function]}
+          onPlay={[Function]}
+          playsInline={true}
+          src="../files/browser-example.mp4#t=0.1"
           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>

src/components/video/__tests__/__snapshots__/video.test.js.snap

@@ -1,51 +1,154 @@
 // 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}
-    src="../files/browser-example.mp4"
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
+    src="../files/browser-example.mp4#t=0.1"
     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"
-    controls={true}
     muted={true}
-    src="../files/browser-example.mp4"
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
+    src="../files/browser-example.mp4#t=0.1"
     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 The video will not autoplay. Sets autoplay={false} and loop={false} 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={false}
+    muted={true}
+    onEnded={[Function]}
+    onPause={[Function]}
+    onPlay={[Function]}
+    playsInline={true}
+    src="./files/browser-example.mp4#t=0.1"
+    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>

src/components/video/__tests__/video-test-cases.js

@@ -1,15 +1,31 @@
 import React from 'react';
 import Basic from '../examples/basic';
+import Settings from '../examples/settings';
 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}',
+  element: <Settings />
+};
+
 noRenderCases.reducedMotion = {
   component: Video,
   description: 'Reduced motion',

src/components/video/__tests__/video.test.js

@@ -29,6 +29,32 @@ 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(noRenderCases.reducedMotion.description, () => {
     let testCase;
     let wrapper;

src/components/video/examples/settings.js

@@ -0,0 +1,18 @@
+/*
+Disable autoplay and loop
+*/
+import React from 'react';
+import Video from '../video';
+
+export default class Example extends React.PureComponent {
+  render() {
+    return (
+      <Video
+        autoplay={false}
+        loop={false}
+        src="./files/browser-example.mp4"
+        title="A video!"
+      />
+    );
+  }
+}