pageflow 15.6.1 → 15.7.0

data/entry_types/scrolled/package/contentElements-frontend.js

@@ -1,9 +1,9 @@
-import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, useAudioFocus, MediaInteractionTracking, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor, Panorama } from 'pageflow-scrolled/frontend';
-import React, { useState, useEffect, useRef } from 'react';
+import { useContentElementConfigurationUpdate, useI18n, useIsStaticPreview, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, FitViewport, ContentElementBox, Figure, useContentElementLifecycle, usePortraitOrientation, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor, Panorama, utils } from 'pageflow-scrolled/frontend';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
 import Measure from 'react-measure';
-import { media } from 'pageflow/frontend';
+import { media, documentHiddenState, features } from 'pageflow/frontend';
 import ReactPlayer from 'react-player';
 
 function _defineProperty(obj, key, value) {
@@ -21,7 +21,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","center":"Heading-module_center__38lDY","first":"Heading-module_first__1PMJX"};
+var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","first":"Heading-module_first__1PMJX"};
 
 function Heading(_ref) {
   var configuration = _ref.configuration,
@@ -35,69 +35,49 @@ function Heading(_ref) {
   }),
       t = _useI18n.t;
 
-  var legacyValue = configuration.children;
-  return (
-    /*#__PURE__*/
-    React.createElement("h1", {
-      className: classNames(styles.root, _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, styles[sectionProps.layout], configuration.position === 'wide'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
-    },
-    /*#__PURE__*/
-    React.createElement(Text, {
-      scaleCategory: firstSectionInEntry ? 'h1' : 'h2',
-      inline: true
-    },
-    /*#__PURE__*/
-    React.createElement(EditableInlineText, {
-      value: configuration.value,
-      defaultValue: legacyValue,
-      placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
-      onChange: function onChange(value) {
-        return updateConfiguration({
-          value: value
-        });
-      }
-    })))
-  );
+  var isStaticPreview = useIsStaticPreview();
+  var legacyValue = configuration.children; // Prevent collision with legacy editor rules for h2 elements. We do
+  // not care about header structure in the static preview thumbnails.
+
+  var Tag = firstSectionInEntry || isStaticPreview ? 'h1' : 'h2';
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: classNames(styles.root, configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, styles[sectionProps.layout], configuration.position === 'wide' || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
+  }, /*#__PURE__*/React.createElement(Text, {
+    scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
+    inline: true
+  }, /*#__PURE__*/React.createElement(EditableInlineText, {
+    value: configuration.value,
+    defaultValue: legacyValue,
+    hyphens: configuration.hyphens,
+    placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
+    onChange: function onChange(value) {
+      return updateConfiguration({
+        value: value
+      });
+    }
+  })));
 }
 
-frontend.contentElementTypes.register('heading', {
-  component: Heading
-});
+function getScaleCategory(configuration, firstSectionInEntry) {
+  switch (configuration.textSize) {
+    case 'large':
+      return 'heading-lg';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+    case 'medium':
+      return 'heading-md';
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
+    case 'small':
+      return 'heading-sm';
 
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    default:
+      return firstSectionInEntry ? 'heading-lg' : 'heading-sm';
   }
-
-  return target;
 }
 
+frontend.contentElementTypes.register('heading', {
+  component: Heading
+});
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -167,15 +147,14 @@ var placeholderFile = {
 function BeforeAfter(_ref) {
   var isActive = _ref.isActive,
       load = _ref.load,
+      caption = _ref.caption,
       position = _ref.position,
       before_id = _ref.before_id,
       before_label = _ref.before_label,
       after_id = _ref.after_id,
       after_label = _ref.after_label,
       initial_slider_position = _ref.initial_slider_position,
-      slider = _ref.slider,
-      slider_color = _ref.slider_color,
-      slider_handle = _ref.slider_handle;
+      slider_color = _ref.slider_color;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -211,86 +190,48 @@ function BeforeAfter(_ref) {
   var afterImageUrl = afterImage && afterImage.urls.large;
   var afterImageAlt = afterImage && afterImage.configuration.alt;
   var initialSliderPos = initial_slider_position / 100;
-  var opts = {}; // Transform slider-related props into the format that
-  // react-compare-image needs
-
-  if (!slider) {
-    opts = _objectSpread2(_objectSpread2({}, opts), {}, {
-      sliderLineWidth: 0,
-      handle:
-      /*#__PURE__*/
-      React.createElement(React.Fragment, null)
-    });
-  }
-
-  if (slider) {
-    if (!slider_handle) {
-      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
-        handle:
-        /*#__PURE__*/
-        React.createElement(React.Fragment, null)
-      });
-    }
-
-    if (slider_color) {
-      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
-        sliderLineColor: slider_color
-      });
-    }
-  }
-
-  return (
-    /*#__PURE__*/
-    React.createElement(ViewportDependentPillarBoxes, {
-      file: beforeImage || afterImage || placeholderFile,
-      position: position
-    },
-    /*#__PURE__*/
-    React.createElement(Measure, {
-      bounds: true
-    }, function (_ref2) {
-      var _cx;
-
-      var measureRef = _ref2.measureRef,
-          contentRect = _ref2.contentRect;
-      return (
-        /*#__PURE__*/
-        React.createElement("div", {
-          ref: measureRef,
-          style: {
-            '--initial-rect-width': contentRect.bounds.width * initialSliderPos + 'px'
-          },
-          className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle && !moved), _cx), styles$1.container)
-        },
-        /*#__PURE__*/
-        React.createElement(InitialSliderPositionIndicator, {
-          parentSelected: isSelected,
-          position: initial_slider_position
-        }), renderCompareImage())
-      );
-    }))
-  );
+  return /*#__PURE__*/React.createElement(FitViewport, {
+    file: beforeImage || afterImage || placeholderFile
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(Measure, {
+    bounds: true
+  }, function (_ref2) {
+    var _cx;
+
+    var measureRef = _ref2.measureRef,
+        contentRect = _ref2.contentRect;
+    var initialRectWidth = contentRect.bounds.width * initialSliderPos + 'px';
+    return /*#__PURE__*/React.createElement("div", {
+      ref: measureRef,
+      style: {
+        '--initial-rect-width': initialRectWidth
+      },
+      className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle && !moved), _cx), styles$1.container)
+    }, /*#__PURE__*/React.createElement(InitialSliderPositionIndicator, {
+      parentSelected: isSelected,
+      position: initial_slider_position
+    }), renderCompareImage());
+  })))));
 
   function renderCompareImage() {
     if (!load) {
       return null;
     }
 
-    return (
-      /*#__PURE__*/
-      React.createElement(ReactCompareImage, Object.assign({
-        leftImage: beforeImage ? beforeImageUrl : placeholderForBeforeImage,
-        rightImage: afterImage ? afterImageUrl : placeholderForAfterImage,
-        leftImageLabel: before_label,
-        rightImageLabel: after_label,
-        leftImageAlt: beforeImageAlt,
-        rightImageAlt: afterImageAlt,
-        sliderPositionPercentage: initialSliderPos,
-        onSliderPositionChange: function onSliderPositionChange() {
-          return setMoved(true);
-        }
-      }, opts))
-    );
+    return /*#__PURE__*/React.createElement(ReactCompareImage, {
+      leftImage: beforeImage ? beforeImageUrl : placeholderForBeforeImage,
+      rightImage: afterImage ? afterImageUrl : placeholderForAfterImage,
+      leftImageLabel: before_label,
+      rightImageLabel: after_label,
+      leftImageAlt: beforeImageAlt,
+      rightImageAlt: afterImageAlt,
+      sliderPositionPercentage: initialSliderPos,
+      onSliderPositionChange: function onSliderPositionChange() {
+        return setMoved(true);
+      },
+      sliderLineColor: slider_color || undefined
+    });
   }
 }
 
@@ -307,9 +248,7 @@ function InitialSliderPositionIndicator(_ref3) {
   }; // In case this element is selected, and its initial slider position
   // is not in the middle, we show InitialSliderPositionIndicator
 
-  return parentSelected && position !== 50 ?
-  /*#__PURE__*/
-  React.createElement("div", {
+  return parentSelected && position !== 50 ? /*#__PURE__*/React.createElement("div", {
     className: styles$1.sliderStart,
     style: indicatorStyles
   }) : '';
@@ -320,13 +259,10 @@ function InlineBeforeAfter(props) {
       isActive = _useContentElementLif.isActive,
       shouldLoad = _useContentElementLif.shouldLoad;
 
-  return (
-    /*#__PURE__*/
-    React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
-      load: shouldLoad,
-      isActive: isActive
-    }))
-  );
+  return /*#__PURE__*/React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
+    load: shouldLoad,
+    isActive: isActive
+  }));
 }
 
 frontend.contentElementTypes.register('inlineBeforeAfter', {
@@ -336,34 +272,63 @@ frontend.contentElementTypes.register('inlineBeforeAfter', {
 
 function InlineImage(_ref) {
   var configuration = _ref.configuration;
-
-  var _useContentElementLif = useContentElementLifecycle(),
-      shouldLoad = _useContentElementLif.shouldLoad;
-
   var imageFile = useFile({
     collectionName: 'imageFiles',
     permaId: configuration.id
   });
-  return (
-    /*#__PURE__*/
-    React.createElement(Figure, {
-      caption: configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement(ViewportDependentPillarBoxes, {
-      file: imageFile,
-      aspectRatio: imageFile ? undefined : 0.75,
-      position: configuration.position,
-      opaque: !!configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement(Image, {
+  var portraitImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.portraitId
+  }); // Only render OrientationAwareInlineImage if a portrait image has
+  // been selected. This prevents having the component rerender on
+  // orientation changes even if it does not depend on orientation at
+  // all.
+
+  if (portraitImageFile) {
+    return /*#__PURE__*/React.createElement(OrientationAwareInlineImage, {
+      landscapeImageFile: imageFile,
+      portraitImageFile: portraitImageFile,
+      configuration: configuration
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(ImageWithCaption, {
       imageFile: imageFile,
-      load: shouldLoad,
-      structuredData: true,
-      variant: configuration.position === 'full' ? 'large' : 'medium'
-    })))
-  );
+      configuration: configuration
+    });
+  }
+}
+
+function OrientationAwareInlineImage(_ref2) {
+  var landscapeImageFile = _ref2.landscapeImageFile,
+      portraitImageFile = _ref2.portraitImageFile,
+      configuration = _ref2.configuration;
+  var portraitOrientation = usePortraitOrientation();
+  var imageFile = portraitOrientation && portraitImageFile ? portraitImageFile : landscapeImageFile;
+  return /*#__PURE__*/React.createElement(ImageWithCaption, {
+    imageFile: imageFile,
+    configuration: configuration
+  });
+}
+
+function ImageWithCaption(_ref3) {
+  var imageFile = _ref3.imageFile,
+      configuration = _ref3.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  return /*#__PURE__*/React.createElement(FitViewport, {
+    file: imageFile,
+    aspectRatio: imageFile ? undefined : 0.75,
+    opaque: !imageFile
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(Image, {
+    imageFile: imageFile,
+    load: shouldLoad,
+    structuredData: true,
+    variant: configuration.position === 'full' ? 'large' : 'medium'
+  })))));
 }
 
 frontend.contentElementTypes.register('inlineImage', {
@@ -371,6 +336,108 @@ frontend.contentElementTypes.register('inlineImage', {
   lifecycle: true
 });
 
+var styles$2 = {"wrapper":"MutedIndicator-module_wrapper__17JUY","visible":"MutedIndicator-module_visible__3qARn","eqBar":"MutedIndicator-module_eqBar__1cMDE","eqBar1":"MutedIndicator-module_eqBar1__2Ap_R MutedIndicator-module_eqBar__1cMDE","short-eq":"MutedIndicator-module_short-eq__1OYlk","eqBar2":"MutedIndicator-module_eqBar2__2QTgX MutedIndicator-module_eqBar__1cMDE","tall-eq":"MutedIndicator-module_tall-eq__6gm0B","eqBar3":"MutedIndicator-module_eqBar3__2S-y3 MutedIndicator-module_eqBar__1cMDE"};
+
+function MutedIndicator(_ref) {
+  var visible = _ref.visible;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$2.wrapper, _defineProperty({}, styles$2.visible, visible))
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("rect", {
+    className: styles$2.eqBar1,
+    x: "4",
+    y: "4",
+    width: "3.7",
+    height: "8"
+  }), /*#__PURE__*/React.createElement("rect", {
+    className: styles$2.eqBar2,
+    x: "10.2",
+    y: "4",
+    width: "3.7",
+    height: "16"
+  }), /*#__PURE__*/React.createElement("rect", {
+    className: styles$2.eqBar3,
+    x: "16.3",
+    y: "4",
+    width: "3.7",
+    height: "11"
+  })));
+}
+
+function getLifecycleHandlers(configuration, playerActions) {
+  return {
+    onVisible: function onVisible() {
+      if (configuration.playbackMode === 'loop') {
+        playerActions.play();
+      }
+    },
+    onActivate: function onActivate() {
+      if (configuration.playbackMode === 'autoplay' || !configuration.playbackMode && configuration.autoplay) {
+        playerActions.play({
+          via: 'autoplay'
+        });
+      }
+    },
+    onDeactivate: function onDeactivate() {
+      if (configuration.playbackMode !== 'loop') {
+        playerActions.fadeOutAndPause(400);
+      }
+    },
+    onInvisible: function onInvisible() {
+      if (configuration.playbackMode === 'loop') {
+        playerActions.fadeOutAndPause(400);
+      }
+    }
+  };
+}
+function getPlayerClickHandler(_ref) {
+  var configuration = _ref.configuration,
+      playerActions = _ref.playerActions,
+      shouldPlay = _ref.shouldPlay,
+      lastControlledVia = _ref.lastControlledVia,
+      mediaMuted = _ref.mediaMuted,
+      isEditable = _ref.isEditable,
+      isSelected = _ref.isSelected;
+
+  if (isEditable && !isSelected) {
+    return null;
+  } else if (configuration.playbackMode === 'loop') {
+    if (mediaMuted && !configuration.keepMuted) {
+      return function () {
+        return playerActions.playBlessed();
+      };
+    } else {
+      return null;
+    }
+  } else if (configuration.keepMuted) {
+    return function () {
+      if (shouldPlay) {
+        playerActions.pause();
+      } else {
+        playerActions.play();
+      }
+    };
+  } else {
+    return function () {
+      if (shouldPlay && mediaMuted) {
+        if (configuration.rewindOnUnmute && lastControlledVia === 'autoplay') {
+          playerActions.seekTo(0);
+        }
+
+        playerActions.playBlessed();
+      } else if (shouldPlay) {
+        playerActions.pause();
+      } else {
+        playerActions.playBlessed();
+      }
+    };
+  }
+}
+
 function InlineVideo(_ref) {
   var contentElementId = _ref.contentElementId,
       sectionProps = _ref.sectionProps,
@@ -389,20 +456,43 @@ function InlineVideo(_ref) {
       playerState = _usePlayerState2[0],
       playerActions = _usePlayerState2[1];
 
+  return /*#__PURE__*/React.createElement(MediaInteractionTracking, {
+    playerState: playerState,
+    playerActions: playerActions
+  }, /*#__PURE__*/React.createElement(FitViewport, {
+    file: videoFile,
+    aspectRatio: videoFile ? undefined : fallbackAspectRatio,
+    opaque: !videoFile
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(MutedIndicator, {
+    visible: media.muted && playerState.shouldPlay && !configuration.keepMuted
+  }), /*#__PURE__*/React.createElement(Player, {
+    key: configuration.playbackMode === 'loop',
+    videoFile: videoFile,
+    posterImageFile: posterImageFile,
+    playerState: playerState,
+    playerActions: playerActions,
+    contentElementId: contentElementId,
+    sectionProps: sectionProps,
+    configuration: configuration
+  }))))));
+}
+
+function Player(_ref2) {
+  var videoFile = _ref2.videoFile,
+      posterImageFile = _ref2.posterImageFile,
+      playerState = _ref2.playerState,
+      playerActions = _ref2.playerActions,
+      contentElementId = _ref2.contentElementId,
+      sectionProps = _ref2.sectionProps,
+      configuration = _ref2.configuration;
+
   var _useContentElementEdi = useContentElementEditorState(),
       isEditable = _useContentElementEdi.isEditable,
       isSelected = _useContentElementEdi.isSelected;
 
-  var _useContentElementLif = useContentElementLifecycle({
-    onActivate: function onActivate() {
-      if (configuration.autoplay) {
-        playerActions.play();
-      }
-    },
-    onDeactivate: function onDeactivate() {
-      playerActions.fadeOutAndPause(400);
-    }
-  }),
+  var _useContentElementLif = useContentElementLifecycle(getLifecycleHandlers(configuration, playerActions)),
       shouldLoad = _useContentElementLif.shouldLoad,
       shouldPrepare = _useContentElementLif.shouldPrepare;
 
@@ -410,59 +500,62 @@ function InlineVideo(_ref) {
     key: contentElementId,
     request: playerState.shouldPlay,
     onLost: function onLost() {
-      playerActions.fadeOutAndPause(400);
+      if (configuration.playbackMode !== 'loop') {
+        playerActions.fadeOutAndPause(400);
+      }
     }
   });
-
-  var onPlayerClick = function onPlayerClick() {
-    if (isEditable && !isSelected) {
+  var onPlayerClick = getPlayerClickHandler({
+    configuration: configuration,
+    playerActions: playerActions,
+    shouldPlay: playerState.shouldPlay,
+    lastControlledVia: playerState.lastControlledVia,
+    mediaMuted: media.muted,
+    isEditable: isEditable,
+    isSelected: isSelected
+  });
+  useEffect(function () {
+    if (configuration.playbackMode !== 'loop') {
       return;
     }
 
-    if (!playerState.shouldPlay || media.muted) {
-      playerActions.playBlessed();
-    } else {
-      playerActions.pause();
-    }
-  };
-
-  return (
-    /*#__PURE__*/
-    React.createElement(Figure, {
-      caption: configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement(MediaInteractionTracking, {
-      playerState: playerState,
-      playerActions: playerActions
-    },
-    /*#__PURE__*/
-    React.createElement(VideoPlayerControls, {
-      videoFile: videoFile,
-      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
-      playerState: playerState,
-      playerActions: playerActions,
-      configuration: configuration,
-      sectionProps: sectionProps,
-      onPlayerClick: onPlayerClick
-    },
-    /*#__PURE__*/
-    React.createElement(VideoPlayer, {
-      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
-      position: configuration.position,
-      controls: configuration.controls,
-      playerState: playerState,
-      playerActions: playerActions,
-      videoFile: videoFile,
-      posterImageFile: posterImageFile,
-      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
-      quality: 'high',
-      playsInline: true,
-      atmoDuringPlayback: configuration.atmoDuringPlayback
-    }))))
-  );
+    var documentState = documentHiddenState(function (visibilityState) {
+      if (visibilityState === 'hidden') {
+        playerActions.fadeOutAndPause(400);
+      } else {
+        playerActions.play();
+      }
+    });
+    return function () {
+      return documentState.removeCallback();
+    };
+  }, [playerActions, configuration.playbackMode]);
+  return /*#__PURE__*/React.createElement(VideoPlayerControls, {
+    videoFile: videoFile,
+    defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+    playerState: playerState,
+    playerActions: playerActions,
+    hideControlBar: configuration.hideControlBar || configuration.playbackMode === 'loop',
+    hideBigPlayButton: configuration.playbackMode === 'loop',
+    configuration: configuration,
+    sectionProps: sectionProps,
+    onPlayerClick: onPlayerClick
+  }, /*#__PURE__*/React.createElement(VideoPlayer, {
+    load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
+    loop: configuration.playbackMode === 'loop',
+    playerState: playerState,
+    playerActions: playerActions,
+    videoFile: videoFile,
+    posterImageFile: posterImageFile,
+    defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+    quality: 'high',
+    playsInline: true,
+    atmoDuringPlayback: configuration.atmoDuringPlayback
+  }));
 }
 
+var fallbackAspectRatio = 0.5625;
+
 frontend.contentElementTypes.register('inlineVideo', {
   component: InlineVideo,
   lifecycle: true
@@ -523,37 +616,31 @@ function InlineAudio(_ref) {
     }
   };
 
-  return (
-    /*#__PURE__*/
-    React.createElement(Figure, {
-      caption: configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement(AudioPlayerControls, {
-      audioFile: audioFile,
-      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
-      playerState: playerState,
-      playerActions: playerActions,
-      standAlone: !posterImageFile,
-      configuration: configuration,
-      sectionProps: sectionProps,
-      onPlayerClick: onPlayerClick
-    },
-    /*#__PURE__*/
-    React.createElement(AudioPlayer, {
-      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
-      position: configuration.position,
-      controls: configuration.controls,
-      playerState: playerState,
-      playerActions: playerActions,
-      audioFile: audioFile,
-      posterImageFile: posterImageFile,
-      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
-      quality: 'high',
-      playsInline: true,
-      atmoDuringPlayback: configuration.atmoDuringPlayback
-    })))
-  );
+  return /*#__PURE__*/React.createElement(FitViewport, {
+    file: posterImageFile
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(AudioPlayerControls, {
+    audioFile: audioFile,
+    defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+    playerState: playerState,
+    playerActions: playerActions,
+    standAlone: !posterImageFile,
+    configuration: configuration,
+    sectionProps: sectionProps,
+    onPlayerClick: onPlayerClick
+  }, /*#__PURE__*/React.createElement(AudioPlayer, {
+    load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
+    controls: configuration.controls,
+    playerState: playerState,
+    playerActions: playerActions,
+    audioFile: audioFile,
+    posterImageFile: posterImageFile,
+    defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+    quality: 'high',
+    playsInline: true,
+    atmoDuringPlayback: configuration.atmoDuringPlayback
+  }))))));
 }
 
 frontend.contentElementTypes.register('inlineAudio', {
@@ -561,7 +648,7 @@ frontend.contentElementTypes.register('inlineAudio', {
   lifecycle: true
 });
 
-var styles$2 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh","unmute":"SoundDisclaimer-module_unmute__1V4Ab","unmuted":"SoundDisclaimer-module_unmuted__22CJ5","active":"SoundDisclaimer-module_active__11_kc"};
+var styles$3 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh","unmute":"SoundDisclaimer-module_unmute__1V4Ab","unmuted":"SoundDisclaimer-module_unmuted__22CJ5","active":"SoundDisclaimer-module_active__11_kc"};
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -619,14 +706,14 @@ var MutedIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "volume-mute",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     d: "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"
   }));
 });
@@ -653,14 +740,14 @@ var UnmutedIcon = (function (_ref) {
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "volume-mute",
     className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512"
-  }, props), React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("path", {
     d: "M232.36 64.01a24.007 24.007 0 00-1.176.002c-5.703.15-11.464 2.348-16.155 7.039L126.061 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-14.293-11.514-23.733-23.64-24.01zm149.5 31.994c-8.107-.16-16.098 3.814-20.75 11.217-7.09 11.28-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256c0-63.53-32.06-121.94-85.77-156.24a23.808 23.808 0 00-12.37-3.756zm-55.032 80.174c-8.51-.046-16.795 4.42-21.209 12.402-6.39 11.61-2.159 26.2 9.451 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88 0-31.88-17.54-61.32-45.78-76.86a23.987 23.987 0 00-11.402-2.952z"
   }));
 });
@@ -674,49 +761,34 @@ function SoundDisclaimer() {
       t = _useI18n.t;
 
   var muted = useMediaMuted();
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$2.soundDisclaimer),
-      style: {
-        pointerEvents: isEditable && !isSelected ? 'none' : undefined
-      }
-    },
-    /*#__PURE__*/
-    React.createElement("button", {
-      className: classNames(styles$2.unmute, _defineProperty({}, styles$2.active, muted)),
-      onClick: function onClick() {
-        return media.mute(false);
-      }
-    },
-    /*#__PURE__*/
-    React.createElement(MutedIcon, null),
-    /*#__PURE__*/
-    React.createElement("p", {
-      dangerouslySetInnerHTML: {
-        __html: t('pageflow_scrolled.public.sound_disclaimer.help_muted')
-      }
-    })),
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: classNames(styles$2.unmuted, _defineProperty({}, styles$2.active, !muted))
-    },
-    /*#__PURE__*/
-    React.createElement(UnmutedIcon, null),
-    /*#__PURE__*/
-    React.createElement("p", {
-      dangerouslySetInnerHTML: {
-        __html: t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')
-      }
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$3.soundDisclaimer),
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames(styles$3.unmute, _defineProperty({}, styles$3.active, muted)),
+    onClick: function onClick() {
+      return media.mute(false);
+    }
+  }, /*#__PURE__*/React.createElement(MutedIcon, null), /*#__PURE__*/React.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('pageflow_scrolled.public.sound_disclaimer.help_muted')
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$3.unmuted, _defineProperty({}, styles$3.active, !muted))
+  }, /*#__PURE__*/React.createElement(UnmutedIcon, null), /*#__PURE__*/React.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')
+    }
+  })));
 }
 
 frontend.contentElementTypes.register('soundDisclaimer', {
   component: SoundDisclaimer
 });
 
-var styles$3 = {"text":"TextBlock-module_text__21Hk4"};
+var styles$4 = {"text":"TextBlock-module_text__21Hk4","layout-centerRagged":"TextBlock-module_layout-centerRagged__1tjoI"};
 
 function TextBlock(props) {
   var updateConfiguration = useContentElementConfigurationUpdate();
@@ -726,23 +798,18 @@ function TextBlock(props) {
   }),
       t = _useI18n.t;
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$3.text
-    },
-    /*#__PURE__*/
-    React.createElement(EditableText, {
-      value: props.configuration.value,
-      contentElementId: props.contentElementId,
-      placeholder: t('pageflow_scrolled.inline_editing.type_text'),
-      onChange: function onChange(value) {
-        return updateConfiguration({
-          value: value
-        });
-      }
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$4.text, styles$4["layout-".concat(props.sectionProps.layout)])
+  }, /*#__PURE__*/React.createElement(EditableText, {
+    value: props.configuration.value,
+    contentElementId: props.contentElementId,
+    placeholder: t('pageflow_scrolled.inline_editing.type_text'),
+    onChange: function onChange(value) {
+      return updateConfiguration({
+        value: value
+      });
+    }
+  }));
 }
 
 frontend.contentElementTypes.register('textBlock', {
@@ -751,7 +818,22 @@ frontend.contentElementTypes.register('textBlock', {
   supportsWrappingAroundFloats: true
 });
 
-var styles$4 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
+var youtubeMatcher = /youtube\.com\/|youtu\.be\//;
+var vimeoMatcher = /vimeo\.com\//;
+var facebookMatcher = /facebook\.com\//;
+function getProviderName(url) {
+  if (youtubeMatcher.test(url)) {
+    return 'youtube';
+  } else if (vimeoMatcher.test(url)) {
+    return 'vimeo';
+  } else if (facebookMatcher.test(url)) {
+    return 'facebook';
+  }
+
+  return null;
+}
+
+var styles$5 = {"embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
 
 var aspectRatios = {
   wide: 0.5625,
@@ -775,52 +857,46 @@ function VideoEmbed(_ref) {
       playerState = _useState2[0],
       setPlayerState = _useState2[1];
 
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$4.VideoEmbed,
-      style: {
-        pointerEvents: isEditable && !isSelected ? 'none' : undefined
-      }
-    },
-    /*#__PURE__*/
-    React.createElement(Figure, {
-      caption: configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement(ViewportDependentPillarBoxes, {
-      aspectRatio: aspectRatios[configuration.aspectRatio || 'wide'],
-      position: configuration.position,
-      opaque: !!configuration.caption
-    }, shouldLoad &&
-    /*#__PURE__*/
-    React.createElement(PreparedPlayer, {
-      playerState: playerState,
-      setPlayerState: setPlayerState,
-      contentElementId: contentElementId,
-      configuration: configuration
-    })),
-    /*#__PURE__*/
-    React.createElement(ThirdPartyOptOutInfo, {
-      providerName: "video",
-      hide: playerState === 'playing',
-      contentElementPosition: configuration.position
-    })))
-  );
+  var providerName = getProviderName(configuration.videoSource);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport, {
+    aspectRatio: aspectRatios[configuration.aspectRatio || 'wide']
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, shouldLoad && /*#__PURE__*/React.createElement(PreparedPlayer, {
+    playerState: playerState,
+    setPlayerState: setPlayerState,
+    contentElementId: contentElementId,
+    configuration: configuration,
+    providerName: providerName
+  })), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
+    providerName: providerName,
+    hide: playerState === 'playing',
+    contentElementPosition: configuration.position
+  })))));
 }
 
 function PreparedPlayer(_ref2) {
   var contentElementId = _ref2.contentElementId,
       configuration = _ref2.configuration,
       playerState = _ref2.playerState,
-      setPlayerState = _ref2.setPlayerState;
+      setPlayerState = _ref2.setPlayerState,
+      providerName = _ref2.providerName;
   useAudioFocus({
     key: contentElementId,
     request: playerState === 'playing',
     onLost: function onLost() {
       setPlayerState('paused');
     }
-  }); // React player does not re-create player when controls or config
+  });
+  var posterImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.posterId
+  });
+  var posterUrl = (posterImageFile === null || posterImageFile === void 0 ? void 0 : posterImageFile.isReady) && posterImageFile.urls.large; // React player does not re-create player when controls or config
   // prop changes. Ensure key changes to force React to re-mount
   // component.
 
