pageflow 16.0.0 → 16.1.0

data/entry_types/scrolled/package/frontend/index.js

@@ -1,6 +1,6 @@
 import 'regenerator-runtime';
-import { E as EventContextDataProvider, C as ConnectedSection, u as usePrevious, g as getEventObject, w as withInlineEditingDecorator, a as useCurrentSectionIndexState, b as usePostMessageListener, c as contentStyles, A as AtmoProvider, S as ScrollToSectionContext, d as api, B as Bar, _ as _asyncToGenerator, e as _regeneratorRuntime, f as useDarkBackground, T as Text, h as useTextTracks, i as useMediaMuted, j as useFocusOutlineVisible, k as useVideoQualitySetting, l as useIsomorphicLayoutEffect, m as withInlineEditingAlternative, n as frontendStyles, o as useFullscreenDimensions, p as information, q as camelize, s as styles$a, R as RootProviders, r as registerVendors, t as loadInlineEditingComponents } from './EditableInlineText.module-14c7b097.js';
-export { a0 as Atmo, a1 as AtmoContext, A as AtmoProvider, Z as AudioPlayer, J as EditableText, Q as Image, U as MediaPlayer, K as PhonePlatformProvider, P as PlayerEventContextDataProvider, R as RootProviders, a5 as SectionThumbnail, a4 as StandaloneSectionThumbnail, T as Text, O as ThirdPartyOptIn, L as ThirdPartyOptOutInfo, Y as VideoPlayer, d as frontend, N as getAvailableTransitionNames, V as getInitialPlayerState, M as getTransitionNames, W as playerStateReducer, $ as processSources, r as registerConsentVendors, a2 as useAtmo, v as useAudioFocus, x as useContentElementConfigurationUpdate, y as useContentElementEditorCommandSubscription, z as useContentElementEditorState, D as useContentElementLifecycle, F as useCurrentChapter, f as useDarkBackground, G as useIsStaticPreview, i as useMediaMuted, a3 as useOnScreen, H as useOnUnmuteMedia, X as usePlayerState, I as usePortraitOrientation } from './EditableInlineText.module-14c7b097.js';
+import { E as EventContextDataProvider, C as ConnectedSection, u as usePrevious, g as getEventObject, w as withInlineEditingDecorator, a as useCurrentSectionIndexState, b as usePostMessageListener, c as contentStyles, A as AtmoProvider, S as ScrollToSectionContext, d as api, _ as _asyncToGenerator, e as _regeneratorRuntime, f as withInlineEditingAlternative, h as useDarkBackground, i as EditableText, j as useContentElementConfigurationUpdate, k as useContentElementAttributes, l as widths, m as useTextTracks, n as useMediaMuted, o as useFocusOutlineVisible, p as useVideoQualitySetting, q as useIsomorphicLayoutEffect, r as frontendStyles, s as useFullscreenDimensions, t as information, v as camelize, x as styles$a, R as RootProviders, y as registerVendors, z as loadInlineEditingComponents } from './EditableInlineText.module-fa9e3aff.js';
+export { a3 as Atmo, a4 as AtmoContext, A as AtmoProvider, a1 as AudioPlayer, i as EditableText, V as Image, X as MediaPlayer, K as PhonePlatformProvider, P as PlayerEventContextDataProvider, R as RootProviders, a8 as SectionThumbnail, a7 as StandaloneSectionThumbnail, W as Text, O as ThirdPartyOptIn, L as ThirdPartyOptOutInfo, a0 as VideoPlayer, U as contentElementWidthName, l as contentElementWidths, d as frontend, Q as getAvailableTransitionNames, Y as getInitialPlayerState, N as getTransitionNames, T as paletteColor, Z as playerStateReducer, a2 as processSources, y as registerConsentVendors, a5 as useAtmo, B as useAudioFocus, M as useConsentRequested, j as useContentElementConfigurationUpdate, D as useContentElementEditorCommandSubscription, F as useContentElementLifecycle, G as useCurrentChapter, h as useDarkBackground, H as useIsStaticPreview, n as useMediaMuted, a6 as useOnScreen, I as useOnUnmuteMedia, $ as usePlayerState, J as usePortraitOrientation } from './EditableInlineText.module-fa9e3aff.js';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.symbol.description';
 import 'core-js/modules/es.symbol.async-iterator';
