pageflow 17.1.0 → 17.2.0

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

@@ -4,7 +4,8 @@ import Embed from 'react-tiny-oembed';
 
 var styles = {"wrapper":"TikTokEmbed-module_wrapper__3WY_5","inner":"TikTokEmbed-module_inner__2pH02"};
 
-var tikTokProvider = {
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/tikTokEmbed/TikTokEmbed.js";
+const tikTokProvider = {
   provider_name: "TikTok",
   provider_url: "http://www.tiktok.com/",
   endpoints: [{
@@ -12,33 +13,81 @@ var tikTokProvider = {
     url: "https://www.tiktok.com/oembed"
   }]
 };
-function TikTokEmbed(_ref) {
-  var configuration = _ref.configuration;
-  var url = configuration.url;
-  var _useContentElementEdi = useContentElementEditorState(),
-    isEditable = _useContentElementEdi.isEditable,
-    isSelected = _useContentElementEdi.isSelected;
-  var _useContentElementLif = useContentElementLifecycle(),
-    shouldLoad = _useContentElementLif.shouldLoad;
-  var isStaticPreview = useIsStaticPreview();
-  return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement("div", {
+function TikTokEmbed({
+  configuration
+}) {
+  const {
+    url
+  } = configuration;
+  const {
+    isEditable,
+    isSelected
+  } = useContentElementEditorState();
+  const {
+    shouldLoad
+  } = useContentElementLifecycle();
+  const isStaticPreview = useIsStaticPreview();
+  return /*#__PURE__*/React.createElement(ContentElementBox, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 37,
+      columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
+    className: styles.wrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 9
+    }
   }, shouldLoad && url && !isStaticPreview && /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
-    providerName: "tiktok"
+    providerName: "tiktok",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 12
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.inner,
-    "data-percy": "hide"
+    "data-percy": "hide",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 14
+    }
   }, /*#__PURE__*/React.createElement(Embed, {
     key: url,
     url: url,
-    providers: [tikTokProvider]
+    providers: [tikTokProvider],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 16
+    }
   })))), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
     inset: true,
-    providerName: "tiktok"
+    providerName: "tiktok",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 49,
+      columnNumber: 9
+    }
   })));
 }
 
