@royaloperahouse/chord 1.22.1 → 1.23.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.23.1]
+- Fix enum on BrandingStyle
+
+## [1.23.0]
+- Re-enabled compact header on iOS
+
 ## [1.22.0]
 - TextArea: Added new TextArea component
 - TickBox: Added disabled and error states

package/dist/chord.cjs.development.js

@@ -3697,44 +3697,21 @@ var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$s || (
 var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50px;\n  bottom: 24px;\n  display: flex;\n  align-items: center;\n  @media ", " {\n    left: 20px;\n    bottom: 12px;\n  }\n"])), devices.mobile);
 var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100px;\n  margin-left: 24px;\n"])));
 var VideoMute = /*#__PURE__*/styled__default.button(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 17px;\n  height: 17px;\n  background: none;\n  border: none;\n  padding: 0;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  border: none;\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: none;\n  transform: translateY(-25%);\n"])));
+var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  appearance: none;\n  border: none;\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: none;\n  transform: translateY(-25%);\n"])));
 var trackStyles = /*#__PURE__*/styled.css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  height: 4px;\n  cursor: pointer;\n  background: rgb(241, 241, 241, 0.5);\n  border-radius: 1.3px;\n  border: none;\n"])));
-var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 12px 12px;\n  padding: 0;\n  background-color: rgb(26, 26, 26, 0.6);\n  height: 36px;\n  width: ", ";\n  align-items: center;\n  justify-content: center;\n\n  /* Range slider overrides */\n  input[type='range' i] {\n    -webkit-appearance: none;\n    width: 42px;\n    margin: 0;\n    margin-left: 7px;\n    background: transparent; /* Otherwise white in Chrome */\n\n    ::-webkit-slider-runnable-track {\n      ", "\n    }\n    ::-moz-range-track {\n      ", "\n    }\n    ::-ms-track {\n      ", "\n    }\n    ::-ms-fill-lower {\n      ", "\n    }\n    ::-ms-fill-upper {\n      ", "\n    }\n\n    ::-webkit-slider-thumb {\n      ", "\n    }\n    ::-moz-range-thumb {\n      ", "\n    }\n    ::-ms-thumb {\n      ", "\n    }\n  }\n"])), function (_ref) {
+var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 12px 12px;\n  padding: 0;\n  background-color: rgb(26, 26, 26, 0.6);\n  height: 36px;\n  width: ", ";\n  align-items: center;\n  justify-content: center;\n\n  /* Range slider overrides */\n  input[type='range' i] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 42px;\n    margin: 0;\n    margin-left: 7px;\n    background: transparent; /* Otherwise white in Chrome */\n\n    ::-webkit-slider-runnable-track {\n      ", "\n    }\n    ::-moz-range-track {\n      ", "\n    }\n    ::-ms-track {\n      ", "\n    }\n    ::-ms-fill-lower {\n      ", "\n    }\n    ::-ms-fill-upper {\n      ", "\n    }\n\n    ::-webkit-slider-thumb {\n      ", "\n    }\n    ::-moz-range-thumb {\n      ", "\n    }\n    ::-ms-thumb {\n      ", "\n    }\n  }\n"])), function (_ref) {
   var volumeHidden = _ref.volumeHidden;
   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 = React.useState(false),
-      IOS = _useState[0],
-      setIOS = _useState[1];
-
-  React.useEffect(function () {
-    if (typeof navigator === undefined) return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-};
-
 var VideoControls = function VideoControls(_ref) {
   var videoElementId = _ref.videoElementId,
       _ref$defaultMuted = _ref.defaultMuted,
       defaultMuted = _ref$defaultMuted === void 0 ? true : _ref$defaultMuted,
       _ref$defaultPlaying = _ref.defaultPlaying,
-      defaultPlaying = _ref$defaultPlaying === void 0 ? false : _ref$defaultPlaying;
+      defaultPlaying = _ref$defaultPlaying === void 0 ? false : _ref$defaultPlaying,
+      _ref$hideVolume = _ref.hideVolume,
+      hideVolume = _ref$hideVolume === void 0 ? false : _ref$hideVolume;
 
   var _React$useState = React__default.useState(defaultPlaying),
       playing = _React$useState[0],
@@ -3748,8 +3725,6 @@ var VideoControls = function VideoControls(_ref) {
       volume = _React$useState3[0],
       setVolume = _React$useState3[1];
 
-  var isIOS = useIOS();
-
   var getVideoElement = function getVideoElement() {
     return document.querySelector("#" + videoElementId);
   };
@@ -3806,7 +3781,7 @@ var VideoControls = function VideoControls(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: !playing ? 'Play' : 'Pause'
   })), /*#__PURE__*/React__default.createElement(VolumeControlsWrapper, {
-    volumeHidden: isIOS
+    volumeHidden: hideVolume
   }, /*#__PURE__*/React__default.createElement(VideoMute, {
     id: "mute",
     className: "video-mute-button",
@@ -3817,7 +3792,7 @@ var VideoControls = function VideoControls(_ref) {
     "data-testid": "mute-icon",
     iconName: muted ? 'Muted' : 'Volume',
     color: "white"
-  })), !isIOS && /*#__PURE__*/React__default.createElement(VideoVolume, {
+  })), !hideVolume && /*#__PURE__*/React__default.createElement(VideoVolume, {
     id: "vol-control",
     type: "range",
     min: "0",
@@ -6877,10 +6852,10 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 };
 
 var _templateObject$W, _templateObject2$F, _templateObject3$w, _templateObject5$j, _templateObject6$d, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.p(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
 var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  @media ", " {\n    height: 85vw;\n  }\n"])), devices.mobile);
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
 var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n  svg {\n    max-width: 155px;\n    fill: ", ";\n  }\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
       theme = _ref.theme;
@@ -6944,7 +6919,7 @@ var renderBranding = function renderBranding(brandingStyle, brandingText, invert
       });
 
     default:
-      return /*#__PURE__*/React__default.createElement("p", null, "Royal Opera House");
+      return null;
   }
 };
 
@@ -6956,73 +6931,196 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, brandingText, invert));
 };
 
