@royaloperahouse/chord 2.4.4-a-chord-development → 2.4.5-b-chord-development

package/dist/chord.cjs.development.js

@@ -127,9 +127,12 @@ var StreamBadge = function StreamBadge(_ref) {
   var _ref$fillColor = _ref.fillColor,
       fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align;
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert;
+  var colour = invert ? exports.Colors.Black : fillColor;
   return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
-    fillColor: fillColor,
+    fillColor: colour,
     width: "100%",
     height: "100%",
     viewBox: "110 450 865 200",
@@ -227,9 +230,12 @@ var CinemaBadge = function CinemaBadge(_ref) {
   var _ref$fillColor = _ref.fillColor,
       fillColor = _ref$fillColor === void 0 ? exports.Colors.White : _ref$fillColor,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align;
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert;
+  var colour = invert ? exports.Colors.Black : fillColor;
   return /*#__PURE__*/React__default.createElement(BadgeWrapper, {
-    fillColor: fillColor,
+    fillColor: colour,
     width: "100%",
     height: "100%",
     viewBox: "110 450 865 200",
@@ -7382,59 +7388,63 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (
   return '';
 });
 
-var TEXT_STYLE_HTML_TAGS_REGEXP = '<em>|</em>|<b>|</b>';
 var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
   return htmlString.replace(/<[^>]*>/g, '');
 };
+var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
 
-var getAllMatches = function getAllMatches(str, regExp) {
-  var allMatches = [];
-  var match;
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(htmlString, 'text/html');
+  var textContent = doc.body.textContent;
 
-  while (match = regExp.exec(str)) {
-    allMatches.push({
-      value: match[0],
-      index: match.index
-    });
+  if (textContent && textContent.length <= resultLength) {
+    return htmlString;
   }
 
-  return allMatches;
-};
-
-var insertString = function insertString(mainString, str, position) {
-  return "" + mainString.substring(0, position) + str + mainString.substring(position);
-};
+  var accumulatedText = '';
+  var tagStack = [];
+  var charCount = 0;
 
-var insertHtmlTags = function insertHtmlTags(strWithTags, strWithoutTags, resultLength) {
-  var htmlTagPositions = getAllMatches(strWithTags, new RegExp(TEXT_STYLE_HTML_TAGS_REGEXP, 'g'));
-  var tagsLength = 0;
-  var resultString = strWithoutTags;
-  htmlTagPositions.forEach(function (tag) {
-    resultString = insertString(resultString, tag.value, tag.index);
-    if (tag.index - tagsLength <= resultLength) tagsLength += tag.value.length;
-  });
-  return {
-    stringWithInsertedTags: resultString,
-    tagsLength: tagsLength
+  var closeTags = function closeTags() {
+    while (tagStack.length > 0) {
+      accumulatedText += '</' + tagStack.pop() + '>';
+    }
   };
-};
 
-var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots) {
-  if (addDots === void 0) {
-    addDots = false;
-  }
+  for (var i = 0; i < htmlString.length; i++) {
+    var _char = htmlString[i];
 
-  var strWithoutTags = stripAllHtmlTags(str);
-  if (strWithoutTags.length <= resultLength) return str;
+    if (_char === '<') {
+      accumulatedText += _char;
 
-  var _insertHtmlTags = insertHtmlTags(str, strWithoutTags, resultLength),
-      stringWithInsertedTags = _insertHtmlTags.stringWithInsertedTags,
-      tagsLength = _insertHtmlTags.tagsLength;
+      if (htmlString[i + 1] !== '/') {
+        var tagNameEnd = htmlString.indexOf('>', i);
+        var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
+        tagStack.push(tagName);
+        accumulatedText += tagName + ">";
+        i = tagNameEnd;
+      }
+    } else if (_char === '>') {
+      accumulatedText += _char;
+    } else if (charCount < resultLength) {
+      accumulatedText += _char;
+      charCount++;
+    }
 
-  var truncatedString = stringWithInsertedTags.substring(0, resultLength + tagsLength);
-  var isSpaceNext = strWithoutTags[resultLength] === ' ';
-  if (!isSpaceNext) truncatedString = truncatedString.substring(0, truncatedString.lastIndexOf(' '));
-  return addDots ? truncatedString + "..." : truncatedString;
+    if (charCount >= resultLength) {
+      if (addDots) {
+        accumulatedText += '...';
+      }
+
+      break;
+    }
+  }
+
+  closeTags();
+  return accumulatedText;
 };
 var truncate = function truncate(str, n) {
   return str.length >= n ? str.substring(0, n) : str;
@@ -8240,7 +8250,7 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
 };
 
 var _templateObject$$, _templateObject2$H, _templateObject3$z, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__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$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\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$H || (_templateObject2$H = /*#__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$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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);
@@ -8344,10 +8354,14 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
       }, truncate(stripAllHtmlTags(brandingText), 25));
 
     case 'StreamLogo':
-      return /*#__PURE__*/React__default.createElement(StreamBadge, null);
+      return /*#__PURE__*/React__default.createElement(StreamBadge, {
+        invert: invert
+      });
 
     case 'CinemaLogo':
-      return /*#__PURE__*/React__default.createElement(CinemaBadge, null);
+      return /*#__PURE__*/React__default.createElement(CinemaBadge, {
+        invert: invert
+      });
 
     default:
       return null;
@@ -10288,7 +10302,7 @@ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A ||
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {