feat: Dynamic text scaling based on video resolution

src/components/composition/ElementRenderer.tsx

@@ -3,6 +3,7 @@ import { Img, Video } from '../../engine/components';
 import { TimelineElement, DesignMD } from '../../types';
 import { ChromaKeyImage } from './ChromaKeyImage';
 import { ChromaKeyVideo } from './ChromaKeyVideo';
+import { useVideoConfig } from '../../engine/player';
 
 interface ElementRendererProps {
   element: TimelineElement;
@@ -28,23 +29,34 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
   ckTolerance,
   ckSoftness,
 }) => {
+  const { width } = useVideoConfig();
+  const scaleFactor = width / 1080;
+
   if (el.type === 'text') {
+    const fontSize = (el.fontSize ?? 56) * scaleFactor;
+    const shadowOffset = (el.shadowOffset ?? 3) * scaleFactor;
+    const shadowBlur = (el.shadowBlur ?? 6) * scaleFactor;
+    const letterSpacing = el.letterSpacing ? el.letterSpacing * scaleFactor : undefined;
+    const strokeWidth = el.textStrokeWidth ? el.textStrokeWidth * scaleFactor : undefined;
+    const bgPadding = (el.textBackgroundPadding ?? 8) * scaleFactor;
+    const bgRadius = (el.textBackgroundRadius ?? 4) * scaleFactor;
+
     return (
       <div
         style={{
           fontFamily: el.fontFamily ?? designMD.baseFont,
           color: el.color ?? designMD.textColor,
-          fontSize: el.fontSize ? `${el.fontSize}px` : '56px',
+          fontSize: `${fontSize}px`,
           fontWeight: el.fontWeight ?? 'bold',
           fontStyle: el.fontStyle ?? 'normal',
           textDecoration: el.textDecoration && el.textDecoration !== 'none' ? el.textDecoration : undefined,
-          textShadow: `${el.shadowOffset ?? 3}px ${el.shadowOffset ?? 3}px ${el.shadowBlur ?? 6}px ${el.shadowColor ?? 'rgba(0,0,0,0.8)'}`,
+          textShadow: `${shadowOffset}px ${shadowOffset}px ${shadowBlur}px ${el.shadowColor ?? 'rgba(0,0,0,0.8)'}`,
           textAlign: el.textAlign ?? 'center',
           lineHeight: el.lineHeight ?? 1.2,
-          letterSpacing: el.letterSpacing ? `${el.letterSpacing}px` : undefined,
+          letterSpacing: letterSpacing ? `${letterSpacing}px` : undefined,
           textTransform: el.textTransform ?? 'none',
-          WebkitTextStroke: el.textStrokeWidth
-            ? `${el.textStrokeWidth}px ${el.textStrokeColor ?? '#000000'}`
+          WebkitTextStroke: strokeWidth
+            ? `${strokeWidth}px ${el.textStrokeColor ?? '#000000'}`
             : undefined,
           ...(el.textGradient ? {
             background: el.textGradient,
@@ -53,8 +65,8 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
             backgroundClip: 'text',
           } : el.textBackground ? {
             background: el.textBackground,
-            padding: `${el.textBackgroundPadding ?? 8}px ${(el.textBackgroundPadding ?? 8) * 2}px`,
-            borderRadius: `${el.textBackgroundRadius ?? 4}px`,
+            padding: `${bgPadding}px ${bgPadding * 2}px`,
+            borderRadius: `${bgRadius}px`,
             display: 'inline-block',
           } : {}),
           whiteSpace: 'pre-wrap',