Skip to content

feat(activity-feed-v2): support selecting a time range for audio comments #4816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 8 commits into from
Sep 4, 2026
Merged

feat(activity-feed-v2): support selecting a time range for audio comments #4816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6fcb133
feat(activity-feed-v2): make the composer timestamp range-aware
kduncanhsu Sep 3, 2026
c5137c9
test(audio): remove unneccesary test
kduncanhsu Sep 3, 2026
0910cbe
fix(audio): address coderabbit comment
kduncanhsu Sep 3, 2026
5a7f8b8
fix(audio): address coderabbit comment again
kduncanhsu Sep 4, 2026
afb672c
fix(activity-feed-v2): follow the current preview viewer for range drags
kduncanhsu Sep 4, 2026
a95a300
fix(viewer): address PR comment
kduncanhsu Sep 4, 2026
16a73ae
fix(viewer): address PR comments
kduncanhsu Sep 4, 2026
7c31796
fix(useMediaTimestamp): remove random characters
kduncanhsu Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,25 +381,29 @@ const ActivityFeedV2 = ({
const isVideo = file?.extension ? FILE_EXTENSIONS.video.includes(file.extension) : false;
const isAudio = file?.extension ? FILE_EXTENSIONS.audio.includes(file.extension) : false;
const fileVersionId = file?.file_version?.id;
const isAudioPlayerV2 = isAudio && isAudioPlayerV2Enabled;
const allowVideoTimestamps = isVideo && isTimestampedCommentsEnabled && Boolean(fileVersionId);
const allowAudioTimestamps =
isAudio && isTimestampedCommentsEnabled && isAudioPlayerV2Enabled && Boolean(fileVersionId);
const allowAudioTimestamps = isAudioPlayerV2 && isTimestampedCommentsEnabled && Boolean(fileVersionId);
const allowMediaTimestamps = allowVideoTimestamps || allowAudioTimestamps;
const { timeFormat, fps } = useTimeFormat(isVideo);

const {
formattedTimestamp,
isPressed: isTimestampPressed,
onPressedChange,
resetRange,
timestampEndMs,
timestampMs,
} = useMediaTimestamp(allowMediaTimestamps, timeFormat, fps);
} = useMediaTimestamp(allowMediaTimestamps, timeFormat, fps, {
getViewer,
isAudioPlayerV2,
});

const editorMediaTimestamp = allowMediaTimestamps
? { formattedTimestamp, isPressed: isTimestampPressed, onPressedChange }
: undefined;

const allowCommentMarkers = isVideo || (isAudio && isAudioPlayerV2Enabled);
const allowCommentMarkers = isVideo || isAudioPlayerV2;

React.useEffect(() => {
if (!getViewer || !allowCommentMarkers) return undefined;
Expand Down Expand Up @@ -479,6 +483,7 @@ const ActivityFeedV2 = ({
const snapshot = new Set(filteredItems.map(item => item.id));
await onCommentCreate(text, serialized.hasMention);
knownIdsBeforePostRef.current = snapshot;
resetRange();
} catch (error) {
// eslint-disable-next-line no-console
console.error('ActivityFeedV2: failed to post comment', error);
Expand All @@ -491,6 +496,7 @@ const ActivityFeedV2 = ({
isRichTextEnabled,
isTimestampPressed,
onCommentCreate,
resetRange,
timestampEndMs,
timestampMs,
],
Expand Down
163 changes: 163 additions & 0 deletions src/elements/content-sidebar/activity-feed-v2/__tests__/ActivityFeedV2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1149,6 +1149,169 @@ describe('elements/content-sidebar/activity-feed-v2/ActivityFeedV2', () => {
});
});

describe('audio comment ranges', () => {
const mountAudio = (currentTime: number = 0) => {
const container = document.createElement('div');
container.className = 'bp-media-container';
const media = document.createElement('audio');
Object.defineProperty(media, 'currentTime', { configurable: true, value: currentTime, writable: true });
Object.defineProperty(media, 'paused', { configurable: true, value: true, writable: true });
media.pause = jest.fn();
container.appendChild(media);
document.body.appendChild(container);
return { cleanup: () => container.remove(), media };
};

const createRangeViewer = () => {
const listeners: Record<string, ((payload: unknown) => void) | undefined> = {};
const viewer = {
addListener: jest.fn((event: string, handler: (payload: unknown) => void) => {
listeners[event] = handler;
}),
emit: jest.fn(),
removeListener: jest.fn((event: string) => {
delete listeners[event];
}),
};
return {
commitDrag: (payload: unknown) => listeners.comment_range_draft_change?.(payload),
getViewer: () => viewer,
rangeEmits: () =>
viewer.emit.mock.calls.filter(([event]) => String(event).startsWith('comment_range_draft')),
viewer,
};
};

const audioFile = { extension: 'mp3', file_version: { id: '99' }, permissions: { can_comment: true } };
const videoFile = { extension: 'mp4', file_version: { id: '99' }, permissions: { can_comment: true } };

test('should ask the viewer for handles when the audio toggle is pressed', async () => {
const { cleanup, media } = mountAudio();
const { getViewer, rangeEmits } = createRangeViewer();
try {
render(
<ActivityFeedV2
currentUser={mockCurrentUser}
feedItems={[] as ActivityFeedV2Props['feedItems']}
file={audioFile}
getViewer={getViewer}
isAudioPlayerV2Enabled
isTimestampedCommentsEnabled
/>,
);
Object.defineProperty(media, 'currentTime', { configurable: true, value: 8.055, writable: true });
await act(async () => {
lastEditorProps.videoTimestamp?.onPressedChange(true);
});

expect(rangeEmits()).toEqual([['comment_range_draft', { endMs: null, startMs: 8055 }]]);
} finally {
cleanup();
}
});

test('should never ask for handles on a video file', async () => {
const { cleanup, media } = mountAudio();
const { getViewer, rangeEmits } = createRangeViewer();
try {
render(
<ActivityFeedV2
currentUser={mockCurrentUser}
feedItems={[] as ActivityFeedV2Props['feedItems']}
file={videoFile}
getViewer={getViewer}
isAudioPlayerV2Enabled
isTimestampedCommentsEnabled
/>,
);
Object.defineProperty(media, 'currentTime', { configurable: true, value: 8.055, writable: true });
await act(async () => {
lastEditorProps.videoTimestamp?.onPressedChange(true);
});

expect(rangeEmits()).toEqual([]);
} finally {
cleanup();
}
});

test('should post range markup after a handle drag commits', async () => {
const { cleanup, media } = mountAudio();
const { commitDrag, getViewer } = createRangeViewer();
mockSerializeMentionMarkup.mockReturnValue({ hasMention: false, text: 'great take' });
const onCommentCreate = jest.fn();
try {
render(
<ActivityFeedV2
currentUser={mockCurrentUser}
feedItems={[] as ActivityFeedV2Props['feedItems']}
file={audioFile}
getViewer={getViewer}
isAudioPlayerV2Enabled
isTimestampedCommentsEnabled
onCommentCreate={onCommentCreate}
/>,
);
Object.defineProperty(media, 'currentTime', { configurable: true, value: 8.055, writable: true });
await act(async () => {
lastEditorProps.videoTimestamp?.onPressedChange(true);
});
await act(async () => {
commitDrag({ endMs: 12000, startMs: 8055 });
});
await act(async () => {
await lastEditorProps.onPost?.({ type: 'doc', content: [] });
});

expect(onCommentCreate).toHaveBeenCalledWith(
'#[timestamp:8055,endTimestamp:12000,versionId:99] great take',
false,
);
} finally {
cleanup();
}
});

test('should drop the range back to a single timestamp after a successful post', async () => {
const { cleanup, media } = mountAudio();
const { commitDrag, getViewer, rangeEmits } = createRangeViewer();
mockSerializeMentionMarkup.mockReturnValue({ hasMention: false, text: 'great take' });
const onCommentCreate = jest.fn();
try {
render(
<ActivityFeedV2
currentUser={mockCurrentUser}
feedItems={[] as ActivityFeedV2Props['feedItems']}
file={audioFile}
getViewer={getViewer}
isAudioPlayerV2Enabled
isTimestampedCommentsEnabled
onCommentCreate={onCommentCreate}
/>,
);
Object.defineProperty(media, 'currentTime', { configurable: true, value: 8.055, writable: true });
await act(async () => {
lastEditorProps.videoTimestamp?.onPressedChange(true);
});
await act(async () => {
commitDrag({ endMs: 12000, startMs: 8055 });
});
await act(async () => {
await lastEditorProps.onPost?.({ type: 'doc', content: [] });
});
onCommentCreate.mockClear();
await act(async () => {
await lastEditorProps.onPost?.({ type: 'doc', content: [] });
});

expect(rangeEmits().pop()).toEqual(['comment_range_draft', { endMs: null, startMs: 8055 }]);
expect(onCommentCreate).toHaveBeenCalledWith('#[timestamp:8055,versionId:99] great take', false);
} finally {
cleanup();
}
});
});

describe('filter controls', () => {
test('should default showResolved and showOnlyMentionsMe to false in the filter menu', () => {
render(<ActivityFeedV2 currentUser={mockCurrentUser} feedItems={[] as ActivityFeedV2Props['feedItems']} />);
Expand Down
Loading
Loading