ugcinc-render 1.3.5

package/README.md

@@ -0,0 +1,257 @@
+# @ugcinc/remotion
+
+Unified Remotion rendering package for UGC Inc. Provides shared types, components, and compositions for pixel-perfect client/server rendering using the same Chromium engine.
+
+## Why This Package?
+
+Traditional canvas-based rendering has a fundamental problem: different canvas implementations (browser Canvas API vs server-side libraries like skia-canvas) produce subtly different results. This leads to:
+
+- Text positioned differently between preview and final render
+- Font metrics varying between engines
+- Antialiasing and rendering differences
+
+**This package solves that by using Remotion**, which renders everything through Chromium. The same browser engine runs on both:
+- **Client preview**: `@remotion/player` - React component for preview
+- **Server render**: `@remotion/renderer` - Headless Chromium for final output
+
+Result: **100% pixel-perfect consistency** between preview and render.
+
+## Installation
+
+```bash
+npm install @ugcinc/remotion remotion @remotion/player react
+```
+
+## Quick Start
+
+### 1. Image Editor Preview (Client)
+
+```tsx
+import { Player } from '@remotion/player';
+import { ImageEditorComposition, type ImageEditorConfig } from '@ugcinc/remotion';
+
+function ImageEditorPreview({ config }: { config: ImageEditorConfig }) {
+  const sources = {
+    background: 'https://example.com/bg.jpg',
+    'image-1': 'https://example.com/image1.jpg',
+  };
+
+  return (
+    <Player
+      component={ImageEditorComposition}
+      inputProps={{ config, sources }}
+      durationInFrames={1}
+      fps={1}
+      compositionWidth={config.width}
+      compositionHeight={config.height}
+      style={{ width: '100%', height: 'auto' }}
+    />
+  );
+}
+```
+
+### 2. Server-Side Rendering
+
+```ts
+import { bundle } from '@remotion/bundler';
+import { renderStill } from '@remotion/renderer';
+import { ImageEditorComposition } from '@ugcinc/remotion';
+
+async function renderImage(config: ImageEditorConfig) {
+  const bundled = await bundle({
+    entryPoint: './remotion/index.ts',
+  });
+
+  const output = await renderStill({
+    composition: {
+      id: 'ImageEditor',
+      component: ImageEditorComposition,
+      width: config.width,
+      height: config.height,
+      fps: 1,
+      durationInFrames: 1,
+      defaultProps: { config, sources },
+    },
+    serveUrl: bundled,
+    output: 'output.png',
+    chromiumOptions: {
+      gl: 'angle', // GPU acceleration
+    },
+  });
+
+  return output;
+}
+```
+
+## Types
+
+All types are exported from the main package:
+
+```ts
+import type {
+  // Editor configs
+  ImageEditorConfig,
+  VideoEditorConfig,
+  EditorConfig,
+  Channel,
+
+  // Segments
+  TextSegment,
+  ImageSegment,
+  VideoSegment,
+  AudioSegment,
+  StaticSegment,
+
+  // Base types
+  TimeValue,
+  BorderRadiusConfig,
+  FitMode,
+  FontType,
+  FontWeight,
+
+  // Position types
+  RelativePositionConfigX,
+  RelativePositionConfigY,
+
+  // Crop types
+  DynamicCropConfig,
+  CropAxisConfig,
+} from '@ugcinc/remotion';
+```
+
+## Components
+
+Individual element components for building custom compositions:
+
+```tsx
+import { TextElement, ImageElement, VideoElement } from '@ugcinc/remotion/components';
+
+// Text with all styling options
+<TextElement
+  segment={{
+    id: 'title',
+    type: 'text',
+    text: 'Hello World',
+    xOffset: 100,
+    yOffset: 100,
+    width: 800,
+    height: 200,
+    fontSize: 72,
+    fontType: 'tiktok',
+    fontWeight: 'bold',
+    color: '#ffffff',
+    strokeWidth: 4,
+    strokeColor: '#000000',
+    alignment: 'center',
+    verticalAlign: 'middle',
+  }}
+/>
+
+// Image with fit mode and border radius
+<ImageElement
+  segment={{
+    id: 'photo',
+    type: 'image',
+    xOffset: 50,
+    yOffset: 50,
+    width: 400,
+    height: 400,
+    fit: 'cover',
+    borderRadius: 20,
+    rotation: 5,
+  }}
+  src="https://example.com/photo.jpg"
+/>
+```
+
+## Compositions
+
+Pre-built compositions for complete editor rendering:
+
+### ImageEditorComposition
+
+Renders a static image from an ImageEditorConfig.
+
+```tsx
+import { ImageEditorComposition } from '@ugcinc/remotion/compositions';
+
+<ImageEditorComposition
+  config={imageEditorConfig}
+  sources={{
+    background: 'https://...',
+    'image-1': 'https://...',
+  }}
+  scale={2} // 2x resolution for retina
+/>
+```
+
+### VideoEditorComposition
+
+Renders a video from a VideoEditorConfig with timeline support.
+
+```tsx
+import { VideoEditorComposition } from '@ugcinc/remotion/compositions';
+
+<VideoEditorComposition
+  config={videoEditorConfig}
+  sources={{
+    'video-1': 'https://...',
+    'audio-1': 'https://...',
+  }}
+  textContent={{
+    'text-1': 'Dynamic text content',
+  }}
+/>
+```
+
+## Utilities
+
+Helper functions for font loading and calculations:
+
+```ts
+import {
+  preloadFonts,
+  areFontsLoaded,
+  getFontFamily,
+  calculateFitDimensions,
+  wrapText,
+  getBorderRadii,
+} from '@ugcinc/remotion/utils';
+```
+
+## Hooks
+
+React hooks for common operations:
+
+```ts
+import { useFontsLoaded, useImageLoader, useImagePreloader } from '@ugcinc/remotion/hooks';
+
+function MyComponent() {
+  const fontsReady = useFontsLoaded();
+  const { loaded, images } = useImagePreloader(sources);
+
+  if (!fontsReady || !loaded) {
+    return <div>Loading...</div>;
+  }
+
+  return <ImageEditorComposition config={config} sources={sources} />;
+}
+```
+
+## GPU Acceleration
+
+When rendering on a server with GPU, use the `--gl=angle` flag for faster frame rendering:
+
+```ts
+await renderMedia({
+  // ...
+  chromiumOptions: {
+    gl: 'angle', // Enable GPU acceleration
+  },
+});
+```
+
+## License
+
+MIT
+