padding video control

src/components/video-editor/SettingsPanel.tsx

@@ -78,7 +78,7 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
   { depth: 6, label: "5×" },
 ];
 
-export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, shadowIntensity = 0, onShadowChange, showBlur, onBlurChange, motionBlurEnabled = true, onMotionBlurChange, borderRadius = 0, onBorderRadiusChange, padding = 0, onPaddingChange, cropRegion, onCropChange, videoElement, onExport }: SettingsPanelProps) {
+export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, shadowIntensity = 0, onShadowChange, showBlur, onBlurChange, motionBlurEnabled = true, onMotionBlurChange, borderRadius = 0, onBorderRadiusChange, padding = 50, onPaddingChange, cropRegion, onCropChange, videoElement, onExport }: SettingsPanelProps) {
   const [wallpaperPaths, setWallpaperPaths] = useState<string[]>([]);
   const [customImages, setCustomImages] = useState<string[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -265,8 +265,8 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
           {/* Padding Slider */}
           <div className="p-3 rounded-xl bg-white/5 border border-white/5 space-y-2">
             <div className="flex items-center justify-between">
-              <div className="text-xs font-medium text-slate-200">Padding (TODO)</div>
-              <span className="text-[10px] text-slate-400 font-mono">{padding}px</span>
+              <div className="text-xs font-medium text-slate-200">Padding</div>
+              <span className="text-[10px] text-slate-400 font-mono">{padding}%</span>
             </div>
             <Slider
               value={[padding]}

src/components/video-editor/VideoEditor.tsx

@@ -39,7 +39,7 @@ export default function VideoEditor() {
   const [showBlur, setShowBlur] = useState(false);
   const [motionBlurEnabled, setMotionBlurEnabled] = useState(true);
   const [borderRadius, setBorderRadius] = useState(0);
-  const [padding, setPadding] = useState(0);
+  const [padding, setPadding] = useState(50);
   const [cropRegion, setCropRegion] = useState<CropRegion>(DEFAULT_CROP_REGION);
   const [zoomRegions, setZoomRegions] = useState<ZoomRegion[]>([]);
   const [selectedZoomId, setSelectedZoomId] = useState<string | null>(null);
@@ -306,6 +306,7 @@ export default function VideoEditor() {
         showBlur,
         motionBlurEnabled,
         borderRadius,
+        padding,
         cropRegion,
         onProgress: (progress: ExportProgress) => {
           setExportProgress(progress);
@@ -347,7 +348,7 @@ export default function VideoEditor() {
       setIsExporting(false);
       exporterRef.current = null;
     }
-  }, [videoPath, wallpaper, zoomRegions, trimRegions, shadowIntensity, showBlur, motionBlurEnabled, borderRadius, cropRegion, isPlaying]);
+  }, [videoPath, wallpaper, zoomRegions, trimRegions, shadowIntensity, showBlur, motionBlurEnabled, borderRadius, padding, cropRegion, isPlaying]);
 
   const handleCancelExport = useCallback(() => {
     if (exporterRef.current) {
@@ -413,6 +414,7 @@ export default function VideoEditor() {
                       showBlur={showBlur}
                       motionBlurEnabled={motionBlurEnabled}
                       borderRadius={borderRadius}
+                      padding={padding}
                       cropRegion={cropRegion}
                       trimRegions={trimRegions}
                     />

src/components/video-editor/VideoPlayback.tsx

@@ -29,6 +29,7 @@ interface VideoPlaybackProps {
   showBlur?: boolean;
   motionBlurEnabled?: boolean;
   borderRadius?: number;
+  padding?: number;
   cropRegion?: import('./types').CropRegion;
   trimRegions?: TrimRegion[];
 }
@@ -59,6 +60,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
   showBlur,
   motionBlurEnabled = true,
   borderRadius = 0,
+  padding = 50,
   cropRegion,
   trimRegions = [],
 }, ref) => {
@@ -153,6 +155,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
       cropRegion,
       lockedVideoDimensions: lockedVideoDimensionsRef.current,
       borderRadius,
+      padding,
     });
 
     if (result) {
@@ -174,7 +177,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
 
       updateOverlayForRegion(activeRegion);
     }
-  }, [updateOverlayForRegion, cropRegion, borderRadius]);
+  }, [updateOverlayForRegion, cropRegion, borderRadius, padding]);
 
   useEffect(() => {
     layoutVideoContentRef.current = layoutVideoContent;

src/components/video-editor/videoPlayback/layoutUtils.ts

@@ -11,6 +11,7 @@ interface LayoutParams {
   cropRegion?: CropRegion;
   lockedVideoDimensions?: { width: number; height: number } | null;
   borderRadius?: number;
+  padding?: number;
 }
 
 interface LayoutResult {
@@ -23,7 +24,7 @@ interface LayoutResult {
 }
 
 export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
-  const { container, app, videoSprite, maskGraphics, videoElement, cropRegion, lockedVideoDimensions, borderRadius = 0 } = params;
+  const { container, app, videoSprite, maskGraphics, videoElement, cropRegion, lockedVideoDimensions, borderRadius = 0, padding = 0 } = params;
 
   const videoWidth = lockedVideoDimensions?.width || videoElement.videoWidth;
   const videoHeight = lockedVideoDimensions?.height || videoElement.videoHeight;
@@ -56,8 +57,10 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
   const cropEndY = cropStartY + croppedVideoHeight;
   
   // Calculate scale to fit the cropped area in the viewport
-  const maxDisplayWidth = width * VIEWPORT_SCALE;
-  const maxDisplayHeight = height * VIEWPORT_SCALE;
+  // Padding is a percentage (0-100), where 50 matches the original VIEWPORT_SCALE of 0.8
+  const paddingScale = 1.0 - (padding / 100) * 0.4;
+  const maxDisplayWidth = width * paddingScale;
+  const maxDisplayHeight = height * paddingScale;
 
   const scale = Math.min(
     maxDisplayWidth / croppedVideoWidth,