@royaloperahouse/chord 1.18.1-dev-chord-development → 1.18.2-a-chord-development

package/dist/chord.esm.js

@@ -3503,6 +3503,31 @@ var VolumeControlsWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_temp
   return volumeHidden ? '40px' : '100px';
 }, trackStyles, trackStyles, trackStyles, trackStyles, trackStyles, thumbStyes, thumbStyes, thumbStyes);
 
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === undefined) return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.');
+    return false;
+  }
+}; // React hook version of isIOS
+
+
+var useIOS = function useIOS() {
+  var _useState = useState(false),
+      IOS = _useState[0],
+      setIOS = _useState[1];
+
+  useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+};
+
 var VideoControls = function VideoControls(_ref) {
   var videoElementId = _ref.videoElementId,
       _ref$defaultMuted = _ref.defaultMuted,
@@ -3522,6 +3547,8 @@ var VideoControls = function VideoControls(_ref) {
       volume = _React$useState3[0],
       setVolume = _React$useState3[1];
 
+  var isIOS = useIOS();
+
   var getVideoElement = function getVideoElement() {
     return document.querySelector("#" + videoElementId);
   };
@@ -3577,7 +3604,9 @@ var VideoControls = function VideoControls(_ref) {
     "aria-label": !playing ? 'Play' : 'Pause'
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: !playing ? 'Play' : 'Pause'
-  })), /*#__PURE__*/React__default.createElement(VolumeControlsWrapper, null, /*#__PURE__*/React__default.createElement(VideoMute, {
+  })), /*#__PURE__*/React__default.createElement(VolumeControlsWrapper, {
+    volumeHidden: isIOS
+  }, /*#__PURE__*/React__default.createElement(VideoMute, {
     id: "mute",
     className: "video-mute-button",
     "data-testid": "video-mute-button",
@@ -3587,7 +3616,7 @@ var VideoControls = function VideoControls(_ref) {
     "data-testid": "mute-icon",
     iconName: muted ? 'Muted' : 'Volume',
     color: "white"
-  })), /*#__PURE__*/React__default.createElement(VideoVolume, {
+  })), !isIOS && /*#__PURE__*/React__default.createElement(VideoVolume, {
     id: "vol-control",
     type: "range",
     min: "0",
@@ -3684,24 +3713,6 @@ var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObjec
 var NumContainer = /*#__PURE__*/styled.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.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 checkTimeRed = function checkTimeRed(seconds) {
-  if (seconds <= 0) {
-    return false;
-  }
-
-  return seconds / 60 <= 5;
-};
-var formatTime = function formatTime(seconds) {
-  if (seconds > 60) {
-    return Math.ceil(seconds / 60) + " mins";
-  }
-
-  return seconds + " sec" + (seconds === 1 ? '' : 's');
-};
-var initSeconds = function initSeconds(expiryDate) {
-  return expiryDate ? Math.ceil((new Date(expiryDate).getTime() - new Date().getTime()) / 1000) : 0;
-};
-
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
       link = _ref.link,
@@ -3712,27 +3723,7 @@ var Basket$1 = function Basket(_ref) {
       onClick = _ref.onClick,
       _ref$colorPrimary = _ref.colorPrimary,
       colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary,
-      expiryDate = _ref.expiryDate;
-
-  var _useState = useState(numItems),
-      basketItems = _useState[0],
-      setBasketItems = _useState[1];
-
-  var _useState2 = useState(initSeconds(expiryDate)),
-      seconds = _useState2[0],
-      setSeconds = _useState2[1];
-
-  var _useState3 = useState(formatTime(seconds)),
-      countdownText = _useState3[0],
-      setCountdownText = _useState3[1];
-
-  var _useState4 = useState(),
-      timer = _useState4[0],
-      setTimer = _useState4[1];
-
-  var _useState5 = useState(checkTimeRed(seconds)),
-      isActive = _useState5[0],
-      setIsActive = _useState5[1];
+      isActive = _ref.isActive;
 
   var onClickHandler = function onClickHandler() {
     if (onClick) {
@@ -3746,36 +3737,7 @@ var Basket$1 = function Basket(_ref) {
     }
   };
 
-  useEffect(function () {
-    if (timer) {
-      clearInterval(timer); // clears the old timer before setting a new one
-    }
-
-    if (!expiryDate || !numItems) return;
-    var interval = setInterval(function () {
-      setSeconds(function (prev) {
-        return prev - 1;
-      });
-    }, 1000);
-    setTimer(interval);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, [expiryDate]);
-  useEffect(function () {
-    if (!timer) return;
-
-    if (seconds > 0) {
-      setCountdownText(formatTime(seconds));
-      setIsActive(checkTimeRed(seconds));
-    } else {
-      clearInterval(timer);
-      setBasketItems(0);
-      setCountdownText('');
-      setIsActive(false);
-    }
-  }, [seconds, timer]);
-  var empty = basketItems <= 0;
+  var empty = numItems <= 0;
   return /*#__PURE__*/React__default.createElement(BasketContainer, {
     selected: selected,
     onClick: onClickHandler,
@@ -3789,9 +3751,9 @@ var Basket$1 = function Basket(_ref) {
     iconName: "BasketFull"
   }), /*#__PURE__*/React__default.createElement(NumContainer, null, /*#__PURE__*/React__default.createElement("span", {
     className: "basket-num"
-  }, basketItems)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BasketText, {
+  }, numItems)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BasketText, {
     "data-testid": "baskettext"
-  }, expiryDate ? countdownText : text)));
+  }, text)));
 };
 
 var _templateObject$v, _templateObject2$g;
@@ -4057,6 +4019,7 @@ var NavTop = function NavTop(_ref) {
       basketText = _ref.basketText,
       basketLink = _ref.basketLink,
       basketNumItems = _ref.basketNumItems,
+      basketIsActive = _ref.basketIsActive,
       onClickSearch = _ref.onClickSearch,
       _ref$isShowSearch = _ref.isShowSearch,
       isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
@@ -4070,6 +4033,7 @@ var NavTop = function NavTop(_ref) {
     link: basketLink,
     text: basketText,
     numItems: basketNumItems,
+    isActive: basketIsActive,
     onClick: onLink,
     colorPrimary: colorPrimary
   }), /*#__PURE__*/React__default.createElement(Account, {
@@ -4427,6 +4391,7 @@ var Navigation = function Navigation(_ref) {
     basketText: navTopData.basketText,
     basketLink: navTopData.basketLink,
     basketNumItems: navTopData.basketNumItems,
+    basketIsActive: navTopData.basketIsActive,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
     isShowSearch: showSearch,