Skip to content

feat(video): show timestamped comment markers on the V2 scrubber#1685

Draft
jmcbgaston wants to merge 2 commits into
box:masterfrom
jmcbgaston:add-video-scrubber-timestamp-markers
Draft

feat(video): show timestamped comment markers on the V2 scrubber#1685
jmcbgaston wants to merge 2 commits into
box:masterfrom
jmcbgaston:add-video-scrubber-timestamp-markers

Conversation

@jmcbgaston

@jmcbgaston jmcbgaston commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

Description

Renders avatar markers on the V2 video scrubber for every timestamped comment on the file. Hovering a marker shows a bubble with author, timecode, message body, and relative time. Clicking a marker pauses playback and emits a timestamped_comment_click viewer event so the host app can route its sidebar to the matching comment.

The viewer self-fetches its data via a new TimestampedCommentsAPI backed by /2.0/file_activities. Resolved comments are dropped from the parsed result so the bar mirrors the activity sidebar's filtered view. The viewer also self-listens for a host-emitted timestamped_comment_changed event and refetches when fired — letting any sidebar-side create / resolve / delete refresh the markers without the host reaching into BCP internals.

Gated behind the existing videoPlayerV2.enabled viewer option.

Test plan

  • Open a video file that has timestamped comments. Confirm an avatar + tick mark renders on the scrubber at each comment's timestamp; users without an avatar image fall back to initials.
  • Hover a marker. Confirm the bubble shows author, timecode, message, and relative time.
  • Click a marker. Confirm the video pauses and the host-side timestamped_comment_click event fires with the matching comment payload.
  • With videoPlayerV2.enabled off, confirm no markers render and no extra /2.0/file_activities request is made.
  • Emit timestamped_comment_changed on the viewer after a sidebar-side create / resolve / delete. Confirm the bar refreshes within one refetch round-trip and a resolved comment's marker disappears.

Semantic release type

  • feat - New feature

Renders avatar markers on the V2 video scrubber for every timestamped
comment on the file, with a hover bubble (author, timecode, message,
relative-time) and a click that pauses playback and emits a
`timestamped_comment_click` viewer event for the host to act on (e.g.
focus the matching comment in the activity sidebar).

The viewer self-fetches its data via a new `TimestampedCommentsAPI`
backed by `/2.0/file_activities` and self-listens for a host-emitted
`timestamped_comment_changed` event so a sidebar-side create/edit/delete
refreshes the markers without any host-side plumbing into BCP internals.

Gated behind the existing `videoPlayerV2.enabled` feature.
Drops `enhanced_comment` entries with `status === 'resolved'` during
parse so the marker overlay mirrors the activity sidebar's filtered
view. Without this, resolving a comment in the sidebar left an orphan
marker on the bar until the next page load; the row 9/10 reverse-emit
+ refetch loop already refreshes the data, this filter just lets the
new snapshot drop the stale entry.

Scopes the `/2.0/file_activities` request back to
`enhanced_comment,task,versions`. Annotation markers (`enhanced_annotation`
with `target.location.type === 'frame'`) need their own CRUD-parity
mechanism and will land as a separate iteration.

Adds a `handleTimestampedCommentClick` test asserting the marker click
pauses playback and emits `timestamped_comment_click`.
@jmcbgaston jmcbgaston requested a review from a team as a code owner June 23, 2026 01:06
@jmcbgaston jmcbgaston marked this pull request as draft June 23, 2026 01:07
@jmcbgaston jmcbgaston changed the title Add video scrubber timestamp markers feat(video): show timestamped comment markers on the V2 scrubber Jun 23, 2026
const cleaned = name.replace(/[[({<]+.*[\])}>]+/g, '').trim();
if (!cleaned) return '';
return cleaned.charAt(0).toUpperCase();
};

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

consider helper function

const diffMo = Math.round(diffDay / 30);
if (diffMo < 12) return `${diffMo}mo ago`;
return `${Math.round(diffMo / 12)}y ago`;
};

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

consider util function

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant