pageflow 15.7.0 → 15.8.0

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

@@ -1,5 +1,5 @@
-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 { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, FitViewport, ContentElementBox, Figure, useContentElementLifecycle, usePortraitOrientation, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, PlayerEventContextDataProvider, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, useDarkBackground, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useAtmo, textColorForBackgroundColor, Panorama, utils, ThemeIcon } from 'pageflow-scrolled/frontend';
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
 import Measure from 'react-measure';
@@ -21,7 +21,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-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"};
+var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
 
 function Heading(_ref) {
   var configuration = _ref.configuration,
@@ -35,13 +35,11 @@ function Heading(_ref) {
   }),
       t = _useI18n.t;
 
-  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';
+  var legacyValue = configuration.children;
+  var Tag = firstSectionInEntry ? 'h1' : 'h2';
+  var forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
   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))
+    className: classNames(styles.root, configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout], configuration.position === 'wide' || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
   }, /*#__PURE__*/React.createElement(Text, {
     scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
     inline: true
@@ -327,7 +325,8 @@ function ImageWithCaption(_ref3) {
     imageFile: imageFile,
     load: shouldLoad,
     structuredData: true,
-    variant: configuration.position === 'full' ? 'large' : 'medium'
+    variant: configuration.position === 'full' ? 'large' : 'medium',
+    preferSvg: true
   })))));
 }
 
@@ -540,6 +539,9 @@ function Player(_ref2) {
     configuration: configuration,
     sectionProps: sectionProps,
     onPlayerClick: onPlayerClick
+  }, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
+    playerDescription: "Inline Video",
+    playbackMode: configuration.playbackMode || (configuration.autoplay ? 'autoplay' : 'manual')
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
     load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
     loop: configuration.playbackMode === 'loop',
@@ -551,7 +553,7 @@ function Player(_ref2) {
     quality: 'high',
     playsInline: true,
     atmoDuringPlayback: configuration.atmoDuringPlayback
-  }));
+  })));
 }
 
 var fallbackAspectRatio = 0.5625;
@@ -629,6 +631,9 @@ function InlineAudio(_ref) {
     configuration: configuration,
     sectionProps: sectionProps,
     onPlayerClick: onPlayerClick
+  }, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
+    playerDescription: "Inline Audio",
+    playbackMode: configuration.autoplay ? 'autoplay' : 'manual'
   }, /*#__PURE__*/React.createElement(AudioPlayer, {
     load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
     controls: configuration.controls,
@@ -640,7 +645,7 @@ function InlineAudio(_ref) {
     quality: 'high',
     playsInline: true,
     atmoDuringPlayback: configuration.atmoDuringPlayback
-  }))))));
+  })))))));
 }
 
 frontend.contentElementTypes.register('inlineAudio', {
@@ -788,28 +793,30 @@ frontend.contentElementTypes.register('soundDisclaimer', {
   component: SoundDisclaimer
 });
 
-var styles$4 = {"text":"TextBlock-module_text__21Hk4","layout-centerRagged":"TextBlock-module_layout-centerRagged__1tjoI"};
+var styles$4 = {"breakpoint-sm":"(min-width: 640px)","text":"TextBlock-module_text__21Hk4","darkBackground":"TextBlock-module_darkBackground__22pEl","layout-centerRagged":"TextBlock-module_layout-centerRagged__1tjoI"};
 
 function TextBlock(props) {
   var updateConfiguration = useContentElementConfigurationUpdate();
+  var dark = useDarkBackground();
 
   var _useI18n = useI18n({
     locale: 'ui'
   }),
       t = _useI18n.t;
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$4.text, styles$4["layout-".concat(props.sectionProps.layout)])
-  }, /*#__PURE__*/React.createElement(EditableText, {
+  var className = classNames(styles$4.text, _defineProperty({}, styles$4.darkBackground, dark), styles$4["layout-".concat(props.sectionProps.layout)]);
+  return /*#__PURE__*/React.createElement(EditableText, {
     value: props.configuration.value,
     contentElementId: props.contentElementId,
+    className: className,
+    selectionRect: true,
     placeholder: t('pageflow_scrolled.inline_editing.type_text'),
     onChange: function onChange(value) {
       return updateConfiguration({
         value: value
       });
     }
-  }));
+  });
 }
 
 frontend.contentElementTypes.register('textBlock', {
@@ -892,6 +899,11 @@ function PreparedPlayer(_ref2) {
       setPlayerState('paused');
     }
   });