@@ -74,23 +74,28 @@ import 'core-js/modules/esnext.symbol.pattern-match';
 import 'core-js/modules/web.dom-collections.iterator';
 import 'regenerator-runtime/runtime.js';
 import { browser, events, consent, features } from 'pageflow/frontend';
-import React, { useRef, useState, useEffect, useCallback, Suspense, useContext } from 'react';
+import React, { useRef, useState, useEffect, useCallback, useMemo, Suspense, useContext } from 'react';
 import ReactDOM from 'react-dom';
-import { c as _slicedToArray, m as useSectionsWithChapter, r as useEntryStructure, s as useWidget, t as getFileUrlTemplateHost, b as _defineProperty, a as _objectSpread2, _ as _objectWithoutProperties, u as useI18n, f as useTheme, j as _toConsumableArray, v as useAvailableQualities, w as setupI18n } from './PhonePlatformContext-f6093cc6.js';
-export { L as LocaleProvider, w as setupI18n, l as useAdditionalSeedData, x as useChapters, y as useCredits, o as useEntryStateDispatch, i as useFile, z as useFileRights, u as useI18n, e as useLegalInfo, d as useLocale, A as useShareProviders, C as useShareUrl, f as useTheme } from './PhonePlatformContext-f6093cc6.js';
-import 'i18n-js';
+import { _ as _slicedToArray, j as useSectionsWithChapter, p as useEntryStructure, q as useWidget, r as getFileUrlTemplateHost, u as useI18n, b as _defineProperty, a as _objectSpread2, e as _objectWithoutProperties, g as useTheme, l as _toConsumableArray, s as useAvailableQualities, t as setupI18n } from './i18n-ddd92820.js';
+export { L as LocaleProvider, t as setupI18n, i as useAdditionalSeedData, v as useChapters, w as useCredits, n as useEntryStateDispatch, f as useFile, x as useFileRights, u as useI18n, y as useLegalInfo, B as useLocale, z as useShareProviders, A as useShareUrl, g as useTheme } from './i18n-ddd92820.js';
+import classNames from 'classnames';
+import { a as useContentElementEditorState } from './useContentElementEditorState-63045393.js';
+export { a as useContentElementEditorState } from './useContentElementEditorState-63045393.js';
 import 'use-context-selector';
 import 'reselect';
 import 'slugify';
-import classNames from 'classnames';
 import './createSuper-d0f30da3.js';
 import 'backbone-events-standalone';
+import 'i18n-js';
+import './PhonePlatformContext-10a1d600.js';
+import stripTags from 'striptags';
 import Measure from 'react-measure';
 import { DraggableCore } from 'react-draggable';
