@comicrelief/component-library 7.21.0 → 7.22.0

package/dist/components/Molecules/Promo/Promo.js

@@ -7,28 +7,85 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PromoVideo = _interopRequireDefault(require("./_PromoVideo"));
+
+var _breakpoint = require("../../../theme/shared/breakpoint");
 
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
 var _Promo = require("./Promo.style");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Promo = function Promo(_ref) {
-  var copyFirst = _ref.copyFirst,
+  var copyLeft = _ref.copyLeft,
       backgroundColor = _ref.backgroundColor,
       imageLow = _ref.imageLow,
       imageSet = _ref.imageSet,
       image = _ref.image,
       imageAltText = _ref.imageAltText,
       children = _ref.children,
-      position = _ref.position;
-  var hasImage = imageSet || false;
+      position = _ref.position,
+      autoPlay = _ref.autoPlay,
+      loop = _ref.loop,
+      poster = _ref.poster,
+      mobilePoster = _ref.mobilePoster,
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying,
+      videoSrc = _ref.videoSrc,
+      mobileVideoSrc = _ref.mobileVideoSrc,
+      lightColouredVideo = _ref.lightColouredVideo;
+
+  // Store the appropriate prop in state, dependent on the breakpoint
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      thisVideoSrc = _useState2[0],
+      setThisVideoSrc = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      thisPoster = _useState4[0],
+      setThisPoster = _useState4[1]; // Let either field define this, just in case
+
+
+  var hasVideo = Boolean(videoSrc || mobileVideoSrc); // A 'video-y' Promo will override and ignore any 'non-Video' images;
+  // none of these fields are required so we have to handle them accordingly:
+
+  var hasImage = Boolean(imageSet && !hasVideo); // Runs on initial load:
+
+  (0, _react.useEffect)(function () {
+    if (hasVideo) {
+      // Checks size on load ONLY; don't want to mess about with listeners:
+      var isDesktop = window.innerWidth >= _breakpoint.sizes.nav; // 1024+ px
+
+      var currentPoster;
+      var currentSrc; // If we've got both desktop AND mobile videos, let the
+      // *current* screen width define which video src to use:
+
+      if (videoSrc && mobileVideoSrc) {
+        currentSrc = isDesktop ? videoSrc : mobileVideoSrc;
+        currentPoster = isDesktop ? poster : mobilePoster;
+      } else {
+        // Else, pick whatever we DO actually have:
+        currentSrc = videoSrc || mobileVideoSrc;
+        currentPoster = poster || mobilePoster;
+      }
+
+      setThisVideoSrc(currentSrc);
+      setThisPoster(currentPoster);
+    }
+  }, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]);
   return /*#__PURE__*/_react.default.createElement(_Promo.Container, {
     backgroundColor: backgroundColor,
     position: position
-  }, hasImage && /*#__PURE__*/_react.default.createElement(_Promo.Media, {
-    imageRight: copyFirst
-  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Promo.Media, {
+    imageRight: copyLeft
+  }, hasImage && !hasVideo && /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
     images: imageSet,
@@ -36,22 +93,40 @@ var Promo = function Promo(_ref) {
     objectFit: "cover",
     width: "100%",
     height: "100%"
-  })), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
-    copyFirst: copyFirst
+  }), hasVideo && thisVideoSrc && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PromoVideo.default, {
+    copyLeft: copyLeft,
+    lightColouredVideo: lightColouredVideo,
+    thisVideoSrc: thisVideoSrc,
+    thisPoster: thisPoster,
+    showPosterAfterPlaying: showPosterAfterPlaying,
+    autoPlay: autoPlay,
+    loop: loop
+  }))), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
+    copyLeft: copyLeft
   }, /*#__PURE__*/_react.default.createElement(_Promo.Copy, {
-    position: position
+    position: position,
+    hasVideo: hasVideo,
+    lightColouredVideo: lightColouredVideo
   }, children)));
 };
 
 Promo.defaultProps = {
   backgroundColor: 'white',
-  copyFirst: false,
+  copyLeft: false,
   imageSet: null,
   imageLow: null,
   image: null,
   imageAltText: '',
   children: null,
-  position: 'none'
+  position: 'none',
+  autoPlay: true,
+  loop: true,
+  poster: null,
+  mobilePoster: null,
+  videoSrc: null,
+  mobileVideoSrc: null,
+  showPosterAfterPlaying: true,
+  lightColouredVideo: false
 };
 var _default = Promo;
 exports.default = _default;

package/dist/components/Molecules/Promo/Promo.md

@@ -14,7 +14,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="upper"
 >
@@ -50,7 +50,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="end"
 >
