Skip to content
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.

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

Add initial custom events to rtcstats (for events timeline) #168

Conversation

jamesdools-whereby
Copy link
Contributor

@jamesdools-whereby jamesdools-whereby commented Dec 13, 2023

https://linear.app/whereby/issue/PAN-409/send-all-relevant-custom-events-to-rtc-stats

Test plan

  • run yarn dev
  • Join room connection with local media story and join room
  • Toggle mic, camera and screenshare actions
  • Verify that custom events appear in ws messages
Screenshot 2023-12-13 at 10 33 49

(can also compare to a normal room on prod / pwa to see the equivalent events)

@jamesdools-whereby jamesdools-whereby marked this pull request as ready for review December 13, 2023 12:53
Copy link
Member

@thyal thyal left a comment

Choose a reason for hiding this comment

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

Nice. Works well, just added some suggestions on minor clean up.

Comment on lines 288 to 293
return (
Object.entries(rtcAnalyticsCustomEvents)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
.map(([_, value]) => value.actionType)
.includes(_action.type)
);
Copy link
Member

Choose a reason for hiding this comment

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

Redux toolkit has this helper: isAnyOf, which you can use to check if an action is of a specific type.
I think we can do something like this:

  const actions = Object.values(rtcAnalyticsCustomEvents).map((e) => e.action);
  const isRtcEvent = isAnyOf(...actions);

  return isRtcEvent(action);

Requires some change in the events obj, but I think it should be straightforward. Just import the action creators directly and use those as the action instead of the string.

const state: RootState = getState();
const rtcManager = selectRtcConnectionRaw(state).rtcManager;

const rtcCustomEvent = Object.entries(rtcAnalyticsCustomEvents).find(([_, value]) => value.actionType === type);
Copy link
Member

Choose a reason for hiding this comment

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

Then we can use the same helper here:

    const rtcCustomEvent = Object.values(rtcAnalyticsCustomEvents).find((value) =>
        isAnyOf(value.action)(action)
    );

Comment on lines +27 to +30
actionType: "localParticipant/doEnableAudio/fulfilled",
rtcEventName: "audioEnabled",
getValue: (state: RootState) => selectIsMicrophoneEnabled(state),
getOutput: (value) => ({ enabled: value }),
Copy link
Member

Choose a reason for hiding this comment

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

Let's import the action creators and use them directly.

Suggested change
actionType: "localParticipant/doEnableAudio/fulfilled",
rtcEventName: "audioEnabled",
getValue: (state: RootState) => selectIsMicrophoneEnabled(state),
getOutput: (value) => ({ enabled: value }),
action: doEnableAudio.fulfilled,
rtcEventName: "audioEnabled",
getValue: (state: RootState) => selectIsMicrophoneEnabled(state),
getOutput: (value) => ({ enabled: value }),

@@ -10,3 +14,46 @@ export const rtcEvents = {
rtcManagerDestroyed: createRtcEventAction<void>("rtcManagerDestroyed"),
streamAdded: createRtcEventAction<RtcStreamAddedPayload>("streamAdded"),
};

type RtcAnalyticsCustomEvent = {
actionType: string;
Copy link
Member

Choose a reason for hiding this comment

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

see next comments of why.

Suggested change
actionType: string;
action: Matcher<UnknownAction>;

@jamesdools-whereby jamesdools-whereby force-pushed the jamesdooley/pan-645-add-initial-insights-events-needed-for-charts-microphone branch from cd5a5de to f13ba90 Compare January 3, 2024 14:10
Copy link
Member

@thyal thyal left a comment

Choose a reason for hiding this comment

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

Nice

src/lib/core/redux/slices/localMedia.ts Show resolved Hide resolved
@jamesdools-whereby jamesdools-whereby merged commit c593d75 into development Jan 3, 2024
2 checks passed
@jamesdools-whereby jamesdools-whereby deleted the jamesdooley/pan-645-add-initial-insights-events-needed-for-charts-microphone branch January 3, 2024 14:45
havardholvik pushed a commit that referenced this pull request Jan 8, 2024
* fix: localMediaSlice bug

* Add sendStatsCustomEvent to rtc manager interface

* Add reactor for rtc analytics custom events

* Add screenshare button to storybook

* Task: tidy customEvents object expression
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.

2 participants