-import { A as ArrowRightIcon } from './arrowRight-78a7cee4.js';
-export { u as usePhonePlatform } from './arrowRight-78a7cee4.js';
+export { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-727cce0d.js';
+export { F as FullscreenViewer } from './index-02378634.js';
+import { A as ArrowRightIcon, a as ArrowLeftIcon } from './arrowRight-92a34ccc.js';
+export { u as usePhonePlatform } from './arrowRight-92a34ccc.js';
 import invert from 'invert-color';
-import stripTags from 'striptags';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -326,7 +331,9 @@ function Widget(_ref) {
 }
 
 function Entry() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, null), /*#__PURE__*/React.createElement(Widget, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Widget, {
+    role: "consent"
+  }), /*#__PURE__*/React.createElement(Widget, {
     role: "header"
   }), /*#__PURE__*/React.createElement(Content, null), /*#__PURE__*/React.createElement(Widget, {
     role: "footer"
@@ -374,27 +381,92 @@ function hlsHostSupportedByAndroid(seed) {
   return getFileUrlTemplateHost(seed, 'videoFiles', 'hls-playlist').indexOf('_') < 0;
 }
 
-var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"Figure-module_root__3FC-x","invert":"Figure-module_invert___0BJP"};
+var ActionButton = withInlineEditingAlternative('ActionButton', function ActionButton() {
+  return null;
+});
+
+function isBlank(html) {
+  return !!stripTags(html).match(/^\s*$/);
+}
+function presence(html) {
+  return isBlank(html) ? null : html;
+}
+function isBlankEditableTextValue(value) {
+  var _value$0$children$;
+
+  return !value || value.length === 0 || value.length === 1 && value[0].children.length <= 1 && !((_value$0$children$ = value[0].children[0]) === null || _value$0$children$ === void 0 ? void 0 : _value$0$children$.text);
+}
+
+var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","contentColorScope":"colors-module_contentColorScope__2Zizr","contentLinkColor":"var(--content-link-color)","root":"Figure-module_root__3FC-x colors-module_contentColorScope__2Zizr","invert":"Figure-module_invert___0BJP"};
 
 /**
  * Render a figure with a caption text attached.
  *
  * @param {Object} props
  * @param {string} props.children - Content of figure.
- * @param {string} props.text - The text to be displayed.
+ * @param {Object[]|string} props.caption - Formatted text data as provided by onCaptionChange.
+ * @param {Function} props.onCaptionChange - Receives updated value when it changes.
+ * @param {boolean} [props.addCaptionButtonVisible=true] - Control visiblility of action button.
+ * @param {string} [props.captionButtonPosition='outside'] - Position of action button.
  */
 
 function Figure(_ref) {
   var children = _ref.children,
-      caption = _ref.caption;
+      caption = _ref.caption,
+      onCaptionChange = _ref.onCaptionChange,
+      _ref$addCaptionButton = _ref.addCaptionButtonVisible,
+      addCaptionButtonVisible = _ref$addCaptionButton === void 0 ? true : _ref$addCaptionButton,
+      _ref$addCaptionButton2 = _ref.addCaptionButtonPosition,
+      addCaptionButtonPosition = _ref$addCaptionButton2 === void 0 ? 'outside' : _ref$addCaptionButton2;
   var darkBackground = useDarkBackground();
 
-  if (caption) {
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected,
+      isEditable = _useContentElementEdi.isEditable;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isEditingCaption = _useState2[0],
+      setIsEditingCaption = _useState2[1];
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  caption = useMemo(function () {
+    return typeof caption === 'string' ? [{
+      type: 'paragraph',
+      children: [{
+        text: caption
+      }]
+    }] : caption;
+  }, [caption]);
+
+  if (!isBlankEditableTextValue(caption) || isEditable) {
     return /*#__PURE__*/React.createElement("figure", {
       className: classNames(styles.root, _defineProperty({}, styles.invert, !darkBackground))
-    }, children, /*#__PURE__*/React.createElement("figcaption", null, /*#__PURE__*/React.createElement(Text, {
-      scaleCategory: "caption"
-    }, caption)));
+    }, children, isBlankEditableTextValue(caption) && isSelected && !isEditingCaption && addCaptionButtonVisible && /*#__PURE__*/React.createElement(ActionButton, {
+      position: addCaptionButtonPosition,
+      icon: "pencil",
+      text: t('pageflow_scrolled.inline_editing.add_caption'),
+      onClick: function onClick() {
+        return setIsEditingCaption(true);
+      }
+    }), (!isBlankEditableTextValue(caption) || isEditingCaption) && /*#__PURE__*/React.createElement("figcaption", {
+      onBlur: function onBlur() {
+        return setIsEditingCaption(false);
+      }
+    }, /*#__PURE__*/React.createElement(EditableText, {
+      autoFocus: isEditingCaption,
+      value: caption,
+      scaleCategory: "caption",
+      onChange: onCaptionChange,
+      onlyParagraphs: true,
+      hyphens: "none",
+      floatingControlsPosition: "above",
+      placeholder: t('pageflow_scrolled.inline_editing.type_text')
+    })));
   } else {
     return children;
   }
@@ -417,6 +489,31 @@ function ContentElementBox(_ref) {
   }, children);
 }
 