+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 = React.useState(false),
+      IOS = _useState[0],
+      setIOS = _useState[1];
+
+  React.useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+}; // Checks device size based on window width
+
+var isMobile = function isMobile() {
+  try {
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.');
+    return false;
+  }
+}; // React hook version of isMobile
+
+var useMobile = function useMobile() {
+  var _useState2 = React.useState(false),
+      mobile = _useState2[0],
+      setMobile = _useState2[1];
+
+  React.useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+
 var _excluded$l = ["text"];
 
-var PageHeadingCompact = function PageHeadingCompact(_ref) {
-  var title = _ref.title,
-      link = _ref.link,
-      _ref$sponsor = _ref.sponsor,
-      sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
-      customSponsorImage = _ref.customSponsorImage,
-      bgUrlDesktop = _ref.bgUrlDesktop,
-      bgUrlDevice = _ref.bgUrlDevice,
-      videoUrlDesktop = _ref.videoUrlDesktop,
-      _ref$bgImageAltText = _ref.bgImageAltText,
-      bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
-      _ref$invert = _ref.invert,
-      invert = _ref$invert === void 0 ? false : _ref$invert,
-      _ref$brandingStyle = _ref.brandingStyle,
-      brandingStyle = _ref$brandingStyle === void 0 ? 'BlockText' : _ref$brandingStyle,
-      _ref$brandingText = _ref.brandingText,
-      brandingText = _ref$brandingText === void 0 ? 'Royal Opera House' : _ref$brandingText;
+var useResponsiveVideo = function useResponsiveVideo(video, poster) {
+  var mobileVideo = video.mobile || video.desktop;
+  var desktopVideo = video.desktop || video.mobile;
+  var mobilePoster = poster.mobile || poster.desktop;
+  var desktopPoster = poster.desktop || poster.mobile;
 
-  var _ref2 = link || {},
-      linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+  var _useState = React.useState(desktopPoster),
+      posterUrl = _useState[0],
+      setPoster = _useState[1];
+
+  var _useState2 = React.useState(desktopVideo),
+      videoUrl = _useState2[0],
+      setVideoUrl = _useState2[1];
+
+  var isMobile = useMobile();
+  React.useEffect(function () {
+    setPoster(isMobile ? mobilePoster : desktopPoster);
+    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
+  }, [isMobile]);
+  return {
+    posterUrl: posterUrl,
+    videoUrl: videoUrl
+  };
+};
+
+var VideoWithControls = function VideoWithControls(_ref) {
+  var video = _ref.video,
+      poster = _ref.poster;
+
+  var _useResponsiveVideo = useResponsiveVideo(video, poster),
+      posterUrl = _useResponsiveVideo.posterUrl,
+      videoUrl = _useResponsiveVideo.videoUrl;
 
-  var titleSize = title && title.length > 20 ? 4 : 3;
-  var videoElementId = 'compact-header-video';
   var isIOS = useIOS();
-  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, !isIOS && videoUrlDesktop ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
-    loop: true,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
+    id: video.elementId,
+    width: "100%",
+    height: "100%",
     muted: true,
-    playsInline: true,
+    loop: true,
+    poster: posterUrl,
+    src: videoUrl,
     "data-testid": "compact-video",
-    id: videoElementId
+    playsInline: true
   }, /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrlDesktop
+    src: videoUrl
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: bgUrlDesktop,
-    alt: bgImageAltText,
+    src: posterUrl,
+    alt: poster.alt,
     "data-testid": "compact-image"
   })), /*#__PURE__*/React__default.createElement(VideoControls, {
-    videoElementId: videoElementId,
+    videoElementId: video.elementId,
     defaultMuted: true,
-    defaultPlaying: false
-  })) : /*#__PURE__*/React__default.createElement("picture", {
+    defaultPlaying: false,
+    hideVolume: isIOS
+  }));
+};
+
+var CompactHeaderImage = function CompactHeaderImage(_ref2) {
+  var mobile = _ref2.mobile,
+      desktop = _ref2.desktop,
+      alt = _ref2.alt;
+  return /*#__PURE__*/React__default.createElement("picture", {
     "data-testid": "compact-picture"
-  }, bgUrlDevice && /*#__PURE__*/React__default.createElement("source", {
-    srcSet: bgUrlDevice,
+  }, mobile && /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
     media: "" + devices.mobile,
     "data-testid": "compact-mobile-image-source"
   }), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: bgUrlDesktop,
+    srcSet: desktop,
     media: "" + devices.desktop,
     "data-testid": "compact-desktop-image-source"
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: bgUrlDesktop,
-    alt: bgImageAltText,
+    src: desktop,
+    alt: alt,
     "data-testid": "compact-image"
-  }))), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
+  }));
+};
+
+var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
+  var video = _ref3.video,
+      poster = _ref3.poster;
+  // Renders fallback image if no video supplied
+  console.warn('video', video);
+
+  if (!video.desktop && !video.mobile) {
+    return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
+  }
+
+  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
+    video: video,
+    poster: poster
+  });
+};
+
+var PageHeadingCompact = function PageHeadingCompact(_ref4) {
+  var title = _ref4.title,
+      link = _ref4.link,
+      _ref4$sponsor = _ref4.sponsor,
+      sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
+      customSponsorImage = _ref4.customSponsorImage,
+      bgUrlDesktop = _ref4.bgUrlDesktop,
+      bgUrlDevice = _ref4.bgUrlDevice,
+      videoUrlDesktop = _ref4.videoUrlDesktop,
+      videoUrlMobile = _ref4.videoUrlMobile,
+      _ref4$bgImageAltText = _ref4.bgImageAltText,
+      bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
+      _ref4$invert = _ref4.invert,
+      invert = _ref4$invert === void 0 ? false : _ref4$invert,
+      _ref4$brandingStyle = _ref4.brandingStyle,
+      brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
+      brandingText = _ref4.brandingText;
+
+  var _ref5 = link || {},
+      linkText = _ref5.text,
+      restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
+
+  var titleSize = title && title.length > 20 ? 4 : 3;
+  var video = {
+    elementId: 'compact-header-video',
+    desktop: videoUrlDesktop,
+    mobile: videoUrlMobile
+  };
+  var poster = {
+    desktop: bgUrlDesktop,
+    mobile: bgUrlDevice,
+    alt: bgImageAltText
+  };
+  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, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
+    video: video,
+    poster: poster
+  })), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
     className: "page-heading-compact__background",
     invert: invert
-  }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
+  }, (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
     brandingStyle: brandingStyle,
     brandingText: brandingText,
     invert: invert