@@ -828,56 +904,67 @@ function PreparedPlayer(_ref2) {
     return [config.hideControls, config.hideInfo].join('');
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement(ThirdPartyOptIn, {
-      providerName: "video"
-    }, function (_ref3) {
-      var consentedHere = _ref3.consentedHere;
-      return (
-        /*#__PURE__*/
-        React.createElement(ReactPlayer, {
-          className: styles$4.embedPlayer,
-          key: keyFromConfiguration(configuration),
-          url: configuration.videoSource,
-          playing: playerState !== 'paused',
-          onPlay: function onPlay() {
-            return setPlayerState('playing');
-          },
-          onPause: function onPause() {
-            return setPlayerState('paused');
-          },
-          onEnded: function onEnded() {
-            return setPlayerState('paused');
-          },
-          light: !consentedHere && playerState === 'unplayed',
-          width: "100%",
-          height: "100%",
-          controls: !configuration.hideControls,
-          config: {
-            youtube: {
-              playerVars: {
-                showinfo: !configuration.hideInfo
-              }
-            },
-            vimeo: {
-              playerOptions: {
-                byline: !configuration.hideInfo
-              }
-            }
+  return /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
+    providerName: providerName
+  }, function (_ref3) {
+    var consentedHere = _ref3.consentedHere;
+    return /*#__PURE__*/React.createElement(ReactPlayer, {
+      className: styles$5.embedPlayer,
+      key: keyFromConfiguration(configuration),
+      url: configuration.videoSource,
+      playing: playerState !== 'paused',
+      onPlay: function onPlay() {
+        return setPlayerState('playing');
+      },
+      onPause: function onPause() {
+        return setPlayerState('paused');
+      },
+      onEnded: function onEnded() {
+        return setPlayerState('paused');
+      },
+      light: !consentedHere && playerState === 'unplayed' ? posterUrl || true : false,
+      width: "100%",
+      height: "100%",
+      controls: !configuration.hideControls,
+      config: {
+        youtube: {
+          playerVars: {
+            showinfo: !configuration.hideInfo
           }
-        })
-      );
-    })
-  );
+        },
+        vimeo: {
+          playerOptions: {
+            byline: !configuration.hideInfo
+          }
+        }
+      }
+    });
+  });
 }
 
 frontend.contentElementTypes.register('videoEmbed', {
   component: VideoEmbed,
-  lifecycle: true
+  lifecycle: true,
+  consentVendors: function consentVendors(_ref) {
+    var configuration = _ref.configuration,
+        t = _ref.t;
+    var provider = getProviderName(configuration.videoSource);
+
+    if (provider) {
+      var prefix = 'pageflow_scrolled.public.video_embed.consent';
+      return [{
+        name: provider,
+        displayName: t("".concat(prefix, ".").concat(provider, ".vendor_name")),
+        description: t("".concat(prefix, ".").concat(provider, ".vendor_description")),
+        paradigm: 'lazy opt-in'
+      }];
+    }
+
+    return [];
+  }
 });
 
-var styles$5 = {"hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};
+var styles$6 = {"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)","hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};
 
 function ExternalLink(props) {
   var _classNames2;
@@ -902,6 +989,7 @@ function ExternalLink(props) {
     collectionName: 'imageFiles',
     permaId: props.thumbnail
   });
+  var url = ensureAbsolute(props.url);
 
   var onClick = function onClick(event) {
     if (isEditable) {
@@ -922,58 +1010,51 @@ function ExternalLink(props) {
   function renderNewTabTooltip() {
     if (isEditable) {
       var onTooltipClick = function onTooltipClick() {
-        window.open(props.url, '_blank');
+        window.open(url, '_blank');
         setHideTooltip(true);
       };
 
-      return (
-        /*#__PURE__*/
-        React.createElement("div", {
-          className: classNames(_defineProperty({}, styles$5.hidden, hideTooltip), styles$5.tooltip),
-          onClick: onTooltipClick
-        }, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab_message'),
-        /*#__PURE__*/
-        React.createElement("span", null, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab')))
-      );
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(_defineProperty({}, styles$6.hidden, hideTooltip), styles$6.tooltip),
+        onClick: onTooltipClick
+      }, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab_message'), /*#__PURE__*/React.createElement("span", null, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab')));
     }
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("a", {
-      className: classNames(styles$5.link_item, (_classNames2 = {}, _defineProperty(_classNames2, styles$5.invert, props.invert), _defineProperty(_classNames2, styles$5.layout_center, layout === 'center'), _classNames2)),
-      href: props.url || 'about:blank',
-      onClick: onClick,
-      onMouseLeave: onMouseLeave,
-      target: props.open_in_new_tab ? '_blank' : '_self',
-      rel: props.open_in_new_tab ? 'noopen noreferrer' : undefined
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$5.link_thumbnail
-    },
-    /*#__PURE__*/
-    React.createElement(Image, {
-      imageFile: thumbnailImageFile,
-      load: props.loadImages,
-      variant: "linkThumbnailLarge"
-    })),
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$5.link_details
-    },
-    /*#__PURE__*/
-    React.createElement("p", {
-      className: styles$5.link_title
-    }, props.title),
-    /*#__PURE__*/
-    React.createElement("p", {
-      className: styles$5.link_desc
-    }, props.description)), renderNewTabTooltip())
-  );
+  return /*#__PURE__*/React.createElement("a", {
+    className: classNames(styles$6.link_item, (_classNames2 = {}, _defineProperty(_classNames2, styles$6.invert, props.invert), _defineProperty(_classNames2, styles$6.layout_center, layout === 'center' || layout === 'centerRagged'), _classNames2)),
+    href: url || 'about:blank',
+    onClick: onClick,
+    onMouseLeave: onMouseLeave,
+    target: props.open_in_new_tab ? '_blank' : '_self',
+    rel: props.open_in_new_tab ? 'noopen noreferrer' : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$6.link_thumbnail
+  }, /*#__PURE__*/React.createElement(Image, {
+    imageFile: thumbnailImageFile,
+    load: props.loadImages,
+    variant: "linkThumbnailLarge"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$6.link_details
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles$6.link_title
+  }, props.title), /*#__PURE__*/React.createElement("p", {
+    className: styles$6.link_desc
+  }, props.description)), renderNewTabTooltip());
+}
+ExternalLink.defaultProps = {
+  sectionProps: {}
+};
+
+function ensureAbsolute(url) {
+  if (url.match(/^(https?:)?\/\//)) {
+    return url;
+  } else {
+    return "http://".concat(url);
+  }
 }
 
-var styles$6 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
+var styles$7 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo scope-externalLinks"};
 
 function ExternalLinkList(props) {
   var linkList = props.configuration.links || [];
@@ -982,22 +1063,16 @@ function ExternalLinkList(props) {
       shouldLoad = _useContentElementLif.shouldLoad;
 
   var darkBackground = useDarkBackground();
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$6.ext_links_container
-    }, linkList.map(function (link, index) {
-      return (
-        /*#__PURE__*/
-        React.createElement(ExternalLink, Object.assign({}, link, {
-          key: link.id,
-          invert: !darkBackground,
-          sectionProps: props.sectionProps,
-          loadImages: shouldLoad
-        }))
-      );
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$7.ext_links_container
+  }, linkList.map(function (link, index) {
+    return /*#__PURE__*/React.createElement(ExternalLink, Object.assign({}, link, {
+      key: link.id,
+      invert: !darkBackground,
+      sectionProps: props.sectionProps,
+      loadImages: shouldLoad
+    }));
+  }));
 }
 
 frontend.contentElementTypes.register('externalLinkList', {
@@ -1031,7 +1106,7 @@ function useIframeHeight(url) {
   return height;
 }
 
-var styles$7 = {"container":"DataWrapperChart-module_container__2eZ15"};
+var styles$8 = {"container":"DataWrapperChart-module_container__2eZ15"};
 
 function DataWrapperChart(_ref) {
   var configuration = _ref.configuration;
@@ -1055,32 +1130,33 @@ function DataWrapperChart(_ref) {
   }
 
   var backgroundColor = configuration.backgroundColor || '#323d4d';
-  return (
-    /*#__PURE__*/
-    React.createElement(Figure, {
-      caption: configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement("div", {
-      className: styles$7.container,
-      style: {
-        pointerEvents: isEditable && !isSelected ? 'none' : undefined,
-        backgroundColor: backgroundColor,
-        color: textColorForBackgroundColor(backgroundColor),
-        height: height
-      },
-      "data-percy": "hide"
+  return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$8.container,
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined,
+      backgroundColor: backgroundColor,
+      color: textColorForBackgroundColor(backgroundColor),
+      height: height
     },
-    /*#__PURE__*/
-    React.createElement(ThirdPartyOptIn, {
-      providerName: "datawrapper"
-    }, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title')),
-    /*#__PURE__*/
-    React.createElement(ThirdPartyOptOutInfo, {
-      providerName: "datawrapper",
-      contentElementPosition: configuration.position
-    }))))
-  );
+    "data-percy": "hide"
+  }, /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
+    providerName: "datawrapper"
+  }, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title'))), /*#__PURE__*/React.createElement(DatawrapperOptOutInfo, {
+    providerName: "datawrapper",
+    contentElementPosition: configuration.position
+  }))));
+}
+
+function DatawrapperOptOutInfo(props) {
+  if (!features.isEnabled('datawrapper_chart_embed_opt_in')) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, Object.assign({
+    providerName: "datawrapper"
+  }, props));
 }
 
 function renderIframe(url, title) {
@@ -1088,82 +1164,196 @@ function renderIframe(url, title) {
     return null;
   }
 
-  return (
-    /*#__PURE__*/
-    React.createElement("iframe", {
-      src: url,
-      title: title,
-      scrolling: "no",
-      allowFullScreen: true,
-      mozallowfullscreen: "true",
-      webkitallowfullscreen: "true"
-    })
-  );
+  return /*#__PURE__*/React.createElement("iframe", {
+    src: url,
+    title: title,
+    scrolling: "no",
+    allowFullScreen: true,
+    mozallowfullscreen: "true",
+    webkitallowfullscreen: "true"
+  });
 }
 
 frontend.contentElementTypes.register('dataWrapperChart', {
   component: DataWrapperChart,
-  lifecycle: true
+  lifecycle: true,
+  consentVendors: function consentVendors(_ref) {
+    var configuration = _ref.configuration,
+        t = _ref.t;
+    var prefix = 'pageflow_scrolled.public.chart';
+    return [{
+      name: 'datawrapper',
+      displayName: t("".concat(prefix, ".consent_vendor_name")),
+      description: t("".concat(prefix, ".consent_vendor_description")),
+      paradigm: features.isEnabled('datawrapper_chart_embed_opt_in') ? 'lazy opt-in' : 'skip'
+    }];
+  }
 });
 
