To v1.83

Version 1.83 makes the video timeline configurable. A timeline you mount without a configuration now renders its tracks alone: no header, and no “Add Clip” or “Add Audio” button. Your code keeps compiling, so check your video editor after you upgrade.

What changed#

Before v1.83, DefaultTimelineComponent always showed three surfaces around its tracks:

• The header, with the timecode, the play/pause button, the loop toggle, and the expand/collapse toggle.
• The “Add Clip” button after the last clip of the background track.
• The “Add Audio” button below the overlay tracks.

Version 1.83 renames DefaultTimelineComponent to Timeline and adds Timeline.Configuration, which sets each of the three surfaces. This is a breaking change: the defaults of Timeline.Configuration render none of them. The old name still compiles with a deprecation warning, so an unchanged integration builds and shows only the tracks.

Do I need to migrate?#

You are affected if your editor configuration mounts the timeline without a configuration. The Video Editor starter kit did this before v1.83, in BottomPanel+Video.swift:

builder.content { context in
  DefaultTimelineComponent(context: context)
}

Timeline(context: context) without a configuration argument has the same result.

You are not affected if you start from the v1.83 Video Editor Starter Kit. It declares the three surfaces, so its timeline does not change.

Declare the timeline’s surfaces#

Pass a Timeline.Configuration that declares the header and both buttons. The v1.83 Video Editor starter kit builds its timeline this way. You get the three surfaces back, and you can change each one.

Before#

import IMGLYEditor

extension VideoEditorConfiguration {
  static var defaultBottomPanel: BottomPanel.Configuration {
    BottomPanel.Configuration { builder in
      builder.content { context in
        DefaultTimelineComponent(context: context)
      }
    }
  }
}

Now#

import IMGLYEditor

extension VideoEditorConfiguration {
  static var defaultBottomPanel: BottomPanel.Configuration {
    BottomPanel.Configuration { builder in
      builder.content { context in
        Timeline(context: context, configuration: .videoStarterKit)
      }
    }
  }
}

private extension Timeline.Configuration {
  static var videoStarterKit: Timeline.Configuration {
    Timeline.Configuration { builder in
      builder.header { _ in
        Timeline.ItemGroup(placement: .leading) {
          Timeline.Labels.timecode()
          Timeline.Spacer()
        }
        Timeline.ItemGroup(placement: .center) {
          Timeline.Buttons.playPause()
        }
        Timeline.ItemGroup(placement: .trailing) {
          Timeline.Buttons.loop()
          Timeline.Spacer()
          Timeline.Buttons.toggleExpanded()
        }
      }
      builder.addClip = Timeline.Buttons.addClip()
      builder.addAudio = Timeline.Buttons.addAudio()
    }
  }
}

The v1.83 starter kit has the same code in BottomPanel+Video.swift, so you can copy it over that file in your project. If you set up the bottom panel yourself, pass the same configuration where you mount Timeline.

Leave out a line to remove that surface. The Video Timeline guide shows how to change the header, choose what the two buttons offer, and set the height of the timeline.