+/**
+ * @param {Object} props
+ * @param {Object} props.configuration - Configuration of the content element.
+ * @param {string} props.children - Content of box.
+ */
+
+function ContentElementFigure(_ref) {
+  var configuration = _ref.configuration,
+      children = _ref.children;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useContentElementAtt = useContentElementAttributes(),
+      width = _useContentElementAtt.width;
+
+  return /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption,
+    onCaptionChange: function onCaptionChange(caption) {
+      return updateConfiguration({
+        caption: caption
+      });
+    },
+    addCaptionButtonPosition: width === widths.full ? 'outsideIndented' : 'outside'
+  }, children);
+}
+
 function MediaInteractionTracking(_ref) {
   var playerState = _ref.playerState,
       playerActions = _ref.playerActions,
@@ -1185,8 +1282,7 @@ function MediaPlayerControls(props) {
   }, props));
 }
 MediaPlayerControls.defaultProps = {
-  configuration: {},
-  sectionProps: {}
+  configuration: {}
 };
 
 function getTextTracksMenuItems(textTracks, t) {
@@ -1256,7 +1352,7 @@ function AudioPlayerControls(_ref) {
 }
 
 var Viewer = React.lazy(function () {
-  return import('./Viewer-b6becc57.js');
+  return import('./Viewer-ee1aa590.js');
 });
 function Panorama(props) {
   return /*#__PURE__*/React.createElement(Suspense, {
@@ -1264,6 +1360,22 @@ function Panorama(props) {
   }, /*#__PURE__*/React.createElement(Viewer, props));
 }
 
+var Viewer$1 = React.lazy(function () {
+  return import('./Viewer-169e14ca.js');
+});
+function ExpandableImage(_ref) {
+  var enabled = _ref.enabled,
+      props = _objectWithoutProperties(_ref, ["enabled"]);
+
+  if (!enabled) {
+    return props.children;
+  }
+
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(Viewer$1, props));
+}
+
 // from https://github.com/n8tb1t/use-scroll-position
 var isBrowser = typeof window !== "undefined";
 
@@ -1370,6 +1482,7 @@ var AspectRatioContext = React.createContext();
  * @param {Object} props
  * @param {number} [props.aspectRatio] - Aspect ratio of div.
  * @param {Object} [props.file] - Use width/height of file to calculate aspect ratio.
+ * @param {number} [props.scale] - Only take up fraction of the viewport height supplied as value between 0 and 1.
  * @param {Object} [props.opaque] - Render black background behind content.
  */
 
@@ -1377,7 +1490,9 @@ function FitViewport(_ref) {
   var file = _ref.file,
       aspectRatio = _ref.aspectRatio,
       opaque = _ref.opaque,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? 1 : _ref$scale;
 
   var _useFullscreenDimensi = useFullscreenDimensions(),
       height = _useFullscreenDimensi.height;
@@ -1388,10 +1503,10 @@ function FitViewport(_ref) {
 
   if (height) {
     // thumbnail view/fixed size: calculate absolute width in px
-    maxWidthCSS = height / aspectRatio + 'px';
+    maxWidthCSS = height / aspectRatio * scale + 'px';
   } else {
     // published view: set max width to specific aspect ratio depending on viewport height
-    maxWidthCSS = 100 / aspectRatio + 'vh';
+    maxWidthCSS = 100 / aspectRatio * scale + 'vh';
   }
 
   return /*#__PURE__*/React.createElement("div", {
@@ -1615,15 +1730,15 @@ function _extends$8() {
 
   return _extends$8.apply(this, arguments);
 }
-var email = (function (_ref) {
+var gear = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 612 612"
+    viewBox: "-3 -3 30 30"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M573.75 57.375H38.25C17.136 57.375 0 74.511 0 95.625v420.75c0 21.133 17.136 38.25 38.25 38.25h535.5c21.133 0 38.25-17.117 38.25-38.25V95.625c0-21.114-17.117-38.25-38.25-38.25zM554.625 497.25H57.375V204.657l224.03 187.999c7.134 5.967 15.874 8.97 24.595 8.97 8.74 0 17.461-3.003 24.595-8.97l224.03-187.999V497.25zm0-367.487L306 338.379 57.375 129.763V114.75h497.25v15.013z"
+    d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
   }));
 });
 
@@ -1644,15 +1759,15 @@ function _extends$9() {
 
   return _extends$9.apply(this, arguments);
 }
-var facebook = (function (_ref) {
+var email = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 430.113 430.114"
+    viewBox: "0 0 612 612"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M158.081 83.3v59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805s5.601-34.721 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.321-17.354h48.557V.001h-66.021C155.878-.004 158.081 72.48 158.081 83.3z"
+    d: "M573.75 57.375H38.25C17.136 57.375 0 74.511 0 95.625v420.75c0 21.133 17.136 38.25 38.25 38.25h535.5c21.133 0 38.25-17.117 38.25-38.25V95.625c0-21.114-17.117-38.25-38.25-38.25zM554.625 497.25H57.375V204.657l224.03 187.999c7.134 5.967 15.874 8.97 24.595 8.97 8.74 0 17.461-3.003 24.595-8.97l224.03-187.999V497.25zm0-367.487L306 338.379 57.375 129.763V114.75h497.25v15.013z"
   }));
 });
 
@@ -1673,15 +1788,15 @@ function _extends$a() {
 
   return _extends$a.apply(this, arguments);
 }
-var linkedIn = (function (_ref) {
+var facebook = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 430.117 430.117"
+    viewBox: "0 0 430.113 430.114"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"
+    d: "M158.081 83.3v59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805s5.601-34.721 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.321-17.354h48.557V.001h-66.021C155.878-.004 158.081 72.48 158.081 83.3z"
   }));
 });
 
@@ -1702,15 +1817,15 @@ function _extends$b() {
 
   return _extends$b.apply(this, arguments);
 }
-var telegram = (function (_ref) {
+var linkedIn = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512.004 512.004"
+    viewBox: "0 0 430.117 430.117"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M508.194 20.517c-4.43-4.96-11.42-6.29-17.21-3.76l-482 211a15.01 15.01 0 00-8.98 13.41 15.005 15.005 0 008.38 13.79l115.09 56.6 28.68 172.06c.93 6.53 6.06 11.78 12.74 12.73 4.8.69 9.57-1 12.87-4.4l90.86-90.86 129.66 92.62a15.02 15.02 0 0014.24 1.74 15.01 15.01 0 009.19-11.01l90-451c.89-4.47-.26-9.26-3.52-12.92zm-372.84 263.45l-84.75-41.68 334.82-146.57-250.07 188.25zm46.94 44.59l-13.95 69.75-15.05-90.3 183.97-138.49-150.88 151.39c-2.12 2.12-3.53 4.88-4.09 7.65zm9.13 107.3l15.74-78.67 36.71 26.22-52.45 52.45zm205.41 19.94l-176.73-126.23 252.47-253.31-75.74 379.54z"
+    d: "M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"
   }));
 });
 
@@ -1731,15 +1846,15 @@ function _extends$c() {
 
   return _extends$c.apply(this, arguments);
 }
-var twitter = (function (_ref) {
+var telegram = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 612 612"
+    viewBox: "0 0 512.004 512.004"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"
+    d: "M508.194 20.517c-4.43-4.96-11.42-6.29-17.21-3.76l-482 211a15.01 15.01 0 00-8.98 13.41 15.005 15.005 0 008.38 13.79l115.09 56.6 28.68 172.06c.93 6.53 6.06 11.78 12.74 12.73 4.8.69 9.57-1 12.87-4.4l90.86-90.86 129.66 92.62a15.02 15.02 0 0014.24 1.74 15.01 15.01 0 009.19-11.01l90-451c.89-4.47-.26-9.26-3.52-12.92zm-372.84 263.45l-84.75-41.68 334.82-146.57-250.07 188.25zm46.94 44.59l-13.95 69.75-15.05-90.3 183.97-138.49-150.88 151.39c-2.12 2.12-3.53 4.88-4.09 7.65zm9.13 107.3l15.74-78.67 36.71 26.22-52.45 52.45zm205.41 19.94l-176.73-126.23 252.47-253.31-75.74 379.54z"
   }));
 });
 
