To v1.83

Version 1.83 makes the video timeline configurable. A timeline you build with Timeline.remember() alone now renders its tracks and nothing else: 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, Timeline 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 adds headerListBuilder, addClipButton, and addAudioButton to TimelineBuilder, so you set each of the three surfaces. This is a breaking change: the defaults of these properties render none of them.

Do I need to migrate?#

You are affected if your configuration builds the timeline without these properties, as every configuration written before v1.83 does. The Video Editor starter kit built its timeline this way before v1.83, in component/BottomPanel.kt:

@Composable
fun rememberBottomPanel() = Timeline.remember()

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#

Set the header and both buttons on the timeline’s builder. 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 androidx.compose.runtime.Composable
import ly.img.editor.core.component.Timeline
import ly.img.editor.core.component.remember

@Composable
fun rememberBottomPanel() = Timeline.remember()

Now#

import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import ly.img.editor.core.component.Timeline
import ly.img.editor.core.component.remember
import ly.img.editor.core.component.rememberAddAudio
import ly.img.editor.core.component.rememberAddClip
import ly.img.editor.core.component.rememberLoop
import ly.img.editor.core.component.rememberPlayPause
import ly.img.editor.core.component.rememberTimecode
import ly.img.editor.core.component.rememberToggleExpanded

@Composable
fun rememberBottomPanel() = Timeline.remember {
    headerListBuilder = {
        Timeline.HeaderListBuilder.remember {
            aligned(alignment = Alignment.Start) {
                add { Timeline.Label.rememberTimecode() }
            }
            aligned(alignment = Alignment.CenterHorizontally) {
                add { Timeline.Button.rememberPlayPause() }
            }
            aligned(alignment = Alignment.End) {
                add { Timeline.Button.rememberLoop() }
                add { Timeline.Button.rememberToggleExpanded() }
            }
        }
    }
    addClipButton = { Timeline.Button.rememberAddClip() }
    addAudioButton = { Timeline.Button.rememberAddAudio() }
}

The snippet keeps the name rememberBottomPanel(), so it replaces component/BottomPanel.kt in a starter kit you copied before v1.83. The v1.83 starter kit keeps the same block in rememberTimeline() in component/Timeline.kt, and rememberBottomPanel() calls it. If you set up the bottom panel yourself, return the same Timeline.remember block from your bottomPanel.

Leave out an assignment to remove that surface. To keep the loop toggle beside the play button, move rememberLoop() into the centered group. The Video Timeline guide shows how to change the header, choose what the two buttons offer, and set the height of the timeline.