@@ -86,7 +86,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
   position="lower"
 >
@@ -122,7 +122,7 @@ import Link from '../../Atoms/Link/Link';
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
-  copyFirst={true}
+  copyLeft={true}
   hasOverlay={true}
 >
   <Text
@@ -149,3 +149,265 @@ import Link from '../../Atoms/Link/Link';
 </Promo>
 </div>
 ```
+
+Promo w/Video
+
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+import mobilePoster from '../../../styleguide/assets/mobileVideoPosterImage.png';
+const videoSrc =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
+
+<div>
+<Text tag="h2" size="xl" color="black">
+  Promo Upper w/Video (autoplay and loop)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  position="upper"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={true}
+  autoplay={true}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+
+<Text tag="h2" size="xl" color="black">
+  Promo End w/Video (loop only)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  position="end"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={true}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+
+<Text tag="h2" size="xl" color="black">
+  Promo Lower w/Video (autoplay only)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  position="lower"
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={false}
+  autoPlay={true}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<br />
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={false}
+  hasOverlay={true}
+  videoSrc={videoSrc}
+  poster={poster}
+  loop={false}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="white"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="white">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="white">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, 'light-coloured video' setting, different videos and posters for mobile and desktop)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  videoSrc={videoSrc}
+  mobileVideoSrc={mobileVideoSrc}
+  poster={poster}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  lightColouredVideo={true}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="black">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, 'light-coloured video' setting, mobile-only video and poster)
+</Text>
+<Promo
+  backgroundColor="blue_light"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  mobileVideoSrc={mobileVideoSrc}
+  mobilePoster={mobilePoster}
+  loop={false}
+  autoPlay={false}
+  lightColouredVideo={true}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="black">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
+</div>
+```

package/dist/components/Molecules/Promo/Promo.style.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
+exports.Video = exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -43,8 +43,8 @@ var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Wrapper",
   componentId: "sc-kk4nna-1"
 })(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
-  var copyFirst = _ref5.copyFirst;
-  return !copyFirst && 'justify-content: flex-end';
+  var copyLeft = _ref5.copyLeft;
+  return !copyLeft && 'justify-content: flex-end';
 }, (0, _size.media)('medium'));
 
 exports.Wrapper = Wrapper;
@@ -52,8 +52,15 @@ exports.Wrapper = Wrapper;
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
-  var position = _ref6.position;
+})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";", " ", "}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
+  var hasVideo = _ref6.hasVideo;
+  return hasVideo !== false && (0, _styledComponents.css)(["background-color:rgba(0,0,0,0.75);overflow:hidden;box-shadow:0px 0px 75px 100px rgba(0,0,0,0.75);"]);
+}, function (_ref7) {
+  var hasVideo = _ref7.hasVideo,
+      lightColouredVideo = _ref7.lightColouredVideo;
+  return hasVideo !== false && lightColouredVideo && (0, _styledComponents.css)(["background-color:rgba(255,255,255,0.75);box-shadow:0px 0px 75px 100px rgba(255,255,255,0.75);"]);
+}, function (_ref8) {
+  var position = _ref8.position;
   return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('m'));
 });
 
@@ -64,4 +71,15 @@ var Media = _styledComponents.default.div.withConfig({
   componentId: "sc-kk4nna-3"
 })(["width:100%;height:auto;img{object-position:center;}", "{height:100%;position:absolute;}"], (0, _size.media)('medium'));
 
-exports.Media = Media;
+exports.Media = Media;
+
+var Video = _styledComponents.default.video.attrs(function () {
+  return {
+    playsInline: true
+  };
+}).withConfig({
+  displayName: "Promostyle__Video",
+  componentId: "sc-kk4nna-4"
+})(["width:100%;height:100%;object-fit:cover;"]);
+
+exports.Video = Video;

package/dist/components/Molecules/Promo/Promo.test.js

