@royaloperahouse/chord 1.18.2-b-chord-development → 1.18.2-d-chord-development

package/dist/chord.cjs.development.js

@@ -3513,7 +3513,7 @@ var isIOS = function isIOS() {
 
 
 var useIOS = function useIOS() {
-  var _useState = React.useState(false),
+  var _useState = React.useState(isIOS()),
       IOS = _useState[0],
       setIOS = _useState[1];
 
@@ -3524,6 +3524,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 = React.useState(function () {
+    if (typeof innerWidth !== undefined && innerWidth < breakpoints.sm) {
+      return true;
+    }
+
+    return false;
+  }),
+      isPortraitMobile = _useState2[0],
+      setIsPortraitMobile = _useState2[1];
+
+  React.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,
@@ -3709,8 +3743,96 @@ var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$f || (_temp
 var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
 var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n"])));
 
+var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
+  if (!expiryUnixTimestamp) return 0;
+  var now = Date.now();
+  var expiry = new Date(expiryUnixTimestamp * 1000);
+  var diff = Math.round((expiry.getTime() - now) / 1000);
+  return diff > 0 ? diff : 0;
+};
+var formatTime = function formatTime(seconds) {
+  if (seconds > 60) {
+    return Math.ceil(seconds / 60) + " mins";
+  }
+
+  return seconds + " sec" + (seconds === 1 ? '' : 's');
+};
+var checkTimeRed = function checkTimeRed(seconds) {
+  if (seconds <= 0) {
+    return false;
+  }
+
+  return seconds / 60 <= 5;
+};
+
+var useBasket = function useBasket(expiryUnixTimestamp, numItems) {
+  var _useState = React.useState(),
+      basketText = _useState[0],
+      setBasketText = _useState[1];
+
+  var _useState2 = React.useState(),
+      basketIsActive = _useState2[0],
+      setBasketIsActive = _useState2[1];
+
+  var _useState3 = React.useState(numItems != null ? numItems : 0),
+      basketNumItems = _useState3[0],
+      setBasketNumItems = _useState3[1];
+
+  var _useState4 = React.useState(getSecondsUntil(expiryUnixTimestamp)),
+      seconds = _useState4[0],
+      setSeconds = _useState4[1];
+
+  var _useState5 = React.useState(),
+      timer = _useState5[0],
+      setTimer = _useState5[1];
+
+  React.useEffect(function () {
+    if (!numItems) return;
+    setBasketNumItems(numItems);
+  }, [numItems]);
+  React.useEffect(function () {
+    if (!expiryUnixTimestamp) return;
+    setSeconds(getSecondsUntil(expiryUnixTimestamp));
+  }, [expiryUnixTimestamp]);
+  React.useEffect(function () {
+    if (timer) {
+      clearInterval(timer); // clears the old timer before setting a new one
+    }
+
+    if (!expiryUnixTimestamp || numItems === 0) return function () {
+      return undefined;
+    };
+    var interval = setInterval(function () {
+      setSeconds(getSecondsUntil(expiryUnixTimestamp));
+    }, 1000);
+    setTimer(interval);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [expiryUnixTimestamp]);
+  React.useEffect(function () {
+    if (!timer) return;
+
+    if (seconds > 0) {
+      setBasketText(formatTime(seconds));
+      setBasketIsActive(checkTimeRed(seconds));
+    } else {
+      clearInterval(timer);
+      setBasketNumItems(0);
+      setBasketText('');
+      setBasketIsActive(false);
+    }
+  }, [seconds, timer]);
+  return {
+    basketText: basketText,
+    basketNumItems: basketNumItems,
+    basketIsActive: basketIsActive
+  };
+};
+
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
+      expiryTime = _ref.expiryTime,
       link = _ref.link,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
@@ -3718,8 +3840,7 @@ var Basket$1 = function Basket(_ref) {
       numItems = _ref$numItems === void 0 ? 0 : _ref$numItems,
       onClick = _ref.onClick,
       _ref$colorPrimary = _ref.colorPrimary,
-      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary,
-      isActive = _ref.isActive;
+      colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
 
   var onClickHandler = function onClickHandler() {
     if (onClick) {
@@ -3727,29 +3848,35 @@ var Basket$1 = function Basket(_ref) {
     }
   };
 
+  var _useBasket = useBasket(expiryTime, numItems),
+      basketText = _useBasket.basketText,
+      basketNumItems = _useBasket.basketNumItems,
+      basketIsActive = _useBasket.basketIsActive;
+
+  var isEmpty = expiryTime ? basketNumItems <= 0 : numItems <= 0;
+
   var onKeyDownHandler = function onKeyDownHandler(e) {
     if (e.key === 'Enter') {
       onClickHandler();
     }
   };
 
-  var empty = numItems <= 0;
   return /*#__PURE__*/React__default.createElement(BasketContainer, {
     selected: selected,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,
     colorPrimary: colorPrimary,
-    isActive: isActive,
+    isActive: basketIsActive,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement(SvgContainer, null, empty ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(SvgContainer, null, isEmpty ? /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Basket"
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "BasketFull"
   }), /*#__PURE__*/React__default.createElement(NumContainer, null, /*#__PURE__*/React__default.createElement("span", {
     className: "basket-num"
-  }, numItems)))), /*#__PURE__*/React__default.createElement("div", null, !empty ? /*#__PURE__*/React__default.createElement(BasketText, {
+  }, expiryTime ? basketNumItems : numItems)))), /*#__PURE__*/React__default.createElement("div", null, !isEmpty ? /*#__PURE__*/React__default.createElement(BasketText, {
     "data-testid": "baskettext"
-  }, text) : ''));
+  }, expiryTime ? basketText : text) : ''));
 };
 
 var _templateObject$v, _templateObject2$g;
@@ -4013,6 +4140,7 @@ var NavTop = function NavTop(_ref) {
       accountOptions = _ref.accountOptions,
       onLink = _ref.onLink,
       basketText = _ref.basketText,
+      basketExpiryUnixTimestamp = _ref.basketExpiryUnixTimestamp,
       basketLink = _ref.basketLink,
       basketNumItems = _ref.basketNumItems,
       basketIsActive = _ref.basketIsActive,
@@ -4028,6 +4156,7 @@ var NavTop = function NavTop(_ref) {
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
     link: basketLink,
     text: basketText,
+    expiryTime: basketExpiryUnixTimestamp,
     numItems: basketNumItems,
     isActive: basketIsActive,
     onClick: onLink,
@@ -6626,6 +6755,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,
@@ -6636,7 +6771,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,
@@ -6652,26 +6786,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, {