Loading preview...
{isLoading && (
);
};
export default PreviewPlayer;
```
### Usage in Your App
```jsx theme={null}
import React, { useState, useEffect } from 'react';
import PreviewPlayer from './PreviewPlayer';
import { createStoryboardPreview, getPreviewData } from './api';
function App() {
const [previewUrl, setPreviewUrl] = useState(null);
const [renderParams, setRenderParams] = useState(null);
const [isGenerating, setIsGenerating] = useState(false);
const generatePreview = async () => {
setIsGenerating(true);
try {
const jobId = await createStoryboardPreview();
const data = await getPreviewData(jobId);
setPreviewUrl(data.previewUrl);
setRenderParams(data.renderParams);
} catch (error) {
console.error('Failed to generate preview:', error);
} finally {
setIsGenerating(false);
}
};
// Find and update background element by ID
const updateBackgroundVisual = (elementId, newVisualUrl, visualType = 'video') => {
const updatedElements = renderParams.elements.map(element => {
if (element.id === elementId && element.elementType === 'backgroundElement') {
return {
...element,
url: newVisualUrl,
visualUrl: newVisualUrl,
type: visualType,
visualType: visualType
};
}
return element;
});
// Update renderParams to trigger preview update
setRenderParams({
...renderParams,
elements: updatedElements
});
};
// Get background elements from renderParams
const backgroundElements = renderParams?.elements?.filter(
el => el.elementType === 'backgroundElement'
) || [];
return (
Loading preview...
)}
{previewUrl && (
console.log('Preview loaded!')}
onError={(err) => console.error('Preview error:', err)}
/>
)}
{backgroundElements.length > 0 && (
)}
);
}
export default App;
```
## Step 5: Update Preview Elements in Real-time
The key feature is updating preview elements without re-rendering the entire video. When you modify the `elements` array and call `updatePreview()`, the player updates instantly.
### Replacing Background Visual
To replace a scene's background video or image, find the `backgroundElement` and update its `url` and `visualUrl` properties:
```javascript theme={null}
// Get the current elements from renderParams
const elements = [...renderParams.elements];
// Find the background element you want to update
const backgroundElement = elements.find(
el => el.id === 'backgroundElement_1' && el.elementType === 'backgroundElement'
);
if (backgroundElement) {
// Update the visual URL (both url and visualUrl should be updated)
backgroundElement.url = "https://your-cdn.com/new-background-video.mp4";
backgroundElement.visualUrl = "https://your-cdn.com/new-background-video.mp4";
}
// Update the preview
await previewEditor.updatePreview({ elements });
```
### Background Element Properties
| Property | Type | Description | Example |
| ----------------- | ------- | ------------------------------ | -------------------------------- |
| `url` | string | Primary media URL | `"https://cdn.com/video.mp4"` |
| `visualUrl` | string | Visual media URL (same as url) | `"https://cdn.com/video.mp4"` |
| `type` | string | Media type | `"video"` or `"image"` |
| `visualType` | string | Visual media type | `"video"` or `"image"` |
| `duration` | number | Duration in seconds | `6.86` |
| `loop` | boolean | Loop video playback | `true` |
| `mute` | boolean | Mute video audio | `true` |
| `backgroundColor` | string | Fallback color | `"rgba(255,255,255,1)"` |
| `objectMode` | string | Media fit mode | `"cover"`, `"contain"`, `"fill"` |
### Example: Building a Background Visual Editor
```jsx theme={null}
const BackgroundVisualEditor = ({ elements, onElementsChange }) => {
// Filter only background elements
const backgroundElements = elements.filter(
el => el.elementType === 'backgroundElement'
);
const updateBackgroundElement = (elementId, updates) => {
const newElements = elements.map(element => {
if (element.id === elementId) {
return { ...element, ...updates };
}
return element;
});
onElementsChange(newElements);
};
return (
Change Background Visual:
{backgroundElements.map((element, index) => (
updateBackgroundVisual(element.id, e.target.value)}
style={{ width: '100%', padding: '10px', marginTop: '5px' }}
/>
Current: {element.visualDescription || 'No description'}
))}
Background Visuals
{backgroundElements.map((element, index) => (Scene {index + 1} Background
{/* Visual URL Editor */}
{
updateBackgroundElement(element.id, {
url: e.target.value,
visualUrl: e.target.value
});
}}
placeholder="Enter video or image URL"
style={{ width: '100%', padding: '8px', marginTop: '4px' }}
/>
{/* Visual Type Selector */}
{/* Preview container */}
```