@@ -46,13 +95,14 @@ frontend.contentElementTypes.register('tikTokEmbed', {
   component: TikTokEmbed,
   lifecycle: true,
   customMargin: true,
-  consentVendors: function consentVendors(_ref) {
-    var t = _ref.t;
-    var prefix = 'pageflow_scrolled.public.tiktok';
+  consentVendors({
+    t
+  }) {
+    const prefix = 'pageflow_scrolled.public.tiktok';
     return [{
       name: 'tiktok',
-      displayName: t("".concat(prefix, ".consent_vendor_name")),
-      description: t("".concat(prefix, ".consent_vendor_description")),
+      displayName: t(`${prefix}.consent_vendor_name`),
+      description: t(`${prefix}.consent_vendor_description`),
       paradigm: 'lazy opt-in'
     }];
   }

data/entry_types/scrolled/package/contentElements/twitterEmbed-frontend.css

@@ -0,0 +1 @@
+.Placeholder-module_wrapper__jRFYE{border-radius:12px;background-color:#fff;color:#000;display:flex;flex-direction:column;padding:12px 16px 30px;margin:10px auto;border:1px solid #cfd9de;max-width:550px;box-sizing:border-box}.Placeholder-module_wrapper__jRFYE svg{fill:#eee}.Placeholder-module_row__1SBRB{display:flex;margin-bottom:12px}.Placeholder-module_item__RozmQ{animation:Placeholder-module_load__uFpxr 2s linear infinite;background:linear-gradient(-75deg,transparent 30%,#ddd 50%,transparent 70%) 0 0/200% 100%,#eee;background-attachment:fixed}.Placeholder-module_avatar__2VeHz{width:48px;height:48px;border-radius:100%}.Placeholder-module_info__37csK{flex:1;margin-left:7px}.Placeholder-module_handle__2WwoF,.Placeholder-module_name__2T6as,.Placeholder-module_text__DWLME{border-radius:2px}.Placeholder-module_handle__2WwoF,.Placeholder-module_name__2T6as{height:14px;margin:6px 0}.Placeholder-module_name__2T6as{width:40%}.Placeholder-module_handle__2WwoF{width:35%}.Placeholder-module_text__DWLME{height:200px;flex-grow:1;margin-bottom:10px}@keyframes Placeholder-module_load__uFpxr{to{background-position:-200% 0}}.TwitterEmbed-module_loadingContainer__3Ozs_>div{margin-top:0!important;margin-bottom:0!important}.TwitterEmbed-module_container__380cX>div{margin:0 auto}

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

@@ -0,0 +1,277 @@
+import { useContentElementEditorState, useContentElementLifecycle, ContentElementBox, ThirdPartyOptIn, ThirdPartyOptOutInfo, frontend } from 'pageflow-scrolled/frontend';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+
+var styles = {"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() {
+  _extends = Object.assign ? Object.assign.bind() : 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.apply(this, arguments);
+}
+var Icon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 512 512",
+  "aria-hidden": "true"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9L389.2 48zm-24.8 373.8h39.1L151.1 88h-42l255.3 333.8z"
+})));
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/twitterEmbed/Placeholder.js";
+function Placeholder({
+  children,
+  minHeight
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper,
+    style: {
+      minHeight
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 9,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.row,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.avatar,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 11,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.info,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 12,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.name,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.handle,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 14,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React.createElement(Icon, {
+    width: 24,
+    height: 24,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 16,
+      columnNumber: 9
+    }
+  })), children || /*#__PURE__*/React.createElement("div", {
+    className: styles.text,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 20
+    }
+  }));
+}
+
+var styles$1 = {"loadingContainer":"TwitterEmbed-module_loadingContainer__3Ozs_","container":"TwitterEmbed-module_container__380cX"};
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/twitterEmbed/TwitterEmbed.js";
+function TwitterEmbed({
+  configuration
+}) {
+  const {
+    url,
+    hideConversation,
+    hideMedia
+  } = configuration;
+  const {
+    isEditable,
+    isSelected
+  } = useContentElementEditorState();
+  const {
+    shouldLoad
+  } = useContentElementLifecycle();
+  const [minHeight, setMinHeight] = useState({});
+  const key = [url, hideConversation, hideMedia].join('-');
+  const onLoad = useCallback(({
+    height
+  }) => {
+    setMinHeight({
+      [key]: height
+    });
+  }, [key]);
+  return /*#__PURE__*/React.createElement(ContentElementBox, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 34,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 35,
+      columnNumber: 7
+    }
+  }, shouldLoad ? /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
+    providerName: "twitter",
+    icon: false,
+    wrapper: children => /*#__PURE__*/React.createElement(Placeholder, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 40,
+        columnNumber: 33
+      }
+    }, children),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 37,
+      columnNumber: 10
+    }
+  }, /*#__PURE__*/React.createElement(Tweet, {
+    key: key,
+    url: url,
+    hideConversation: hideConversation,
+    hideMedia: hideMedia,
+    minHeight: minHeight[key],
+    onLoad: onLoad,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 41,
+      columnNumber: 12
+    }
+  })) : /*#__PURE__*/React.createElement(Placeholder, {
+    minHeight: minHeight[key],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 48,
+      columnNumber: 10
+    }
+  }), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
+    providerName: "twitter",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 49,
+      columnNumber: 9
+    }
+  })));
+}
+function scriptLoaded() {
+  const promise = new Promise(resolve => {
+    const script = document.createElement("script");
+    script.src = "https://platform.twitter.com/widgets.js";
+    script.addEventListener('load', resolve);
+    document.head.appendChild(script);
+  });
+  return promise;
+}
+function Tweet({
+  url,
+  hideConversation,
+  hideMedia,
+  minHeight,
+  onLoad
+}) {
+  const ref = useRef(null);
+  const tweetId = url ? url.split('/')[5] : undefined;
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    let isComponentMounted = true;
+    const options = {
+      cards: hideMedia ? "hidden" : "",
+      conversation: hideConversation ? "none" : ""
+    };
+    scriptLoaded().then(() => {
+      if (window.twttr.widgets && tweetId) {
+        if (isComponentMounted) {
+          if (window.twttr.widgets['createTweetEmbed']) {
+            window.twttr.widgets.createTweet(tweetId, ref.current, options).then(() => {
+              var _ref$current;
+              setLoaded(true);
+              onLoad({
+                height: (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight
+              });
+            });
+          }
+        }
+      }
+    });
+    return () => isComponentMounted = false;
+  }, [hideMedia, hideConversation, tweetId, onLoad]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !loaded && /*#__PURE__*/React.createElement(Placeholder, {
+    minHeight: minHeight,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 107,
+      columnNumber: 19
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classNames(styles$1.container, {
+      [styles$1.loadingContainer]: !loaded
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 108,
+      columnNumber: 7
+    }
+  }));
+}
+
+frontend.contentElementTypes.register('twitterEmbed', {
+  component: TwitterEmbed,
+  lifecycle: true,
+  consentVendors({
+    t
+  }) {
+    const prefix = 'pageflow_scrolled.public.twitter';
+    return [{
+      name: 'twitter',
+      displayName: t(`${prefix}.consent_vendor_name`),
+      description: t(`${prefix}.consent_vendor_description`),
+      paradigm: 'lazy opt-in'
+    }];
+  }
+});

