Add VideoEventTimeline component by horatiualmasan · Pull Request #1672 · lightly-ai/lightly-studio

horatiualmasan · 2026-07-16T21:03:47Z

What has changed and why?

Adds a presentation-only VideoEventTimeline component that renders VideoEvents as clickable bars positioned by start/end time, stacked into lanes, with an optional playhead and header. Clicking a bar calls onSeek; very short events keep a minimum clickable width. It takes already-derived events (from PR #1671), holds no playback state, and is exported for reuse. Includes Storybook stories.

How has it been tested?

Component tests in VideoEventTimeline.test.ts plus Storybook stories for the empty, single-lane, and overlapping-events cases.

Did you update CHANGELOG.md?

Yes
Not needed (internal change)

Summary by CodeRabbit

New Features
- Added a VideoEventTimeline component to display time-based events as clickable, lane-stacked bars on a timeline.
- Includes optional header/title + event count, an empty-state message, and a playhead indicator when duration is available.
- Clicking an event seeks to its start time.
- Re-exported the component for use via the shared component exports.
Tests
- Added Vitest coverage for rendering, bar positioning, click-to-seek behavior, empty state, and header visibility.
Documentation
- Expanded Storybook stories, including an interactive playground, single-event views, and custom titles.

…ions' into horatiu-lig-9805-import-activitynet-style-event-annotations-3

…ent-annotations-3

Previously, filtering and counting video annotations only considered annotations attached to a video's frames. Videos can also carry annotations directly (e.g. ActivityNet-style event/classification labels on the whole video). This makes both the video filter and the annotation counter consider these direct video annotations in addition to frame annotations.

…ions-3' into horatiu-lig-9806-filter-videos-by-event-metadata

Mirrors a <video> element's playback state into reactive fields and exposes intent callbacks (seek, play/pause, mute, fullscreen) for a custom control bar. Listening via native events keeps it composable with handlers on the element. Covered by a harness-driven unit test. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Compose useVideoPlayback + VideoControls, forcing native <video controls> off so the full-width scrubber can host aligned timeline overlays. Adds a startTimeS prop (null waits for a deep-link timestamp) and a region ref for fullscreen. Updates tests and stories accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Hand the deep-linked frame's timestamp to VideoPlayer via startTimeS instead of seeking after load, and remount on frame-number change with a composite #key. Align the annotation overlay to the <video> box and fix min-h-0 layout so the player fills its card. Adds a VideoDetails test covering the frame-load branch and deep-link handoff. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Full-width scrubber + transport buttons that own no playback state and call back on user intent. Includes helpers (formatTime, clampPercent, timeFromClientX) and unit tests. Exported from the components barrel. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Interactive Playground plus paused / near-end states, on a dark backdrop matching how the bar overlays a video. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Hand the deep-linked frame's timestamp to VideoPlayer via startTimeS instead of seeking after load, and remount on frame-number change with a composite #key. Align the annotation overlay to the <video> box and fix min-h-0 layout so the player fills its card. Adds a VideoDetails test covering the frame-load branch and deep-link handoff. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Compose useVideoPlayback + VideoControls, forcing native <video controls> off so the full-width scrubber can host aligned timeline overlays. Adds a startTimeS prop (null waits for a deep-link timestamp) and a region ref for fullscreen. Updates tests and stories accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Mirrors a <video> element's playback state into reactive fields and exposes intent callbacks (seek, play/pause, mute, fullscreen) for a custom control bar. Listening via native events keeps it composable with handlers on the element. Covered by a harness-driven unit test. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Interactive Playground plus paused / near-end states, on a dark backdrop matching how the bar overlays a video.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-07-16T21:04:40Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 344c85b4-0c65-433d-a688-550aadaf2d2b

📥 Commits

Reviewing files that changed from the base of the PR and between 1d685ce and 8a8f869.

📒 Files selected for processing (1)

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte

🚧 Files skipped from review as they are similar to previous changes (1)

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte

📝 Walkthrough

Walkthrough

The pull request adds a reusable VideoEventTimeline Svelte component with time-positioned event bars, lane stacking, playhead and seek interaction, empty/header states, public export, tests, and expanded Storybook scenarios.

Changes

Video event timeline

Layer / File(s)	Summary
Timeline rendering and interaction `lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte`	Adds time-positioned event bars, non-overlapping lanes, optional header and playhead, empty state, accessibility labels, and seek callbacks.
Public export and behavioral validation `lightly_studio_view/src/lib/components/index.ts`, `lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.test.ts`	Re-exports the component and tests rendering, positioning, seeking, empty state, and header visibility.
Storybook scenarios `lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte`	Adds synthetic event datasets, an interactive playground, and default, empty, overlapping-lane, single-event, no-header, and custom-title stories.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

lightly-ai/lightly-studio#1671: Provides the toVideoEvents utility and event shape used by the Storybook helper.

Suggested reviewers: leonardorosaa

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: adding the VideoEventTimeline component.
Description check	✅ Passed	The description covers the change, motivation, testing, and changelog status, with only minor template details missing.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

…ts-model' into horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline

horatiualmasan · 2026-07-17T08:55:56Z

/review

…line.a

…o horatiu-lig-9807-show-event-bars-on-the-timeline.b

…o horatiu-lig-9807-show-event-bars-on-the-timeline.c

…o horatiu-lig-9807-show-event-bars-on-the-timeline.d

…o horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-model

…ts-model' into horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline

…line-3-events-timeline

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte`:
- Line 111: Update the event button styling in VideoEventTimeline to explicitly
set its text color to event.contrastColor alongside the existing background and
border colors, ensuring labels remain readable regardless of event.color or
inherited theme styles.
- Around line 96-100: Update the event-bar calculations in the timeline markup
around leftPercent and widthPercent so the computed bar width cannot extend past
100%; clamp leftPercent against the available track space after applying
MIN_BAR_WIDTH_PERCENT, while preserving the existing minimum-width behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ad3acef1-31d9-4909-a4f4-2fed8f46ab7e

📥 Commits

Reviewing files that changed from the base of the PR and between e3d13e7 and bf3e35a.

📒 Files selected for processing (4)

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte
lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte
lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.test.ts
lightly_studio_view/src/lib/components/index.ts

coderabbitai

🧹 Nitpick comments (1)

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte (1)
53-53: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove extraneous asChild prop.

The <Story> component from @storybook/addon-svelte-csf does not use an asChild prop and simply renders its default slot. Including it might cause an unexpected prop warning or TypeScript error.
♻️ Proposed fix
- <Story name="Playground" asChild>
+ <Story name="Playground">
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte`
at line 53, Remove the extraneous asChild prop from the Playground Story
declaration in VideoEventTimeline.stories.svelte, leaving the Story component to
render its default slot without additional props.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte`:
- Line 53: Remove the extraneous asChild prop from the Playground Story
declaration in VideoEventTimeline.stories.svelte, leaving the Story component to
render its default slot without additional props.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 179aea7a-15ae-4281-a858-310e0b3fdf0a

📥 Commits

Reviewing files that changed from the base of the PR and between bf3e35a and 1d685ce.

📒 Files selected for processing (1)

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte

horatiualmasan and others added 30 commits July 7, 2026 17:54

Add TemporalSpan model

d211bce

update

0c66a38

fix

3e04899

try eager load

bd48016

fix warning

f668678

Add video annotation from activitynet

f3956d1

remove not needed joins

07ddf00

Merge branch 'horatiu-lig-9805-import-activitynet-style-event-annotat…

37441f5

…ions' into horatiu-lig-9805-import-activitynet-style-event-annotations-3

simplify

ebe86db

Merge branch 'main' into horatiu-lig-9805-import-activitynet-style-ev…

84a4063

…ent-annotations-3

fix merge

47ec651

add example sctipt

9f97a84

format

d95200c

update

6a243bd

Merge branch 'main' into horatiu-lig-9805-import-activitynet-style-ev…

1a24532

…ent-annotations-3

Merge branch 'horatiu-lig-9805-import-activitynet-style-event-annotat…

3acc186

…ions-3' into horatiu-lig-9806-filter-videos-by-event-metadata

fix merge error

bdc02d2

format

2cdba41

Add Storybook stories for VideoControls

9f287db

Interactive Playground plus paused / near-end states, on a dark backdrop matching how the bar overlays a video. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

format

e2a18ce

Add Storybook stories for VideoControls

ab6acde

Interactive Playground plus paused / near-end states, on a dark backdrop matching how the bar overlays a video.

update

35328bb

horatiualmasan and others added 3 commits July 16, 2026 23:35

reenable test

776baa3

Add video event model (toVideoEvents, assignEventLanes)

0f2b999

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Add VideoEventTimeline component

8e2426e

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

horatiualmasan requested a review from a team as a code owner July 16, 2026 21:03

horatiualmasan and others added 2 commits July 17, 2026 10:11

add AnnotationType.CLASSIFICATION

717ebf2

Merge branch 'horatiu-lig-9807-show-event-bars-on-the-timeline-3-even…

b8ada23

…ts-model' into horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline

horatiualmasan and others added 7 commits July 17, 2026 14:11

update

30718ba

Merge branch 'main' into horatiu-lig-9807-show-event-bars-on-the-time…

d467a37

…line.a

Merge branch 'horatiu-lig-9807-show-event-bars-on-the-timeline.a' int…

cf0ee5e

…o horatiu-lig-9807-show-event-bars-on-the-timeline.b

Merge branch 'horatiu-lig-9807-show-event-bars-on-the-timeline.b' int…

a604ba9

…o horatiu-lig-9807-show-event-bars-on-the-timeline.c

Merge branch 'horatiu-lig-9807-show-event-bars-on-the-timeline.c' int…

9563c27

…o horatiu-lig-9807-show-event-bars-on-the-timeline.d

Merge branch 'horatiu-lig-9807-show-event-bars-on-the-timeline.d' int…

07ad39d

…o horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-model

Merge branch 'horatiu-lig-9807-show-event-bars-on-the-timeline-3-even…

5f70a87

…ts-model' into horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline

Base automatically changed from horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-model to main July 20, 2026 17:59

Merge branch 'main' into horatiu-lig-9807-show-event-bars-on-the-time…

bf3e35a

…line-3-events-timeline

coderabbitai Bot reviewed Jul 21, 2026

View reviewed changes

Comment thread lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte Outdated

Comment thread lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte

LeonardoRosaa added 2 commits July 21, 2026 11:52

add storybook

1d685ce

prevent short bars from overflowing the track boundary

8a8f869

coderabbitai Bot reviewed Jul 21, 2026

View reviewed changes

LeonardoRosaa enabled auto-merge July 21, 2026 15:02

LeonardoRosaa approved these changes Jul 21, 2026

View reviewed changes

LeonardoRosaa added this pull request to the merge queue Jul 21, 2026

Merged via the queue into main with commit 3856273 Jul 21, 2026
22 checks passed

LeonardoRosaa deleted the horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline branch July 21, 2026 15:35

This was referenced Jul 21, 2026

Wire event bar into VideoPlayer, VideoControls and VideoDetails #1673

Merged

Edit video events in the timeline #1677

Merged

Add new video events #1678

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add VideoEventTimeline component#1672

Add VideoEventTimeline component#1672
LeonardoRosaa merged 49 commits into
mainfrom
horatiu-lig-9807-show-event-bars-on-the-timeline-3-events-timeline

horatiualmasan commented Jul 16, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 16, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

horatiualmasan commented Jul 17, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

horatiualmasan commented Jul 16, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What has changed and why?

How has it been tested?

Did you update CHANGELOG.md?

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

horatiualmasan commented Jul 17, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

horatiualmasan commented Jul 16, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 16, 2026 •

edited

Loading