@micromag/screen-keypad 0.4.78 → 0.4.80

package/es/index.js

@@ -6,8 +6,8 @@ import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
 import { useRef, useState, useEffect } from 'react';
 import { Close, ScreenElement } from '@micromag/core/components';
-import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
+import { usePlaybackContext, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useDimensionObserver, useDebounce, useDragProgress } from '@micromag/core/hooks';
 import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, mergeRefs, getStyleFromBox } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button, { RichButton } from '@micromag/element-button';
@@ -20,6 +20,7 @@ import Keypad from '@micromag/element-keypad';
 import Layout from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
+import Video from '@micromag/element-video';
 import Visual from '@micromag/element-visual';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -53,7 +54,7 @@ const placeholderPopupBoxStyles = {
   }
 };
 function KeypadScreen(t0) {
-  const $ = c(315);
+  const $ = c(351);
   const {
     items: t1,
     title: t2,
@@ -92,13 +93,14 @@ function KeypadScreen(t0) {
   const popupInnerRef = useRef(null);
   const trackScreenEvent = useTrackScreenEvent("keypad");
   const {
-    muted
+    muted,
+    playing,
+    setControlsTheme,
+    setControls,
+    setPlaying,
+    showControls,
+    hideControls
   } = usePlaybackContext();
-  const {
-    ref: mediaRef,
-    isCurrent: t17
-  } = usePlaybackMediaRef(current, true);
-  const isCurrentMedia = t17 === undefined ? false : t17;
   const screenState = useScreenState();
   const {
     width,
@@ -123,27 +125,27 @@ function KeypadScreen(t0) {
     isPlaceholder,
     isEdit
   } = useScreenRenderContext();
-  let t18;
+  let t17;
   if ($[0] !== header) {
-    t18 = isHeaderFilled(header);
+    t17 = isHeaderFilled(header);
     $[0] = header;
-    $[1] = t18;
+    $[1] = t17;
   } else {
-    t18 = $[1];
+    t17 = $[1];
   }
-  const hasHeader = t18;
-  let t19;
+  const hasHeader = t17;
+  let t18;
   if ($[2] !== footer) {
-    t19 = isFooterFilled(footer);
+    t18 = isFooterFilled(footer);
     $[2] = footer;
-    $[3] = t19;
+    $[3] = t18;
   } else {
-    t19 = $[3];
+    t18 = $[3];
   }
-  const hasFooter = t19;
-  let t20;
+  const hasFooter = t18;
+  let t19;
   if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
-    t20 = getFooterProps(footer, {
+    t19 = getFooterProps(footer, {
       isView,
       current,
       openWebView,
@@ -154,266 +156,371 @@ function KeypadScreen(t0) {
     $[6] = isPreview;
     $[7] = isView;
     $[8] = openWebView;
-    $[9] = t20;
+    $[9] = t19;
   } else {
-    t20 = $[9];
+    t19 = $[9];
   }
-  const footerProps = t20;
-  let t21;
+  const footerProps = t19;
+  let t20;
   if ($[10] !== title) {
-    t21 = isTextFilled(title);
+    t20 = isTextFilled(title);
     $[10] = title;
-    $[11] = t21;
+    $[11] = t20;
   } else {
-    t21 = $[11];
+    t20 = $[11];
   }
-  const hasTitle = t21;
-  let t22;
+  const hasTitle = t20;
+  let t21;
   if ($[12] !== title) {
-    t22 = title || {};
+    t21 = title || {};
     $[12] = title;
-    $[13] = t22;
+    $[13] = t21;
   } else {
-    t22 = $[13];
+    t21 = $[13];
   }
   const {
-    textStyle: t23
-  } = t22;
-  const titleTextStyle = t23 === undefined ? null : t23;
-  let t24;
+    textStyle: t22
+  } = t21;
+  const titleTextStyle = t22 === undefined ? null : t22;
+  let t23;
   if ($[14] !== subtitle) {
-    t24 = isTextFilled(subtitle);
+    t23 = isTextFilled(subtitle);
     $[14] = subtitle;
-    $[15] = t24;
+    $[15] = t23;
   } else {
-    t24 = $[15];
+    t23 = $[15];
   }
-  const hasSubtitle = t24;
+  const hasSubtitle = t23;
   const {
     ref: headerRef,
-    height: t25
+    height: t24
   } = useDimensionObserver();
-  const headerHeight = t25 === undefined ? 0 : t25;
+  const headerHeight = t24 === undefined ? 0 : t24;
   const {
     ref: footerRef,
-    height: t26
+    height: t25
   } = useDimensionObserver();
-  const footerHeight = t26 === undefined ? 0 : t26;
+  const footerHeight = t25 === undefined ? 0 : t25;
   const [, setPopupDragDisabled] = useState(false);
-  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  const mediaShouldLoad = !isPlaceholder && (current || preload);
-  const isInteractivePreview = isEdit && screenState === null;
-  const isNotInteractive = isEdit && screenState !== null;
   const {
-    columnAlign: t27,
-    columns: t28,
-    spacing: t29,
-    withSquareItems: t30
+    columnAlign: t26,
+    columns: t27,
+    spacing: t28,
+    withSquareItems: t29
   } = keypadLayout || {};
-  const columnAlign = t27 === undefined ? null : t27;
-  const columns = t28 === undefined ? null : t28;
-  const columnSpacing = t29 === undefined ? null : t29;
-  const withSquareItems = t30 === undefined ? false : t30;
-  let t31;
+  const columnAlign = t26 === undefined ? null : t26;
+  const columns = t27 === undefined ? null : t27;
+  const columnSpacing = t28 === undefined ? null : t28;
+  const withSquareItems = t29 === undefined ? false : t29;
+  let t30;
   if ($[16] !== buttonStyles) {
-    t31 = buttonStyles || {};
+    t30 = buttonStyles || {};
     $[16] = buttonStyles;
-    $[17] = t31;
+    $[17] = t30;
   } else {
-    t31 = $[17];
+    t30 = $[17];
   }
   const {
-    layout: t32,
-    textStyle: t33,
-    labelBoxStyle: t34,
-    boxStyle: t35,
-    visualWidth: t36
-  } = t31;
-  const buttonLayout = t32 === undefined ? null : t32;
-  const buttonTextStyle = t33 === undefined ? null : t33;
-  const buttonLabelBoxStyle = t34 === undefined ? null : t34;
-  const buttonBoxStyle = t35 === undefined ? null : t35;
-  const buttonVisualWidth = t36 === undefined ? null : t36;
-  let t37;
+    layout: t31,
+    textStyle: t32,
+    labelBoxStyle: t33,
+    boxStyle: t34,
+    visualWidth: t35
+  } = t30;
+  const buttonLayout = t31 === undefined ? null : t31;
+  const buttonTextStyle = t32 === undefined ? null : t32;
+  const buttonLabelBoxStyle = t33 === undefined ? null : t33;
+  const buttonBoxStyle = t34 === undefined ? null : t34;
+  const buttonVisualWidth = t35 === undefined ? null : t35;
+  let t36;
   if ($[18] !== popupStyles) {
-    t37 = popupStyles || {};
+    t36 = popupStyles || {};
     $[18] = popupStyles;
-    $[19] = t37;
+    $[19] = t36;
   } else {
-    t37 = $[19];
+    t36 = $[19];
   }
   const {
-    layout: t38,
-    headingTextStyle: t39,
-    contentTextStyle: t40,
-    button: t41,
-    boxStyle: t42
-  } = t37;
-  const popupLayout = t38 === undefined ? null : t38;
-  const headingTextStyle = t39 === undefined ? null : t39;
-  const contentTextStyle = t40 === undefined ? null : t40;
-  const popupButtons = t41 === undefined ? null : t41;
-  const popupBoxStyle = t42 === undefined ? null : t42;
-  let t43;
+    layout: t37,
+    headingTextStyle: t38,
+    contentTextStyle: t39,
+    button: t40,
+    boxStyle: t41
+  } = t36;
+  const popupLayout = t37 === undefined ? null : t37;
+  const headingTextStyle = t38 === undefined ? null : t38;
+  const contentTextStyle = t39 === undefined ? null : t39;
+  const popupButtons = t40 === undefined ? null : t40;
+  const popupBoxStyle = t41 === undefined ? null : t41;
+  let t42;
   if ($[20] !== popupButtons) {
-    t43 = popupButtons || {};
+    t42 = popupButtons || {};
     $[20] = popupButtons;
-    $[21] = t43;
+    $[21] = t42;
   } else {
-    t43 = $[21];
+    t42 = $[21];
   }
   const {
-    buttonTextStyle: t44,
-    boxStyle: t45
-  } = t43;
-  const popupButtonsTextStyle = t44 === undefined ? null : t44;
-  const popupButtonsBoxStyle = t45 === undefined ? null : t45;
+    buttonTextStyle: t43,
+    boxStyle: t44
+  } = t42;
+  const popupButtonsTextStyle = t43 === undefined ? null : t43;
+  const popupButtonsBoxStyle = t44 === undefined ? null : t44;
   const popupLayoutClassName = popupLayout !== null ? camelCase(popupLayout) : "";
   const [showPopup, setShowPopup] = useState(false);
   const [popup, setPopup] = useState(null);
-  let t46;
+  let t45;
   if ($[22] !== popup) {
-    t46 = popup || {};
+    t45 = popup || {};
     $[22] = popup;
-    $[23] = t46;
+    $[23] = t45;
   } else {
-    t46 = $[23];
+    t45 = $[23];
   }
   const {
-    heading: t47,
-    content: t48,
-    largeVisual: t49,
+    heading: t46,
+    content: t47,
+    largeVisual: t48,
+    video: t49,
     button: t50,
     popupBoxStyle: t51
-  } = t46;
-  const popupHeading = t47 === undefined ? null : t47;
-  const popupContent = t48 === undefined ? null : t48;
-  const largeVisual = t49 === undefined ? null : t49;
+  } = t45;
+  const popupHeading = t46 === undefined ? null : t46;
+  const popupContent = t47 === undefined ? null : t47;
+  const largeVisual = t48 === undefined ? null : t48;
+  const video = t49 === undefined ? null : t49;
   const popupButton = t50 === undefined ? null : t50;
   const singlePopupBoxStyle = t51 === undefined ? null : t51;
-  let t52;
+  const {
+    ref: mediaRef,
+    isCurrent: t52
+  } = usePlaybackMediaRef(current, video === null, video !== null ? "popup" : null);
+  const isCurrentMedia = t52 === undefined ? false : t52;
+  const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const mediaShouldLoad = !isPlaceholder && (current || preload);
+  const isInteractivePreview = isEdit && screenState === null;
+  const isNotInteractive = isEdit && screenState !== null;
+  let t53;
   if ($[24] !== largeVisual) {
-    t52 = largeVisual || {};
+    t53 = largeVisual || {};
     $[24] = largeVisual;
-    $[25] = t52;
+    $[25] = t53;
   } else {
-    t52 = $[25];
+    t53 = $[25];
   }
   const {
-    metadata: t53
-  } = t52;
-  const metadata = t53 === undefined ? null : t53;
-  let t54;
-  if ($[26] !== metadata) {
-    t54 = metadata || {};
-    $[26] = metadata;
-    $[27] = t54;
+    metadata: t54
+  } = t53;
+  let t55;
+  if ($[26] !== t54) {
+    t55 = t54 === undefined ? {} : t54;
+    $[26] = t54;
+    $[27] = t55;
   } else {
-    t54 = $[27];
+    t55 = $[27];
   }
   const {
-    width: t55,
-    height: t56
-  } = t54;
-  const largeVisualWidth = t55 === undefined ? 0 : t55;
-  const largeVisualHeight = t56 === undefined ? 0 : t56;
+    width: t56,
+    height: t57
+  } = t55;
+  const largeVisualWidth = t56 === undefined ? 0 : t56;
+  const largeVisualHeight = t57 === undefined ? 0 : t57;
   const largeVisualRatio = largeVisualWidth > 0 && largeVisualHeight > 0 ? largeVisualWidth / largeVisualHeight : null;
-  let t57;
-  if ($[28] !== popupHeading) {
-    t57 = isTextFilled(popupHeading);
-    $[28] = popupHeading;
-    $[29] = t57;
+  let t58;
+  if ($[28] !== video) {
+    t58 = video || {};
+    $[28] = video;
+    $[29] = t58;
   } else {
-    t57 = $[29];
+    t58 = $[29];
   }
-  const hasPopupHeading = t57;
-  let t58;
+  const {
+    autoPlay: t59,
+    withSeekBar: t60,
+    withControls: t61,
+    color: t62,
+    progressColor: t63
+  } = t58;
+  const autoPlay = t59 === undefined ? true : t59;
+  const withSeekBar = t60 === undefined ? false : t60;
+  const withControls = t61 === undefined ? false : t61;
+  const color = t62 === undefined ? null : t62;
+  const progressColor = t63 === undefined ? null : t63;
+  let t64;
   if ($[30] !== popupHeading) {
-    t58 = popupHeading || {};
+    t64 = isTextFilled(popupHeading);
     $[30] = popupHeading;
-    $[31] = t58;
+    $[31] = t64;
   } else {
-    t58 = $[31];
+    t64 = $[31];
   }
-  const {
-    textStyle: t59
-  } = t58;
-  const popupHeadingTextStyle = t59 === undefined ? null : t59;
-  let t60;
-  if ($[32] !== popupContent) {
-    t60 = isTextFilled(popupContent);
-    $[32] = popupContent;
-    $[33] = t60;
+  const hasPopupHeading = t64;
+  let t65;
+  if ($[32] !== popupHeading) {
+    t65 = popupHeading || {};
+    $[32] = popupHeading;
+    $[33] = t65;
   } else {
-    t60 = $[33];
+    t65 = $[33];
   }
-  const hasPopupContent = t60;
-  let t61;
+  const {
+    textStyle: t66
+  } = t65;
+  const popupHeadingTextStyle = t66 === undefined ? null : t66;
+  let t67;
   if ($[34] !== popupContent) {
-    t61 = popupContent || {};
+    t67 = isTextFilled(popupContent);
     $[34] = popupContent;
-    $[35] = t61;
+    $[35] = t67;
+  } else {
+    t67 = $[35];
+  }
+  const hasPopupContent = t67;
+  let t68;
+  if ($[36] !== popupContent) {
+    t68 = popupContent || {};
+    $[36] = popupContent;
+    $[37] = t68;
   } else {
-    t61 = $[35];
+    t68 = $[37];
   }
   const {
-    textStyle: t62
-  } = t61;
-  const popupContentTextStyle = t62 === undefined ? null : t62;
-  let t63;
-  if ($[36] !== popupButton) {
-    t63 = popupButton || {};
-    $[36] = popupButton;
-    $[37] = t63;
+    textStyle: t69
+  } = t68;
+  const popupContentTextStyle = t69 === undefined ? null : t69;
+  let t70;
+  if ($[38] !== popupButton) {
+    t70 = popupButton || {};
+    $[38] = popupButton;
+    $[39] = t70;
   } else {
-    t63 = $[37];
+    t70 = $[39];
   }
   const {
-    label: t64,
-    url: t65,
-    inWebView: t66,
-    boxStyle: t67
-  } = t63;
-  const buttonLabel = t64 === undefined ? null : t64;
-  const buttonUrl = t65 === undefined ? null : t65;
-  const popupInWebView = t66 === undefined ? false : t66;
-  const popupButtonBoxStyle = t67 === undefined ? null : t67;
+    label: t71,
+    url: t72,
+    inWebView: t73,
+    boxStyle: t74
+  } = t70;
+  const buttonLabel = t71 === undefined ? null : t71;
+  const buttonUrl = t72 === undefined ? null : t72;
+  const popupInWebView = t73 === undefined ? false : t73;
+  const popupButtonBoxStyle = t74 === undefined ? null : t74;
+  let t75;
+  let t76;
+  if ($[40] !== color || $[41] !== current || $[42] !== progressColor || $[43] !== setControls || $[44] !== setControlsTheme || $[45] !== video || $[46] !== withControls || $[47] !== withSeekBar) {
+    t75 = () => {
+      if (!current || video === null) {
+        return _temp;
+      }
+      setControlsTheme({
+        seekBarOnly: withSeekBar && !withControls,
+        color,
+        progressColor
+      });
+      if (withControls || withSeekBar) {
+        setControls(true);
+      } else {
+        setControls(false);
+      }
+      return () => {
+        if (withControls || withSeekBar) {
+          setControls(false);
+        }
+      };
+    };
+    t76 = [video, current, withControls, setControls, setControlsTheme, withSeekBar, color, progressColor];
+    $[40] = color;
+    $[41] = current;
+    $[42] = progressColor;
+    $[43] = setControls;
+    $[44] = setControlsTheme;
+    $[45] = video;
+    $[46] = withControls;
+    $[47] = withSeekBar;
+    $[48] = t75;
+    $[49] = t76;
+  } else {
+    t75 = $[48];
+    t76 = $[49];
+  }
+  useEffect(t75, t76);
+  let t77;
+  let t78;
+  if ($[50] !== autoPlay || $[51] !== current || $[52] !== setPlaying || $[53] !== video) {
+    t77 = () => {
+      if (current && autoPlay && video !== null) {
+        setPlaying(true);
+      }
+    };
+    t78 = [current, autoPlay, video, setPlaying];
+    $[50] = autoPlay;
+    $[51] = current;
+    $[52] = setPlaying;
+    $[53] = video;
+    $[54] = t77;
+    $[55] = t78;
+  } else {
+    t77 = $[54];
+    t78 = $[55];
+  }
+  useEffect(t77, t78);
+  const activityDetected = useViewerActivityDetected();
+  let t79;
+  if ($[56] !== activityDetected || $[57] !== hideControls || $[58] !== showControls) {
+    t79 = () => {
+      if (activityDetected) {
+        showControls();
+      } else {
+        hideControls();
+      }
+    };
+    $[56] = activityDetected;
+    $[57] = hideControls;
+    $[58] = showControls;
+    $[59] = t79;
+  } else {
+    t79 = $[59];
+  }
+  const toggleControlsVisibility = t79;
+  useDebounce(video !== null && current ? toggleControlsVisibility : null, activityDetected, 1000);
   const [showNextPopup, setShowNextPopup] = useState(false);
-  let t68;
-  let t69;
-  if ($[38] !== showNextPopup) {
-    t68 = () => {
+  let t80;
+  let t81;
+  if ($[60] !== showNextPopup) {
+    t80 = () => {
       if (showNextPopup) {
         setShowNextPopup(false);
         setShowPopup(true);
       }
     };
-    t69 = [showNextPopup, setShowPopup, setShowNextPopup];
-    $[38] = showNextPopup;
-    $[39] = t68;
-    $[40] = t69;
+    t81 = [showNextPopup, setShowPopup, setShowNextPopup];
+    $[60] = showNextPopup;
+    $[61] = t80;
+    $[62] = t81;
   } else {
-    t68 = $[39];
-    t69 = $[40];
+    t80 = $[61];
+    t81 = $[62];
   }
-  useEffect(t68, t69);
-  let t70;
-  if ($[41] !== isNotInteractive || $[42] !== openWebView || $[43] !== trackScreenEvent) {
-    t70 = (e, item, index) => {
+  useEffect(t80, t81);
+  let t82;
+  if ($[63] !== isNotInteractive || $[64] !== openWebView || $[65] !== trackScreenEvent) {
+    t82 = (e, item, index) => {
       e.stopPropagation();
       if (isNotInteractive) {
         return;
       }
       const {
-        label: t71,
-        heading: t72,
-        inWebView: t73,
-        url: t74
+        label: t83,
+        heading: t84,
+        inWebView: t85,
+        url: t86
       } = item || {};
-      const itemLabel = t71 === undefined ? null : t71;
-      const heading = t72 === undefined ? null : t72;
-      const inWebView = t73 === undefined ? false : t73;
-      const url = t74 === undefined ? null : t74;
+      const itemLabel = t83 === undefined ? null : t83;
+      const heading = t84 === undefined ? null : t84;
+      const inWebView = t85 === undefined ? false : t85;
+      const url = t86 === undefined ? null : t86;
       if (inWebView && url !== null) {
         openWebView({
           url
@@ -423,27 +530,27 @@ function KeypadScreen(t0) {
         setShowNextPopup(true);
       }
       const {
-        body: t75
+        body: t87
       } = heading || {};
-      const headingBody = t75 === undefined ? null : t75;
+      const headingBody = t87 === undefined ? null : t87;
       const finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
-      trackScreenEvent("click_item", [`#${index + 1}`, finalLabel || headingBody || ""].filter(_temp).join(" "), {
+      trackScreenEvent("click_item", [`#${index + 1}`, finalLabel || headingBody || ""].filter(_temp2).join(" "), {
         linkType: "keypad_item",
         linkUrl: url || null
       });
     };
-    $[41] = isNotInteractive;
-    $[42] = openWebView;
-    $[43] = trackScreenEvent;
-    $[44] = t70;
-  } else {
-    t70 = $[44];
-  }
-  const onItemClick = t70;
-  let t71;
-  if ($[45] !== isNotInteractive || $[46] !== trackScreenEvent) {
-    t71 = t72 => {
-      const isShowPopup = t72 === undefined ? false : t72;
+    $[63] = isNotInteractive;
+    $[64] = openWebView;
+    $[65] = trackScreenEvent;
+    $[66] = t82;
+  } else {
+    t82 = $[66];
+  }
+  const onItemClick = t82;
+  let t83;
+  if ($[67] !== isNotInteractive || $[68] !== trackScreenEvent) {
+    t83 = t84 => {
+      const isShowPopup = t84 === undefined ? false : t84;
       if (isNotInteractive) {
         return;
       }
@@ -453,16 +560,16 @@ function KeypadScreen(t0) {
       setShowPopup(false);
       setPopupDragDisabled(false);
     };
-    $[45] = isNotInteractive;
-    $[46] = trackScreenEvent;
-    $[47] = t71;
+    $[67] = isNotInteractive;
+    $[68] = trackScreenEvent;
+    $[69] = t83;
   } else {
-    t71 = $[47];
+    t83 = $[69];
   }
-  const onCloseModal = t71;
-  let t72;
-  if ($[48] !== isNotInteractive || $[49] !== onCloseModal || $[50] !== showPopup) {
-    t72 = e_0 => {
+  const onCloseModal = t83;
+  let t84;
+  if ($[70] !== isNotInteractive || $[71] !== onCloseModal || $[72] !== showPopup) {
+    t84 = e_0 => {
       if (isNotInteractive) {
         return;
       }
@@ -470,48 +577,48 @@ function KeypadScreen(t0) {
       e_0.stopPropagation();
       onCloseModal(showPopup);
     };
-    $[48] = isNotInteractive;
-    $[49] = onCloseModal;
-    $[50] = showPopup;
-    $[51] = t72;
+    $[70] = isNotInteractive;
+    $[71] = onCloseModal;
+    $[72] = showPopup;
+    $[73] = t84;
   } else {
-    t72 = $[51];
+    t84 = $[73];
   }
-  const onClickClose = t72;
-  const onClickCta = _temp2;
+  const onClickClose = t84;
+  const onClickCta = _temp3;
   const [popupDragDirection, setPopupDragDirection] = useState(null);
-  let t73;
-  if ($[52] !== height) {
-    t73 = t74 => {
+  let t85;
+  if ($[74] !== height) {
+    t85 = t86 => {
       const {
-        scrolleeHeight: t75
-      } = t74;
-      const scrolleeHeight = t75 === undefined ? 0 : t75;
+        scrolleeHeight: t87
+      } = t86;
+      const scrolleeHeight = t87 === undefined ? 0 : t87;
       if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
         setPopupDragDirection("top");
       } else {
         setPopupDragDirection("bottom");
       }
     };
-    $[52] = height;
-    $[53] = t73;
+    $[74] = height;
+    $[75] = t85;
   } else {
-    t73 = $[53];
+    t85 = $[75];
   }
-  const onPopupScrollHeightChange = t73;
-  let t74;
-  if ($[54] !== onCloseModal || $[55] !== popupDragDirection) {
-    t74 = t75 => {
+  const onPopupScrollHeightChange = t85;
+  let t86;
+  if ($[76] !== onCloseModal || $[77] !== popupDragDirection) {
+    t86 = t87 => {
       const {
-        active: t76,
-        movement: t77,
-        velocity: t78
-      } = t75;
-      const dragActive = t76 === undefined ? false : t76;
-      const [, t79] = t77;
-      const my = t79 === undefined ? null : t79;
-      const [, t80] = t78;
-      const vy = t80 === undefined ? null : t80;
+        active: t88,
+        movement: t89,
+        velocity: t90
+      } = t87;
+      const dragActive = t88 === undefined ? false : t88;
+      const [, t91] = t89;
+      const my = t91 === undefined ? null : t91;
+      const [, t92] = t90;
+      const vy = t92 === undefined ? null : t92;
       const windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
       const delta = windowHeight > 0 && my !== null ? Math.abs(my) / windowHeight : 0;
       const reachedThreshold = vy !== null ? vy > 1 || delta > 0.3 : false;
@@ -532,37 +639,37 @@ function KeypadScreen(t0) {
       }
       return progress;
     };
-    $[54] = onCloseModal;
-    $[55] = popupDragDirection;
-    $[56] = t74;
+    $[76] = onCloseModal;
+    $[77] = popupDragDirection;
+    $[78] = t86;
   } else {
-    t74 = $[56];
+    t86 = $[78];
   }
-  const computePopupProgress = t74;
-  let t75;
-  let t76;
-  if ($[57] !== disableInteraction || $[58] !== enableInteraction || $[59] !== showPopup) {
-    t75 = () => {
+  const computePopupProgress = t86;
+  let t87;
+  let t88;
+  if ($[79] !== disableInteraction || $[80] !== enableInteraction || $[81] !== showPopup) {
+    t87 = () => {
       if (showPopup) {
         disableInteraction();
       } else {
         enableInteraction();
       }
     };
-    t76 = [showPopup, enableInteraction, disableInteraction];
-    $[57] = disableInteraction;
-    $[58] = enableInteraction;
-    $[59] = showPopup;
-    $[60] = t75;
-    $[61] = t76;
+    t88 = [showPopup, enableInteraction, disableInteraction];
+    $[79] = disableInteraction;
+    $[80] = enableInteraction;
+    $[81] = showPopup;
+    $[82] = t87;
+    $[83] = t88;
   } else {
-    t75 = $[60];
-    t76 = $[61];
+    t87 = $[82];
+    t88 = $[83];
   }
-  useEffect(t75, t76);
-  let t77;
-  if ($[62] !== current || $[63] !== isEdit || $[64] !== isInteractivePreview || $[65] !== isView || $[66] !== onCloseModal || $[67] !== showPopup) {
-    t77 = () => {
+  useEffect(t87, t88);
+  let t89;
+  if ($[84] !== current || $[85] !== isEdit || $[86] !== isInteractivePreview || $[87] !== isView || $[88] !== onCloseModal || $[89] !== showPopup) {
+    t89 = () => {
       const handleClickOutside = function handleClickOutside(e_2) {
         if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(e_2.target) && containerRef.current && containerRef.current.contains(e_2.target) && !isInteractivePreview && !isEdit && showPopup) {
           e_2.preventDefault();
@@ -575,52 +682,52 @@ function KeypadScreen(t0) {
         document.removeEventListener("mouseup", handleClickOutside);
       };
     };
-    $[62] = current;
-    $[63] = isEdit;
-    $[64] = isInteractivePreview;
-    $[65] = isView;
-    $[66] = onCloseModal;
-    $[67] = showPopup;
-    $[68] = t77;
+    $[84] = current;
+    $[85] = isEdit;
+    $[86] = isInteractivePreview;
+    $[87] = isView;
+    $[88] = onCloseModal;
+    $[89] = showPopup;
+    $[90] = t89;
   } else {
-    t77 = $[68];
+    t89 = $[90];
   }
-  let t78;
-  if ($[69] !== current || $[70] !== isEdit || $[71] !== isInteractivePreview || $[72] !== showPopup) {
-    t78 = [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup];
-    $[69] = current;
-    $[70] = isEdit;
-    $[71] = isInteractivePreview;
-    $[72] = showPopup;
-    $[73] = t78;
+  let t90;
+  if ($[91] !== current || $[92] !== isEdit || $[93] !== isInteractivePreview || $[94] !== showPopup) {
+    t90 = [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup];
+    $[91] = current;
+    $[92] = isEdit;
+    $[93] = isInteractivePreview;
+    $[94] = showPopup;
+    $[95] = t90;
   } else {
-    t78 = $[73];
+    t90 = $[95];
   }
-  useEffect(t77, t78);
-  let t79;
-  if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
-    t79 = () => {
+  useEffect(t89, t90);
+  let t91;
+  if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
+    t91 = () => {
       setPopupDragDisabled(false);
     };
-    $[74] = t79;
+    $[96] = t91;
   } else {
-    t79 = $[74];
+    t91 = $[96];
   }
-  const onPopupScrollBottom = t79;
-  let t80;
-  if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
-    t80 = () => {
+  const onPopupScrollBottom = t91;
+  let t92;
+  if ($[97] === Symbol.for("react.memo_cache_sentinel")) {
+    t92 = () => {
       setPopupDragDisabled(true);
     };
-    $[75] = t80;
+    $[97] = t92;
   } else {
-    t80 = $[75];
+    t92 = $[97];
   }
-  const onPopupScrollNotBottom = t80;
-  let t81;
-  if ($[76] !== trackScreenEvent) {
-    t81 = t82 => {
-      const trigger = t82 === undefined ? null : t82;
+  const onPopupScrollNotBottom = t92;
+  let t93;
+  if ($[98] !== trackScreenEvent) {
+    t93 = t94 => {
+      const trigger = t94 === undefined ? null : t94;
       if (trigger !== null) {
         const scrollPercent = Math.round(trigger * 100);
         trackScreenEvent("scroll", scrollPercent, {
@@ -628,73 +735,73 @@ function KeypadScreen(t0) {
         });
       }
     };
-    $[76] = trackScreenEvent;
-    $[77] = t81;
+    $[98] = trackScreenEvent;
+    $[99] = t93;
   } else {
-    t81 = $[77];
+    t93 = $[99];
   }
-  const onScrolledTrigger = t81;
-  let t82;
-  if ($[78] !== onCloseModal || $[79] !== showPopup) {
-    t82 = () => {
+  const onScrolledTrigger = t93;
+  let t94;
+  if ($[100] !== onCloseModal || $[101] !== showPopup) {
+    t94 = () => {
       onCloseModal(showPopup);
     };
-    $[78] = onCloseModal;
-    $[79] = showPopup;
-    $[80] = t82;
+    $[100] = onCloseModal;
+    $[101] = showPopup;
+    $[102] = t94;
   } else {
-    t82 = $[80];
+    t94 = $[102];
   }
-  const onTap = t82;
-  const onResolve = _temp3;
-  const t83 = showPopup ? 0 : 1;
-  let t84;
-  let t85;
-  if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
-    t84 = {
+  const onTap = t94;
+  const onResolve = _temp4;
+  const t95 = showPopup ? 0 : 1;
+  let t96;
+  let t97;
+  if ($[103] === Symbol.for("react.memo_cache_sentinel")) {
+    t96 = {
       config: {
         tension: 300,
         friction: 30
       }
     };
-    t85 = {
+    t97 = {
       filterTaps: true,
       preventDefault: true,
       stopPropagation: true
     };
-    $[81] = t84;
-    $[82] = t85;
+    $[103] = t96;
+    $[104] = t97;
   } else {
-    t84 = $[81];
-    t85 = $[82];
+    t96 = $[103];
+    t97 = $[104];
   }
-  let t86;
-  if ($[83] !== computePopupProgress || $[84] !== onTap || $[85] !== t83) {
-    t86 = {
+  let t98;
+  if ($[105] !== computePopupProgress || $[106] !== onTap || $[107] !== t95) {
+    t98 = {
       disabled: true,
-      progress: t83,
+      progress: t95,
       computeProgress: computePopupProgress,
       onResolve,
-      springParams: t84,
-      dragOptions: t85,
+      springParams: t96,
+      dragOptions: t97,
       onTap
     };
-    $[83] = computePopupProgress;
-    $[84] = onTap;
-    $[85] = t83;
-    $[86] = t86;
+    $[105] = computePopupProgress;
+    $[106] = onTap;
+    $[107] = t95;
+    $[108] = t98;
   } else {
-    t86 = $[86];
+    t98 = $[108];
   }
   const {
     bind: bindPopupDrag,
     progress: popupSpring,
     transitioning: popupTransitioning
-  } = useDragProgress(t86);
-  let t87;
-  let t88;
-  if ($[87] !== onCloseModal || $[88] !== showPopup) {
-    t87 = () => {
+  } = useDragProgress(t98);
+  let t100;
+  let t99;
+  if ($[109] !== onCloseModal || $[110] !== showPopup) {
+    t99 = () => {
       const keyup = e_3 => {
         if (e_3.key === "Escape") {
           if (showPopup) {
@@ -707,69 +814,70 @@ function KeypadScreen(t0) {
         document.removeEventListener("keyup", keyup);
       };
     };
-    t88 = [showPopup, onCloseModal];
-    $[87] = onCloseModal;
-    $[88] = showPopup;
-    $[89] = t87;
-    $[90] = t88;
+    t100 = [showPopup, onCloseModal];
+    $[109] = onCloseModal;
+    $[110] = showPopup;
+    $[111] = t100;
+    $[112] = t99;
   } else {
-    t87 = $[89];
-    t88 = $[90];
+    t100 = $[111];
+    t99 = $[112];
   }
-  useEffect(t87, t88);
-  const t89 = items === null || items.length === 0 ? placeholders : items;
-  let t90;
-  if ($[91] !== buttonBoxStyle || $[92] !== buttonLabelBoxStyle || $[93] !== buttonLayout || $[94] !== buttonTextStyle || $[95] !== buttonVisualWidth || $[96] !== current || $[97] !== onItemClick || $[98] !== resolution || $[99] !== t89) {
-    let t91;
-    if ($[101] !== buttonBoxStyle || $[102] !== buttonLabelBoxStyle || $[103] !== buttonLayout || $[104] !== buttonTextStyle || $[105] !== buttonVisualWidth || $[106] !== current || $[107] !== onItemClick || $[108] !== resolution) {
-      t91 = (item_0, index_0) => {
+  useEffect(t99, t100);
+  const t101 = items === null || items.length === 0 ? placeholders : items;
+  let t102;
+  if ($[113] !== buttonBoxStyle || $[114] !== buttonLabelBoxStyle || $[115] !== buttonLayout || $[116] !== buttonTextStyle || $[117] !== buttonVisualWidth || $[118] !== current || $[119] !== onItemClick || $[120] !== resolution || $[121] !== t101) {
+    let t103;
+    if ($[123] !== buttonBoxStyle || $[124] !== buttonLabelBoxStyle || $[125] !== buttonLayout || $[126] !== buttonTextStyle || $[127] !== buttonVisualWidth || $[128] !== current || $[129] !== onItemClick || $[130] !== resolution) {
+      t103 = (item_0, index_0) => {
         const {
-          id: t92,
-          label: t93,
-          visual: t94,
-          boxStyle: t95,
-          heading: t96,
-          content: t97,
-          url: t98,
-          inWebView: t99,
-          largeVisual: t100
+          id: t104,
+          label: t105,
+          visual: t106,
+          boxStyle: t107,
+          heading: t108,
+          content: t109,
+          url: t110,
+          inWebView: t111,
+          largeVisual: t112,
+          video: itemVideo
         } = item_0 || {};
-        const id = t92 === undefined ? null : t92;
-        const itemLabel_0 = t93 === undefined ? null : t93;
-        const visual = t94 === undefined ? null : t94;
-        const boxStyle = t95 === undefined ? null : t95;
-        const heading_0 = t96 === undefined ? null : t96;
-        const content = t97 === undefined ? null : t97;
-        const url_0 = t98 === undefined ? null : t98;
-        const inWebView_0 = t99 === undefined ? false : t99;
-        const popupLargeVisual = t100 === undefined ? null : t100;
+        const id = t104 === undefined ? null : t104;
+        const itemLabel_0 = t105 === undefined ? null : t105;
+        const visual = t106 === undefined ? null : t106;
+        const boxStyle = t107 === undefined ? null : t107;
+        const heading_0 = t108 === undefined ? null : t108;
+        const content = t109 === undefined ? null : t109;
+        const url_0 = t110 === undefined ? null : t110;
+        const inWebView_0 = t111 === undefined ? false : t111;
+        const itemLargeVisual = t112 === undefined ? null : t112;
         const {
-          url: t101
+          url: t113
         } = visual || {};
-        const visualUrl = t101 === undefined ? null : t101;
+        const visualUrl = t113 === undefined ? null : t113;
         const {
-          body: t102
+          body: t114
         } = heading_0 || {};
-        const headingBody_0 = t102 === undefined ? null : t102;
+        const headingBody_0 = t114 === undefined ? null : t114;
         const {
-          body: t103
+          body: t115
         } = content || {};
-        const contentBody = t103 === undefined ? null : t103;
+        const contentBody = t115 === undefined ? null : t115;
         const finalLabel_0 = isString(itemLabel_0) ? {
           body: itemLabel_0
         } : itemLabel_0 || {};
         const {
-          textStyle: t104
+          textStyle: t116
         } = finalLabel_0 || {};
-        const finalLabelTextStyle = t104 === undefined ? null : t104;
+        const finalLabelTextStyle = t116 === undefined ? null : t116;
         const {
-          body: t105
+          body: t117
         } = finalLabel_0 || {};
-        const finalBody = t105 === undefined ? null : t105;
+        const finalBody = t117 === undefined ? null : t117;
         const key = finalBody || visualUrl || id;
         const itemIsEmpty = finalBody === null && visual === null;
         const isExternalLink = url_0 !== null && !inWebView_0;
-        const isPopupEmpty = (heading_0 === null || headingBody_0 === null || headingBody_0 === "") && (content === null || contentBody === null || contentBody === "") && popupLargeVisual === null;
+        const isPopupEmpty = (heading_0 === null || headingBody_0 === null || headingBody_0 === "") && (content === null || contentBody === null || contentBody === "") && itemLargeVisual === null && itemVideo === null;
         return /*#__PURE__*/jsx("div", {
           className: styles.item,
           children: /*#__PURE__*/jsx(RichButton, {
@@ -800,36 +908,36 @@ function KeypadScreen(t0) {
           })
         }, key);
       };
-      $[101] = buttonBoxStyle;
-      $[102] = buttonLabelBoxStyle;
-      $[103] = buttonLayout;
-      $[104] = buttonTextStyle;
-      $[105] = buttonVisualWidth;
-      $[106] = current;
-      $[107] = onItemClick;
-      $[108] = resolution;
-      $[109] = t91;
+      $[123] = buttonBoxStyle;
+      $[124] = buttonLabelBoxStyle;
+      $[125] = buttonLayout;
+      $[126] = buttonTextStyle;
+      $[127] = buttonVisualWidth;
+      $[128] = current;
+      $[129] = onItemClick;
+      $[130] = resolution;
+      $[131] = t103;
     } else {
-      t91 = $[109];
+      t103 = $[131];
     }
-    t90 = t89.map(t91);
-    $[91] = buttonBoxStyle;
-    $[92] = buttonLabelBoxStyle;
-    $[93] = buttonLayout;
-    $[94] = buttonTextStyle;
-    $[95] = buttonVisualWidth;
-    $[96] = current;
-    $[97] = onItemClick;
-    $[98] = resolution;
-    $[99] = t89;
-    $[100] = t90;
-  } else {
-    t90 = $[100];
-  }
-  const gridItems = t90;
-  let t91;
-  if ($[110] !== isPlaceholder || $[111] !== isView || $[112] !== items || $[113] !== screenState) {
-    t91 = () => {
+    t102 = t101.map(t103);
+    $[113] = buttonBoxStyle;
+    $[114] = buttonLabelBoxStyle;
+    $[115] = buttonLayout;
+    $[116] = buttonTextStyle;
+    $[117] = buttonVisualWidth;
+    $[118] = current;
+    $[119] = onItemClick;
+    $[120] = resolution;
+    $[121] = t101;
+    $[122] = t102;
+  } else {
+    t102 = $[122];
+  }
+  const gridItems = t102;
+  let t103;
+  if ($[132] !== isPlaceholder || $[133] !== isView || $[134] !== items || $[135] !== screenState) {
+    t103 = () => {
       if (screenState === "popup" && isPlaceholder) {
         setPopup(placeholderPopupBoxStyles);
         setShowPopup(true);
@@ -849,52 +957,52 @@ function KeypadScreen(t0) {
         setShowPopup(false);
       }
     };
-    $[110] = isPlaceholder;
-    $[111] = isView;
-    $[112] = items;
-    $[113] = screenState;
-    $[114] = t91;
+    $[132] = isPlaceholder;
+    $[133] = isView;
+    $[134] = items;
+    $[135] = screenState;
+    $[136] = t103;
   } else {
-    t91 = $[114];
+    t103 = $[136];
   }
-  let t92;
-  if ($[115] !== isView || $[116] !== items || $[117] !== screenState) {
-    t92 = [screenState, items, isView];
-    $[115] = isView;
-    $[116] = items;
-    $[117] = screenState;
-    $[118] = t92;
+  let t104;
+  if ($[137] !== isView || $[138] !== items || $[139] !== screenState) {
+    t104 = [screenState, items, isView];
+    $[137] = isView;
+    $[138] = items;
+    $[139] = screenState;
+    $[140] = t104;
   } else {
-    t92 = $[118];
+    t104 = $[140];
   }
-  useEffect(t91, t92);
-  let t93;
-  let t94;
-  if ($[119] !== isView || $[120] !== popupTransitioning || $[121] !== screenState || $[122] !== showPopup) {
-    t93 = () => {
+  useEffect(t103, t104);
+  let t105;
+  let t106;
+  if ($[141] !== isView || $[142] !== popupTransitioning || $[143] !== screenState || $[144] !== showPopup) {
+    t105 = () => {
       if (isView && screenState === null && !showPopup && !popupTransitioning) {
         setPopup(null);
       }
     };
-    t94 = [isView, screenState, showPopup, popupTransitioning];
-    $[119] = isView;
-    $[120] = popupTransitioning;
-    $[121] = screenState;
-    $[122] = showPopup;
-    $[123] = t93;
-    $[124] = t94;
-  } else {
-    t93 = $[123];
-    t94 = $[124];
-  }
-  useEffect(t93, t94);
-  const t95 = classNames([styles.container, className, {
+    t106 = [isView, screenState, showPopup, popupTransitioning];
+    $[141] = isView;
+    $[142] = popupTransitioning;
+    $[143] = screenState;
+    $[144] = showPopup;
+    $[145] = t105;
+    $[146] = t106;
+  } else {
+    t105 = $[145];
+    t106 = $[146];
+  }
+  useEffect(t105, t106);
+  const t107 = classNames([styles.container, className, {
     [styles.isPlaceholder]: isPlaceholder,
     [styles.withSquareItems]: withSquareItems
   }]);
-  let t96;
-  if ($[125] !== background || $[126] !== backgroundPlaying || $[127] !== customMediaRef || $[128] !== height || $[129] !== isPlaceholder || $[130] !== mediaRef || $[131] !== mediaShouldLoad || $[132] !== muted || $[133] !== resolution || $[134] !== width) {
-    t96 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+  let t108;
+  if ($[147] !== background || $[148] !== backgroundPlaying || $[149] !== customMediaRef || $[150] !== height || $[151] !== isPlaceholder || $[152] !== mediaRef || $[153] !== mediaShouldLoad || $[154] !== muted || $[155] !== resolution || $[156] !== video || $[157] !== width) {
+    t108 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -902,26 +1010,27 @@ function KeypadScreen(t0) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: mergeRefs(mediaRef, customMediaRef),
+      mediaRef: mergeRefs(video === null ? mediaRef : null, customMediaRef),
       className: styles.background
     }) : null;
-    $[125] = background;
-    $[126] = backgroundPlaying;
-    $[127] = customMediaRef;
-    $[128] = height;
-    $[129] = isPlaceholder;
-    $[130] = mediaRef;
-    $[131] = mediaShouldLoad;
-    $[132] = muted;
-    $[133] = resolution;
-    $[134] = width;
-    $[135] = t96;
-  } else {
-    t96 = $[135];
+    $[147] = background;
+    $[148] = backgroundPlaying;
+    $[149] = customMediaRef;
+    $[150] = height;
+    $[151] = isPlaceholder;
+    $[152] = mediaRef;
+    $[153] = mediaShouldLoad;
+    $[154] = muted;
+    $[155] = resolution;
+    $[156] = video;
+    $[157] = width;
+    $[158] = t108;
+  } else {
+    t108 = $[158];
   }
-  let t97;
-  if ($[136] !== isPlaceholder || $[137] !== isPreview || $[138] !== isView || $[139] !== onClickClose || $[140] !== showPopup || $[141] !== withoutCloseButton) {
-    t97 = isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
+  let t109;
+  if ($[159] !== isPlaceholder || $[160] !== isPreview || $[161] !== isView || $[162] !== onClickClose || $[163] !== showPopup || $[164] !== withoutCloseButton) {
+    t109 = isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
       className: classNames([styles.fixedHeader, {
         [styles.open]: showPopup
       }]),
@@ -939,44 +1048,44 @@ function KeypadScreen(t0) {
         })
       })
     }) : null;
-    $[136] = isPlaceholder;
-    $[137] = isPreview;
-    $[138] = isView;
-    $[139] = onClickClose;
-    $[140] = showPopup;
-    $[141] = withoutCloseButton;
-    $[142] = t97;
-  } else {
-    t97 = $[142];
-  }
-  const t98 = !showPopup;
-  const t99 = !showPopup;
-  const t100 = isPreview || isPlaceholder || showPopup;
-  let t101;
-  if ($[143] !== current || $[144] !== footerHeight || $[145] !== hasFooter || $[146] !== hasHeader || $[147] !== headerHeight || $[148] !== isPlaceholder || $[149] !== isPreview || $[150] !== spacing || $[151] !== viewerBottomHeight || $[152] !== viewerTopHeight) {
-    t101 = !isPlaceholder ? {
+    $[159] = isPlaceholder;
+    $[160] = isPreview;
+    $[161] = isView;
+    $[162] = onClickClose;
+    $[163] = showPopup;
+    $[164] = withoutCloseButton;
+    $[165] = t109;
+  } else {
+    t109 = $[165];
+  }
+  const t110 = !showPopup;
+  const t111 = !showPopup;
+  const t112 = isPreview || isPlaceholder || showPopup;
+  let t113;
+  if ($[166] !== current || $[167] !== footerHeight || $[168] !== hasFooter || $[169] !== hasHeader || $[170] !== headerHeight || $[171] !== isPlaceholder || $[172] !== isPreview || $[173] !== spacing || $[174] !== viewerBottomHeight || $[175] !== viewerTopHeight) {
+    t113 = !isPlaceholder ? {
       paddingLeft: spacing,
       paddingRight: spacing,
       paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
       paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
     } : null;
-    $[143] = current;
-    $[144] = footerHeight;
-    $[145] = hasFooter;
-    $[146] = hasHeader;
-    $[147] = headerHeight;
-    $[148] = isPlaceholder;
-    $[149] = isPreview;
-    $[150] = spacing;
-    $[151] = viewerBottomHeight;
-    $[152] = viewerTopHeight;
-    $[153] = t101;
-  } else {
-    t101 = $[153];
-  }
-  let t102;
-  if ($[154] !== hasHeader || $[155] !== header || $[156] !== headerRef || $[157] !== isPlaceholder || $[158] !== isPreview || $[159] !== spacing || $[160] !== viewerTopHeight) {
-    t102 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+    $[166] = current;
+    $[167] = footerHeight;
+    $[168] = hasFooter;
+    $[169] = hasHeader;
+    $[170] = headerHeight;
+    $[171] = isPlaceholder;
+    $[172] = isPreview;
+    $[173] = spacing;
+    $[174] = viewerBottomHeight;
+    $[175] = viewerTopHeight;
+    $[176] = t113;
+  } else {
+    t113 = $[176];
+  }
+  let t114;
+  if ($[177] !== hasHeader || $[178] !== header || $[179] !== headerRef || $[180] !== isPlaceholder || $[181] !== isPreview || $[182] !== spacing || $[183] !== viewerTopHeight) {
+    t114 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
       ref: headerRef,
       className: styles.header,
       style: {
@@ -990,286 +1099,339 @@ function KeypadScreen(t0) {
         ...header
       })
     }) : null;
-    $[154] = hasHeader;
-    $[155] = header;
-    $[156] = headerRef;
-    $[157] = isPlaceholder;
-    $[158] = isPreview;
-    $[159] = spacing;
-    $[160] = viewerTopHeight;
-    $[161] = t102;
+    $[177] = hasHeader;
+    $[178] = header;
+    $[179] = headerRef;
+    $[180] = isPlaceholder;
+    $[181] = isPreview;
+    $[182] = spacing;
+    $[183] = viewerTopHeight;
+    $[184] = t114;
   } else {
-    t102 = $[161];
+    t114 = $[184];
   }
-  let t103;
-  let t104;
-  if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
-    t103 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t115;
+  let t116;
+  if ($[185] === Symbol.for("react.memo_cache_sentinel")) {
+    t115 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "BSTWf8",
       defaultMessage: "Title"
     });
-    t104 = classNames([styles.empty, styles.emptyHeading]);
-    $[162] = t103;
-    $[163] = t104;
+    t116 = classNames([styles.empty, styles.emptyHeading]);
+    $[185] = t115;
+    $[186] = t116;
   } else {
-    t103 = $[162];
-    t104 = $[163];
+    t115 = $[185];
+    t116 = $[186];
   }
-  const t105 = !hasTitle;
-  let t106;
-  if ($[164] !== hasTitle || $[165] !== title || $[166] !== titleTextStyle) {
-    t106 = hasTitle ? /*#__PURE__*/jsx(Heading, {
+  const t117 = !hasTitle;
+  let t118;
+  if ($[187] !== hasTitle || $[188] !== title || $[189] !== titleTextStyle) {
+    t118 = hasTitle ? /*#__PURE__*/jsx(Heading, {
       className: styles.title,
       ...title,
       textStyle: titleTextStyle
     }) : null;
-    $[164] = hasTitle;
-    $[165] = title;
-    $[166] = titleTextStyle;
-    $[167] = t106;
+    $[187] = hasTitle;
+    $[188] = title;
+    $[189] = titleTextStyle;
+    $[190] = t118;
   } else {
-    t106 = $[167];
+    t118 = $[190];
   }
-  let t107;
-  if ($[168] !== t105 || $[169] !== t106) {
-    t107 = /*#__PURE__*/jsx(ScreenElement, {
+  let t119;
+  if ($[191] !== t117 || $[192] !== t118) {
+    t119 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "Title",
-      emptyLabel: t103,
-      emptyClassName: t104,
-      isEmpty: t105,
-      children: t106
+      emptyLabel: t115,
+      emptyClassName: t116,
+      isEmpty: t117,
+      children: t118
     });
-    $[168] = t105;
-    $[169] = t106;
-    $[170] = t107;
+    $[191] = t117;
+    $[192] = t118;
+    $[193] = t119;
   } else {
-    t107 = $[170];
+    t119 = $[193];
   }
-  let t108;
-  let t109;
-  if ($[171] === Symbol.for("react.memo_cache_sentinel")) {
-    t108 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t120;
+  let t121;
+  if ($[194] === Symbol.for("react.memo_cache_sentinel")) {
+    t120 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "ZG8/oK",
       defaultMessage: "Subtitle"
     });
-    t109 = classNames([styles.empty, styles.emptyHeading]);
-    $[171] = t108;
-    $[172] = t109;
+    t121 = classNames([styles.empty, styles.emptyHeading]);
+    $[194] = t120;
+    $[195] = t121;
   } else {
-    t108 = $[171];
-    t109 = $[172];
+    t120 = $[194];
+    t121 = $[195];
   }
-  const t110 = !hasSubtitle;
-  let t111;
-  if ($[173] !== hasSubtitle || $[174] !== subtitle) {
-    t111 = hasSubtitle ? /*#__PURE__*/jsx(Text, {
+  const t122 = !hasSubtitle;
+  let t123;
+  if ($[196] !== hasSubtitle || $[197] !== subtitle) {
+    t123 = hasSubtitle ? /*#__PURE__*/jsx(Text, {
       className: styles.subtitle,
       ...subtitle
     }) : null;
-    $[173] = hasSubtitle;
-    $[174] = subtitle;
-    $[175] = t111;
+    $[196] = hasSubtitle;
+    $[197] = subtitle;
+    $[198] = t123;
   } else {
-    t111 = $[175];
+    t123 = $[198];
   }
-  let t112;
-  if ($[176] !== t110 || $[177] !== t111) {
-    t112 = /*#__PURE__*/jsx(ScreenElement, {
+  let t124;
+  if ($[199] !== t122 || $[200] !== t123) {
+    t124 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "Subtitle",
-      emptyLabel: t108,
-      emptyClassName: t109,
-      isEmpty: t110,
-      children: t111
+      emptyLabel: t120,
+      emptyClassName: t121,
+      isEmpty: t122,
+      children: t123
     });
-    $[176] = t110;
-    $[177] = t111;
-    $[178] = t112;
+    $[199] = t122;
+    $[200] = t123;
+    $[201] = t124;
   } else {
-    t112 = $[178];
+    t124 = $[201];
   }
-  let t113;
-  if ($[179] !== isPlaceholder) {
-    t113 = classNames([styles.grid, {
+  let t125;
+  if ($[202] !== isPlaceholder) {
+    t125 = classNames([styles.grid, {
       [styles.gridPlaceholder]: isPlaceholder
     }]);
-    $[179] = isPlaceholder;
-    $[180] = t113;
+    $[202] = isPlaceholder;
+    $[203] = t125;
   } else {
-    t113 = $[180];
+    t125 = $[203];
   }
-  const t114 = isPlaceholder ? 3 : columns;
-  const t115 = isPlaceholder ? 2 : columnSpacing;
-  let t116;
-  if ($[181] !== columnAlign || $[182] !== gridItems || $[183] !== t113 || $[184] !== t114 || $[185] !== t115) {
-    t116 = /*#__PURE__*/jsx(Keypad, {
-      className: t113,
+  const t126 = isPlaceholder ? 3 : columns;
+  const t127 = isPlaceholder ? 2 : columnSpacing;
+  let t128;
+  if ($[204] !== columnAlign || $[205] !== gridItems || $[206] !== t125 || $[207] !== t126 || $[208] !== t127) {
+    t128 = /*#__PURE__*/jsx(Keypad, {
+      className: t125,
       align: columnAlign,
-      columns: t114,
-      spacing: t115,
+      columns: t126,
+      spacing: t127,
       items: gridItems
     });
-    $[181] = columnAlign;
-    $[182] = gridItems;
-    $[183] = t113;
-    $[184] = t114;
-    $[185] = t115;
-    $[186] = t116;
+    $[204] = columnAlign;
+    $[205] = gridItems;
+    $[206] = t125;
+    $[207] = t126;
+    $[208] = t127;
+    $[209] = t128;
   } else {
-    t116 = $[186];
+    t128 = $[209];
   }
-  let t117;
-  if ($[187] !== layout || $[188] !== t101 || $[189] !== t102 || $[190] !== t107 || $[191] !== t112 || $[192] !== t116 || $[193] !== width) {
-    t117 = /*#__PURE__*/jsxs(Layout, {
+  let t129;
+  if ($[210] !== layout || $[211] !== t113 || $[212] !== t114 || $[213] !== t119 || $[214] !== t124 || $[215] !== t128 || $[216] !== width) {
+    t129 = /*#__PURE__*/jsxs(Layout, {
       className: styles.layout,
       verticalAlign: layout,
       width: width,
-      style: t101,
-      children: [t102, t107, t112, t116]
+      style: t113,
+      children: [t114, t119, t124, t128]
     });
-    $[187] = layout;
-    $[188] = t101;
-    $[189] = t102;
-    $[190] = t107;
-    $[191] = t112;
-    $[192] = t116;
-    $[193] = width;
-    $[194] = t117;
+    $[210] = layout;
+    $[211] = t113;
+    $[212] = t114;
+    $[213] = t119;
+    $[214] = t124;
+    $[215] = t128;
+    $[216] = width;
+    $[217] = t129;
   } else {
-    t117 = $[194];
+    t129 = $[217];
   }
-  let t118;
-  if ($[195] === Symbol.for("react.memo_cache_sentinel")) {
-    t118 = classNames([styles.popupBackdrop]);
-    $[195] = t118;
+  let t130;
+  if ($[218] === Symbol.for("react.memo_cache_sentinel")) {
+    t130 = classNames([styles.popupBackdrop]);
+    $[218] = t130;
   } else {
-    t118 = $[195];
+    t130 = $[218];
   }
-  let t119;
-  if ($[196] !== popupSpring) {
-    t119 = popupSpring.to(_temp4);
-    $[196] = popupSpring;
-    $[197] = t119;
+  let t131;
+  if ($[219] !== popupSpring) {
+    t131 = popupSpring.to(_temp5);
+    $[219] = popupSpring;
+    $[220] = t131;
   } else {
-    t119 = $[197];
+    t131 = $[220];
   }
-  let t120;
-  if ($[198] !== t119) {
-    t120 = /*#__PURE__*/jsx(animated.div, {
-      className: t118,
+  let t132;
+  if ($[221] !== t131) {
+    t132 = /*#__PURE__*/jsx(animated.div, {
+      className: t130,
       style: {
-        opacity: t119
+        opacity: t131
       }
     });
-    $[198] = t119;
-    $[199] = t120;
+    $[221] = t131;
+    $[222] = t132;
   } else {
-    t120 = $[199];
+    t132 = $[222];
   }
-  let t121;
-  if ($[200] !== popupSpring) {
-    t121 = popupSpring.to(_temp5);
-    $[200] = popupSpring;
-    $[201] = t121;
+  let t133;
+  if ($[223] !== popupSpring) {
+    t133 = popupSpring.to(_temp6);
+    $[223] = popupSpring;
+    $[224] = t133;
   } else {
-    t121 = $[201];
+    t133 = $[224];
   }
-  let t122;
-  if ($[202] !== popupSpring) {
-    t122 = popupSpring.to(_temp6);
-    $[202] = popupSpring;
-    $[203] = t122;
+  let t134;
+  if ($[225] !== popupSpring) {
+    t134 = popupSpring.to(_temp7);
+    $[225] = popupSpring;
+    $[226] = t134;
   } else {
-    t122 = $[203];
+    t134 = $[226];
   }
-  let t123;
-  if ($[204] !== t121 || $[205] !== t122) {
-    t123 = {
-      transform: t121,
-      pointerEvents: t122
+  let t135;
+  if ($[227] !== t133 || $[228] !== t134) {
+    t135 = {
+      transform: t133,
+      pointerEvents: t134
     };
-    $[204] = t121;
-    $[205] = t122;
-    $[206] = t123;
+    $[227] = t133;
+    $[228] = t134;
+    $[229] = t135;
+  } else {
+    t135 = $[229];
+  }
+  let t136;
+  if ($[230] !== bindPopupDrag) {
+    t136 = bindPopupDrag();
+    $[230] = bindPopupDrag;
+    $[231] = t136;
+  } else {
+    t136 = $[231];
+  }
+  const t137 = isPreview || isPlaceholder;
+  const t138 = !showPopup ? 1 : null;
+  const t139 = styles[popupLayoutClassName];
+  const t140 = popupBoxStyle === null;
+  let t141;
+  if ($[232] !== t139 || $[233] !== t140) {
+    t141 = classNames([styles.popupInner, t139, {
+      [styles.withShadow]: t140
+    }]);
+    $[232] = t139;
+    $[233] = t140;
+    $[234] = t141;
   } else {
-    t123 = $[206];
+    t141 = $[234];
   }
-  let t124;
-  if ($[207] !== bindPopupDrag) {
-    t124 = bindPopupDrag();
-    $[207] = bindPopupDrag;
-    $[208] = t124;
+  let t142;
+  if ($[235] === Symbol.for("react.memo_cache_sentinel")) {
+    t142 = getStyleFromBox(placeholderPopupBoxStyles);
+    $[235] = t142;
   } else {
-    t124 = $[208];
+    t142 = $[235];
   }
-  const t125 = isPreview || isPlaceholder;
-  const t126 = !showPopup ? 1 : null;
-  const t127 = styles[popupLayoutClassName];
-  const t128 = popupBoxStyle === null;
-  let t129;
-  if ($[209] !== t127 || $[210] !== t128) {
-    t129 = classNames([styles.popupInner, t127, {
-      [styles.withShadow]: t128
-    }]);
-    $[209] = t127;
-    $[210] = t128;
-    $[211] = t129;
+  let t143;
+  if ($[236] !== popupBoxStyle) {
+    t143 = getStyleFromBox(popupBoxStyle);
+    $[236] = popupBoxStyle;
+    $[237] = t143;
   } else {
-    t129 = $[211];
+    t143 = $[237];
   }
-  let t130;
-  if ($[212] === Symbol.for("react.memo_cache_sentinel")) {
-    t130 = getStyleFromBox(placeholderPopupBoxStyles);
-    $[212] = t130;
+  let t144;
+  if ($[238] !== singlePopupBoxStyle) {
+    t144 = getStyleFromBox(singlePopupBoxStyle);
+    $[238] = singlePopupBoxStyle;
+    $[239] = t144;
   } else {
-    t130 = $[212];
+    t144 = $[239];
   }
-  let t131;
-  if ($[213] !== popupBoxStyle) {
-    t131 = getStyleFromBox(popupBoxStyle);
-    $[213] = popupBoxStyle;
-    $[214] = t131;
+  let t145;
+  if ($[240] !== t143 || $[241] !== t144) {
+    t145 = {
+      ...t142,
+      ...t143,
+      ...t144
+    };
+    $[240] = t143;
+    $[241] = t144;
+    $[242] = t145;
   } else {
-    t131 = $[214];
+    t145 = $[242];
   }
-  let t132;
-  if ($[215] !== singlePopupBoxStyle) {
-    t132 = getStyleFromBox(singlePopupBoxStyle);
-    $[215] = singlePopupBoxStyle;
-    $[216] = t132;
+  let t146;
+  let t147;
+  if ($[243] === Symbol.for("react.memo_cache_sentinel")) {
+    t146 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "uT+qYH",
+      defaultMessage: "Video"
+    });
+    t147 = classNames([styles.empty, styles.emptyVisual]);
+    $[243] = t146;
+    $[244] = t147;
   } else {
-    t132 = $[216];
+    t146 = $[243];
+    t147 = $[244];
   }
-  let t133;
-  if ($[217] !== t131 || $[218] !== t132) {
-    t133 = {
-      ...t130,
-      ...t131,
-      ...t132
-    };
-    $[217] = t131;
-    $[218] = t132;
-    $[219] = t133;
+  const t148 = video === null;
+  let t149;
+  if ($[245] !== customMediaRef || $[246] !== mediaRef || $[247] !== muted || $[248] !== resolution || $[249] !== video || $[250] !== videoPlaying) {
+    t149 = video !== null ? /*#__PURE__*/jsx("div", {
+      className: styles.popupVideoWrapper,
+      children: /*#__PURE__*/jsx(Video, {
+        ...video,
+        paused: !videoPlaying,
+        muted: muted,
+        className: styles.video,
+        resolution: resolution,
+        mediaRef: mergeRefs(mediaRef, customMediaRef)
+      })
+    }) : null;
+    $[245] = customMediaRef;
+    $[246] = mediaRef;
+    $[247] = muted;
+    $[248] = resolution;
+    $[249] = video;
+    $[250] = videoPlaying;
+    $[251] = t149;
   } else {
-    t133 = $[219];
+    t149 = $[251];
   }
-  let t134;
-  let t135;
-  if ($[220] === Symbol.for("react.memo_cache_sentinel")) {
-    t134 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t150;
+  if ($[252] !== t148 || $[253] !== t149) {
+    t150 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "video",
+      emptyLabel: t146,
+      emptyClassName: t147,
+      isEmpty: t148,
+      children: t149
+    });
+    $[252] = t148;
+    $[253] = t149;
+    $[254] = t150;
+  } else {
+    t150 = $[254];
+  }
+  let t151;
+  let t152;
+  if ($[255] === Symbol.for("react.memo_cache_sentinel")) {
+    t151 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "IE7U/Q",
       defaultMessage: "Heading"
     });
-    t135 = classNames([styles.empty, styles.emptyHeading]);
-    $[220] = t134;
-    $[221] = t135;
+    t152 = classNames([styles.empty, styles.emptyHeading]);
+    $[255] = t151;
+    $[256] = t152;
   } else {
-    t134 = $[220];
-    t135 = $[221];
+    t151 = $[255];
+    t152 = $[256];
   }
-  const t136 = !hasPopupHeading;
-  let t137;
-  if ($[222] !== hasPopupHeading || $[223] !== headingTextStyle || $[224] !== popupHeading || $[225] !== popupHeadingTextStyle) {
-    t137 = hasPopupHeading ? /*#__PURE__*/jsx(Heading, {
+  const t153 = !hasPopupHeading;
+  let t154;
+  if ($[257] !== hasPopupHeading || $[258] !== headingTextStyle || $[259] !== popupHeading || $[260] !== popupHeadingTextStyle) {
+    t154 = hasPopupHeading ? /*#__PURE__*/jsx(Heading, {
       className: styles.popupHeading,
       ...popupHeading,
       textStyle: {
@@ -1277,46 +1439,46 @@ function KeypadScreen(t0) {
         ...popupHeadingTextStyle
       }
     }) : null;
-    $[222] = hasPopupHeading;
-    $[223] = headingTextStyle;
-    $[224] = popupHeading;
-    $[225] = popupHeadingTextStyle;
-    $[226] = t137;
-  } else {
-    t137 = $[226];
-  }
-  let t138;
-  if ($[227] !== t136 || $[228] !== t137) {
-    t138 = /*#__PURE__*/jsx(ScreenElement, {
-      emptyLabel: t134,
-      emptyClassName: t135,
-      isEmpty: t136,
-      children: t137
+    $[257] = hasPopupHeading;
+    $[258] = headingTextStyle;
+    $[259] = popupHeading;
+    $[260] = popupHeadingTextStyle;
+    $[261] = t154;
+  } else {
+    t154 = $[261];
+  }
+  let t155;
+  if ($[262] !== t153 || $[263] !== t154) {
+    t155 = /*#__PURE__*/jsx(ScreenElement, {
+      emptyLabel: t151,
+      emptyClassName: t152,
+      isEmpty: t153,
+      children: t154
     });
-    $[227] = t136;
-    $[228] = t137;
-    $[229] = t138;
+    $[262] = t153;
+    $[263] = t154;
+    $[264] = t155;
   } else {
-    t138 = $[229];
+    t155 = $[264];
   }
-  let t139;
-  let t140;
-  if ($[230] === Symbol.for("react.memo_cache_sentinel")) {
-    t139 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t156;
+  let t157;
+  if ($[265] === Symbol.for("react.memo_cache_sentinel")) {
+    t156 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "JRZoe6",
       defaultMessage: "Content"
     });
-    t140 = classNames([styles.empty, styles.emptyContent]);
-    $[230] = t139;
-    $[231] = t140;
+    t157 = classNames([styles.empty, styles.emptyContent]);
+    $[265] = t156;
+    $[266] = t157;
   } else {
-    t139 = $[230];
-    t140 = $[231];
+    t156 = $[265];
+    t157 = $[266];
   }
-  const t141 = !hasPopupContent;
-  let t142;
-  if ($[232] !== contentTextStyle || $[233] !== hasPopupContent || $[234] !== popupContent || $[235] !== popupContentTextStyle) {
-    t142 = hasPopupContent ? /*#__PURE__*/jsx(Text, {
+  const t158 = !hasPopupContent;
+  let t159;
+  if ($[267] !== contentTextStyle || $[268] !== hasPopupContent || $[269] !== popupContent || $[270] !== popupContentTextStyle) {
+    t159 = hasPopupContent ? /*#__PURE__*/jsx(Text, {
       className: styles.popupContent,
       ...popupContent,
       textStyle: {
@@ -1324,47 +1486,47 @@ function KeypadScreen(t0) {
         ...popupContentTextStyle
       }
     }) : null;
-    $[232] = contentTextStyle;
-    $[233] = hasPopupContent;
-    $[234] = popupContent;
-    $[235] = popupContentTextStyle;
-    $[236] = t142;
+    $[267] = contentTextStyle;
+    $[268] = hasPopupContent;
+    $[269] = popupContent;
+    $[270] = popupContentTextStyle;
+    $[271] = t159;
   } else {
-    t142 = $[236];
+    t159 = $[271];
   }
-  let t143;
-  if ($[237] !== t141 || $[238] !== t142) {
-    t143 = /*#__PURE__*/jsx(ScreenElement, {
+  let t160;
+  if ($[272] !== t158 || $[273] !== t159) {
+    t160 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "popupContent",
-      emptyLabel: t139,
-      emptyClassName: t140,
-      isEmpty: t141,
-      children: t142
+      emptyLabel: t156,
+      emptyClassName: t157,
+      isEmpty: t158,
+      children: t159
     });
-    $[237] = t141;
-    $[238] = t142;
-    $[239] = t143;
+    $[272] = t158;
+    $[273] = t159;
+    $[274] = t160;
   } else {
-    t143 = $[239];
+    t160 = $[274];
   }
-  let t144;
-  let t145;
-  if ($[240] === Symbol.for("react.memo_cache_sentinel")) {
-    t144 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t161;
+  let t162;
+  if ($[275] === Symbol.for("react.memo_cache_sentinel")) {
+    t161 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "z4Pr+g",
       defaultMessage: "Visual (Image or Video)"
     });
-    t145 = classNames([styles.empty, styles.emptyVisual]);
-    $[240] = t144;
-    $[241] = t145;
+    t162 = classNames([styles.empty, styles.emptyVisual]);
+    $[275] = t161;
+    $[276] = t162;
   } else {
-    t144 = $[240];
-    t145 = $[241];
+    t161 = $[275];
+    t162 = $[276];
   }
-  const t146 = largeVisual === null;
-  let t147;
-  if ($[242] !== largeVisual || $[243] !== largeVisualRatio || $[244] !== resolution) {
-    t147 = largeVisual !== null ? /*#__PURE__*/jsx(Visual, {
+  const t163 = largeVisual === null;
+  let t164;
+  if ($[277] !== largeVisual || $[278] !== largeVisualRatio || $[279] !== resolution) {
+    t164 = largeVisual !== null ? /*#__PURE__*/jsx(Visual, {
       className: styles.popupVisual,
       imageClassName: styles.popupVisualImage,
       videoClassName: styles.popupVisualVideo,
@@ -1374,46 +1536,46 @@ function KeypadScreen(t0) {
       width: "100%",
       height: "auto"
     }) : null;
-    $[242] = largeVisual;
-    $[243] = largeVisualRatio;
-    $[244] = resolution;
-    $[245] = t147;
+    $[277] = largeVisual;
+    $[278] = largeVisualRatio;
+    $[279] = resolution;
+    $[280] = t164;
   } else {
-    t147 = $[245];
+    t164 = $[280];
   }
-  let t148;
-  if ($[246] !== t146 || $[247] !== t147) {
-    t148 = /*#__PURE__*/jsx(ScreenElement, {
+  let t165;
+  if ($[281] !== t163 || $[282] !== t164) {
+    t165 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "image",
-      emptyLabel: t144,
-      emptyClassName: t145,
-      isEmpty: t146,
-      children: t147
+      emptyLabel: t161,
+      emptyClassName: t162,
+      isEmpty: t163,
+      children: t164
     });
-    $[246] = t146;
-    $[247] = t147;
-    $[248] = t148;
+    $[281] = t163;
+    $[282] = t164;
+    $[283] = t165;
   } else {
-    t148 = $[248];
+    t165 = $[283];
   }
-  let t149;
-  let t150;
-  if ($[249] === Symbol.for("react.memo_cache_sentinel")) {
-    t149 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t166;
+  let t167;
+  if ($[284] === Symbol.for("react.memo_cache_sentinel")) {
+    t166 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "N7Kj8z",
       defaultMessage: "Button"
     });
-    t150 = classNames([styles.empty, styles.emptyCTA]);
-    $[249] = t149;
-    $[250] = t150;
+    t167 = classNames([styles.empty, styles.emptyCTA]);
+    $[284] = t166;
+    $[285] = t167;
   } else {
-    t149 = $[249];
-    t150 = $[250];
+    t166 = $[284];
+    t167 = $[285];
   }
-  const t151 = popupButton === null;
-  let t152;
-  if ($[251] !== buttonLabel || $[252] !== buttonUrl || $[253] !== onClickCta || $[254] !== openWebView || $[255] !== popupButton || $[256] !== popupButtonBoxStyle || $[257] !== popupButtonsBoxStyle || $[258] !== popupButtonsTextStyle || $[259] !== popupInWebView) {
-    t152 = popupButton !== null ? /*#__PURE__*/jsx(CallToAction, {
+  const t168 = popupButton === null;
+  let t169;
+  if ($[286] !== buttonLabel || $[287] !== buttonUrl || $[288] !== onClickCta || $[289] !== openWebView || $[290] !== popupButton || $[291] !== popupButtonBoxStyle || $[292] !== popupButtonsBoxStyle || $[293] !== popupButtonsTextStyle || $[294] !== popupInWebView) {
+    t169 = popupButton !== null ? /*#__PURE__*/jsx(CallToAction, {
       className: styles.popupCTA,
       label: {
         ...popupButtonsTextStyle,
@@ -1429,130 +1591,131 @@ function KeypadScreen(t0) {
         ...popupButtonBoxStyle
       }
     }) : null;
-    $[251] = buttonLabel;
-    $[252] = buttonUrl;
-    $[253] = onClickCta;
-    $[254] = openWebView;
-    $[255] = popupButton;
-    $[256] = popupButtonBoxStyle;
-    $[257] = popupButtonsBoxStyle;
-    $[258] = popupButtonsTextStyle;
-    $[259] = popupInWebView;
-    $[260] = t152;
-  } else {
-    t152 = $[260];
-  }
-  let t153;
-  if ($[261] !== t151 || $[262] !== t152) {
-    t153 = /*#__PURE__*/jsx(ScreenElement, {
+    $[286] = buttonLabel;
+    $[287] = buttonUrl;
+    $[288] = onClickCta;
+    $[289] = openWebView;
+    $[290] = popupButton;
+    $[291] = popupButtonBoxStyle;
+    $[292] = popupButtonsBoxStyle;
+    $[293] = popupButtonsTextStyle;
+    $[294] = popupInWebView;
+    $[295] = t169;
+  } else {
+    t169 = $[295];
+  }
+  let t170;
+  if ($[296] !== t168 || $[297] !== t169) {
+    t170 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "button",
-      emptyLabel: t149,
-      emptyClassName: t150,
-      isEmpty: t151,
-      children: t152
+      emptyLabel: t166,
+      emptyClassName: t167,
+      isEmpty: t168,
+      children: t169
     });
-    $[261] = t151;
-    $[262] = t152;
-    $[263] = t153;
+    $[296] = t168;
+    $[297] = t169;
+    $[298] = t170;
   } else {
-    t153 = $[263];
+    t170 = $[298];
   }
-  let t154;
-  if ($[264] !== t129 || $[265] !== t133 || $[266] !== t138 || $[267] !== t143 || $[268] !== t148 || $[269] !== t153) {
-    t154 = /*#__PURE__*/jsxs("div", {
+  let t171;
+  if ($[299] !== t141 || $[300] !== t145 || $[301] !== t150 || $[302] !== t155 || $[303] !== t160 || $[304] !== t165 || $[305] !== t170) {
+    t171 = /*#__PURE__*/jsxs("div", {
       ref: popupInnerRef,
-      className: t129,
-      style: t133,
-      children: [t138, t143, t148, t153]
+      className: t141,
+      style: t145,
+      children: [t150, t155, t160, t165, t170]
     });
-    $[264] = t129;
-    $[265] = t133;
-    $[266] = t138;
-    $[267] = t143;
-    $[268] = t148;
-    $[269] = t153;
-    $[270] = t154;
-  } else {
-    t154 = $[270];
-  }
-  let t155;
-  if ($[271] !== onPopupScrollBottom || $[272] !== onPopupScrollHeightChange || $[273] !== onPopupScrollNotBottom || $[274] !== t125 || $[275] !== t126 || $[276] !== t154) {
-    t155 = /*#__PURE__*/jsx(Scroll, {
-      disabled: t125,
+    $[299] = t141;
+    $[300] = t145;
+    $[301] = t150;
+    $[302] = t155;
+    $[303] = t160;
+    $[304] = t165;
+    $[305] = t170;
+    $[306] = t171;
+  } else {
+    t171 = $[306];
+  }
+  let t172;
+  if ($[307] !== onPopupScrollBottom || $[308] !== onPopupScrollHeightChange || $[309] !== onPopupScrollNotBottom || $[310] !== t137 || $[311] !== t138 || $[312] !== t171) {
+    t172 = /*#__PURE__*/jsx(Scroll, {
+      disabled: t137,
       verticalAlign: "middle",
       withArrow: false,
-      scrollPosition: t126,
+      scrollPosition: t138,
       onScrolledBottom: onPopupScrollBottom,
       onScrolledNotBottom: onPopupScrollNotBottom,
       onScrollHeightChange: onPopupScrollHeightChange,
       className: styles.popupScroll,
       withShadow: true,
-      children: t154
+      children: t171
     });
-    $[271] = onPopupScrollBottom;
-    $[272] = onPopupScrollHeightChange;
-    $[273] = onPopupScrollNotBottom;
-    $[274] = t125;
-    $[275] = t126;
-    $[276] = t154;
-    $[277] = t155;
-  } else {
-    t155 = $[277];
-  }
-  let t156;
-  if ($[278] !== t123 || $[279] !== t124 || $[280] !== t155) {
-    t156 = /*#__PURE__*/jsx(animated.div, {
+    $[307] = onPopupScrollBottom;
+    $[308] = onPopupScrollHeightChange;
+    $[309] = onPopupScrollNotBottom;
+    $[310] = t137;
+    $[311] = t138;
+    $[312] = t171;
+    $[313] = t172;
+  } else {
+    t172 = $[313];
+  }
+  let t173;
+  if ($[314] !== t135 || $[315] !== t136 || $[316] !== t172) {
+    t173 = /*#__PURE__*/jsx(animated.div, {
       className: styles.popup,
-      style: t123,
-      ...t124,
-      children: t155
+      style: t135,
+      ...t136,
+      children: t172
     });
-    $[278] = t123;
-    $[279] = t124;
-    $[280] = t155;
-    $[281] = t156;
+    $[314] = t135;
+    $[315] = t136;
+    $[316] = t172;
+    $[317] = t173;
   } else {
-    t156 = $[281];
+    t173 = $[317];
   }
-  let t157;
-  if ($[282] !== t120 || $[283] !== t156) {
-    t157 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t120, t156]
+  let t174;
+  if ($[318] !== t132 || $[319] !== t173) {
+    t174 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t132, t173]
     });
-    $[282] = t120;
-    $[283] = t156;
-    $[284] = t157;
+    $[318] = t132;
+    $[319] = t173;
+    $[320] = t174;
   } else {
-    t157 = $[284];
+    t174 = $[320];
   }
-  let t158;
-  if ($[285] !== height || $[286] !== layout || $[287] !== onScrolledTrigger || $[288] !== t100 || $[289] !== t117 || $[290] !== t157 || $[291] !== t98 || $[292] !== t99 || $[293] !== width) {
-    t158 = /*#__PURE__*/jsxs(Scroll, {
+  let t175;
+  if ($[321] !== height || $[322] !== layout || $[323] !== onScrolledTrigger || $[324] !== t110 || $[325] !== t111 || $[326] !== t112 || $[327] !== t129 || $[328] !== t174 || $[329] !== width) {
+    t175 = /*#__PURE__*/jsxs(Scroll, {
       width: width,
       height: height,
       verticalAlign: layout,
-      withArrow: t98,
-      withShadow: t99,
-      disabled: t100,
+      withArrow: t110,
+      withShadow: t111,
+      disabled: t112,
       onScrolledTrigger: onScrolledTrigger,
-      children: [t117, t157]
+      children: [t129, t174]
     });
-    $[285] = height;
-    $[286] = layout;
-    $[287] = onScrolledTrigger;
-    $[288] = t100;
-    $[289] = t117;
-    $[290] = t157;
-    $[291] = t98;
-    $[292] = t99;
-    $[293] = width;
-    $[294] = t158;
-  } else {
-    t158 = $[294];
-  }
-  let t159;
-  if ($[295] !== current || $[296] !== footerProps || $[297] !== footerRef || $[298] !== hasFooter || $[299] !== isPlaceholder || $[300] !== isPreview || $[301] !== spacing || $[302] !== viewerBottomHeight || $[303] !== viewerBottomSidesWidth) {
-    t159 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+    $[321] = height;
+    $[322] = layout;
+    $[323] = onScrolledTrigger;
+    $[324] = t110;
+    $[325] = t111;
+    $[326] = t112;
+    $[327] = t129;
+    $[328] = t174;
+    $[329] = width;
+    $[330] = t175;
+  } else {
+    t175 = $[330];
+  }
+  let t176;
+  if ($[331] !== current || $[332] !== footerProps || $[333] !== footerRef || $[334] !== hasFooter || $[335] !== isPlaceholder || $[336] !== isPreview || $[337] !== spacing || $[338] !== viewerBottomHeight || $[339] !== viewerBottomSidesWidth) {
+    t176 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
       ref: footerRef,
       className: styles.footer,
       style: {
@@ -1566,72 +1729,73 @@ function KeypadScreen(t0) {
         ...footerProps
       })
     }) : null;
-    $[295] = current;
-    $[296] = footerProps;
-    $[297] = footerRef;
-    $[298] = hasFooter;
-    $[299] = isPlaceholder;
-    $[300] = isPreview;
-    $[301] = spacing;
-    $[302] = viewerBottomHeight;
-    $[303] = viewerBottomSidesWidth;
-    $[304] = t159;
-  } else {
-    t159 = $[304];
-  }
-  let t160;
-  if ($[305] !== height || $[306] !== t158 || $[307] !== t159 || $[308] !== width) {
-    t160 = /*#__PURE__*/jsxs(Container, {
+    $[331] = current;
+    $[332] = footerProps;
+    $[333] = footerRef;
+    $[334] = hasFooter;
+    $[335] = isPlaceholder;
+    $[336] = isPreview;
+    $[337] = spacing;
+    $[338] = viewerBottomHeight;
+    $[339] = viewerBottomSidesWidth;
+    $[340] = t176;
+  } else {
+    t176 = $[340];
+  }
+  let t177;
+  if ($[341] !== height || $[342] !== t175 || $[343] !== t176 || $[344] !== width) {
+    t177 = /*#__PURE__*/jsxs(Container, {
       width: width,
       height: height,
       className: styles.inner,
-      children: [t158, t159]
+      children: [t175, t176]
     });
-    $[305] = height;
-    $[306] = t158;
-    $[307] = t159;
-    $[308] = width;
-    $[309] = t160;
+    $[341] = height;
+    $[342] = t175;
+    $[343] = t176;
+    $[344] = width;
+    $[345] = t177;
   } else {
-    t160 = $[309];
+    t177 = $[345];
   }
-  let t161;
-  if ($[310] !== t160 || $[311] !== t95 || $[312] !== t96 || $[313] !== t97) {
-    t161 = /*#__PURE__*/jsxs("div", {
+  let t178;
+  if ($[346] !== t107 || $[347] !== t108 || $[348] !== t109 || $[349] !== t177) {
+    t178 = /*#__PURE__*/jsxs("div", {
       ref: containerRef,
-      className: t95,
+      className: t107,
       "data-screen-ready": true,
-      children: [t96, t97, t160]
+      children: [t108, t109, t177]
     });
-    $[310] = t160;
-    $[311] = t95;
-    $[312] = t96;
-    $[313] = t97;
-    $[314] = t161;
+    $[346] = t107;
+    $[347] = t108;
+    $[348] = t109;
+    $[349] = t177;
+    $[350] = t178;
   } else {
-    t161 = $[314];
+    t178 = $[350];
   }
-  return t161;
+  return t178;
 }
-function _temp6(p_1) {
+function _temp7(p_1) {
   return Math.abs(p_1) > 0.5 ? "none" : "auto";
 }
-function _temp5(p_0) {
+function _temp6(p_0) {
   return `translateY(${100 * p_0}%) scale(${1 - Math.abs(p_0 * 0.5)})`;
 }
-function _temp4(p) {
+function _temp5(p) {
   return 1 - Math.abs(p);
 }
-function _temp3() {}
-function _temp2(t0) {
+function _temp4() {}
+function _temp3(t0) {
   const e_1 = t0 === undefined ? null : t0;
   if (e_1 !== null) {
     e_1.stopPropagation();
   }
 }
-function _temp(it) {
+function _temp2(it) {
   return !isEmpty(it);
 }
+function _temp() {}
 
 var definition = [{
   id: 'keypad',
@@ -1797,6 +1961,13 @@ var definition = [{
           textStyle: 'text'
         }
       }
+    }, {
+      name: 'video',
+      type: 'video-element',
+      label: defineMessage({
+        id: "vERejo",
+        defaultMessage: "Video"
+      })
     }, {
       name: 'largeVisual',
       type: 'visual',