@@ -1760,11 +1875,40 @@ function _extends$d() {
 
   return _extends$d.apply(this, arguments);
 }
-var whatsApp = (function (_ref) {
+var twitter = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
   return /*#__PURE__*/React.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 612 612"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"
+  }));
+});
+
+function _extends$e() {
+  _extends$e = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$e.apply(this, arguments);
+}
+var whatsApp = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 90 90"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -1778,24 +1922,32 @@ var icons = {
   muted: muted,
   share: share,
   unmuted: unmuted,
+  gear: gear,
   email: email,
   facebook: facebook,
   linkedIn: linkedIn,
   telegram: telegram,
   twitter: twitter,
-  whatsApp: whatsApp
+  whatsApp: whatsApp,
+  arrowLeft: ArrowLeftIcon,
+  arrowRight: ArrowRightIcon
 };
 /**
  * Render an SVG icon that can be customized in themes.
  *
  * @param {Object} props
  * @param {string} props.name -
- *   Either: expand, information, muted, share, unmuted,
- *   email, facebook, linkedIn, telegram, twitter, whatsApp.
+ *   Either: expand, gear, information, muted, share, unmuted,
+ *   email, facebook, linkedIn, telegram, twitter, whatsApp,
+ *   arrowLeft, arrowRight,
+ * @params {number} [props.width] - Image width.
+ * @params {number} [props.height] - Image height.
  */
 
 function ThemeIcon(_ref) {
-  var name = _ref.name;
+  var name = _ref.name,
+      width = _ref.width,
+      height = _ref.height;
   var theme = useTheme();
   var FallbackIcon = icons[name];
   var themeAsset = theme.assets.icons[name];
@@ -1805,11 +1957,17 @@ function ThemeIcon(_ref) {
   }
 
   if (themeAsset) {
-    return /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("use", {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: width,
+      height: height
+    }, /*#__PURE__*/React.createElement("use", {
       xlinkHref: "".concat(themeAsset, "#icon")
     }));
   } else {
-    return /*#__PURE__*/React.createElement(FallbackIcon, null);
+    return /*#__PURE__*/React.createElement(FallbackIcon, {
+      width: width,
+      height: height
+    });
   }
 }
 
@@ -1822,16 +1980,10 @@ function registerTemplateWidgetType (typeName, callback) {
   callback(element);
 }
 
-function isBlank(html) {
-  return !!stripTags(html).match(/^\s*$/);
-}
-function presence(html) {
-  return isBlank(html) ? null : html;
-}
-
 var utils = {
   camelize: camelize,
   isBlank: isBlank,
+  isBlankEditableTextValue: isBlankEditableTextValue,
   presence: presence
 };
 
@@ -1922,4 +2074,4 @@ function Root(_ref2) {
   }, /*#__PURE__*/React.createElement(Entry, null));
 }
 
-export { AudioPlayerControls, ClassicPlayerControls, ContentElementBox, EditableInlineText, Entry, Figure, FitViewport, MediaInteractionTracking, MediaPlayerControls, Panorama, PlayerControls, Root, ThemeIcon, Tooltip, VideoPlayerControls, WaveformPlayerControls, Widget, registerTemplateWidgetType, textColorForBackgroundColor, useScrollPosition, utils, withShadowClassName };
+export { AudioPlayerControls, ClassicPlayerControls, ContentElementBox, ContentElementFigure, EditableInlineText, Entry, ExpandableImage, Figure, FitViewport, MediaInteractionTracking, MediaPlayerControls, Panorama, PlayerControls, Root, ThemeIcon, Tooltip, VideoPlayerControls, WaveformPlayerControls, Widget, registerTemplateWidgetType, textColorForBackgroundColor, useScrollPosition, utils, withShadowClassName };

data/entry_types/scrolled/package/frontend/useContentElementEditorState-63045393.js

