To v1.82

The controls bar above the video timeline (play/pause, playback info, loop, split, timeline zoom, expand/collapse) used to be hardcoded. It is now rendered from the new 'ly.img.video.timeline.controls.bar' UI area through the same Component Order API you already use for the dock, navigation bar, and canvas bar.

This is a breaking change: the SDK no longer ships a built-in order for this bar. If you upgrade without configuring it, the timeline controls bar is empty and is not rendered. To keep the previous controls, set the order explicitly during initialization — the starter kits do this in src/imgly/config/ui/videoTimeline.ts — or pin your configuration below v1.82 with cesdk.setEditorCompatibilityVersion, which restores the previous bar for you. See Editor Compatibility.

Restore the previous controls#

Add this call to your editor setup to reproduce the pre-v1.82 layout exactly:

cesdk.ui.setComponentOrder({ in: 'ly.img.video.timeline.controls.bar' }, [
  'ly.img.video.timeline.background',
  'ly.img.video.timeline.split',
  'ly.img.spacer',
  'ly.img.video.timeline.playbackInfo',
  'ly.img.video.timeline.playPause',
  'ly.img.video.timeline.loop',
  'ly.img.spacer',
  'ly.img.video.timeline.zoom',
  'ly.img.video.timeline.toggle'
]);

ly.img.spacer components separate the left, center, and right groups.

For a complete, up-to-date reference of how a video editor wires the timeline controls bar, see the starter kit repositories and follow the full starter kit upgrade:

• starterkit-video-editor-ts-web
• starterkit-advanced-video-editor-ts-web

What changed#

The bar is composed from registered components in a configurable order:

All Component Order API methods work on the new area:

cesdk.ui.getComponentOrder({ in: 'ly.img.video.timeline.controls.bar' });

// Remove the loop toggle from a configured order
cesdk.ui.removeOrderComponent({
  in: 'ly.img.video.timeline.controls.bar',
  match: 'ly.img.video.timeline.loop'
});

Custom components are registered the same way as for the other bars:

cesdk.ui.registerComponent('my.custom.button', ({ builder }) => {
  builder.Button('my.custom.button', {
    label: 'Export Clip',
    onClick: () => {
      /* ... */
    }
  });
});

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.video.timeline.controls.bar', position: 'end' },
  'my.custom.button'
);

Fonts#

v1.82 also ships the bundled typefaces as WOFF2 instead of TTF and OTF. Most integrations need no changes, but a scene that stores a font path into the asset bundle you serve needs a one-time migration. See To v1.82 (Fonts).

Clip options button feature flag#

The ellipsis (“more options”) button on timeline clips now has its own Feature API flag, ly.img.video.timeline.clip.menu. It is enabled by default, so no change is needed to keep the button. If you maintain an explicit feature allowlist, add the flag — or pin below v1.82, which adds it for you. To hide the button without disabling other features:

// Hide the ellipsis button on all timeline clips
cesdk.feature.disable('ly.img.video.timeline.clip.menu');

// Show it again (default)
cesdk.feature.enable('ly.img.video.timeline.clip.menu');