+  useContentElementLifecycle({
+    onInvisible: function onInvisible() {
+      setPlayerState('paused');
+    }
+  });
   var posterImageFile = useFile({
     collectionName: 'imageFiles',
     permaId: configuration.posterId
@@ -904,6 +916,18 @@ function PreparedPlayer(_ref2) {
     return [config.hideControls, config.hideInfo].join('');
   }
 
+  var atmoHooks = useAtmoHooks(configuration.atmoDuringPlayback);
+
+  function onPlay() {
+    setPlayerState('playing');
+    atmoHooks.before();
+  }
+
+  function onPauseOrEnd() {
+    setPlayerState('paused');
+    atmoHooks.after();
+  }
+
   return /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
     providerName: providerName
   }, function (_ref3) {
@@ -913,20 +937,20 @@ function PreparedPlayer(_ref2) {
       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');
-      },
+      onPlay: onPlay,
+      onPause: onPauseOrEnd,
+      onEnded: onPauseOrEnd,
       light: !consentedHere && playerState === 'unplayed' ? posterUrl || true : false,
       width: "100%",
       height: "100%",
       controls: !configuration.hideControls,
       config: {
+        // ReactPlayer does not rerender when only
+        // event handler props change. Since event
+        // handlers depend on latest value of
+        // atmoDuringPlayback, we force a render by
+        // changing this unused config option.
+        _unused: configuration.atmoDuringPlayback,
         youtube: {
           playerVars: {
             showinfo: !configuration.hideInfo
@@ -942,6 +966,39 @@ function PreparedPlayer(_ref2) {
   });
 }
 
+function useAtmoHooks(atmoDuringPlayback) {
+  var atmo = useAtmo();
+  return useMemo(function () {
+    var _ref4 = atmo.createMediaPlayerHooks(atmoDuringPlayback) || {
+      before: function before() {},
+      after: function after() {}
+    },
+        _before = _ref4.before,
+        _after = _ref4.after;
+
+    var timeout;
+    return {
+      before: function before() {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        } else {
+          _before();
+        }
+      },
+      after: function after() {
+        // When seeking in the video pause and play events
+        // fired. Prevent briefly fading the atmo back in.
+        timeout = setTimeout(function () {
+          _after();
+
+          timeout = null;
+        }, 1000);
+      }
+    };
+  }, [atmo, atmoDuringPlayback]);
+}
+
 frontend.contentElementTypes.register('videoEmbed', {
   component: VideoEmbed,
   lifecycle: true,
@@ -1064,7 +1121,7 @@ function ExternalLinkList(props) {
 
   var darkBackground = useDarkBackground();
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$7.ext_links_container
+    className: classNames(styles$7.ext_links_container, props.configuration.variant && "scope-externalLinkList-".concat(props.configuration.variant))
   }, linkList.map(function (link, index) {
     return /*#__PURE__*/React.createElement(ExternalLink, Object.assign({}, link, {
       key: link.id,
@@ -1357,3 +1414,240 @@ frontend.contentElementTypes.register('iframeEmbed', {
   component: IframeEmbed,
   lifecycle: true
 });
+
+var styles$a = {"wrapper":"Placeholder-module_wrapper__jRFYE","row":"Placeholder-module_row__1SBRB","item":"Placeholder-module_item__RozmQ","load":"Placeholder-module_load__uFpxr","avatar":"Placeholder-module_avatar__2VeHz Placeholder-module_item__RozmQ","info":"Placeholder-module_info__37csK","name":"Placeholder-module_name__2T6as Placeholder-module_item__RozmQ","handle":"Placeholder-module_handle__2WwoF Placeholder-module_item__RozmQ","text":"Placeholder-module_text__DWLME Placeholder-module_item__RozmQ"};
+
+function _extends$2() {
+  _extends$2 = 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$2.apply(this, arguments);
+}
+var Icon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    className: (styles["r-1cvl2hr"] || "r-1cvl2hr") + " " + (styles["r-4qtqp9"] || "r-4qtqp9") + " " + (styles["r-yyyyoo"] || "r-yyyyoo") + " " + (styles["r-6zzn7w"] || "r-6zzn7w") + " " + (styles["r-19fsva8"] || "r-19fsva8") + " " + (styles["r-dnmrzs"] || "r-dnmrzs") + " " + (styles["r-bnwqim"] || "r-bnwqim") + " " + (styles["r-1plcrui"] || "r-1plcrui") + " " + (styles["r-lrvibr"] || "r-lrvibr") + " " + (styles["r-q1j0wu"] || "r-q1j0wu")
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 002.048-2.578 9.3 9.3 0 01-2.958 1.13 4.66 4.66 0 00-7.938 4.25 13.229 13.229 0 01-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 003.96 9.824a4.647 4.647 0 01-2.11-.583v.06a4.66 4.66 0 003.737 4.568 4.692 4.692 0 01-2.104.08 4.661 4.661 0 004.352 3.234 9.348 9.348 0 01-5.786 1.995 9.5 9.5 0 01-1.112-.065 13.175 13.175 0 007.14 2.093c8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602a9.47 9.47 0 002.323-2.41z"
+  }));
+});
+
+function Placeholder(_ref) {
+  var children = _ref.children,
+      minHeight = _ref.minHeight;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$a.wrapper,
+    style: {
+      minHeight: minHeight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$a.row
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$a.avatar
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$a.info
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$a.name
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$a.handle
+  })), /*#__PURE__*/React.createElement(Icon, {
+    width: 24,
+    height: 24
+  })), children || /*#__PURE__*/React.createElement("div", {
+    className: styles$a.text
+  }));
+}
+
+var styles$b = {"loadingContainer":"TwitterEmbed-module_loadingContainer__3Ozs_","container":"TwitterEmbed-module_container__380cX"};
+
+function TwitterEmbed(_ref) {
+  var configuration = _ref.configuration;
+  var url = configuration.url,
+      hideConversation = configuration.hideConversation,
+      hideMedia = configuration.hideMedia;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      minHeight = _useState2[0],
+      setMinHeight = _useState2[1];
+
+  var key = [url, hideConversation, hideMedia].join('-');
+  var onLoad = useCallback(function (_ref2) {
+    var height = _ref2.height;
+    setMinHeight(_defineProperty({}, key, height));
+  }, [key]);
+  return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    }
+  }, shouldLoad ? /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
+    providerName: "twitter",
+    icon: false,
+    wrapper: function wrapper(children) {
+      return /*#__PURE__*/React.createElement(Placeholder, null, children);
+    }
+  }, /*#__PURE__*/React.createElement(Tweet, {
+    key: key,
+    url: url,
+    hideConversation: hideConversation,
+    hideMedia: hideMedia,
+    minHeight: minHeight[key],
+    onLoad: onLoad
+  })) : /*#__PURE__*/React.createElement(Placeholder, {
+    minHeight: minHeight[key]
+  }), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
+    providerName: "twitter",
+    contentElementPosition: configuration.position
+  })));
+}
+
+function scriptLoaded() {
+  var promise = new Promise(function (resolve) {
+    var script = document.createElement("script");
+    script.src = "https://platform.twitter.com/widgets.js";
+    script.addEventListener('load', resolve);
+    document.head.appendChild(script);
+  });
+  return promise;
+}
+
+function Tweet(_ref3) {
+  var url = _ref3.url,
+      hideConversation = _ref3.hideConversation,
+      hideMedia = _ref3.hideMedia,
+      minHeight = _ref3.minHeight,
+      onLoad = _ref3.onLoad;
+  var ref = useRef(null);
+  var tweetId = url ? url.split('/')[5] : undefined;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loaded = _useState4[0],
+      setLoaded = _useState4[1];
+
+  useEffect(function () {
+    var isComponentMounted = true;
+    var options = {
+      cards: hideMedia ? "hidden" : "",
+      conversation: hideConversation ? "none" : ""
+    };
+    scriptLoaded().then(function () {
+      if (window.twttr.widgets && tweetId) {
+        if (isComponentMounted) {
+          if (window.twttr.widgets['createTweetEmbed']) {
+            window.twttr.widgets.createTweet(tweetId, ref.current, options).then(function () {
+              var _ref$current;
+
+              setLoaded(true);
+              onLoad({
+                height: (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight
+              });
+            });
+          }
+        }
+      }
+    });
+    return function () {
+      return isComponentMounted = false;
+    };
+  }, [hideMedia, hideConversation, tweetId, onLoad]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !loaded && /*#__PURE__*/React.createElement(Placeholder, {
+    minHeight: minHeight
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classNames(styles$b.container, _defineProperty({}, styles$b.loadingContainer, !loaded))
+  }));
+}
+
+frontend.contentElementTypes.register('twitterEmbed', {
+  component: TwitterEmbed,
+  lifecycle: true,
+  consentVendors: function consentVendors(_ref) {
+    var t = _ref.t;
+    var prefix = 'pageflow_scrolled.public.twitter';
+    return [{
+      name: 'twitter',
+      displayName: t("".concat(prefix, ".consent_vendor_name")),
+      description: t("".concat(prefix, ".consent_vendor_description")),
+      paradigm: 'lazy opt-in'
+    }];
+  }
+});
+
+var styles$c = {"details":"Question-module_details__3FxH-","layout-centerRagged":"Question-module_layout-centerRagged__1hovs"};
+
+function Question(_ref) {
+  var configuration = _ref.configuration,
+      contentElementId = _ref.contentElementId,
+      sectionProps = _ref.sectionProps;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  return /*#__PURE__*/React.createElement("details", {
+    open: configuration.expandByDefault || isEditable && isSelected,
+    className: classNames(styles$c.details, styles$c["layout-".concat(sectionProps.layout)])
+  }, /*#__PURE__*/React.createElement("summary", {
+    onClick: isEditable ? function (event) {
+      return event.preventDefault();
+    } : undefined
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "expand"
+  }), /*#__PURE__*/React.createElement(Text, {
+    scaleCategory: "question"
+  }, /*#__PURE__*/React.createElement(EditableInlineText, {
+    value: configuration.question,
+    onChange: function onChange(question) {
+      return updateConfiguration({
+        question: question
+      });
+    },
+    hyphens: "none",
+    placeholder: t('pageflow_scrolled.inline_editing.type_question')
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EditableText, {
+    value: configuration.answer,
+    contentElementId: contentElementId,
+    onChange: function onChange(answer) {
+      return updateConfiguration({
+        answer: answer
+      });
+    },
+    onlyParagraphs: true,
+    hyphens: "none",
+    placeholder: t('pageflow_scrolled.inline_editing.type_answer')
+  })));
+}
+
+frontend.contentElementTypes.register('question', {
+  component: Question
+});