ugcinc 4.6.3 → 4.7.1

package/README.md

@@ -58,7 +58,7 @@ All client methods return the same response envelope:
 
 ```typescript
 type ApiResponse<T> =
-  | { ok: true; code: 200; message: string; data: T }
+  | { ok: true; code: 200; message: string; data: T; nextCursor?: string | null }
   | { ok: false; code: number; message: string };
 ```
 
@@ -74,6 +74,25 @@ if (posts.ok) {
 }
 ```
 
+## Pagination
+
+`accounts.getAccounts()` and `posts.getPosts()` support keyset pagination via `limit`/`cursor`.
+Omit `limit` to fetch everything matching your filters (the default, unpaginated behavior); pass
+`limit` to page through results newest-first, using each response's `nextCursor` to fetch the next
+page (`null`/absent means there are no more pages):
+
+```typescript
+let cursor: string | undefined;
+const allPosts = [];
+
+do {
+  const res = await client.posts.getPosts({ limit: 100, cursor });
+  if (!res.ok) break;
+  allPosts.push(...res.data);
+  cursor = res.nextCursor ?? undefined;
+} while (cursor);
+```
+
 ## Useful Exports
 
 - `UGCClient` for API access

package/dist/accounts.d.ts

@@ -74,6 +74,10 @@ export interface GetAccountsParams {
     org_group?: string;
     user_group?: string;
     status?: 'uninitialized' | 'pending' | 'initialized' | 'setup' | 'warming' | 'warmed' | 'needs_replacement' | 'replacing' | 'failed' | 'deleted' | 'reclaimed';
+    /** Max rows to return. Omit to fetch all matching accounts (no pagination). */
+    limit?: number;
+    /** Opaque cursor from a previous response's `nextCursor`, to fetch the next page. */
+    cursor?: string;
 }
 export interface GetAccountStatsParams {
     accountIds?: string[];
@@ -239,6 +243,9 @@ export interface TroubleshootParams {
 export declare class AccountsClient extends BaseClient {
     /**
      * Get accounts with optional filters
+     *
+     * Pass `limit` to paginate; the response's `nextCursor` (when present) can be
+     * passed back as `cursor` to fetch the next page, ordered newest-first.
      */
     getAccounts(params?: GetAccountsParams): Promise<ApiResponse<Account[]>>;
     /**

package/dist/accounts.js

@@ -8,6 +8,9 @@ const base_1 = require("./base");
 class AccountsClient extends base_1.BaseClient {
     /**
      * Get accounts with optional filters
+     *
+     * Pass `limit` to paginate; the response's `nextCursor` (when present) can be
+     * passed back as `cursor` to fetch the next page, ordered newest-first.
      */
     async getAccounts(params) {
         return this.post('/accounts', params ?? {});

package/dist/base.js

@@ -44,6 +44,7 @@ class BaseClient {
                     code: rawData.code,
                     message: rawData.message ?? 'Success',
                     data: rawData.data,
+                    ...(rawData.nextCursor !== undefined ? { nextCursor: rawData.nextCursor } : {}),
                 };
             }
             else {

package/dist/posts.d.ts

@@ -32,6 +32,10 @@ export interface GetPostsParams {
     startDate?: string;
     endDate?: string;
     includeHidden?: boolean;
+    /** Max rows to return. Omit to fetch all matching posts (no pagination). */
+    limit?: number;
+    /** Opaque cursor from a previous response's `nextCursor`, to fetch the next page. */
+    cursor?: string;
 }
 export interface CreateSlideshowParams {
     accountId: string | null;
@@ -131,6 +135,9 @@ export interface PreviewScheduleResult {
 export declare class PostsClient extends BaseClient {
     /**
      * Get posts with optional filters
+     *
+     * Pass `limit` to paginate; the response's `nextCursor` (when present) can be
+     * passed back as `cursor` to fetch the next page, ordered newest-first.
      */
     getPosts(params?: GetPostsParams): Promise<ApiResponse<Post[]>>;
     /**

package/dist/posts.js

@@ -8,6 +8,9 @@ const base_1 = require("./base");
 class PostsClient extends base_1.BaseClient {
     /**
      * Get posts with optional filters
+     *
+     * Pass `limit` to paginate; the response's `nextCursor` (when present) can be
+     * passed back as `cursor` to fetch the next page, ordered newest-first.
      */
     async getPosts(params) {
         return this.post('/post', params ?? {});

package/dist/render/components/VideoElement.js

@@ -12,6 +12,14 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const defaults_1 = require("../utils/defaults");
 const text_1 = require("../utils/text");
+/**
+ * Preview sync threshold: remotion hard-seeks the media tag when it drifts
+ * further than this from the timeline (default ~0.65s). Fractional playback
+ * speeds accumulate drift, so the default produces large visible "rubberband"
+ * jumps; a tight threshold keeps corrections to a few frames. Preview-only —
+ * ignored during server rendering.
+ */
+const ACCEPTABLE_TIME_SHIFT_SECONDS = 0.2;
 /**
  * Map FitMode to CSS object-fit
  */
@@ -102,7 +110,7 @@ function VideoElement({ segment, src, startFrame, durationInFrames, scale = 1 })
         const effectiveDurationMs = loopSourceDurationMs / speed;
         return Math.max(1, Math.round((effectiveDurationMs / 1000) * fps));
     }, [loop, loopSourceDurationMs, speed, fps]);
-    const videoElement = ((0, jsx_runtime_1.jsx)(remotion_1.OffthreadVideo, { src: src, style: videoStyle, startFrom: startFromFrames, playbackRate: speed, volume: volume }));
+    const videoElement = ((0, jsx_runtime_1.jsx)(remotion_1.OffthreadVideo, { src: src, style: videoStyle, startFrom: startFromFrames, playbackRate: speed, volume: volume, acceptableTimeShiftInSeconds: ACCEPTABLE_TIME_SHIFT_SECONDS }));
     return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: loop && loopDurationInFrames ? ((0, jsx_runtime_1.jsx)(remotion_1.Loop, { durationInFrames: loopDurationInFrames, children: videoElement })) : (videoElement) }));
 }
 exports.default = VideoElement;

package/dist/render/compositions/VideoEditorComposition.js

@@ -134,27 +134,28 @@ function calculateSegmentTimings(config, fps) {
  * ```
  */
 function VideoEditorComposition({ config, sources = {}, textContent = {}, }) {
-    const frame = (0, remotion_1.useCurrentFrame)();
-    const { fps, durationInFrames } = (0, remotion_1.useVideoConfig)();
+    const { fps } = (0, remotion_1.useVideoConfig)();
     // Calculate segment timings
     const segmentTimings = (0, react_1.useMemo)(() => calculateSegmentTimings(config, fps), [config, fps]);
-    // Get active visual segments at current frame, sorted by zIndex
-    const activeVisualSegments = (0, react_1.useMemo)(() => {
+    // All visual segments, statically sorted by zIndex (stable sort keeps the
+    // original channel order for ties). Every segment is always rendered inside
+    // a <Sequence> window, which handles per-frame visibility — mounting is no
+    // longer gated on the current frame, so upcoming media can premount.
+    const visualTimings = (0, react_1.useMemo)(() => {
         return segmentTimings
-            .filter(({ segment, startFrame, endFrame }) => {
-            // Only visual segments (including sequences)
-            if (segment.type !== 'video' && segment.type !== 'image' && segment.type !== 'text' && segment.type !== 'image-sequence' && segment.type !== 'video-sequence') {
-                return false;
-            }
-            // Check if active at current frame
-            return frame >= startFrame && frame < endFrame;
+            .filter(({ segment }) => {
+            return segment.type === 'video' || segment.type === 'image' || segment.type === 'text' || segment.type === 'image-sequence' || segment.type === 'video-sequence';
         })
             .sort((a, b) => {
             const aZ = a.segment.zIndex ?? 0;
             const bZ = b.segment.zIndex ?? 0;
             return aZ - bZ;
         });
-    }, [segmentTimings, frame]);
+    }, [segmentTimings]);
+    // Premount window for video sequences: in the Player, upcoming videos
+    // mount invisibly this many frames early so they buffer and pre-seek
+    // before becoming visible. No effect on server rendering.
+    const premountFrames = Math.round(fps * 2);
     // Get source URL for a segment
     const getSource = (segment) => {
         if (segment.source) {
@@ -170,25 +171,25 @@ function VideoEditorComposition({ config, sources = {}, textContent = {}, }) {
     const audioTimings = (0, react_1.useMemo)(() => {
         return segmentTimings.filter(({ segment }) => segment.type === 'audio');
     }, [segmentTimings]);
-    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: { backgroundColor: '#000000' }, children: [activeVisualSegments.map(({ segment, startFrame, durationInFrames }) => {
+    return ((0, jsx_runtime_1.jsxs)(remotion_1.AbsoluteFill, { style: { backgroundColor: '#000000' }, children: [visualTimings.map(({ segment, startFrame, durationInFrames }) => {
                 if (segment.type === 'text') {
                     const textSegment = segment;
                     const text = getTextContent(textSegment);
-                    return ((0, jsx_runtime_1.jsx)(TextElement_1.TextElement, { segment: { ...textSegment, text }, scale: 1 }, segment.id));
+                    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: startFrame, durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(TextElement_1.TextElement, { segment: { ...textSegment, text }, scale: 1 }) }, segment.id));
                 }
                 if (segment.type === 'image') {
                     const src = getSource(segment);
                     if (!src) {
                         return null;
                     }
-                    return ((0, jsx_runtime_1.jsx)(ImageElement_1.ImageElement, { segment: segment, src: src, startFrame: startFrame, scale: 1 }, segment.id));
+                    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: startFrame, durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(ImageElement_1.ImageElement, { segment: segment, src: src, startFrame: 0, scale: 1 }) }, segment.id));
                 }
                 if (segment.type === 'video') {
                     const src = getSource(segment);
                     if (!src) {
                         return null;
                     }
-                    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: startFrame, durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(VideoElement_1.VideoElement, { segment: segment, src: src, startFrame: 0, durationInFrames: durationInFrames, scale: 1 }) }, segment.id));
+                    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: startFrame, durationInFrames: durationInFrames, premountFor: premountFrames, children: (0, jsx_runtime_1.jsx)(VideoElement_1.VideoElement, { segment: segment, src: src, startFrame: 0, durationInFrames: durationInFrames, scale: 1 }) }, segment.id));
                 }
                 if (segment.type === 'image-sequence') {
                     const sequenceSegment = segment;
@@ -196,32 +197,29 @@ function VideoEditorComposition({ config, sources = {}, textContent = {}, }) {
                     if (items.length === 0) {
                         return null;
                     }
-                    // Calculate which item should be shown at current frame
-                    const frameIntoSegment = frame - startFrame;
-                    const itemDurationFrames = Math.round((sequenceSegment.defaultDuration / 1000) * fps);
-                    const currentItemIndex = Math.floor(frameIntoSegment / itemDurationFrames);
-                    const currentItemUrl = items[currentItemIndex];
-                    if (currentItemIndex >= items.length || !currentItemUrl) {
-                        return null;
-                    }
-                    const itemStartFrame = startFrame + currentItemIndex * itemDurationFrames;
-                    const syntheticImageSegment = {
-                        id: `${segment.id}-item-${currentItemIndex}`,
-                        type: 'image',
-                        source: currentItemUrl,
-                        order: segment.order,
-                        offset: { type: 'absolute', value: 0 },
-                        xOffset: sequenceSegment.xOffset,
-                        yOffset: sequenceSegment.yOffset,
-                        width: sequenceSegment.width,
-                        height: sequenceSegment.height,
-                        fit: sequenceSegment.fit,
-                        rotation: sequenceSegment.rotation,
-                        opacity: sequenceSegment.opacity,
-                        zIndex: sequenceSegment.zIndex,
-                        fadeIn: sequenceSegment.fadeIn,
-                    };
-                    return ((0, jsx_runtime_1.jsx)(ImageElement_1.ImageElement, { segment: syntheticImageSegment, src: currentItemUrl, startFrame: itemStartFrame, scale: 1 }, `${segment.id}-${currentItemUrl}`));
+                    const itemDurationFrames = Math.max(1, Math.round((sequenceSegment.defaultDuration / 1000) * fps));
+                    return items.map((itemUrl, itemIndex) => {
+                        if (!itemUrl) {
+                            return null;
+                        }
+                        const syntheticImageSegment = {
+                            id: `${segment.id}-item-${itemIndex}`,
+                            type: 'image',
+                            source: itemUrl,
+                            order: segment.order,
+                            offset: { type: 'absolute', value: 0 },
+                            xOffset: sequenceSegment.xOffset,
+                            yOffset: sequenceSegment.yOffset,
+                            width: sequenceSegment.width,
+                            height: sequenceSegment.height,
+                            fit: sequenceSegment.fit,
+                            rotation: sequenceSegment.rotation,
+                            opacity: sequenceSegment.opacity,
+                            zIndex: sequenceSegment.zIndex,
+                            fadeIn: sequenceSegment.fadeIn,
+                        };
+                        return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: startFrame + itemIndex * itemDurationFrames, durationInFrames: itemDurationFrames, children: (0, jsx_runtime_1.jsx)(ImageElement_1.ImageElement, { segment: syntheticImageSegment, src: itemUrl, startFrame: 0, scale: 1 }) }, `${segment.id}-item-${itemIndex}`));
+                    });
                 }
                 if (segment.type === 'video-sequence') {
                     const sequenceSegment = segment;
@@ -230,44 +228,33 @@ function VideoEditorComposition({ config, sources = {}, textContent = {}, }) {
                     if (items.length === 0) {
                         return null;
                     }
-                    // Calculate which item should be shown at current frame
-                    const frameIntoSegment = frame - startFrame;
                     let accumulatedFrames = 0;
-                    let currentItemIndex = -1;
-                    let itemStartFrame = startFrame;
-                    for (let i = 0; i < items.length; i++) {
-                        const itemDurationMs = durations[i] ?? 5000;
-                        const itemDurationFrames = Math.round((itemDurationMs / 1000) * fps);
-                        if (frameIntoSegment < accumulatedFrames + itemDurationFrames) {
-                            currentItemIndex = i;
-                            itemStartFrame = startFrame + accumulatedFrames;
-                            break;
-                        }
+                    return items.map((itemUrl, itemIndex) => {
+                        const itemDurationMs = durations[itemIndex] ?? 5000;
+                        const itemDurationFrames = Math.max(1, Math.round((itemDurationMs / 1000) * fps));
+                        const itemStartFrame = startFrame + accumulatedFrames;
                         accumulatedFrames += itemDurationFrames;
-                    }
-                    const currentItemUrl = items[currentItemIndex];
-                    if (currentItemIndex < 0 || currentItemIndex >= items.length || !currentItemUrl) {
-                        return null;
-                    }
-                    const itemDurationMs = durations[currentItemIndex] ?? 5000;
-                    const itemDurationFrames = Math.round((itemDurationMs / 1000) * fps);
-                    const syntheticVideoSegment = {
-                        id: `${segment.id}-item-${currentItemIndex}`,
-                        type: 'video',
-                        source: currentItemUrl,
-                        order: segment.order,
-                        offset: { type: 'absolute', value: 0 },
-                        xOffset: sequenceSegment.xOffset,
-                        yOffset: sequenceSegment.yOffset,
-                        width: sequenceSegment.width,
-                        height: sequenceSegment.height,
-                        fit: sequenceSegment.fit,
-                        rotation: sequenceSegment.rotation,
-                        opacity: sequenceSegment.opacity,
-                        zIndex: sequenceSegment.zIndex,
-                        fadeIn: sequenceSegment.fadeIn,
-                    };
-                    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: itemStartFrame, durationInFrames: itemDurationFrames, children: (0, jsx_runtime_1.jsx)(VideoElement_1.VideoElement, { segment: syntheticVideoSegment, src: currentItemUrl, startFrame: 0, durationInFrames: itemDurationFrames, scale: 1 }) }, `${segment.id}-${currentItemUrl}`));
+                        if (!itemUrl) {
+                            return null;
+                        }
+                        const syntheticVideoSegment = {
+                            id: `${segment.id}-item-${itemIndex}`,
+                            type: 'video',
+                            source: itemUrl,
+                            order: segment.order,
+                            offset: { type: 'absolute', value: 0 },
+                            xOffset: sequenceSegment.xOffset,
+                            yOffset: sequenceSegment.yOffset,
+                            width: sequenceSegment.width,
+                            height: sequenceSegment.height,
+                            fit: sequenceSegment.fit,
+                            rotation: sequenceSegment.rotation,
+                            opacity: sequenceSegment.opacity,
+                            zIndex: sequenceSegment.zIndex,
+                            fadeIn: sequenceSegment.fadeIn,
+                        };
+                        return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { from: itemStartFrame, durationInFrames: itemDurationFrames, premountFor: premountFrames, children: (0, jsx_runtime_1.jsx)(VideoElement_1.VideoElement, { segment: syntheticVideoSegment, src: itemUrl, startFrame: 0, durationInFrames: itemDurationFrames, scale: 1 }) }, `${segment.id}-item-${itemIndex}`));
+                    });
                 }
                 return null;
             }), audioTimings.map(({ segment, startFrame, durationInFrames }) => {

package/dist/tools/accounts.js

@@ -11,6 +11,8 @@ exports.accountTools = [
             org_group: zod_1.z.string().optional().describe('Filter by org group'),
             user_group: zod_1.z.string().optional().describe('Filter by user group'),
             status: zod_1.z.enum(['uninitialized', 'pending', 'initialized', 'setup', 'warming', 'warmed', 'needs_replacement', 'replacing', 'failed', 'deleted']).optional().describe('Filter by account status'),
+            limit: zod_1.z.number().optional().describe('Max rows to return, for pagination'),
+            cursor: zod_1.z.string().optional().describe('Opaque cursor from a previous response\'s nextCursor, to fetch the next page'),
         }).optional().describe('Optional filters'),
         execute: async (client, params) => {
             return client.accounts.getAccounts(params ?? undefined);

package/dist/tools/posts.js

@@ -11,6 +11,8 @@ exports.postTools = [
             postIds: zod_1.z.array(zod_1.z.string()).optional().describe('Filter by specific post IDs'),
             startDate: zod_1.z.string().optional().describe('Start date (ISO 8601)'),
             endDate: zod_1.z.string().optional().describe('End date (ISO 8601)'),
+            limit: zod_1.z.number().optional().describe('Max rows to return, for pagination'),
+            cursor: zod_1.z.string().optional().describe('Opaque cursor from a previous response\'s nextCursor, to fetch the next page'),
         }).optional(),
         execute: async (client, params) => {
             return client.posts.getPosts(params ?? undefined);

package/dist/types.d.ts

@@ -6,6 +6,8 @@ export interface SuccessResponse<T> {
     message: string;
     data: T;
     ok: true;
+    /** Present on keyset-paginated endpoints (see `limit`/`cursor` params). Pass back as `cursor` to fetch the next page; `null`/absent means no more pages. */
+    nextCursor?: string | null;
 }
 export interface ErrorResponse {
     code: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc",
-  "version": "4.6.3",
+  "version": "4.7.1",
   "description": "TypeScript/JavaScript client for the UGC Inc API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",