pageflow 17.0.5 → 17.2.0

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

@@ -0,0 +1 @@
+.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{height:100%;--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06>div{height:100%!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe>div>div:nth-child(3){animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,calc(var(--initial-rect-width)),auto,auto)}10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{0%,to{clip:rect(auto,auto,auto,calc(var(--initial-rect-width)))}10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}

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

@@ -0,0 +1,219 @@
+import { useFileWithInlineRights, useContentElementEditorState, FitViewport, ContentElementBox, ContentElementFigure, InlineFileRights, useContentElementLifecycle, frontend } from 'pageflow-scrolled/frontend';
+import React, { useState, useEffect } from 'react';
+import ReactCompareImage from 'react-compare-image';
+import Measure from 'react-measure';
+import cx from 'classnames';
+
+var styles = {"sliderStart":"BeforeAfter-module_sliderStart__2C5cN","container":"BeforeAfter-module_container__2Lm06","wiggle":"BeforeAfter-module_wiggle__3nVSe","SliderLeftRightShake":"BeforeAfter-module_SliderLeftRightShake__2mcn5","BeforeImageLeftRightShake":"BeforeAfter-module_BeforeImageLeftRightShake__38m9V","AfterImageLeftRightShake":"BeforeAfter-module_AfterImageLeftRightShake__3WMf1"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/inlineBeforeAfter/BeforeAfter.js";
+const placeholderForBeforeImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMzZDVhODAiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
+const placeholderForAfterImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiM5OGMxZDkiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
+const placeholderFile = {
+  width: 640,
+  height: 403
+};
+function BeforeAfter(configuration) {
+  const {
+    isActive,
+    load,
+    before_label,
+    after_label,
+    initial_slider_position,
+    slider_color
+  } = configuration;
+  const [wiggle, setWiggle] = useState(false);
+  const [moved, setMoved] = useState(false);
+  useEffect(() => {
+    // Only wiggle once per element, when it is active for the first
+    // time
+    setWiggle(wiggle => wiggle || isActive);
+  }, [isActive]);
+  const beforeImage = useFileWithInlineRights({
+    configuration,
+    collectionName: 'imageFiles',
+    propertyName: 'before_id'
+  });
+  const afterImage = useFileWithInlineRights({
+    configuration,
+    collectionName: 'imageFiles',
+    propertyName: 'after_id'
+  });
+  const {
+    isSelected
+  } = useContentElementEditorState();
+  const beforeImageUrl = beforeImage && beforeImage.urls.large;
+  const beforeImageAlt = beforeImage && beforeImage.configuration.alt;
+  const afterImageUrl = afterImage && afterImage.urls.large;
+  const afterImageAlt = afterImage && afterImage.configuration.alt;
+  const initialSliderPos = initial_slider_position / 100;
+  const inlineFileRightsItems = [{
+    file: beforeImage,
+    label: 'before'
+  }, {
+    file: afterImage,
+    label: 'after'
+  }];
+  return /*#__PURE__*/React.createElement(FitViewport, {
+    file: beforeImage || afterImage || placeholderFile,
+    fill: configuration.position === 'backdrop',
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementBox, {
+    configuration: configuration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 70,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 71,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement(Measure, {
+    bounds: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 13
+    }
+  }, ({
+    measureRef,
+    contentRect
+  }) => {
+    const initialRectWidth = contentRect.bounds.width * initialSliderPos + 'px';
+    return /*#__PURE__*/React.createElement("div", {
+      ref: measureRef,
+      style: {
+        '--initial-rect-width': initialRectWidth
+      },
+      className: cx({
+        [styles.selected]: isSelected,
+        [styles.wiggle]: wiggle && !moved
+      }, styles.container),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 77,
+        columnNumber: 19
+      }
+    }, /*#__PURE__*/React.createElement(InitialSliderPositionIndicator, {
+      parentSelected: isSelected,
+      position: initial_slider_position,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 82,
+        columnNumber: 21
+      }
+    }), renderCompareImage());
+  }), /*#__PURE__*/React.createElement(InlineFileRights, {
+    configuration: configuration,
+    context: "insideElement",
+    items: inlineFileRightsItems,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 89,
+      columnNumber: 13
+    }
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    configuration: configuration,
+    context: "afterElement",
+    items: inlineFileRightsItems,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 95,
+      columnNumber: 7
+    }
+  }));
+  function renderCompareImage() {
+    if (!load) {
+      return null;
+    }
+    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: () => setMoved(true),
+      sliderLineColor: slider_color || undefined,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 107,
+        columnNumber: 7
+      }
+    });
+  }
+}
+function InitialSliderPositionIndicator({
+  parentSelected,
+  position
+}) {
+  const indicatorWidth = '2px';
+  const indicatorStyles = {
+    left: `calc(${position}% - ${indicatorWidth}/2)`,
+    width: `${indicatorWidth}`,
+    height: '100%',
+    borderLeft: '1px solid black',
+    borderRight: '1px solid black'
+  };
+
+  // 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", {
+    className: styles.sliderStart,
+    style: indicatorStyles,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 131,
+      columnNumber: 7
+    }
+  }) : '';
+}
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/inlineBeforeAfter/InlineBeforeAfter.js";
+function InlineBeforeAfter(props) {
+  const {
+    isActive,
+    shouldLoad
+  } = useContentElementLifecycle();
+  return /*#__PURE__*/React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
+    load: shouldLoad,
+    isActive: isActive,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 10,
+      columnNumber: 5
+    }
+  }));
+}
+
+frontend.contentElementTypes.register('inlineBeforeAfter', {
+  component: InlineBeforeAfter,
+  lifecycle: true
+});

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

