Wire event bar into VideoPlayer, VideoControls and VideoDetails

[horatiualmasan]

What has changed and why?

Wires the event bar into the real player. VideoControls gains a children snippet rendered below the transport buttons, sharing the scrubber's padded, full-width coordinate system so bars line up with the scrubber. VideoPlayer accepts events and durationS props and renders VideoEventTimeline inside the controls (headerless), preferring an explicit duration so the scrubber and bars agree before metadata loads. VideoDetails derives events from the sample's annotations and passes them down. No event bar renders when there are no events.

How has it been tested?

Added VideoPlayer tests and stories covering the events/duration props and event-bar rendering. Manually verified on a video sample with imported ActivityNet-style events that bars appear, align with the scrubber, and seek on click.
Run example_activitynet.py to test locally

Did you update CHANGELOG.md?

• Yes
• Not needed (internal change)

Summary by CodeRabbit

• New Features

  • Added support for displaying time-aligned events and labels on the video timeline.
  • Added optional duration support to improve timeline positioning.
  • Enabled additional content below video controls.

• Bug Fixes

  • Improved synchronization between the video scrubber and event timeline.

• Tests

  • Added coverage for event timeline visibility and label rendering.

[coderabbitai]

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: 5441d12c-8d38-4083-b93e-96975e52d41e

📥 Commits

Reviewing files that changed from the base of the PR and between 3856273 and f212218.

📒 Files selected for processing (5)

• lightly_studio_view/src/lib/components/VideoControls/VideoControls.svelte
• lightly_studio_view/src/lib/components/VideoDetails/VideoDetails.svelte
• lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.stories.svelte
• lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.svelte
• lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.test.ts

---

📝 Walkthrough

Walkthrough

VideoPlayer now accepts video events and explicit duration values, renders an aligned event timeline, and passes shared duration data to its controls. VideoDetails supplies transformed annotations, while stories and tests cover event rendering.

Changes

Video event timeline

Layer / File(s)	Summary
Controls content extension lightly_studio_view/src/lib/components/VideoControls/VideoControls.svelte	VideoControls accepts an optional Svelte Snippet and renders it below the transport controls.
Player event timeline lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.svelte	VideoPlayer accepts events and durationS, derives an effective duration, and conditionally renders the event timeline using the shared coordinate system.
Event data wiring and validation lightly_studio_view/src/lib/components/VideoDetails/VideoDetails.svelte, lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.stories.svelte, lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.test.ts	Video annotations are transformed into events, an event-enabled Storybook scenario is added, and tests cover timeline visibility and event labels.

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

Sequence Diagram(s)

sequenceDiagram
  participant VideoDetails
  participant VideoPlayer
  participant VideoControls
  participant VideoEventTimeline
  VideoDetails->>VideoPlayer: events and durationS
  VideoPlayer->>VideoControls: effectiveDurationS
  VideoPlayer->>VideoEventTimeline: events and effectiveDurationS

Loading

Possibly related PRs

• lightly-ai/lightly-studio#1671: Introduces the toVideoEvents utility used by this event flow.
• lightly-ai/lightly-studio#1672: Adds the VideoEventTimeline component used for event rendering.
• lightly-ai/lightly-studio#1662: Wires VideoControls into VideoPlayer, which this change extends.

Suggested reviewers: leonardorosaa

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: wiring the event bar into the video player and related components.
Description check	✅ Passed	The description follows the template with clear change summary, testing notes, and changelog status.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 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-wiring

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[horatiualmasan]

/review