@@ -22,7 +22,7 @@ it('renders Promo correctly', function () {
     imageSet: defaultData.promoImage,
     image: defaultData.promoImage,
     imageAltText: "",
-    copyFirst: false
+    copyLeft: false
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h1",
     color: "white",
@@ -46,7 +46,7 @@ it('renders Promo correctly end position', function () {
     imageSet: defaultData.promoImage,
     image: defaultData.promoImage,
     imageAltText: "",
-    copyFirst: false,
+    copyLeft: false,
     position: "end"
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h1",

package/dist/components/Molecules/Promo/_ProgressRing.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PromoVideoButton = require("./_PromoVideoButton.style");
+
+var _excluded = ["videoProgress"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ProgressRing = function ProgressRing(_ref) {
+  var videoProgress = _ref.videoProgress,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var thisStroke = 4;
+  var thisRadius = 28;
+  var initNormRadius = thisRadius - thisStroke * 2;
+  var thisCircumference = initNormRadius * 2 * Math.PI;
+
+  var _useState = (0, _react.useState)(initNormRadius * 2 * Math.PI),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      thisDashOffset = _useState2[0],
+      setThisDashOffset = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var offset = thisCircumference - videoProgress / 100 * thisCircumference;
+    setThisDashOffset(offset);
+  }, [videoProgress, thisCircumference]);
+  return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingWrapper, {
+    videoProgress: videoProgress
+  }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingSVG, {
+    height: thisRadius * 2,
+    width: thisRadius * 2
+  }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.ProgressRingCircle, Object.assign({
+    strokeDasharray: "".concat(thisCircumference, " ").concat(thisCircumference),
+    strokeDashOffsetStyle: thisDashOffset,
+    strokeWidth: "".concat(thisStroke),
+    r: "".concat(initNormRadius),
+    cx: "".concat(thisRadius),
+    cy: "".concat(thisRadius)
+  }, rest))));
+};
+
+var _default = ProgressRing;
+exports.default = _default;

package/dist/components/Molecules/Promo/_PromoVideo.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Promo = require("./Promo.style");
+
+var _PromoVideoButton = _interopRequireDefault(require("./_PromoVideoButton"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PromoVideo = function PromoVideo(_ref) {
+  var lightColouredVideo = _ref.lightColouredVideo,
+      copyLeft = _ref.copyLeft,
+      thisVideoSrc = _ref.thisVideoSrc,
+      thisPoster = _ref.thisPoster,
+      autoPlay = _ref.autoPlay,
+      loop = _ref.loop,
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPlaying = _useState2[0],
+      setIsPlaying = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isRestarting = _useState4[0],
+      setIsRestarting = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      videoProgress = _useState6[0],
+      setVideoProgress = _useState6[1];
+
+  var videoEl = (0, _react.useRef)(null);
+
+  var togglePlay = function togglePlay() {
+    if (isPlaying) videoEl.current.pause();else videoEl.current.play();
+    setIsPlaying(!isPlaying);
+  };
+
+  var updateTime = function updateTime() {
+    if (videoEl.current.duration) {
+      // Calculate the percentage of the video played:
+      var percentage = Math.round(videoEl.current.currentTime / videoEl.current.duration * 100); // Because a completely smooth animation is impossible with the 250ms-ish frequency of
+      // the 'timeupdate' event, we're electing to just update the ring every 25%.
+
+      var nearest = 25;
+      var roundedPercentage = percentage + nearest / 2 - (percentage + nearest / 2) % nearest;
+      setVideoProgress(roundedPercentage);
+    }
+  }; // Only loads once the initial screensize check is complete
+
+
+  (0, _react.useEffect)(function () {
+    // Use truthy comparison so either a null OR undefined value won't work
+    if (thisVideoSrc != null) {
+      videoEl.current.addEventListener('timeupdate', updateTime); // Trigger on-load autoplay if apppropriate
+
+      if (autoPlay && !isPlaying) {
+        togglePlay();
+      }
+
+      videoEl.current.addEventListener('ended', function () {
+        // Used purely to halt the CSS animation:
+        setIsRestarting(true); // If this is a non-looping video, add a listener to update our local state
+        // once the video's ended, to let the user retrigger it manually:
+
+        if (!loop) {
+          setIsPlaying(false);
+          setVideoProgress(0); // Reload the video to show the poster image:
+
+          if (showPosterAfterPlaying) videoEl.current.load();
+        } else {
+          // Rather than using the Video 'loop' property, we retrigger
+          // it in *code* as there's no 'restarted' to hook into:
+          togglePlay();
+        } // Grace period to allow the animation to reset
+
+
+        setTimeout(function () {
+          setIsRestarting(false);
+        }, 100);
+      });
+    } // CERTAINLY don't want this re-running for EACH of these variable updates, sorry Lint...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [thisVideoSrc]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Promo.Video, {
+    ref: videoEl,
+    src: thisVideoSrc,
+    poster: thisPoster,
+    muted: true
+  }, "Your browser does not support this video filetype."), /*#__PURE__*/_react.default.createElement(_PromoVideoButton.default, {
+    copyLeft: copyLeft,
+    videoProgress: videoProgress,
+    togglePlay: togglePlay,
+    isPlaying: isPlaying,
+    lightColouredVideo: lightColouredVideo,
+    isRestarting: isRestarting
+  }));
+};
+
+var _default = PromoVideo;
+exports.default = _default;