@capillarytech/creatives-library 8.0.207 → 8.0.209

package/v2Components/HtmlEditor/components/InAppPreviewPane/_inAppPreviewPane.scss

@@ -0,0 +1,253 @@
+/**
+ * InApp Preview Pane Styles
+ */
+
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+// ContentOverlay Variables
+$content-overlay-bg: $CAP_WHITE;
+$content-overlay-border-radius: 0.5rem;
+$content-overlay-border-color: $CAP_G07;
+$content-overlay-shadow: 0 0.125rem 0.75rem rgba($CAP_G01, 0.15);
+$content-overlay-z-index: 10;
+
+// Empty State Variables
+$empty-state-color: $CAP_G10;
+$empty-state-font-size: 0.75rem;
+$empty-state-padding: 1.25rem;
+$empty-state-icon-size: 1.5rem;
+$empty-state-icon-margin: 0.5rem;
+$empty-state-meta-font-size: 0.625rem;
+$empty-state-meta-margin: 0.25rem;
+$empty-state-meta-opacity: 0.7;
+
+.inapp-preview-pane {
+  height: 100%;
+  position: relative;
+  background-color: $CAP_G08;
+  background-image: radial-gradient(circle at 50% 50%, rgba($CAP_WHITE, 0.1) 0%, transparent 70%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.25rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+
+  &--adaptive-focus {
+    scroll-padding-top: 1.25rem;
+    scroll-padding-bottom: 1.25rem;
+  }
+
+  &--modal-context {
+    padding: 3.125rem 0.25rem 0.5rem 0.25rem;
+    justify-content: center;
+  }
+
+  &--fullscreen {
+    padding: 0.25rem;
+  }
+
+  .html-editor-fullscreen &,
+  .html-editor-fullscreen .inapp-preview-pane,
+  .ant-modal .inapp-preview-pane {
+    padding: 3.125rem 0.25rem 0.5rem 0.25rem;
+    justify-content: center;
+    min-height: 37.5rem;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+    }
+
+    .inapp-preview-pane__device-container,
+    .inapp-preview-pane__device-container.inapp-preview-pane__device-container {
+      margin: 1.25rem auto 0.3125rem auto;
+      min-height: 25rem;
+    }
+
+    .device-frame {
+      margin: 0.9375rem 0 0.125rem 0;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba($CAP_G01, 0.05);
+    border-radius: 0.1875rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba($CAP_G01, 0.2);
+    border-radius: 0.1875rem;
+
+    &:hover {
+      background: rgba($CAP_G01, 0.3);
+    }
+  }
+
+  &__device-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin: 0.3125rem auto;
+    max-width: 100%;
+    min-width: min-content;
+    width: auto;
+    transition: transform 0.3s ease-in-out;
+    transform-origin: center center;
+
+    &--modal-context {
+      transform: scale(0.65);
+      margin: 1.25rem auto 0.3125rem auto;
+    }
+
+    &--fullscreen {
+      transform: scale(1.1);
+      margin: 0.3125rem auto;
+    }
+
+    &--normal {
+      transform: scale(0.95);
+      margin: 0.3125rem auto;
+    }
+  }
+
+}
+
+.device-frame {
+  position: relative;
+  display: inline-block;
+  filter: drop-shadow(0 0.75rem 3rem rgba($CAP_G01, 0.25));
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    filter: drop-shadow(0 1rem 3.5rem rgba($CAP_G01, 0.3));
+    transform: translateY(-0.125rem);
+  }
+
+  &__content-area {
+    position: absolute;
+    overflow: hidden;
+    background-color: rgba($CAP_G01, 0.08);
+    border: 0.125rem solid rgba($CAP_G01, 0.15);
+    box-shadow: inset 0 0.125rem 0.5rem rgba($CAP_G01, 0.1);
+  }
+}
+
+.content-overlay {
+  position: absolute;
+  background-color: $content-overlay-bg;
+  border-radius: $content-overlay-border-radius;
+  box-shadow: $content-overlay-shadow;
+  border: 0.0625rem solid $content-overlay-border-color;
+  overflow: hidden;
+  z-index: $content-overlay-z-index;
+
+  &__screen-area {
+    position: absolute;
+  }
+
+  &--popup {
+    border-radius: 0.75rem;
+    box-shadow: 0 0.25rem 1.25rem rgba($CAP_G01, 0.2);
+  }
+
+  &--header {
+    border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
+    box-shadow: 0 0.125rem 0.5rem rgba($CAP_G01, 0.15);
+  }
+
+  &--footer {
+    border-radius: 0.75rem 0.75rem 0.5rem 0.5rem;
+    box-shadow: 0 -0.125rem 0.5rem rgba($CAP_G01, 0.15);
+  }
+
+  &--fullscreen {
+    border-radius: 0.25rem;
+    box-shadow: none;
+    border: none;
+  }
+
+  &__empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: $empty-state-padding;
+    text-align: center;
+    color: $empty-state-color;
+    font-size: $empty-state-font-size;
+
+    &__icon {
+      font-size: $empty-state-icon-size;
+      margin-bottom: $empty-state-icon-margin;
+    }
+
+    &__meta {
+      font-size: $empty-state-meta-font-size;
+      margin-top: $empty-state-meta-margin;
+      opacity: $empty-state-meta-opacity;
+    }
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: $content-overlay-bg;
+    display: block;
+  }
+}
+
+@media (max-width: 768px) {
+  .inapp-preview-pane {
+    padding: 0.125rem;
+
+    &__device-container,
+    &__device-container.inapp-preview-pane__device-container {
+      transform: scale(0.8);
+      margin: 0.25rem auto;
+    }
+
+    &__controls {
+      top: 0.5rem;
+
+      .layout-selector__radio-group {
+        .ant-radio-button-wrapper {
+          font-size: 0.625rem;
+          padding: 0.1875rem 0.375rem;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .inapp-preview-pane {
+    padding: 0.125rem;
+
+    &__device-container,
+    &__device-container.inapp-preview-pane__device-container {
+      transform: scale(0.7);
+      margin: 0.1875rem auto;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .inapp-preview-pane {
+    padding: 0.0625rem;
+
+    &__device-container,
+    &__device-container.inapp-preview-pane__device-container {
+      transform: scale(0.6);
+      margin: 0.125rem auto;
+    }
+  }
+}

package/v2Components/HtmlEditor/components/InAppPreviewPane/constants.js

@@ -0,0 +1,104 @@
+/**
+ * InApp Preview Constants
+ */
+
+export const LAYOUT_TYPES = {
+  MODAL: 'POPUP',
+  HEADER: 'HEADER',
+  FOOTER: 'FOOTER',
+  FULLSCREEN: 'FULLSCREEN'
+};
+
+export const LAYOUT_OPTIONS = [
+  {
+    value: LAYOUT_TYPES.MODAL,
+    label: 'Modal',
+    description: 'Content displayed in center like a modal dialog'
+  },
+  {
+    value: LAYOUT_TYPES.HEADER,
+    label: 'Top Banner',
+    description: 'Content displayed at the top of the screen'
+  },
+  {
+    value: LAYOUT_TYPES.FOOTER,
+    label: 'Bottom Banner',
+    description: 'Content displayed at the bottom of the screen'
+  },
+  {
+    value: LAYOUT_TYPES.FULLSCREEN,
+    label: 'Fullscreen',
+    description: 'Content covers the entire screen'
+  }
+];
+
+export const COMPONENT_SIZES = ['small', 'middle', 'large'];
+
+export const DEVICE_FRAMES = {
+  ANDROID: 'android-frame.svg',
+  IOS: 'ios-frame.svg'
+};
+
+// Screen area dimensions within device frames (accounting for PNG bezels)
+export const DEVICE_SCREEN_AREAS = {
+  IOS: {
+    // iOS screen area within 450x920 frame - accurate values for PNG asset
+    top: '85px',     // Top bezel including notch area
+    left: '35px',    // Side bezel width
+    width: '380px',  // Actual screen width within bezels
+    height: '710px'  // Actual screen height within bezels
+  },
+  ANDROID: {
+    // Android screen area within 450x920 frame - accurate values for PNG asset
+    top: '85px',     // Top bezel including status bar
+    left: '35px',    // Side bezel width (same as iOS for consistency)
+    width: '380px',  // Actual screen width within bezels
+    height: '710px'  // Actual screen height within bezels
+  }
+};
+
+// Content positioning configurations within the screen area (not the full frame)
+export const LAYOUT_POSITIONS = {
+  [LAYOUT_TYPES.MODAL]: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',      // Reduced to ensure content stays within screen
+    height: '55%',     // Reduced to ensure content stays within screen
+    maxWidth: '320px', // Adjusted for screen area
+    maxHeight: '380px',
+    minHeight: '180px'
+  },
+  [LAYOUT_TYPES.HEADER]: {
+    top: '2%',         // More margin from top of screen
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '90%',      // Reduced to stay within screen bounds
+    height: '22%',
+    maxHeight: '160px',
+    minHeight: '100px'
+  },
+  [LAYOUT_TYPES.FOOTER]: {
+    bottom: '2%',      // More margin from bottom of screen
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '90%',      // Reduced to stay within screen bounds
+    height: '22%',
+    maxHeight: '160px',
+    minHeight: '100px'
+  },
+  [LAYOUT_TYPES.FULLSCREEN]: {
+    top: '2%',         // Small margin to account for screen bounds
+    left: '2%',
+    width: '96%',      // Slightly smaller to ensure it stays within screen
+    height: '96%'
+  }
+};
+
+// Scroll position multipliers for adaptive scrolling in InAppPreviewPane
+export const SCROLL_POSITION_MULTIPLIERS = {
+  [LAYOUT_TYPES.HEADER]: 0.0,      // Top of screen
+  [LAYOUT_TYPES.FOOTER]: 1.0,      // Bottom of screen
+  [LAYOUT_TYPES.MODAL]: 0.4,       // Center-ish position
+  [LAYOUT_TYPES.FULLSCREEN]: 0.3   // Slightly above center
+};

package/v2Components/HtmlEditor/components/InAppPreviewPane/index.js

@@ -0,0 +1,179 @@
+/**
+ * InAppPreviewPane - Complete InApp preview with device frames and dynamic positioning
+ */
+
+import React, { useMemo, useRef, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
+
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+
+// Components
+import DeviceFrame from './DeviceFrame';
+import ContentOverlay from './ContentOverlay';
+
+// Context
+import { useEditorContext } from '../common/EditorContext';
+
+// Constants
+import { DEVICE_TYPES } from '../../constants';
+import { LAYOUT_TYPES, SCROLL_POSITION_MULTIPLIERS } from './constants';
+
+// Styles
+import './_inAppPreviewPane.scss';
+
+const InAppPreviewPane = ({
+  intl,
+  className = '',
+  isFullscreenMode = false,
+  isModalContext = false,
+  layoutType: propLayoutType = LAYOUT_TYPES.MODAL
+}) => {
+  const {
+    content,
+    activeDevice,
+    getDeviceContent,
+    layoutType: contextLayoutType,
+    isFullscreenMode: contextIsFullscreenMode
+  } = useEditorContext();
+
+  // Refs for adaptive scrolling
+  const containerRef = useRef(null);
+  const deviceContainerRef = useRef(null);
+
+  // Use layoutType from context if available, otherwise fall back to prop
+  const layoutType = contextLayoutType || propLayoutType;
+
+  // Get current device content
+  const currentContent = useMemo(() => {
+    if (getDeviceContent) {
+      return getDeviceContent(activeDevice);
+    }
+    return content?.content || '';
+  }, [content?.content, activeDevice, getDeviceContent]);
+
+  // Adaptive scrolling effect based on layout type (disabled for modal context)
+  useEffect(() => {
+    if (isModalContext || !containerRef.current || !deviceContainerRef.current) {
+      return;
+    }
+
+    const container = containerRef.current;
+    const deviceContainer = deviceContainerRef.current;
+
+    const isComponentVisible = () => {
+      // Use context fullscreen state with fallback to prop, then fallback to container visibility check
+      const isFullscreen = contextIsFullscreenMode ?? isFullscreenMode;
+      return !isFullscreen && container.offsetParent !== null;
+    };
+
+    const performAdaptiveScroll = () => {
+      try {
+        if (!isComponentVisible()) return;
+
+        const containerHeight = container.clientHeight;
+        const deviceHeight = deviceContainer.offsetHeight;
+        const scrollableHeight = Math.max(0, deviceHeight - containerHeight);
+
+        if (scrollableHeight <= 0) return;
+
+        const scrollMultiplier = SCROLL_POSITION_MULTIPLIERS[layoutType] ?? SCROLL_POSITION_MULTIPLIERS[LAYOUT_TYPES.MODAL];
+        const targetScrollTop = Math.max(0, scrollableHeight * scrollMultiplier);
+
+        requestAnimationFrame(() => {
+          container.scrollTo({
+            top: targetScrollTop,
+            behavior: 'smooth'
+          });
+        });
+      } catch (error) {
+        console.warn('Adaptive scroll error:', error);
+      }
+    };
+
+    const timeoutId = setTimeout(performAdaptiveScroll, 150);
+    return () => clearTimeout(timeoutId);
+  }, [layoutType, isFullscreenMode, isModalContext, contextIsFullscreenMode]);
+
+
+  // Generate CSS classes based on context
+  const getContainerClasses = () => {
+    const baseClass = 'inapp-preview-pane';
+    const classes = [baseClass];
+
+    if (isModalContext) {
+      classes.push(`${baseClass}--modal-context`);
+    }
+
+    if (isFullscreenMode) {
+      classes.push(`${baseClass}--fullscreen`);
+    }
+
+    if (className) {
+      classes.push(className);
+    }
+
+    return classes.join(' ');
+  };
+
+  const getDeviceContainerClasses = () => {
+    const baseClass = 'inapp-preview-pane__device-container';
+    const classes = [baseClass];
+
+    if (isModalContext) {
+      classes.push(`${baseClass}--modal-context`);
+    } else if (isFullscreenMode) {
+      classes.push(`${baseClass}--fullscreen`);
+    } else {
+      classes.push(`${baseClass}--normal`);
+    }
+
+    return classes.join(' ');
+  };
+
+  const handleScroll = useCallback((e) => {
+    // Basic scroll handling
+  }, []);
+
+  const handleWheel = useCallback((e) => {
+    // Wheel event handling
+  }, []);
+
+  const handleTouchMove = useCallback((e) => {
+    // Touch move handling
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={getContainerClasses()}
+      onScroll={handleScroll}
+      onWheel={handleWheel}
+      onTouchMove={handleTouchMove}
+    >
+      <CapRow
+        ref={deviceContainerRef}
+        className={getDeviceContainerClasses()}
+      >
+        <DeviceFrame device={activeDevice}>
+          <ContentOverlay
+            layoutType={layoutType}
+            content={currentContent}
+            device={activeDevice}
+            className="inapp-preview-pane__content-overlay"
+          />
+        </DeviceFrame>
+      </CapRow>
+    </div>
+  );
+};
+
+InAppPreviewPane.propTypes = {
+  intl: intlShape.isRequired,
+  className: PropTypes.string,
+  isFullscreenMode: PropTypes.bool,
+  isModalContext: PropTypes.bool,
+  layoutType: PropTypes.oneOf(Object.values(LAYOUT_TYPES))
+};
+
+export default injectIntl(InAppPreviewPane);