@comicrelief/component-library 7.19.0 → 7.19.1

package/dist/components/Molecules/VideoBanner/VideoBanner.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -32,6 +34,13 @@ var VideoBanner = function VideoBanner(_ref) {
       loop = _ref.loop,
       muted = _ref.muted,
       showPosterAfterPlaying = _ref.showPosterAfterPlaying;
+
+  // Use the prop as our default
+  var _useState = (0, _react.useState)(muted),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMuted = _useState2[0],
+      setIsMuted = _useState2[1];
+
   var videoEl = (0, _react.useRef)(null);
 
   var triggerPlay = function triggerPlay() {
@@ -41,6 +50,9 @@ var VideoBanner = function VideoBanner(_ref) {
   (0, _react.useEffect)(function () {
     // Trigger onload autoplay based on prop:
     if (autoPlay) {
+      // As it's a Chrome requirement to mute any autoplay videos,
+      // update accordingly; see https://developer.chrome.com/blog/autoplay/
+      setIsMuted(true);
       triggerPlay();
     } // And attach event listener based on prop:
 
@@ -51,14 +63,14 @@ var VideoBanner = function VideoBanner(_ref) {
         videoEl.current.load();
       });
     }
-  });
+  }, [autoPlay, loop, showPosterAfterPlaying]);
   return /*#__PURE__*/_react.default.createElement(Video, {
     poster: poster,
     src: video,
     ref: videoEl,
     controls: controls,
     loop: loop,
-    muted: muted
+    muted: isMuted
   }, "Your browser does not support video.");
 };
 

package/dist/components/Molecules/VideoBanner/VideoBanner.md

@@ -12,7 +12,7 @@ import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 
-<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true}
+<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true} muted={false}
  />;
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.19.0",
+  "version": "7.19.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/VideoBanner/VideoBanner.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -12,6 +12,9 @@ const Video = styled.video.attrs(() => ({
 const VideoBanner = ({
   video, poster, controls, autoPlay, loop, muted, showPosterAfterPlaying
 }) => {
+  // Use the prop as our default
+  const [isMuted, setIsMuted] = useState(muted);
+
   const videoEl = useRef(null);
 
   const triggerPlay = () => {
@@ -21,6 +24,9 @@ const VideoBanner = ({
   useEffect(() => {
     // Trigger onload autoplay based on prop:
     if (autoPlay) {
+      // As it's a Chrome requirement to mute any autoplay videos,
+      // update accordingly; see https://developer.chrome.com/blog/autoplay/
+      setIsMuted(true);
       triggerPlay();
     }
 
@@ -31,7 +37,7 @@ const VideoBanner = ({
         videoEl.current.load();
       });
     }
-  });
+  }, [autoPlay, loop, showPosterAfterPlaying]);
 
   return (
     <Video
@@ -40,7 +46,7 @@ const VideoBanner = ({
       ref={videoEl}
       controls={controls}
       loop={loop}
-      muted={muted}
+      muted={isMuted}
     >
       Your browser does not support video.
     </Video>

package/src/components/Molecules/VideoBanner/VideoBanner.md

@@ -12,7 +12,7 @@ import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 
-<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true}
+<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true} muted={false}
  />;
 ```