diff --git a/CHANGELOG.md b/CHANGELOG.md index 12521f3a3..33c4f4d4e 100644 --- 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) - Load the `Search` component with a facade to improve performance. [#430](https://github.com/mapbox/dr-ui/pull/430) ## 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 index 3d1696e08..d826ed429 100644 --- 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`] = `
-
+
+
diff --git a/src/components/video/__tests__/__snapshots__/video.test.js.snap b/src/components/video/__tests__/__snapshots__/video.test.js.snap index f91a9d784..0c835b26b 100644 --- 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`] = ` -
+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`] = ` +
+
`; exports[`video Reduced motion renders as expected 1`] = ` -
+
+ + +
+`; + +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`] = ` +
+ +
+`; + +exports[`video The video will not autoplay. Uses \`poster\` to set preview image. renders as expected 1`] = ` +
+ +
diff --git a/src/components/video/__tests__/video-test-cases.js b/src/components/video/__tests__/video-test-cases.js index 9a198ca6c..2496320d6 100644 --- 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: }; +testCases.settings = { + description: + 'The video will not autoplay. Sets autoplay={false} and loop={false}. A preview image will not appear on iOS.', + element: +}; + +testCases.poster = { + description: + 'The video will not autoplay. Uses `poster` to set preview image.', + element: +}; + 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 index b1279e615..eff771fd1 100644 --- 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 new file mode 100644 index 000000000..3cb02ae56 --- /dev/null +++ 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 ( +