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

package/build/index.mjs.js

@@ -24136,7 +24136,7 @@ var VideoProvider;
     VideoProvider["Vimeo"] = "Vimeo";
 })(VideoProvider || (VideoProvider = {}));
 
-const VideoContainer = styled.figure`
+const VideoContainer$1 = styled.figure`
   display: block;
   padding-top: 56.25%;
   position: relative;
@@ -24196,7 +24196,7 @@ var Video = function (_a) {
     useEffect(function () {
         setNotServer(true);
     }, []);
-    return (React.createElement(React.Fragment, null, cookiesAccepted && notServer ? (React.createElement(VideoContainer, { "data-testid": "Video" },
+    return (React.createElement(React.Fragment, null, cookiesAccepted && notServer ? (React.createElement(VideoContainer$1, { "data-testid": "Video" },
         React.createElement("iframe", { src: embedLink, title: description, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen;", "data-testid": "VideoIframe" }))) : (React.createElement(VideoLink, { href: watchLink, title: description, "data-testid": "VideoLink" }, description))));
 };
 
@@ -25773,6 +25773,18 @@ const Search = styled.div`
   margin: ${(props) => props.theme.theme_vars.spacingSizes.medium} 0;
 `;
 
+const VideoContainer = styled.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.video`
   position: absolute;
   top: 0;
@@ -25786,19 +25798,57 @@ const VideoBackground = styled.video`
   }
 `;
 
+const PlayPauseButton = styled.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 = useState(true), isPlaying = _d[0], setIsPlaying = _d[1];
+    var videoRef = useRef(null);
+    var togglePlay = function () {
+        if (videoRef.current) {
+            if (isPlaying) {
+                videoRef.current.pause();
+            }
+            else {
+                videoRef.current.play();
+            }
+            setIsPlaying(!isPlaying);
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(LazyImage, { src: imageLarge, placeholder: imageSmall, visibilitySensorProps: {
                 partialVisibility: true,
             } }, function (src) { return (React.createElement(Container$u, { "$image": src, "$backgroundBox": backgroundBox, "data-testid": "HeroImage" },
-            heroVideoUrl && (React.createElement(VideoBackground, { autoPlay: true, loop: true, muted: true },
-                React.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
-                "Your browser doesn't support this video.")),
+            heroVideoUrl && (React.createElement(React.Fragment, null,
+                React.createElement(VideoContainer, null,
+                    React.createElement(VideoBackground, { ref: videoRef, autoPlay: true, loop: true, muted: true },
+                        React.createElement("source", { src: heroVideoUrl, type: "video/mp4" }),
+                        "Your browser doesn't support this video."),
+                    React.createElement(PlayPauseButton, { onClick: togglePlay }, isPlaying ? '⏸' : '▶')))),
             React.createElement(InnerContainer, null,
                 React.createElement(Overlay, { "$backgroundBox": backgroundBox, "data-testid": "HeroImageOverlay" },
                     breadcrumb && (React.createElement(BreadcrumbLink, { href: breadcrumb.url, "$backgroundBox": backgroundBox }, breadcrumb.title)),