@@ -0,0 +1,52 @@
+import { useState, useRef, useEffect, createContext, useContext } from 'react';
+import { _ as _slicedToArray } from './i18n-ddd92820.js';
+
+function useDelayedBoolean(value, _ref) {
+  var fromFalseToTrue = _ref.fromFalseToTrue,
+      fromTrueToFalse = _ref.fromTrueToFalse;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      setFlag = _useState2[1];
+
+  var timeoutRef = useRef(null);
+  var ref = useRef(value);
+  useEffect(function () {
+    if (value && !fromFalseToTrue || !value && !fromTrueToFalse) {
+      ref.current = value;
+    } else if (ref.current !== value) {
+      timeoutRef.current = setTimeout(function () {
+        ref.current = value;
+        setFlag(function (flag) {
+          return !flag;
+        });
+      }, ref.current ? fromTrueToFalse : fromFalseToTrue);
+      return function () {
+        return clearTimeout(timeoutRef.current);
+      };
+    }
+  }, [value, fromTrueToFalse, fromFalseToTrue]);
+  return !fromFalseToTrue && value || ref.current && (!!fromTrueToFalse || value);
+}
+
+var ContentElementEditorStateContext = createContext({
+  isSelected: false,
+  isEditable: false,
+  setTransientState: function setTransientState() {}
+});
+/**
+ * Use inside a content element component to determine whether the
+ * component is being rendered inside the editor iframe, and whether
+ * the content element is currently selected. This can be used to
+ * implement simple inline editing capabilities like displaying extra
+ * information when the content element is selected.
+ *
+ * @example
+ * const {isEditable, isSelected} = useContentElementEditorState();
+ */
+
+function useContentElementEditorState() {
+  return useContext(ContentElementEditorStateContext);
+}
+
+export { ContentElementEditorStateContext as C, useContentElementEditorState as a, useDelayedBoolean as u };

data/entry_types/scrolled/package/package.json

@@ -21,6 +21,7 @@
     "react-draggable": "^4.4.2",
     "react-measure": "^2.3.0",
     "react-player": "^1.15.2",
+    "react-quick-pinch-zoom": "^4.8.0",
     "react-tooltip": "^3.11.1",
     "react_ujs": "^2.6.1",
     "reselect": "^4.0.0",
@@ -30,7 +31,7 @@
     "slugify": "^1.4.6",
     "striptags": "^3.1.1",
     "use-context-selector": "^1.2.11",
-    "video.js": "https://github.com/tf/video.js#pageflow-scrolled-6",
+    "video.js": "https://github.com/tf/video.js#pageflow-scrolled-8",
     "wavesurfer.js": "6.1.0",
     "whatwg-fetch": "^3.0.0"
   },

data/entry_types/scrolled/package/testHelpers.js

@@ -65,6 +65,9 @@ function _objectSpread2(target) {
  * @param {Object} [options.legalInfo] - imprint, copyright and privacy information of entry.
  * @param {Object} [options.themeOptions] - Options set via theme registration.
  * @param {Object} [options.themeAssets] - Paths to theme assets.
+ * @param {Object} [options.additionalSeedData] - Seed data by name.
+ * @param {Array} [options.consentVendors] - Server rendered consent vendor data.
+ * @param {Object} [options.contentElementConsentVendors] - Consent vendor name by content element id.
  * @param {Object} [options.entry] - attributes of entry.
  * @param {Array} [options.imageFiles] - Array of objects with image file attributes of entry.
  * @param {Array} [options.videoFiles] - Array of objects with video file attributes of entry.
@@ -96,7 +99,9 @@ function normalizeSeed() {
       sections = _ref.sections,
       contentElements = _ref.contentElements,
       widgets = _ref.widgets,
-      additionalSeedData = _ref.additionalSeedData;
+      additionalSeedData = _ref.additionalSeedData,
+      consentVendors = _ref.consentVendors,
+      contentElementConsentVendors = _ref.contentElementConsentVendors;
 
   var entries = entry ? [entry] : [{}];
   var normalizedEntries = normalizeCollection(entries);
@@ -130,7 +135,9 @@ function normalizeSeed() {
       }),
       additionalSeedData: additionalSeedData || {
         frontendVersion: 1
-      }
+      },
+      consentVendors: consentVendors || [],
+      contentElementConsentVendors: contentElementConsentVendors || {}
     },
     collections: {
       entries: normalizedEntries,

data/entry_types/scrolled/package/values/colors.module.css

@@ -3,3 +3,18 @@
 
 @value lightContentTextColor: var(--theme-light-content-text-color, #fff);
 @value darkContentTextColor: var(--theme-dark-content-text-color, #222);
+
+@value lightContentLinkColor: var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor));
+@value darkContentLinkColor: var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor));
+
+@value contentLinkColor: var(--content-link-color);
+@value contentTextColor: var(--content-text-color);
+
+/* see src/frontend/global.module.css */
+
+.contentColorScope {
+  --theme-light-content-surface-color: var(--root-light-content-surface-color);
+  --theme-dark-content-surface-color: var(--root-dark-content-surface-color);
+  --theme-light-content-text-color: var(--root-light-content-text-color);
+  --theme-dark-content-text-color: var(--root-dark-content-text-color);
+}

