@royaloperahouse/chord 1.18.2-c-chord-development → 1.18.2-e-chord-development

package/dist/chord.esm.js

@@ -3517,7 +3517,7 @@ var isIOS = function isIOS() {
 
 
 var useIOS = function useIOS() {
-  var _useState = useState(false),
+  var _useState = useState(isIOS()),
       IOS = _useState[0],
       setIOS = _useState[1];
 
@@ -3528,6 +3528,40 @@ var useIOS = function useIOS() {
   return IOS;
 };
 
+var setScreenWidth = function setScreenWidth(setterFunction) {
+  if (typeof innerWidth !== undefined && innerWidth < breakpoints.sm) {
+    setterFunction(true);
+    return;
+  }
+
+  setterFunction(false);
+  return;
+};
+
+var useWidth = function useWidth() {
+  var _useState2 = useState(function () {
+    if (typeof innerWidth !== undefined && innerWidth < breakpoints.sm) {
+      return true;
+    }
+
+    return false;
+  }),
+      isPortraitMobile = _useState2[0],
+      setIsPortraitMobile = _useState2[1];
+
+  useEffect(function () {
+    var callSetScreenWidth = function callSetScreenWidth() {
+      return setScreenWidth(setIsPortraitMobile);
+    };
+
+    if (typeof window.innerWidth !== undefined) window.addEventListener('resize', callSetScreenWidth);
+    return function () {
+      return window.removeEventListener('resize', callSetScreenWidth);
+    };
+  }, []);
+  return isPortraitMobile;
+};
+
 var VideoControls = function VideoControls(_ref) {
   var videoElementId = _ref.videoElementId,
       _ref$defaultMuted = _ref.defaultMuted,
@@ -4484,9 +4518,9 @@ var Navigation = function Navigation(_ref) {
     accountText: navTopData.accountText,
     accountLink: navTopData.accountLink,
     basketText: navTopData.basketText,
+    basketExpiryUnixTimestamp: navTopData.basketExpiryUnixTimestamp,
     basketLink: navTopData.basketLink,
     basketNumItems: navTopData.basketNumItems,
-    basketIsActive: navTopData.basketIsActive,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
     isShowSearch: showSearch,
@@ -6725,6 +6759,12 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
 };
 
 var _excluded$k = ["text"];
+var getVideoPosterAttr = function getVideoPosterAttr(bgDesktopImg, bgDeviceImg) {
+  var isIOS = useIOS();
+  var isPortraitMobile = useWidth();
+  if (!isIOS) return undefined;
+  return isPortraitMobile ? bgDeviceImg || bgDesktopImg : bgDesktopImg;
+};
 
 var PageHeadingCompact = function PageHeadingCompact(_ref) {
   var title = _ref.title,
@@ -6735,7 +6775,6 @@ var PageHeadingCompact = function PageHeadingCompact(_ref) {
       bgUrlDesktop = _ref.bgUrlDesktop,
       bgUrlDevice = _ref.bgUrlDevice,
       videoUrlDesktop = _ref.videoUrlDesktop,
-      videoUrlMobile = _ref.videoUrlMobile,
       _ref$bgImageAltText = _ref.bgImageAltText,
       bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
       _ref$invert = _ref.invert,
@@ -6751,26 +6790,24 @@ var PageHeadingCompact = function PageHeadingCompact(_ref) {
 
   var titleSize = title && title.length > 20 ? 4 : 3;
   var videoElementId = 'compact-header-video';
+  var videoPosterAttr = getVideoPosterAttr(bgUrlDesktop, bgUrlDevice);
   return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
     "data-testid": "compact-sponsor"
   }, customSponsorImage ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
     "data-testid": "compact-custom-sponsor"
   }, customSponsorImage, {
     isCustomImage: true
-  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, videoUrlDesktop || videoUrlMobile ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
+  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, videoUrlDesktop ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
     loop: true,
     muted: true,
     playsInline: true,
     "data-testid": "compact-video",
-    id: videoElementId
+    id: videoElementId,
+    poster: videoPosterAttr
   }, videoUrlDesktop && /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrlDesktop,
-    media: "" + devices.desktop
-  }), videoUrlMobile && /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrlMobile,
-    media: "" + devices.mobile
+    src: videoUrlDesktop
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: bgUrlDesktop,
+    src: bgUrlDevice,
     alt: bgImageAltText,
     "data-testid": "compact-image"
   })), /*#__PURE__*/React__default.createElement(VideoControls, {