@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/create-video/audio/adjust-volume.md

@@ -0,0 +1,346 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Audio](./create-audio/audio.md) > [Adjust Volume](./create-video/audio/adjust-volume.md)
+
+---
+
+Control audio playback volume using CE.SDK's timeline UI and the programmatic
+volume control API, from silent (0.0) to full volume (1.0).
+
+![Audio Volume Adjustment example showing timeline with audio blocks at different volume levels](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 8 minutes
+>
+> **Resources:**
+>
+> - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-audio-audio-adjust-volume-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-audio-audio-adjust-volume-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-audio-audio-adjust-volume-browser/)
+
+Volume control adjusts how loud or quiet audio plays during playback. CE.SDK uses a normalized 0.0-1.0 range where 0.0 is completely silent and 1.0 is full volume. This applies to both audio blocks and video fills with embedded audio. Volume settings are commonly used for balancing multiple audio sources, creating fade effects, and allowing users to adjust playback levels.
+
+```typescript file=@cesdk_web_examples/guides-create-audio-audio-adjust-volume-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import {
+  BlurAssetSource,
+  CaptionPresetsAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TextComponentAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { VideoEditorConfig } from './video-editor/plugin';
+import packageJson from './package.json';
+
+/**
+ * CE.SDK Plugin: Adjust Audio Volume Guide
+ *
+ * Demonstrates audio volume control in CE.SDK:
+ * - Setting volume levels with setVolume
+ * - Muting and unmuting with setMuted
+ * - Querying volume and mute states
+ * - Volume levels for multiple audio sources
+ */
+class Example implements EditorPlugin {
+  name = packageJson.name;
+
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    if (!cesdk) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+
+    await cesdk.addPlugin(new VideoEditorConfig());
+
+    // Add asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    await cesdk.addPlugin(new CaptionPresetsAssetSource());
+    await cesdk.addPlugin(new ColorPaletteAssetSource());
+    await cesdk.addPlugin(new CropPresetsAssetSource());
+    await cesdk.addPlugin(
+      new UploadAssetSources({
+        include: [
+          'ly.img.image.upload',
+          'ly.img.video.upload',
+          'ly.img.audio.upload'
+        ]
+      })
+    );
+    await cesdk.addPlugin(
+      new DemoAssetSources({
+        include: [
+          'ly.img.templates.video.*',
+          'ly.img.image.*',
+          'ly.img.audio.*',
+          'ly.img.video.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new EffectsAssetSource());
+    await cesdk.addPlugin(new FiltersAssetSource());
+    await cesdk.addPlugin(
+      new PagePresetsAssetSource({
+        include: [
+          'ly.img.page.presets.instagram.*',
+          'ly.img.page.presets.facebook.*',
+          'ly.img.page.presets.x.*',
+          'ly.img.page.presets.linkedin.*',
+          'ly.img.page.presets.pinterest.*',
+          'ly.img.page.presets.tiktok.*',
+          'ly.img.page.presets.youtube.*',
+          'ly.img.page.presets.video.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new StickerAssetSource());
+    await cesdk.addPlugin(new TextAssetSource());
+    await cesdk.addPlugin(new TextComponentAssetSource());
+    await cesdk.addPlugin(new TypefaceAssetSource());
+    await cesdk.addPlugin(new VectorShapeAssetSource());
+
+    await cesdk.actions.run('scene.create', {
+      layout: 'DepthStack',
+      page: {
+        sourceId: 'ly.img.page.presets',
+        assetId: 'ly.img.page.presets.instagram.story',
+        color: { r: 0, g: 0, b: 0, a: 1 }
+      }
+    });
+
+    const engine = cesdk.engine;
+    const scene = engine.scene.get();
+    const pages = engine.block.findByType('page');
+    const page = pages.length > 0 ? pages[0] : scene;
+
+    // Use a sample audio file
+    const audioUri =
+      'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/dance_harder.m4a';
+
+    // Create an audio block and load the audio file
+    const audioBlock = engine.block.create('audio');
+    engine.block.setString(audioBlock, 'audio/fileURI', audioUri);
+
+    // Wait for audio resource to load
+    await engine.block.forceLoadAVResource(audioBlock);
+
+    // Set volume to 80% (0.8 on a 0.0-1.0 scale)
+    const fullVolumeAudio = engine.block.duplicate(audioBlock);
+    engine.block.appendChild(page, fullVolumeAudio);
+    engine.block.setTimeOffset(fullVolumeAudio, 0);
+    engine.block.setVolume(fullVolumeAudio, 0.8);
+
+    // Set volume to 30% for background music
+    const lowVolumeAudio = engine.block.duplicate(audioBlock);
+    engine.block.appendChild(page, lowVolumeAudio);
+    engine.block.setTimeOffset(lowVolumeAudio, 5);
+    engine.block.setVolume(lowVolumeAudio, 0.3);
+
+    // Mute an audio block (preserves volume setting)
+    const mutedAudio = engine.block.duplicate(audioBlock);
+    engine.block.appendChild(page, mutedAudio);
+    engine.block.setTimeOffset(mutedAudio, 10);
+    engine.block.setVolume(mutedAudio, 1.0);
+    engine.block.setMuted(mutedAudio, true);
+
+    // Query current volume and mute states
+    const currentVolume = engine.block.getVolume(fullVolumeAudio);
+    const isMuted = engine.block.isMuted(mutedAudio);
+    const isForceMuted = engine.block.isForceMuted(mutedAudio);
+
+    // eslint-disable-next-line no-console
+    console.log(`Full volume audio: ${(currentVolume * 100).toFixed(0)}%`);
+    // eslint-disable-next-line no-console
+    console.log(
+      `Low volume audio: ${(
+        engine.block.getVolume(lowVolumeAudio) * 100
+      ).toFixed(0)}%`
+    );
+    // eslint-disable-next-line no-console
+    console.log(
+      `Muted audio - isMuted: ${isMuted}, isForceMuted: ${isForceMuted}`
+    );
+
+    // Remove the original audio block (we only need the duplicates)
+    engine.block.destroy(audioBlock);
+
+    // Zoom to fit all audio blocks
+    engine.scene.zoomToBlock(page, 40, 40, 40, 40);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to adjust audio volume programmatically using the Engine API, mute and unmute audio, and query volume and mute states.
+
+## Understanding Volume Concepts
+
+CE.SDK supports volume levels from **0.0** (silent) to **1.0** (full volume), with **1.0** as the default for new audio blocks. Values in between represent proportional volume levels—0.5 is half volume, 0.25 is quarter volume.
+
+**Volume vs Muting**: Setting volume to 0.0 makes audio silent, but muting with `setMuted()` is preferred when you want to temporarily silence audio without losing the volume setting. Unmuting restores the previous volume level.
+
+**Common use cases**: Background music mixing (0.3-0.5 under voiceover), user volume controls, audio balancing for multi-track projects, fade effects (gradually adjusting volume over time), and accessibility features.
+
+## Setting Up Audio for Volume Control
+
+### Loading Audio Files
+
+We create an audio block and load an audio file by setting its `fileURI` property.
+
+```typescript highlight-create-audio
+// Create an audio block and load the audio file
+const audioBlock = engine.block.create('audio');
+engine.block.setString(audioBlock, 'audio/fileURI', audioUri);
+
+// Wait for audio resource to load
+await engine.block.forceLoadAVResource(audioBlock);
+```
+
+Unlike video or image blocks which use fills, audio blocks store the file URI directly on the block itself using the `audio/fileURI` property. The `forceLoadAVResource` call ensures CE.SDK has downloaded the audio file and loaded its metadata before we manipulate it.
+
+## Adjusting Volume
+
+### Setting Volume
+
+We can set volume using `setVolume()` with a value between 0.0 and 1.0.
+
+```typescript highlight-set-volume
+// Set volume to 80% (0.8 on a 0.0-1.0 scale)
+const fullVolumeAudio = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, fullVolumeAudio);
+engine.block.setTimeOffset(fullVolumeAudio, 0);
+engine.block.setVolume(fullVolumeAudio, 0.8);
+```
+
+Setting volume to 0.8 (80%) is useful when you want prominent audio that isn't at maximum level, leaving headroom for other audio sources or preventing distortion.
+
+### Setting Low Volume for Background Audio
+
+For background music that should be audible but not prominent, use lower volume levels.
+
+```typescript highlight-set-low-volume
+// Set volume to 30% for background music
+const lowVolumeAudio = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, lowVolumeAudio);
+engine.block.setTimeOffset(lowVolumeAudio, 5);
+engine.block.setVolume(lowVolumeAudio, 0.3);
+```
+
+At 0.3 (30%) volume, the audio is clearly audible but stays in the background. This is a common level for background music under voiceover or dialogue.
+
+## Muting Audio
+
+### Mute and Unmute
+
+Use `setMuted()` to mute audio without changing its volume setting. This is useful for toggle controls.
+
+```typescript highlight-mute-audio
+// Mute an audio block (preserves volume setting)
+const mutedAudio = engine.block.duplicate(audioBlock);
+engine.block.appendChild(page, mutedAudio);
+engine.block.setTimeOffset(mutedAudio, 10);
+engine.block.setVolume(mutedAudio, 1.0);
+engine.block.setMuted(mutedAudio, true);
+```
+
+When you mute an audio block, the volume setting (1.0 in this case) is preserved. Unmuting later with `setMuted(block, false)` restores playback at the same volume level.
+
+### Querying Volume and Mute States
+
+You can query the current volume and mute states at any time.
+
+```typescript highlight-query-volume
+// Query current volume and mute states
+const currentVolume = engine.block.getVolume(fullVolumeAudio);
+const isMuted = engine.block.isMuted(mutedAudio);
+const isForceMuted = engine.block.isForceMuted(mutedAudio);
+
+// eslint-disable-next-line no-console
+console.log(`Full volume audio: ${(currentVolume * 100).toFixed(0)}%`);
+// eslint-disable-next-line no-console
+console.log(
+  `Low volume audio: ${(engine.block.getVolume(lowVolumeAudio) * 100).toFixed(
+    0
+  )}%`
+);
+// eslint-disable-next-line no-console
+console.log(`Muted audio - isMuted: ${isMuted}, isForceMuted: ${isForceMuted}`);
+```
+
+Use `getVolume()` to read the current volume level, `isMuted()` to check if the block is muted by the user, and `isForceMuted()` to check if the engine has automatically muted the block due to playback rules.
+
+## Mixing Multiple Audio Sources
+
+### Balancing Tracks
+
+When working with multiple audio sources, use different volume levels to create a balanced mix. A common approach is to keep voiceover or dialogue at higher levels (0.8-1.0) and background music at lower levels (0.3-0.5).
+
+### Common Mixing Patterns
+
+**Voiceover prominent**: Set background music to 0.3 and voiceover to 1.0 for clear narration with musical accompaniment.
+
+**Balanced dialogue and music**: Set both to 0.6-0.7 when both elements are equally important.
+
+**Sound effects as accents**: Set sound effects to 0.5-0.8 depending on how prominent they should be in the mix.
+
+## Building Volume Controls
+
+### Volume Slider
+
+When building a volume slider UI, map the slider value directly to the 0.0-1.0 range. Display percentages (0-100%) for user-friendly labels.
+
+```typescript
+// Example: Update volume from slider (0-100)
+const sliderValue = 75; // User drags slider to 75%
+const volume = sliderValue / 100; // Convert to 0.0-1.0
+engine.block.setVolume(audioBlock, volume);
+```
+
+### Mute Toggle
+
+Implement mute buttons using `setMuted()` and indicate the current state using `isMuted()`. Show a different icon when `isForceMuted()` returns true to indicate the engine has automatically muted the audio.
+
+```typescript
+// Example: Toggle mute state
+const currentlyMuted = engine.block.isMuted(audioBlock);
+engine.block.setMuted(audioBlock, !currentlyMuted);
+
+// Check if engine force-muted (e.g., high playback speed)
+if (engine.block.isForceMuted(audioBlock)) {
+  // Show "force muted" indicator
+}
+```
+
+## Troubleshooting
+
+### Volume Changes Not Audible
+
+Check if the block is muted with `isMuted()` or force muted with `isForceMuted()`. Also verify the audio resource has loaded successfully.
+
+### Force Muted State
+
+Video fills at playback speeds above 3.0x are automatically force muted by the engine. Reduce the playback speed to restore audio output.
+
+### Volume Not Persisting
+
+Ensure you're setting volume on the correct block ID. Volume settings are block-specific and don't propagate to duplicates or other instances.
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/create-video/control.md

@@ -0,0 +1,285 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Videos](./create-video.md) > [Control Audio and Video](./create-video/control.md)
+
+---
+
+Play, pause, seek, and preview audio and video content programmatically using CE.SDK's playback control APIs.
+
+![Control Audio and Video example showing video playback controls](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 10 minutes
+>
+> **Resources:**
+>
+> - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-control-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-control-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-control-browser/)
+
+CE.SDK provides playback control for audio and video through the Block API. Playback state, seeking, and solo preview are controlled programmatically. Resources must be loaded before accessing metadata like duration and dimensions.
+
+```typescript file=@cesdk_web_examples/guides-create-video-control-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import {
+  BlurAssetSource,
+  CaptionPresetsAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TextComponentAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { VideoEditorConfig } from './video-editor/plugin';
+import packageJson from './package.json';
+
+class Example implements EditorPlugin {
+  name = packageJson.name;
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    if (!cesdk) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+    await cesdk.addPlugin(new VideoEditorConfig());
+
+    // Add asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    await cesdk.addPlugin(new CaptionPresetsAssetSource());
+    await cesdk.addPlugin(new ColorPaletteAssetSource());
+    await cesdk.addPlugin(new CropPresetsAssetSource());
+    await cesdk.addPlugin(
+      new UploadAssetSources({
+        include: [
+          'ly.img.image.upload',
+          'ly.img.video.upload',
+          'ly.img.audio.upload'
+        ]
+      })
+    );
+    await cesdk.addPlugin(
+      new DemoAssetSources({
+        include: [
+          'ly.img.templates.video.*',
+          'ly.img.image.*',
+          'ly.img.audio.*',
+          'ly.img.video.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new EffectsAssetSource());
+    await cesdk.addPlugin(new FiltersAssetSource());
+    await cesdk.addPlugin(
+      new PagePresetsAssetSource({
+        include: [
+          'ly.img.page.presets.instagram.*',
+          'ly.img.page.presets.facebook.*',
+          'ly.img.page.presets.x.*',
+          'ly.img.page.presets.linkedin.*',
+          'ly.img.page.presets.pinterest.*',
+          'ly.img.page.presets.tiktok.*',
+          'ly.img.page.presets.youtube.*',
+          'ly.img.page.presets.video.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new StickerAssetSource());
+    await cesdk.addPlugin(new TextAssetSource());
+    await cesdk.addPlugin(new TextComponentAssetSource());
+    await cesdk.addPlugin(new TypefaceAssetSource());
+    await cesdk.addPlugin(new VectorShapeAssetSource());
+
+    await cesdk.actions.run('scene.create', {
+      layout: 'DepthStack',
+      page: { width: 1920, height: 1080, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+
+    // Get the page and set to 16:9 landscape for video
+    const page = engine.block.findByType('page')[0]!;
+
+    // Create a track for video blocks
+    const track = engine.block.create('track');
+    engine.block.appendChild(page, track);
+
+    // Create a video block and add it to the track
+    const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4';
+    const videoBlock = engine.block.create('graphic');
+    engine.block.setShape(videoBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(videoBlock, 1920);
+    engine.block.setHeight(videoBlock, 1080);
+
+    // Create and configure video fill
+    const videoFill = engine.block.createFill('video');
+    engine.block.setString(videoFill, 'fill/video/fileURI', videoUri);
+    engine.block.setFill(videoBlock, videoFill);
+
+    // Add to track and set duration
+    engine.block.appendChild(track, videoBlock);
+    engine.block.setDuration(videoBlock, 10);
+
+    await engine.block.forceLoadAVResource(videoFill);
+
+    const videoWidth = engine.block.getVideoWidth(videoFill);
+    const videoHeight = engine.block.getVideoHeight(videoFill);
+    const totalDuration = engine.block.getAVResourceTotalDuration(videoFill);
+    console.log(`Video dimensions: ${videoWidth}x${videoHeight}`);
+    console.log(`Total duration: ${totalDuration}s`);
+
+    if (engine.block.supportsPlaybackControl(page)) {
+      console.log(`Is playing: ${engine.block.isPlaying(page)}`);
+      engine.block.setPlaying(page, true);
+    }
+
+    if (engine.block.supportsPlaybackTime(page)) {
+      engine.block.setPlaybackTime(page, 1.0);
+      console.log(`Playback time: ${engine.block.getPlaybackTime(page)}s`);
+    }
+
+    console.log(
+      `Visible at current time: ${engine.block.isVisibleAtCurrentPlaybackTime(
+        videoBlock
+      )}`
+    );
+
+    engine.block.setSoloPlaybackEnabled(videoFill, true);
+    console.log(
+      `Solo enabled: ${engine.block.isSoloPlaybackEnabled(videoFill)}`
+    );
+    engine.block.setSoloPlaybackEnabled(videoFill, false);
+
+    // Select the video block for inspection
+    engine.block.select(videoBlock);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to play and pause media, seek to specific positions, preview individual blocks with solo mode, check visibility at playback time, and access video resource metadata.
+
+## Force Loading Resources
+
+Media resource metadata is unavailable until the resource is loaded. Call `forceLoadAVResource` on the video fill to ensure dimensions and duration are accessible.
+
+```typescript highlight=highlight-force-load
+await engine.block.forceLoadAVResource(videoFill);
+```
+
+Without loading the resource first, accessing properties like duration or dimensions throws an error.
+
+## Getting Video Metadata
+
+Once the resource is loaded, query the video dimensions and total duration.
+
+```typescript highlight=highlight-get-metadata
+const videoWidth = engine.block.getVideoWidth(videoFill);
+const videoHeight = engine.block.getVideoHeight(videoFill);
+const totalDuration = engine.block.getAVResourceTotalDuration(videoFill);
+```
+
+The `getVideoWidth` and `getVideoHeight` methods return the original video dimensions in pixels. The `getAVResourceTotalDuration` method returns the full duration of the source media in seconds.
+
+## Playing and Pausing
+
+Check if the block supports playback control using `supportsPlaybackControl`, then start or stop playback with `setPlaying`.
+
+```typescript highlight=highlight-playback-control
+if (engine.block.supportsPlaybackControl(page)) {
+  console.log(`Is playing: ${engine.block.isPlaying(page)}`);
+  engine.block.setPlaying(page, true);
+}
+```
+
+The `isPlaying` method returns the current playback state.
+
+## Seeking
+
+To jump to a specific playback position, use `setPlaybackTime`. First, check if the block supports playback time with `supportsPlaybackTime`.
+
+```typescript highlight=highlight-seeking
+if (engine.block.supportsPlaybackTime(page)) {
+  engine.block.setPlaybackTime(page, 1.0);
+  console.log(`Playback time: ${engine.block.getPlaybackTime(page)}s`);
+}
+```
+
+Playback time is specified in seconds. The `getPlaybackTime` method returns the current position.
+
+## Visibility at Current Time
+
+Check if a block is visible at the current playback position using `isVisibleAtCurrentPlaybackTime`. This is useful when blocks have different time offsets or durations.
+
+```typescript highlight=highlight-visibility
+console.log(
+  `Visible at current time: ${engine.block.isVisibleAtCurrentPlaybackTime(
+    videoBlock
+  )}`
+);
+```
+
+## Solo Playback
+
+Solo playback allows you to preview an individual block while the rest of the scene stays frozen. Enable it on a video fill or audio block with `setSoloPlaybackEnabled`.
+
+```typescript highlight=highlight-solo-playback
+engine.block.setSoloPlaybackEnabled(videoFill, true);
+console.log(`Solo enabled: ${engine.block.isSoloPlaybackEnabled(videoFill)}`);
+engine.block.setSoloPlaybackEnabled(videoFill, false);
+```
+
+Enabling solo on one block automatically disables it on all others. This is useful for previewing a specific clip without affecting the overall scene playback.
+
+## Troubleshooting
+
+### Properties Unavailable Before Resource Load
+
+**Symptom**: Accessing duration, dimensions, or trim values throws an error.
+
+**Cause**: Media resource not yet loaded.
+
+**Solution**: Always `await engine.block.forceLoadAVResource()` before accessing these properties.
+
+### Block Not Playing
+
+**Symptom**: Calling `setPlaying(true)` has no effect.
+
+**Cause**: Block doesn't support playback control or scene not in playback mode.
+
+**Solution**: Check `supportsPlaybackControl()` returns true; ensure scene playback is active.
+
+### Solo Playback Not Working
+
+**Symptom**: Enabling solo doesn't isolate the block.
+
+**Cause**: Solo applied to wrong block type or block not visible.
+
+**Solution**: Apply solo to video fills or audio blocks, ensure block is at current playback time.
+
+## Next Steps
+
+<ul className="nx-list-disc nx-list-inside">
+  <li>[Trim Video and Audio](./edit-video/trim.md) - Control which portion of source media plays</li>
+  <li>[Loop Audio](./create-audio/audio/loop.md) - Enable repeating playback for audio blocks</li>
+  <li>[Adjust Volume](./create-video/audio/adjust-volume.md) - Control audio volume and muting</li>
+  <li>[Adjust Speed](./create-video/audio/adjust-speed.md) - Change playback speed for audio</li>
+  <li>[Video Timeline Overview](./create-video/timeline-editor.md) - Timeline editing system</li>
+</ul>
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support