data/entry_types/scrolled/package/widgets/consentBar.css

@@ -0,0 +1 @@
+.Toggle-module_toggle__2N5XY{border:none;background:transparent;padding:0;position:absolute;top:3px;right:40px;cursor:pointer}.Toggle-module_toggle__2N5XY svg{display:block;fill:var(--theme-widget-on-surface-color);color:var(--theme-widget-surface-color)}.Toggle-module_toggle__2N5XY[aria-checked=true] svg{fill:var(--theme-widget-primary-color);color:var(--theme-widget-on-primary-color)}.ConsentBar-module_bar__YiYoC{position:fixed;bottom:0;left:0;width:100%;box-sizing:border-box;z-index:10;padding:10px 20px;font-family:var(--theme-widget-font-family);font-size:15px;background-color:var(--theme-widget-surface-color);color:var(--theme-widget-on-surface-color)}.ConsentBar-module_text__2GSPP{margin-top:10px;margin-bottom:10px}.ConsentBar-module_text__2GSPP a{color:var(--theme-accent-color)}.ConsentBar-module_button__2LVnY{border:none;border-radius:3px;margin:10px 5px 5px;padding:10px 15px;font:inherit;cursor:pointer;background-color:var(--theme-widget-secondary-color)}.ConsentBar-module_acceptAllButton__1rSdh{background-color:var(--theme-widget-primary-color);color:var(--theme-widget-on-primary-color)}.ConsentBar-module_configureButton__1VBqX{margin-left:0}.ConsentBar-module_configureButton__1VBqX svg{fill:currentColor;margin-right:6px;margin-bottom:1px;vertical-align:bottom}.ConsentBar-module_vendorsBox__Jckbl h3{margin:.5em 0;font-size:1em}.ConsentBar-module_vendorList__3Z4jU{overflow:auto;max-height:40vh;padding-right:5px;margin:5px 0}.ConsentBar-module_vendor__2hPAk{position:relative;margin-bottom:5px;padding:8px 0;min-height:20px}.ConsentBar-module_vendor__2hPAk p{font-size:13px}.ConsentBar-module_vendor__2hPAk a{color:inherit}.ConsentBar-module_expandVendor__hSkAD{border:none;background:transparent;position:absolute;right:5px;top:3px;padding:0;cursor:pointer}.ConsentBar-module_expandVendor__hSkAD svg{fill:currentColor;display:block}.ConsentBar-module_expandVendor__hSkAD:active svg,.ConsentBar-module_expandVendor__hSkAD:focus svg,.ConsentBar-module_expandVendor__hSkAD:hover svg{fill:var(--theme-widget-primary-color)}@media (max-width:780px){.ConsentBar-module_button__2LVnY{display:block;width:100%;margin:10px 0}}@media (min-width:781px){.ConsentBar-module_vendorsBox__Jckbl{position:absolute;bottom:100%;right:5px;margin-bottom:5px;max-width:400px;width:90%;box-sizing:border-box;padding:10px 20px;background-color:inherit;color:inherit;border-radius:5px}.ConsentBar-module_saveButton__16b97{float:right}.ConsentBar-module_decisionButtons__I4T8q{float:right;display:inline-block;white-space:nowrap}}