data/entry_types/scrolled/package/contentElements/videoEmbed-frontend.css

@@ -0,0 +1 @@
+.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0;background-color:#000;color:#fff}

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

@@ -0,0 +1,244 @@
+import { useContentElementEditorState, useContentElementLifecycle, FitViewport, ContentElementBox, ContentElementFigure, ThirdPartyOptOutInfo, useAudioFocus, useFile, ThirdPartyOptIn, useAtmo, frontend } from 'pageflow-scrolled/frontend';
+import React, { useState, useMemo } from 'react';
+import ReactPlayer from 'react-player';
+
+const youtubeMatcher = /youtube\.com\/|youtu\.be\//;
+const vimeoMatcher = /vimeo\.com\//;
+const 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 = {"embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/videoEmbed/VideoEmbed.js";
+const aspectRatios = {
+  wide: 0.5625,
+  narrow: 0.75,
+  square: 1,
+  portrait: 1.7777
+};
+function VideoEmbed({
+  contentElementId,
+  configuration
+}) {
+  const {
+    isEditable,
+    isSelected
+  } = useContentElementEditorState();
+  const {
+    shouldLoad
+  } = useContentElementLifecycle();
+  const [playerState, setPlayerState] = useState('unplayed');
+  const providerName = getProviderName(configuration.videoSource);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      pointerEvents: isEditable && !isSelected ? 'none' : undefined
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 35,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport, {
+    aspectRatio: aspectRatios[configuration.aspectRatio || 'wide'],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementBox, {
+    configuration: configuration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 39,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 13
+    }
+  }, shouldLoad && /*#__PURE__*/React.createElement(PreparedPlayer, {
+    playerState: playerState,
+    setPlayerState: setPlayerState,
+    contentElementId: contentElementId,
+    configuration: configuration,
+    providerName: providerName,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 41,
+      columnNumber: 30
+    }
+  })), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
+    providerName: providerName,
+    hide: playerState === 'playing',
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 47,
+      columnNumber: 13
+    }
+  })))));
+}
+function PreparedPlayer({
+  contentElementId,
+  configuration,
+  playerState,
+  setPlayerState,
+  providerName
+}) {
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState === 'playing',
+    onLost() {
+      setPlayerState('paused');
+    }
+  });
+  useContentElementLifecycle({
+    onInvisible() {
+      setPlayerState('paused');
+    }
+  });
+  const posterImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.posterId
+  });
+  const 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.
+  function keyFromConfiguration(config) {
+    return [config.hideControls, config.hideInfo].join('');
+  }
+  const atmoHooks = useAtmoHooks(configuration.atmoDuringPlayback);
+  function onPlay() {
+    setPlayerState('playing');
+    atmoHooks.before();
+  }
+  function onPauseOrEnd() {
+    setPlayerState('paused');
+    atmoHooks.after();
+  }
+  return /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
+    providerName: providerName,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 101,
+      columnNumber: 5
+    }
+  }, ({
+    consentedHere
+  }) => /*#__PURE__*/React.createElement(ReactPlayer, {
+    className: styles.embedPlayer,
+    key: keyFromConfiguration(configuration),
+    url: configuration.videoSource,
+    playing: playerState !== '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
+        }
+      },
+      vimeo: {
+        playerOptions: {
+          byline: !configuration.hideInfo
+        }
+      }
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 103,
+      columnNumber: 9
+    }
+  }));
+}
+function useAtmoHooks(atmoDuringPlayback) {
+  const atmo = useAtmo();
+  return useMemo(() => {
+    const {
+      before,
+      after
+    } = atmo.createMediaPlayerHooks(atmoDuringPlayback) || {
+      before() {},
+      after() {}
+    };
+    let timeout;
+    return {
+      before() {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        } else {
+          before();
+        }
+      },
+      after() {
+        // When seeking in the video pause and play events
+        // fired. Prevent briefly fading the atmo back in.
+        timeout = setTimeout(() => {
+          after();
+          timeout = null;
+        }, 1000);
+      }
+    };
+  }, [atmo, atmoDuringPlayback]);
+}
+
+frontend.contentElementTypes.register('videoEmbed', {
+  component: VideoEmbed,
+  lifecycle: true,
+  consentVendors({
+    configuration,
+    t
+  }) {
+    const provider = getProviderName(configuration.videoSource);
+    if (provider) {
+      const prefix = 'pageflow_scrolled.public.video_embed.consent';
+      return [{
+        name: provider,
+        displayName: t(`${prefix}.${provider}.vendor_name`),
+        description: t(`${prefix}.${provider}.vendor_description`),
+        paradigm: 'lazy opt-in'
+      }];
+    }
+    return [];
+  }
+});