-function VrImage(_ref) {
-  var configuration = _ref.configuration;
+function useAutoCruising(_ref) {
+  var viewerRef = _ref.viewerRef,
+      onCancel = _ref.onCancel;
+  var autoCruisingRef = useRef(false);
+  var rafIdRef = useRef();
+  var lastYawRef = useRef(null);
+  var start = useCallback(function () {
+    var viewer = viewerRef.current;
+    var start = new Date().getTime();
+    var pitch = viewer.getPitch();
+    var yaw = viewer.getYaw();
+    var delta = 0;
+
+    if (!autoCruisingRef.current) {
+      rafIdRef.current = window.requestAnimationFrame(tick);
+      autoCruisingRef.current = true;
+    }
 
-  var _useContentElementLif = useContentElementLifecycle({
-    onActivate: function onActivate() {
-      if (viewerRef.current) {
-        viewerRef.current.lookAt({
-          yaw: viewerRef.current.getYaw() + 20
-        }, 1000);
+    function tick() {
+      delta = new Date().getTime() - start;
+
+      if (autoCruisingRef.current && lastYawRef.current !== null && (Math.abs(pitch - viewer.getPitch()) > 0.1 || Math.abs(lastYawRef.current - viewer.getYaw()) > 0.1)) {
+        autoCruisingRef.current = false;
+        lastYawRef.current = null;
+        onCancel();
+        return;
       }
+
+      lastYawRef.current = yaw - delta / 1000 % 360;
+      viewer.lookAt({
+        yaw: lastYawRef.current,
+        pitch: pitch
+      }, 0);
+      autoCruisingRef.current && (rafIdRef.current = window.requestAnimationFrame(tick));
     }
-  }),
+  }, [viewerRef, onCancel]);
+  var stop = useCallback(function () {
+    window.cancelAnimationFrame(rafIdRef.current);
+    autoCruisingRef.current = false;
+    lastYawRef.current = null;
+  }, []);
+  useEffect(function () {
+    return stop;
+  }, [stop]);
+  return [start, stop];
+}
+
+function VrImage(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle(),
       shouldLoad = _useContentElementLif.shouldLoad;
 
   var _useContentElementEdi = useContentElementEditorState(),
       isEditable = _useContentElementEdi.isEditable,
       isSelected = _useContentElementEdi.isSelected;
 
-  var viewerRef = useRef();
   var imageFile = useFile({
     collectionName: 'imageFiles',
     permaId: configuration.image
   });
-  return (
-    /*#__PURE__*/
-    React.createElement("div", {
-      style: {
-        pointerEvents: isEditable && !isSelected ? 'none' : undefined
-      }
-    },
-    /*#__PURE__*/
-    React.createElement(Figure, {
-      caption: configuration.caption
-    },
-    /*#__PURE__*/
-    React.createElement(ViewportDependentPillarBoxes, {
-      aspectRatio: configuration.position === 'full' ? 0.5 : 0.75,
-      position: configuration.position,
-      opaque: !!configuration.caption
-    }, renderLazyPanorama(configuration, imageFile, shouldLoad, viewerRef))))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport, {
+    aspectRatio: configuration.position === 'full' ? 0.5 : 0.75
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, renderLazyPanorama(configuration, imageFile, shouldLoad))))));
 }
 
