@nnc-digital/nnc-design-system 1.0.0-alpha19 → 1.0.0-alpha21

package/build/index.js

@@ -24149,7 +24149,7 @@ var VideoProvider;
     VideoProvider["Vimeo"] = "Vimeo";
 })(VideoProvider || (VideoProvider = {}));
 
-const VideoContainer = styled__default.default.figure`
+const VideoContainer$1 = styled__default.default.figure`
   display: block;
   padding-top: 56.25%;
   position: relative;
@@ -24209,7 +24209,7 @@ var Video = function (_a) {
     React.useEffect(function () {
         setNotServer(true);
     }, []);
-    return (React__default.default.createElement(React__default.default.Fragment, null, cookiesAccepted && notServer ? (React__default.default.createElement(VideoContainer, { "data-testid": "Video" },
+    return (React__default.default.createElement(React__default.default.Fragment, null, cookiesAccepted && notServer ? (React__default.default.createElement(VideoContainer$1, { "data-testid": "Video" },
         React__default.default.createElement("iframe", { src: embedLink, title: description, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen;", "data-testid": "VideoIframe" }))) : (React__default.default.createElement(VideoLink, { href: watchLink, title: description, "data-testid": "VideoLink" }, description))));
 };
 
@@ -25786,6 +25786,18 @@ const Search = styled__default.default.div`
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
 `;
 
+const VideoContainer = styled__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 575px;
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    height: 540px;
+  }
+`;
+
+
 const VideoBackground = styled__default.default.video`
   position: absolute;
   top: 0;
@@ -25799,19 +25811,57 @@ const VideoBackground = styled__default.default.video`
   }
 `;
 
+const PlayPauseButton = styled__default.default.button`
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid white;
+  color: white;
+  font-size: 32px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.7);
+  }
+`;
+
 /**
  * Hero image banner with optional text and call to action with varying presentation of text area.
  * For optional use at the top of a service landing page, if set in the CMS.
  */
 var HeroImage = function (_a) {
     var headline = _a.headline, content = _a.content, callToActionText = _a.callToActionText, callToActionURL = _a.callToActionURL, _b = _a.callToActionIsPrimary, callToActionIsPrimary = _b === void 0 ? true : _b, _c = _a.backgroundBox, backgroundBox = _c === void 0 ? true : _c, imageLarge = _a.imageLarge, imageSmall = _a.imageSmall, imageAltText = _a.imageAltText, heroVideoUrl = _a.heroVideoUrl, breadcrumb = _a.breadcrumb, customSearch = _a.customSearch;
+    var _d = React.useState(true), isPlaying = _d[0], setIsPlaying = _d[1];
+    var videoRef = React.useRef(null);
+    var togglePlay = function () {
+        if (videoRef.current) {
+            if (isPlaying) {
+                videoRef.current.pause();
+            }
+            else {
+                videoRef.current.play();
+            }
+            setIsPlaying(!isPlaying);
+        }
+    };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return (React__default.default.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
-            heroVideoUrl && (React__default.default.createElement(VideoBackground, { autoPlay: true, loop: true, muted: true },
-                React__default.default.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
-                "Your browser doesn't support this video.")),
+            heroVideoUrl && (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement(VideoContainer, null,
+                    React__default.default.createElement(VideoBackground, { ref: videoRef, autoPlay: true, loop: true, muted: true },
+                        React__default.default.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
+                        "Your browser doesn't support this video."),
+                    React__default.default.createElement(PlayPauseButton, { onClick: togglePlay }, isPlaying ? '⏸' : '▶')))),
             React__default.default.createElement(InnerContainer, null,
                 React__default.default.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
                     breadcrumb && (React__default.default.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),