@royaloperahouse/harmonic 0.15.0-d → 0.15.0-e

package/dist/harmonic.esm.js

@@ -3474,7 +3474,87 @@ var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$f || (_templateOb
 var BaseIconWrapper = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  width: var(--rotator-button-width);\n  height: var(--rotator-button-width);\n\n  svg {\n    width: var(--rotator-button-icon-width);\n    height: var(--rotator-button-icon-width);\n  }\n"])));
 var IconWrapper$1 = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--rotator-button-bg-color);\n  color: var(--rotator-button-color);\n\n  svg path {\n    fill: var(--rotator-button-color);\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: var(--rotator-button-hover-bg-color);\n\n    && svg path {\n      fill: var(--rotator-button-hover-color);\n    }\n  }\n"])));
 var IconUnavailableWrapper = /*#__PURE__*/styled(BaseIconWrapper)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-state-disabled);\n  color: var(--color-primary-black);\n  opacity: 0.2;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    pointer-events: none;\n  }\n"])), devices.mobile);
-var FullscreenIconWrapper = /*#__PURE__*/styled(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n\n  @media ", " {\n    display: none;\n    pointer-events: none;\n  }\n"])), devices.mobileAndTablet);
+var FullscreenIconWrapper = /*#__PURE__*/styled(IconWrapper$1)(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n"])));
+
+// WARNING: Do not use this on server side rendering, it may throw an error.
+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.', e);
+    return false;
+  }
+};
+// React hook version of isIOS (for server side rendering)
+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;
+};
+// Checks device size based on window width
+var isMobile = function isMobile() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.', e);
+    return false;
+  }
+};
+// React hook version of isMobile (for server side rendering)
+var useMobile = function useMobile() {
+  var _useState2 = useState(false),
+    mobile = _useState2[0],
+    setMobile = _useState2[1];
+  useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+var useViewport = function useViewport() {
+  var _useState3 = useState(false),
+    hydrated = _useState3[0],
+    setHydrated = _useState3[1];
+  var _useState4 = useState({
+      width: 0,
+      isMobile: false,
+      isTablet: false,
+      isDesktop: false
+    }),
+    viewport = _useState4[0],
+    setViewport = _useState4[1];
+  useEffect(function () {
+    if (typeof window === 'undefined') return undefined;
+    var handleResize = function handleResize() {
+      setViewport({
+        width: window.innerWidth,
+        isMobile: window.innerWidth < breakpoints.sm,
+        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
+        isDesktop: window.innerWidth >= breakpoints.md
+      });
+    };
+    handleResize();
+    setHydrated(true);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return _extends({}, viewport, {
+    hydrated: hydrated
+  });
+};
 
 var RotatorButtons = function RotatorButtons(_ref) {
   var onClickPrev = _ref.onClickPrev,
@@ -3489,6 +3569,11 @@ var RotatorButtons = function RotatorButtons(_ref) {
     _ref$isFullscreen = _ref.isFullscreen,
     isFullscreen = _ref$isFullscreen === void 0 ? false : _ref$isFullscreen,
     className = _ref.className;
+  var _useViewport = useViewport(),
+    isMobile = _useViewport.isMobile,
+    isTablet = _useViewport.isTablet,
+    hydrated = _useViewport.hydrated;
+  if (!hydrated) return null;
   var onClickLeftHandler = function onClickLeftHandler() {
     if (onClickPrev) {
       onClickPrev();
@@ -3559,7 +3644,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
     role: "button"
   }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconnextnoavailable"
-  }, renderNextIcon())), showFullscreen && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
+  }, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
     onClick: onClickFullscreenHandler,
     onKeyDown: onFullscreenKeyDownHandler,
     tabIndex: 0,
@@ -4972,86 +5057,6 @@ var _templateObject$w, _templateObject2$n;
 var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n"])));
 var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n\n  &:focus {\n    outline: 2px solid var(--color-base-white);\n  }\n"])));
 
-// WARNING: Do not use this on server side rendering, it may throw an error.
-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.', e);
-    return false;
-  }
-};
-// React hook version of isIOS (for server side rendering)
-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;
-};
-// Checks device size based on window width
-var isMobile = function isMobile() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof window === undefined) return false;
-    return window.innerWidth < breakpoints.sm;
-  } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
-    return false;
-  }
-};
-// React hook version of isMobile (for server side rendering)
-var useMobile = function useMobile() {
-  var _useState2 = useState(false),
-    mobile = _useState2[0],
-    setMobile = _useState2[1];
-  useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-var useViewport = function useViewport() {
-  var _useState3 = useState(false),
-    hydrated = _useState3[0],
-    setHydrated = _useState3[1];
-  var _useState4 = useState({
-      width: 0,
-      isMobile: false,
-      isTablet: false,
-      isDesktop: false
-    }),
-    viewport = _useState4[0],
-    setViewport = _useState4[1];
-  useEffect(function () {
-    if (typeof window === 'undefined') return undefined;
-    var handleResize = function handleResize() {
-      setViewport({
-        width: window.innerWidth,
-        isMobile: window.innerWidth < breakpoints.sm,
-        isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-        isDesktop: window.innerWidth >= breakpoints.md
-      });
-    };
-    handleResize();
-    setHydrated(true);
-    window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-  return _extends({}, viewport, {
-    hydrated: hydrated
-  });
-};
-
 var SocialLinks = function SocialLinks(_ref) {
   var items = _ref.items;
   var _useViewport = useViewport(),