-function renderLazyPanorama(configuration, imageFile, shouldLoad, viewerRef) {
+function renderLazyPanorama(configuration, imageFile, shouldLoad) {
   if (shouldLoad && imageFile && imageFile.isReady) {
-    return (
-      /*#__PURE__*/
-      React.createElement(Panorama, {
-        imageFile: imageFile,
-        initialYaw: configuration.initialYaw,
-        initialPitch: configuration.initialPitch,
-        viewerRef: viewerRef
-      })
-    );
+    return /*#__PURE__*/React.createElement(AutoCruisingPanorama, {
+      imageFile: imageFile,
+      initialYaw: configuration.initialYaw,
+      initialPitch: configuration.initialPitch
+    });
   }
 }
 
+function AutoCruisingPanorama(_ref2) {
+  var imageFile = _ref2.imageFile,
+      initialYaw = _ref2.initialYaw,
+      initialPitch = _ref2.initialPitch;
+  var viewerRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hidePanoramaIndicator = _useState2[0],
+      setHidePanoramaIndicator = _useState2[1];
+
+  var _useAutoCruising = useAutoCruising({
+    viewerRef: viewerRef,
+    onCancel: function onCancel() {
+      return setHidePanoramaIndicator(true);
+    }
+  }),
+      _useAutoCruising2 = _slicedToArray(_useAutoCruising, 2),
+      startAutoCruising = _useAutoCruising2[0],
+      stopAutoCruising = _useAutoCruising2[1];
+
+  useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (viewerRef.current) {
+        startAutoCruising();
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(Panorama, {
+    imageFile: imageFile,
+    initialYaw: initialYaw,
+    initialPitch: initialPitch,
+    viewerRef: viewerRef,
+    hidePanoramaIndicator: hidePanoramaIndicator,
+    onReady: startAutoCruising,
+    onFullscreen: stopAutoCruising
+  });
+}
+
 frontend.contentElementTypes.register('vrImage', {
   component: VrImage,
   lifecycle: true
 });
+
+var styles$9 = {"wrapper":"IframeEmbed-module_wrapper__3w_LN","iframe":"IframeEmbed-module_iframe__3QVCA","scale-p33":"IframeEmbed-module_scale-p33__MRjVy","scale-p50":"IframeEmbed-module_scale-p50__1EKxu","scale-p75":"IframeEmbed-module_scale-p75__1yT4D"};
+
+var aspectRatios$1 = {
+  wide: 0.5625,
+  narrow: 0.75,
+  square: 1,
+  portrait: 1.7777
+};
+function IframeEmbed(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var portraitOrientation = usePortraitOrientation();
+  var aspectRatio = portraitOrientation && configuration.portraitAspectRatio ? configuration.portraitAspectRatio : configuration.aspectRatio;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$9.wrapper,
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport, {
+    aspectRatio: aspectRatios$1[aspectRatio || 'wide'],
+    opaque: utils.isBlank(configuration.source)
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, shouldLoad && /*#__PURE__*/React.createElement("iframe", {
+    className: classNames(styles$9.iframe, styles$9["scale-".concat(configuration.scale)]),
+    title: configuration.title,
+    src: configuration.source
+  }))))));
+}
+
+frontend.contentElementTypes.register('iframeEmbed', {
+  component: IframeEmbed,
+  lifecycle: true
+});