@@ -0,0 +1 @@
+.LottieAnimation-module_canvas__2znAi{display:block;width:100%;height:100%}

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

@@ -0,0 +1,244 @@
+import { useFileWithInlineRights, useContentElementLifecycle, processImageModifiers, FitViewport, ContentElementBox, ContentElementFigure, FilePlaceholder, InlineFileRights, useContentElementViewTimelineProgress, frontend } from 'pageflow-scrolled/frontend';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { DotLottie } from '@lottiefiles/dotlottie-web';
+import wasmUrl from '@lottiefiles/dotlottie-web/dotlottie-player.wasm';
+
+// Prevent the player from fetching its WebAssembly module from a CDN.
+// Frontend and editor run in separate bundles and thus each need to
+// point the player at the module emitted by their own build.
+DotLottie.setWasmUrl(wasmUrl);
+
+var styles = {"canvas":"LottieAnimation-module_canvas__2znAi"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/lottieAnimation/LottieAnimation.js";
+function LottieAnimation({
+  configuration
+}) {
+  var _configuration$cropPo, _configuration$cropPo2;
+  const lottieFile = useFileWithInlineRights({
+    configuration,
+    collectionName: 'lottieFiles',
+    propertyName: 'id'
+  });
+  const {
+    playbackMode = 'loop',
+    scrollRange = 'cover',
+    startAnimationTrigger = 'onActivate'
+  } = configuration;
+
+  // Loops and scroll coupled animations start as soon as they are visible, so
+  // a trigger left over from switching playback modes must not hold them back.
+  const startTrigger = playbackMode === 'playOnce' ? startAnimationTrigger : 'onVisible';
+  const [hasStarted, setHasStarted] = useState(false);
+  const start = useCallback(() => setHasStarted(true), []);
+  const {
+    shouldLoad,
+    isVisible
+  } = useContentElementLifecycle({
+    onActivate: startTrigger === 'onActivate' ? start : undefined,
+    onVisible: startTrigger === 'onVisible' ? start : undefined,
+    // Without forgetting that playback has started, the animation would resume
+    // as soon as the element becomes visible again, even though its trigger
+    // has not been reached since.
+    onInvisible: () => setHasStarted(false)
+  });
+  const [animationAspectRatio, setAnimationAspectRatio] = useState();
+  const {
+    aspectRatio,
+    rounded
+  } = processImageModifiers(configuration.imageModifiers);
+  const isCircleCrop = rounded === 'circle';
+  return /*#__PURE__*/React.createElement(FitViewport, {
+    aspectRatio: aspectRatio || animationAspectRatio,
+    fallbackAspectRatio: 1,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 53,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementBox, {
+    borderRadius: isCircleCrop ? 'none' : rounded,
+    configuration: isCircleCrop ? undefined : configuration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 55,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 57,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 58,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement(ContentElementBox, {
+    borderRadius: isCircleCrop ? 'circle' : 'none',
+    configuration: isCircleCrop ? configuration : undefined,
+    positioned: isCircleCrop,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 59,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/React.createElement(FilePlaceholder, {
+    file: lottieFile,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 62,
+      columnNumber: 15
+    }
+  }), lottieFile && shouldLoad && /*#__PURE__*/React.createElement(Player, {
+    lottieFile: lottieFile,
+    alt: lottieFile.configuration.alt,
+    loop: playbackMode === 'loop',
+    play: isVisible && hasStarted,
+    seekOnScroll: playbackMode === 'scroll',
+    scrollRange: scrollRange,
+    fit: aspectRatio ? 'cover' : 'contain',
+    cropPositionX: (_configuration$cropPo = configuration.cropPosition) === null || _configuration$cropPo === void 0 ? void 0 : _configuration$cropPo.x,
+    cropPositionY: (_configuration$cropPo2 = configuration.cropPosition) === null || _configuration$cropPo2 === void 0 ? void 0 : _configuration$cropPo2.y,
+    onAspectRatioChange: setAnimationAspectRatio,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 64,
+      columnNumber: 16
+    }
+  })), /*#__PURE__*/React.createElement(InlineFileRights, {
+    configuration: configuration,
+    context: "insideElement",
+    items: [{
+      file: lottieFile
+    }],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 75,
+      columnNumber: 13
+    }
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    configuration: configuration,
+    context: "afterElement",
+    items: [{
+      file: lottieFile
+    }],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 81,
+      columnNumber: 7
+    }
+  }));
+}
+function Player({
+  lottieFile,
+  alt,
+  loop,
+  play,
+  seekOnScroll,
+  scrollRange,
+  fit,
+  cropPositionX = 50,
+  cropPositionY = 50,
+  onAspectRatioChange
+}) {
+  const canvasRef = useRef();
+  const dotLottieRef = useRef();
+  const isLoadedRef = useRef(false);
+  const playRef = useRef(play);
+  playRef.current = play;
+  const progressRef = useRef(0);
+  const seek = useCallback(progress => {
+    progressRef.current = progress;
+    if (isLoadedRef.current) {
+      const dotLottie = dotLottieRef.current;
+      dotLottie.setFrame(progress * (dotLottie.totalFrames - 1));
+    }
+  }, []);
+  useContentElementViewTimelineProgress({
+    range: scrollRange,
+    onProgress: seekOnScroll ? seek : null
+  });
+  useEffect(() => {
+    const dotLottie = new DotLottie({
+      canvas: canvasRef.current,
+      src: lottieFile.urls.original,
+      loop,
+      layout: {
+        fit,
+        align: [cropPositionX / 100, cropPositionY / 100]
+      },
+      autoplay: false,
+      renderConfig: {
+        autoResize: true
+      }
+    });
+
+    // Playback is only started here since the animation cannot be
+    // played or seeked before it has been loaded.
+    dotLottie.addEventListener('load', () => {
+      const {
+        width,
+        height
+      } = dotLottie.animationSize();
+      if (width && height) {
+        onAspectRatioChange(height / width);
+      }
+      isLoadedRef.current = true;
+      if (seekOnScroll) {
+        seek(progressRef.current);
+      } else if (playRef.current) {
+        dotLottie.play();
+      }
+    });
+    dotLottieRef.current = dotLottie;
+    return () => {
+      isLoadedRef.current = false;
+      dotLottieRef.current = null;
+      dotLottie.destroy();
+    };
+  }, [lottieFile.urls.original, loop, fit, seekOnScroll, seek, cropPositionX, cropPositionY, onAspectRatioChange]);
+  useEffect(() => {
+    if (seekOnScroll) {
+      return;
+    }
+    if (play) {
+      dotLottieRef.current.play();
+    } else {
+      dotLottieRef.current.pause();
+    }
+  }, [play, seekOnScroll]);
+
+  // A canvas has no alt attribute.
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    className: styles.canvas,
+    role: alt ? 'img' : undefined,
+    "aria-label": alt || undefined,
+    "aria-hidden": alt ? undefined : true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 168,
+      columnNumber: 5
+    }
+  });
+}
+
+frontend.contentElementTypes.register('lottieAnimation', {
+  component: LottieAnimation,
+  lifecycle: true,
+  viewTimeline: true
+});

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

