@zync/zync-screnplay-player 0.1.187

package/dist/screenplay/RemotionRenderer/components/utils/FaceCenteredVideo.js

@@ -0,0 +1,562 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["src", "faceMetadata", "containerWidth", "containerHeight", "enableInterpolation", "useAveragePosition", "centerHorizontally", "translateX", "translateY", "showDebugInfo", "style", "className", "containerStyle", "noBackgroundVideoEffects", "noBackgroundEffects", "transparent"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * Face-Centered Video Component
+ *
+ * A reusable component that wraps OffthreadVideo to ensure the video is always
+ * centered on a person's face within a flexible container.
+ *
+ * The video maintains its source dimensions and is positioned using translateX/translateY
+ * to center the face within the container, regardless of container size.
+ */
+
+import React from "react";
+import { OffthreadVideo, useCurrentFrame } from "remotion";
+import { useOrientationBased } from "../../hooks/useOrientationBased.js";
+
+/**
+ * Calculate face-centered translation for flexible container
+ * @param {Object} params - Configuration object
+ * @param {Object} params.faceMetadata - Face detection metadata
+ * @param {number} params.containerWidth - Container width in pixels
+ * @param {number} params.containerHeight - Container height in pixels
+ * @param {number} params.currentFrame - Current frame number (optional)
+ * @param {boolean} params.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} params.useAveragePosition - Whether to use average face position
+ * @param {boolean} params.centerHorizontally - Whether to only center horizontally
+ * @param {number} params.translateX - Additional translateX offset
+ * @param {number} params.translateY - Additional translateY offset
+ * @param {string} params.orientation - Viewport orientation (portrait, square, landscape)
+ * @returns {Object} Transform styles and debug info
+ */
+var calculateFaceCenteredTranslation = function calculateFaceCenteredTranslation(_ref) {
+  var _faceMetadata$metadat, _faceMetadata$metadat2;
+  var faceMetadata = _ref.faceMetadata,
+    containerWidth = _ref.containerWidth,
+    containerHeight = _ref.containerHeight,
+    _ref$currentFrame = _ref.currentFrame,
+    currentFrame = _ref$currentFrame === void 0 ? null : _ref$currentFrame,
+    _ref$enableInterpolat = _ref.enableInterpolation,
+    enableInterpolation = _ref$enableInterpolat === void 0 ? true : _ref$enableInterpolat,
+    _ref$useAveragePositi = _ref.useAveragePosition,
+    useAveragePosition = _ref$useAveragePositi === void 0 ? false : _ref$useAveragePositi,
+    _ref$centerHorizontal = _ref.centerHorizontally,
+    centerHorizontally = _ref$centerHorizontal === void 0 ? false : _ref$centerHorizontal,
+    _ref$translateX = _ref.translateX,
+    translateX = _ref$translateX === void 0 ? 0 : _ref$translateX,
+    _ref$translateY = _ref.translateY,
+    translateY = _ref$translateY === void 0 ? 0 : _ref$translateY,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "landscape" : _ref$orientation;
+  // Get current frame if not provided
+  var frameIndex = currentFrame;
+  if (frameIndex === null) {
+    try {
+      var remotionFrame = useCurrentFrame();
+      frameIndex = remotionFrame;
+    } catch (error) {
+      frameIndex = 0;
+    }
+  }
+
+  // Validate inputs
+  if (!(faceMetadata !== null && faceMetadata !== void 0 && (_faceMetadata$metadat = faceMetadata.metadata) !== null && _faceMetadata$metadat !== void 0 && _faceMetadata$metadat.frames) || !(faceMetadata !== null && faceMetadata !== void 0 && (_faceMetadata$metadat2 = faceMetadata.metadata) !== null && _faceMetadata$metadat2 !== void 0 && _faceMetadata$metadat2.videoProperties)) {
+    return {
+      transform: "translate(".concat(translateX, "px, ").concat(translateY, "px)"),
+      debugInfo: {
+        error: "Invalid face metadata"
+      }
+    };
+  }
+  var _faceMetadata$metadat3 = faceMetadata.metadata,
+    frames = _faceMetadata$metadat3.frames,
+    videoProperties = _faceMetadata$metadat3.videoProperties,
+    averageFaceData = _faceMetadata$metadat3.averageFaceData;
+  var sourceWidth = videoProperties.width,
+    sourceHeight = videoProperties.height;
+  var faceData = useAveragePosition ? averageFaceData !== null && averageFaceData !== void 0 ? averageFaceData : getAverageFaceData(frames) : getFaceDataForFrame(frames, frameIndex, enableInterpolation);
+  if (!faceData) {
+    return {
+      transform: "translate(".concat(translateX, "px, ").concat(translateY, "px)"),
+      debugInfo: {
+        error: "No face data available"
+      }
+    };
+  }
+
+  // Convert absolute face coordinates to relative (0-1 range)
+  var relativeFaceX = faceData.face_center[0] / sourceWidth;
+  var relativeFaceY = faceData.face_center[1] / sourceHeight;
+
+  // Calculate face position in source video (absolute pixels)
+  var faceX = relativeFaceX * sourceWidth;
+  var faceY = relativeFaceY * sourceHeight;
+
+  // Calculate container center
+  var containerCenterX = containerWidth / 2;
+  var containerCenterY = containerHeight / 2;
+
+  // Calculate scale factor if video is smaller than container height
+  var scale = 1;
+  if (sourceHeight < containerHeight) {
+    scale = containerHeight / sourceHeight;
+  }
+
+  // Portrait sources displayed in wider containers should still fill width
+  var hasDimensions = typeof sourceWidth === "number" && typeof sourceHeight === "number";
+  var isPortrait = hasDimensions && sourceHeight > sourceWidth;
+  if (hasDimensions && isPortrait && orientation === "square" && containerWidth > 0 && sourceWidth > 0) {
+    var widthScale = containerWidth / sourceWidth;
+    if (widthScale > scale) {
+      scale = widthScale;
+    }
+  }
+
+  // Calculate translation needed to center the face in the container
+  // When scale > 1, translate happens in scaled coordinate system, so we need to adjust
+  var baseTranslateX = containerCenterX - faceX + translateX;
+  var baseTranslateY = centerHorizontally ? translateY : containerCenterY - faceY + translateY;
+
+  // Adjust translation for scaling - divide by scale factor when scale > 1
+  var finalTranslateX = scale > 1 ? baseTranslateX / scale : baseTranslateX;
+  var finalTranslateY = scale > 1 ? baseTranslateY / scale : baseTranslateY;
+
+  // Add additional translateY adjustment when scale > 1 to keep video contained within container
+  if (!centerHorizontally) {
+    // Calculate the scaled video height
+    var scaledVideoHeight = sourceHeight * scale;
+
+    // When scaling with transform origin at face position, we need to calculate
+    // where the video edges will be after scaling and translation
+    var faceOffsetFromTop = faceY;
+    var faceOffsetFromBottom = sourceHeight - faceY;
+
+    // After scaling, these offsets become larger
+    var scaledOffsetFromTop = faceOffsetFromTop * scale;
+    var scaledOffsetFromBottom = faceOffsetFromBottom * scale;
+
+    // Face will be at containerCenterY after translation
+    // So video edges will be at:
+    var videoTop = containerCenterY - scaledOffsetFromTop;
+    var videoBottom = containerCenterY + scaledOffsetFromBottom;
+
+    // Calculate how much the video extends beyond container bounds
+    var overflowTop = videoTop < 0 ? Math.abs(videoTop) : 0;
+    var overflowBottom = videoBottom > containerHeight ? videoBottom - containerHeight : 0;
+
+    // If there's overflow, adjust translateY to keep video contained
+    if (overflowTop > 0 || overflowBottom > 0) {
+      // Calculate the adjustment needed to eliminate overflow
+      var adjustment = 0;
+      if (overflowBottom > 0 && overflowTop === 0) {
+        // Only bottom overflow - move up by the overflow amount
+        adjustment = overflowBottom;
+      } else if (overflowTop > 0 && overflowBottom === 0) {
+        // Only top overflow - move down by the overflow amount
+        adjustment = -overflowTop;
+      } else if (overflowTop > 0 && overflowBottom > 0) {
+        // Both overflows - center the video in the container
+        adjustment = (overflowBottom - overflowTop) / 2;
+      }
+      // Adjust for scaling - divide by scale factor since translate happens in scaled coordinate system
+      finalTranslateY -= adjustment / scale;
+    }
+  }
+
+  // Calculate horizontal offset based on scale
+  var offsetResult = calculateNegativeSpaceOffset(faceMetadata, containerWidth, containerHeight, scale);
+  var horizontalOffset = offsetResult.horizontalOffset;
+
+  // When scale > 1, we need to adjust the horizontal offset to work in the scaled coordinate system
+  if (scale > 1) {
+    horizontalOffset = horizontalOffset / scale;
+  }
+
+  // Create transform string with scale and translate
+  var transform = scale > 1 ? "scale(".concat(scale, ") translate(").concat(finalTranslateX + horizontalOffset, "px, ").concat(finalTranslateY, "px)") : "translate(".concat(finalTranslateX + horizontalOffset, "px, ").concat(finalTranslateY, "px)");
+
+  // Transform origin should be at the face position for proper scaling
+  var transformOriginX = (relativeFaceX * 100).toFixed(2);
+  var transformOriginY = (relativeFaceY * 100).toFixed(2);
+  var transformOrigin = "".concat(transformOriginX, "% ").concat(transformOriginY, "%");
+  return {
+    transform: transform,
+    transformOrigin: transformOrigin,
+    debugInfo: {
+      frameIndex: useAveragePosition ? "AVERAGE" : frameIndex,
+      relativeFaceX: relativeFaceX.toFixed(3),
+      relativeFaceY: relativeFaceY.toFixed(3),
+      faceX: faceX.toFixed(1),
+      faceY: faceY.toFixed(1),
+      containerCenterX: containerCenterX.toFixed(1),
+      containerCenterY: containerCenterY.toFixed(1),
+      finalTranslateX: finalTranslateX.toFixed(1),
+      finalTranslateY: finalTranslateY.toFixed(1),
+      scale: scale.toFixed(3),
+      transformOrigin: transformOrigin,
+      sourceWidth: sourceWidth,
+      sourceHeight: sourceHeight,
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      useAveragePosition: useAveragePosition,
+      centerHorizontally: centerHorizontally,
+      scalingApplied: scale > 1,
+      orientation: orientation
+    }
+  };
+};
+
+/**
+ * Get face data for a specific frame with optional interpolation
+ */
+function getFaceDataForFrame(frames, frameIndex, enableInterpolation) {
+  var _prevFrame, _nextFrame;
+  if (!frames || frames.length === 0) return null;
+
+  // Clamp frame index to valid range
+  var clampedIndex = Math.max(0, Math.min(frameIndex, frames.length - 1));
+
+  // Try to get exact frame data
+  var exactFrame = frames[clampedIndex];
+  if (exactFrame && exactFrame.face_detected && exactFrame.face_data) {
+    return exactFrame.face_data;
+  }
+  if (!enableInterpolation) {
+    // Find nearest frame with face data
+    for (var i = 0; i < frames.length; i++) {
+      var frame = frames[i];
+      if (frame && frame.face_detected && frame.face_data) {
+        return frame.face_data;
+      }
+    }
+    return null;
+  }
+
+  // Interpolation logic - find surrounding frames with face data
+  var prevFrame = null;
+  var nextFrame = null;
+  for (var _i = clampedIndex; _i >= 0; _i--) {
+    if (frames[_i] && frames[_i].face_detected && frames[_i].face_data) {
+      prevFrame = {
+        index: _i,
+        data: frames[_i].face_data
+      };
+      break;
+    }
+  }
+  for (var _i2 = clampedIndex; _i2 < frames.length; _i2++) {
+    if (frames[_i2] && frames[_i2].face_detected && frames[_i2].face_data) {
+      nextFrame = {
+        index: _i2,
+        data: frames[_i2].face_data
+      };
+      break;
+    }
+  }
+  if (prevFrame && nextFrame && prevFrame.index !== nextFrame.index) {
+    // Interpolate between frames
+    var t = (clampedIndex - prevFrame.index) / (nextFrame.index - prevFrame.index);
+    return {
+      face_center: [prevFrame.data.face_center[0] + t * (nextFrame.data.face_center[0] - prevFrame.data.face_center[0]), prevFrame.data.face_center[1] + t * (nextFrame.data.face_center[1] - prevFrame.data.face_center[1])],
+      face_bbox: prevFrame.data.face_bbox || nextFrame.data.face_bbox
+    };
+  }
+
+  // Return the closest available frame
+  return ((_prevFrame = prevFrame) === null || _prevFrame === void 0 ? void 0 : _prevFrame.data) || ((_nextFrame = nextFrame) === null || _nextFrame === void 0 ? void 0 : _nextFrame.data) || null;
+}
+
+/**
+ * Calculate average face position from all frames with face data
+ */
+function getAverageFaceData(frames) {
+  if (!frames || frames.length === 0) return null;
+  var framesWithFaces = frames.filter(function (f) {
+    return f.face_detected && f.face_data;
+  });
+  if (framesWithFaces.length === 0) return null;
+  var totalFaceX = 0;
+  var totalFaceY = 0;
+  var totalFaceWidth = 0;
+  var totalFaceHeight = 0;
+  var validBboxCount = 0;
+  framesWithFaces.forEach(function (frame) {
+    var _frame$face_data = frame.face_data,
+      face_center = _frame$face_data.face_center,
+      face_bbox = _frame$face_data.face_bbox;
+    totalFaceX += face_center[0];
+    totalFaceY += face_center[1];
+    if (face_bbox && face_bbox.length >= 4) {
+      totalFaceWidth += face_bbox[2];
+      totalFaceHeight += face_bbox[3];
+      validBboxCount++;
+    }
+  });
+  var avgFaceX = totalFaceX / framesWithFaces.length;
+  var avgFaceY = totalFaceY / framesWithFaces.length;
+  return {
+    face_center: [avgFaceX, avgFaceY],
+    face_bbox: validBboxCount > 0 ? [0, 0,
+    // x, y position not needed for average
+    totalFaceWidth / validBboxCount, totalFaceHeight / validBboxCount] : null
+  };
+}
+
+/**
+ * Calculate the negative space offset when face-centering a video
+ *
+ * @param {Object} faceMetadata - Face detection metadata object
+ * @param {number} containerWidth - Container width in pixels
+ * @param {number} containerHeight - Container height in pixels
+ * @param {number} scale - Scale factor applied to the video
+ * @returns {Object} Object containing horizontal and vertical offsets and which side has negative space
+ */
+export var calculateNegativeSpaceOffset = function calculateNegativeSpaceOffset(faceMetadata, containerWidth, containerHeight) {
+  var _faceMetadata$metadat4, _faceMetadata$metadat5;
+  var scale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  // Validate inputs
+  if (!(faceMetadata !== null && faceMetadata !== void 0 && (_faceMetadata$metadat4 = faceMetadata.metadata) !== null && _faceMetadata$metadat4 !== void 0 && _faceMetadata$metadat4.frames) || !(faceMetadata !== null && faceMetadata !== void 0 && (_faceMetadata$metadat5 = faceMetadata.metadata) !== null && _faceMetadata$metadat5 !== void 0 && _faceMetadata$metadat5.videoProperties)) {
+    return {
+      horizontalOffset: 0,
+      verticalOffset: 0,
+      side: "none",
+      error: "Invalid face metadata"
+    };
+  }
+  var _faceMetadata$metadat6 = faceMetadata.metadata,
+    frames = _faceMetadata$metadat6.frames,
+    videoProperties = _faceMetadata$metadat6.videoProperties;
+  var sourceWidth = videoProperties.width,
+    sourceHeight = videoProperties.height;
+
+  // When scaling is applied, use the scaled dimensions
+  var scaledWidth = sourceWidth * scale;
+  var scaledHeight = sourceHeight * scale;
+
+  // Get average face position from all frames with face data
+  var framesWithFaces = frames.filter(function (f) {
+    return f.face_detected && f.face_data;
+  });
+  if (framesWithFaces.length === 0) {
+    return {
+      horizontalOffset: 0,
+      verticalOffset: 0,
+      side: "none",
+      error: "No face data available"
+    };
+  }
+
+  // Calculate average face position
+  var totalFaceX = 0;
+  var totalFaceY = 0;
+  framesWithFaces.forEach(function (frame) {
+    totalFaceX += frame.face_data.face_center[0];
+    totalFaceY += frame.face_data.face_center[1];
+  });
+  var avgFaceX = totalFaceX / framesWithFaces.length;
+  var avgFaceY = totalFaceY / framesWithFaces.length;
+
+  // When scaling, face position also scales
+  var scaledFaceX = avgFaceX * scale;
+  var scaledFaceY = avgFaceY * scale;
+
+  // Calculate how much the video needs to shift to center the face
+  var containerCenterX = containerWidth / 2;
+  var containerCenterY = containerHeight / 2;
+  var translateX = containerCenterX - scaledFaceX;
+  var translateY = containerCenterY - scaledFaceY;
+
+  // Calculate negative space
+  var horizontalOffset = 0;
+  var side = "none";
+
+  // Check if video extends beyond container after translation
+  var videoLeftEdge = translateX;
+  var videoRightEdge = translateX + scaledWidth;
+  if (videoLeftEdge > 0) {
+    // Negative space on the left
+    horizontalOffset = -videoLeftEdge;
+    side = "left";
+  } else if (videoRightEdge < containerWidth) {
+    // Negative space on the right
+    horizontalOffset = containerWidth - videoRightEdge;
+    side = "right";
+  }
+
+  // Calculate vertical negative space
+  var verticalOffset = 0;
+  var videoTopEdge = translateY;
+  var videoBottomEdge = translateY + sourceHeight;
+  if (videoTopEdge > 0) {
+    verticalOffset = -videoTopEdge;
+  } else if (videoBottomEdge < containerHeight) {
+    verticalOffset = containerHeight - videoBottomEdge;
+  }
+  return {
+    horizontalOffset: Math.round(horizontalOffset),
+    verticalOffset: Math.round(verticalOffset),
+    side: side,
+    avgFacePosition: {
+      x: Math.round(avgFaceX),
+      y: Math.round(avgFaceY)
+    },
+    translation: {
+      x: Math.round(translateX),
+      y: Math.round(translateY)
+    }
+  };
+};
+
+/**
+ * FaceCenteredVideo Component
+ * @param {Object} props - Component props
+ * @param {string} props.src - Video source URL
+ * @param {Object} props.faceMetadata - Face detection metadata
+ * @param {number} props.containerWidth - Container width in pixels (required)
+ * @param {number} props.containerHeight - Container height in pixels (required)
+ * @param {boolean} props.enableInterpolation - Whether to interpolate between frames
+ * @param {boolean} props.useAveragePosition - Whether to use average face position for entire video duration
+ * @param {boolean} props.centerHorizontally - Whether to only center horizontally (X axis), not vertically (Y axis)
+ * @param {number} props.translateX - Additional translateX offset (optional)
+ * @param {number} props.translateY - Additional translateY offset (optional)
+ * @param {boolean} props.showDebugInfo - Whether to show debug information
+ * @param {Object} props.style - Additional styles to apply to video
+ * @param {string} props.className - CSS class name
+ * @param {...Object} props.otherProps - Other props to pass to OffthreadVideo
+ */
+export var FaceCenteredVideo = function FaceCenteredVideo(_ref2) {
+  var _faceMetadata$metadat7, _faceMetadata$metadat8, _faceMetadata$metadat9, _faceMetadata$metadat10;
+  var src = _ref2.src,
+    faceMetadata = _ref2.faceMetadata,
+    containerWidth = _ref2.containerWidth,
+    containerHeight = _ref2.containerHeight,
+    _ref2$enableInterpola = _ref2.enableInterpolation,
+    enableInterpolation = _ref2$enableInterpola === void 0 ? true : _ref2$enableInterpola,
+    _ref2$useAveragePosit = _ref2.useAveragePosition,
+    useAveragePosition = _ref2$useAveragePosit === void 0 ? true : _ref2$useAveragePosit,
+    _ref2$centerHorizonta = _ref2.centerHorizontally,
+    centerHorizontally = _ref2$centerHorizonta === void 0 ? false : _ref2$centerHorizonta,
+    _ref2$translateX = _ref2.translateX,
+    translateX = _ref2$translateX === void 0 ? 0 : _ref2$translateX,
+    _ref2$translateY = _ref2.translateY,
+    translateY = _ref2$translateY === void 0 ? 0 : _ref2$translateY,
+    _ref2$showDebugInfo = _ref2.showDebugInfo,
+    showDebugInfo = _ref2$showDebugInfo === void 0 ? false : _ref2$showDebugInfo,
+    _ref2$style = _ref2.style,
+    style = _ref2$style === void 0 ? {} : _ref2$style,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "" : _ref2$className,
+    _ref2$containerStyle = _ref2.containerStyle,
+    containerStyle = _ref2$containerStyle === void 0 ? {} : _ref2$containerStyle,
+    _ref2$noBackgroundVid = _ref2.noBackgroundVideoEffects,
+    noBackgroundVideoEffects = _ref2$noBackgroundVid === void 0 ? {} : _ref2$noBackgroundVid,
+    _ref2$noBackgroundEff = _ref2.noBackgroundEffects,
+    noBackgroundEffects = _ref2$noBackgroundEff === void 0 ? {} : _ref2$noBackgroundEff,
+    _ref2$transparent = _ref2.transparent,
+    transparent = _ref2$transparent === void 0 ? false : _ref2$transparent,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  var _useOrientationBased = useOrientationBased({
+      portrait: {},
+      landscape: {},
+      square: {}
+    }),
+    orientation = _useOrientationBased.orientation;
+
+  // Get source video dimensions
+  var sourceWidth = faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat7 = faceMetadata.metadata) === null || _faceMetadata$metadat7 === void 0 ? void 0 : (_faceMetadata$metadat8 = _faceMetadata$metadat7.videoProperties) === null || _faceMetadata$metadat8 === void 0 ? void 0 : _faceMetadata$metadat8.width;
+  var sourceHeight = faceMetadata === null || faceMetadata === void 0 ? void 0 : (_faceMetadata$metadat9 = faceMetadata.metadata) === null || _faceMetadata$metadat9 === void 0 ? void 0 : (_faceMetadata$metadat10 = _faceMetadata$metadat9.videoProperties) === null || _faceMetadata$metadat10 === void 0 ? void 0 : _faceMetadata$metadat10.height;
+
+  // Calculate face-centered translation and scaling
+  var _calculateFaceCentere = calculateFaceCenteredTranslation({
+      faceMetadata: faceMetadata,
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      enableInterpolation: enableInterpolation,
+      useAveragePosition: useAveragePosition,
+      centerHorizontally: centerHorizontally,
+      translateX: translateX,
+      translateY: translateY,
+      orientation: orientation
+    }),
+    transform = _calculateFaceCentere.transform,
+    transformOrigin = _calculateFaceCentere.transformOrigin,
+    debugInfo = _calculateFaceCentere.debugInfo;
+  var videoStyle = _objectSpread({
+    width: sourceWidth || "100%",
+    height: sourceHeight || "100%",
+    transform: sourceHeight === containerHeight && sourceWidth === containerWidth ? undefined : transform,
+    transformOrigin: transformOrigin || "center center",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    maxWidth: "unset",
+    filter: noBackgroundVideoEffects !== null && noBackgroundVideoEffects !== void 0 && noBackgroundVideoEffects.facePop ? "brightness(1.1) contrast(1.15) saturate(1.05)" : undefined
+  }, style);
+
+  // Validate required props
+  if (!containerWidth || !containerHeight) {
+    console.error("FaceCenteredVideo: containerWidth and containerHeight are required props");
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "face-centered-video-container ".concat(className),
+    style: _objectSpread({
+      position: "relative",
+      width: containerWidth,
+      height: containerHeight,
+      overflow: "hidden",
+      isolation: "isolate"
+    }, containerStyle)
+  }, /*#__PURE__*/React.createElement(OffthreadVideo, _extends({
+    src: src,
+    style: videoStyle,
+    transparent: transparent
+  }, otherProps)), showDebugInfo && debugInfo && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 10,
+      left: 10,
+      background: "rgba(0, 0, 0, 0.8)",
+      color: "white",
+      padding: "8px",
+      fontSize: "12px",
+      fontFamily: "monospace",
+      borderRadius: "30px",
+      zIndex: 1000,
+      maxWidth: "300px"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "Face-Centered Video Debug")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "lightblue"
+    }
+  }, debugInfo.scalingApplied ? "Using Scale + Translation" : "Using Translation"), /*#__PURE__*/React.createElement("div", null, "Frame: ", debugInfo.frameIndex), /*#__PURE__*/React.createElement("div", null, "Face Position: (", debugInfo.relativeFaceX, ", ", debugInfo.relativeFaceY, ")"), /*#__PURE__*/React.createElement("div", null, "Face Absolute: (", debugInfo.faceX, "px, ", debugInfo.faceY, "px)"), /*#__PURE__*/React.createElement("div", null, "Container Center: (", debugInfo.containerCenterX, "px,", " ", debugInfo.containerCenterY, "px)"), /*#__PURE__*/React.createElement("div", null, "Translation: (", debugInfo.finalTranslateX, "px,", " ", debugInfo.finalTranslateY, "px)"), debugInfo.scalingApplied && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "orange"
+    }
+  }, "Scale: ", debugInfo.scale, "x"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "orange"
+    }
+  }, "Transform Origin: ", debugInfo.transformOrigin)), /*#__PURE__*/React.createElement("div", null, "Source: ", debugInfo.sourceWidth, "x", debugInfo.sourceHeight), /*#__PURE__*/React.createElement("div", null, "Container: ", debugInfo.containerWidth, "x", debugInfo.containerHeight), debugInfo.useAveragePosition && /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "yellow"
+    }
+  }, "Using Average Position"), debugInfo.centerHorizontally && /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "cyan"
+    }
+  }, "Center Horizontally Only"), debugInfo.error && /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: "red"
+    }
+  }, "Error: ", debugInfo.error)));
+};
+export default FaceCenteredVideo;