@@ -0,0 +1 @@
+.XPlaceholder-module_wrapper__1IvCE{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}.XPlaceholder-module_wrapper__1IvCE svg{fill:#eee}.XPlaceholder-module_row__1Ty9F{display:flex;margin-bottom:12px}.XPlaceholder-module_avatar__1TfhZ{width:48px;height:48px;border-radius:100%}.XPlaceholder-module_info__32nNs{flex:1;margin-left:7px}.XPlaceholder-module_handle__1UTKA,.XPlaceholder-module_name__1Gj6h,.XPlaceholder-module_text__lvrT3{border-radius:2px}.XPlaceholder-module_handle__1UTKA,.XPlaceholder-module_name__1Gj6h{height:14px;margin:6px 0}.XPlaceholder-module_name__1Gj6h{width:40%}.XPlaceholder-module_handle__1UTKA{width:35%}.XPlaceholder-module_text__lvrT3{height:200px;flex-grow:1;margin-bottom:10px}.InstagramPlaceholder-module_wrapper__1RYie{border-radius:3px;background-color:#fff;color:#000;display:flex;flex-direction:column;padding:0;margin:10px auto;border:1px solid #dbdbdb;max-width:326px;width:100%;box-sizing:border-box}.InstagramPlaceholder-module_header__3sU6C{display:flex;padding:14px 16px;align-items:center}.InstagramPlaceholder-module_avatar__BDRaM{width:32px;height:32px;border-radius:100%;margin-right:12px}.InstagramPlaceholder-module_username__26OVQ{height:14px;width:120px;border-radius:2px}.InstagramPlaceholder-module_imageContainer__16taa{border-top:1px solid #dbdbdb;border-bottom:1px solid #dbdbdb;height:326px}.InstagramPlaceholder-module_content__TxvEV{width:100%;flex-grow:1;height:100%}.InstagramPlaceholder-module_footer__1ebKe{padding:12px 16px;display:flex;flex-direction:column;gap:8px}.InstagramPlaceholder-module_textLine__1difc{height:14px;border-radius:2px}.InstagramPlaceholder-module_textLineShort__1qzJX{width:30%}.InstagramPlaceholder-module_textLineMedium__1WvN4{width:70%}.InstagramPlaceholder-module_textLineLong__x20k2{width:50%}.BlueskyPlaceholder-module_wrapper__3YNT8{border-radius:.75rem;background-color:#fff;color:#000;display:flex;flex-direction:column;padding:.75rem 1rem 2rem;margin:10px auto;border:1px solid #e1e8ed;max-width:550px;box-sizing:border-box}.BlueskyPlaceholder-module_wrapper__3YNT8 svg{height:2rem;width:auto;fill:#eee}.BlueskyPlaceholder-module_header__30fsg{display:flex;margin-bottom:12px}.BlueskyPlaceholder-module_avatar__2TZGS{width:40px;height:40px;border-radius:100%;margin-right:10px}.BlueskyPlaceholder-module_info__2qIqO{flex:1}.BlueskyPlaceholder-module_name__1lhlW{height:14px;width:100px;margin-bottom:6px;border-radius:2px}.BlueskyPlaceholder-module_handle__4ghgn{height:12px;width:80px;border-radius:2px}.BlueskyPlaceholder-module_content__1TrLN{height:130px;flex-grow:1;margin-bottom:12px;border-radius:2px}.placeholder-module_item__2i0eO{animation:placeholder-module_load__Aa3sN 2s linear infinite;background:linear-gradient(-75deg,transparent 30%,#ddd 50%,transparent 70%) 0 0/200% 100%,#eee;background-attachment:fixed}@keyframes placeholder-module_load__Aa3sN{to{background-position:-200% 0}}.TiktokPlaceholder-module_container__1gzeV{width:100%;max-width:325px;margin:10px auto;border-radius:8px;overflow:hidden;background:#fff;color:#000;box-sizing:border-box;border:1px solid #dbdbdb}.TiktokPlaceholder-module_header__1HXzc{display:flex;align-items:center;padding:12px;gap:12px}.TiktokPlaceholder-module_avatar__1YOKi{width:40px;height:40px;border-radius:50%;flex-shrink:0}.TiktokPlaceholder-module_userInfo__2SgqH{flex:1;display:flex;flex-direction:column;gap:6px}.TiktokPlaceholder-module_username__17Vr3{height:14px;width:100px;border-radius:2px}.TiktokPlaceholder-module_displayName__RAhw3{height:12px;width:80px;border-radius:2px}.TiktokPlaceholder-module_viewProfileButton__1Xzg1{height:28px;width:90px;border-radius:14px;flex-shrink:0}.TiktokPlaceholder-module_videoArea__1Ij87{width:100%;height:580px}.TiktokPlaceholder-module_video__3oO4p{height:100%}.TiktokPlaceholder-module_watchBar__1qoOk{width:100%;height:36px;background:linear-gradient(-75deg,transparent 30%,#bbb 50%,transparent 70%) 0 0/200% 100%,#ccc;background-attachment:fixed}.TiktokPlaceholder-module_footer__1Nrg-{background:#fff;padding:12px;display:flex;flex-direction:column;gap:8px}.TiktokPlaceholder-module_textLine__3jh0B{height:14px;border-radius:2px}.TiktokPlaceholder-module_textLineShort__2oels{width:30%}.TiktokPlaceholder-module_textLineMedium__3MI-M{width:70%}.TiktokPlaceholder-module_textLineLong__2Zuwg{width:50%}.SocialEmbed-module_wrapper__3gYhR{display:grid}.SocialEmbed-module_wrapper__3gYhR>*{width:100%;grid-row:1;grid-column:1}.SocialEmbed-module_loadingContainer__2xlmf>*{opacity:0}.SocialEmbed-module_container__PlMW4{overflow:hidden}.SocialEmbed-module_container__PlMW4>*{margin:10px auto!important}