add timeline

Author: oliverlaz

packages/client/src/Call.ts

@@ -2237,13 +2237,10 @@ export class Call {
 
   /**
    * Allows you to grant or revoke a specific permission to a user in a call. The permissions are specific to the call experience and do not survive the call itself.
-   *
    * When revoking a permission, this endpoint will also mute the relevant track from the user. This is similar to muting a user with the difference that the user will not be able to unmute afterwards.
-   *
    * Supported permissions that can be granted or revoked: `send-audio`, `send-video` and `screenshare`.
    *
    * `call.permissions_updated` event is sent to all members of the call.
-   *
    */
   updateUserPermissions = async (data: UpdateUserPermissionsRequest) => {
     return this.streamClient.post<
@@ -2567,18 +2564,23 @@ export class Call {
     sessionId?: string;
     userId?: string;
     userSessionId?: string;
+    kind?: 'timeline' | 'details';
   }): Promise<any> => {
     const {
       sessionId = this.state.session?.id,
       userId = this.currentUserId,
       userSessionId = this.unifiedSessionId,
+      kind = 'details',
     } = opts;
     // FIXME OL: not yet part of the API
     if (!sessionId) return;
+    const base = `${this.streamClient.baseURL}/call_stats/${this.type}/${this.id}/${sessionId}`;
     const endpoint =
       userId && userSessionId
-        ? `https://video-edge-frankfurt-ce1.stream-io-api.com/video/call_stats/${this.type}/${this.id}/${sessionId}/participant/${userId}/${userSessionId}/details`
-        : `https://video-edge-frankfurt-ce1.stream-io-api.com/video/call_stats/${this.type}/${this.id}/${sessionId}/participants`;
+        ? kind === 'details'
+          ? `${base}/participant/${userId}/${userSessionId}/details`
+          : `${base}/participants/${userId}/${userSessionId}/timeline`
+        : `${base}/participants`;
     return this.streamClient.get(endpoint);
   };
 

sample-apps/react/react-dogfood/components/DevMenu.tsx

@@ -112,11 +112,21 @@ export const DevMenu = () => {
       {call && localParticipant && (
         <a
           className="rd__link rd__link--faux-button rd__link--align-left"
-          href={`/stats/${call.cid}?user_id=${call.currentUserId}&user_session_id=${call['unifiedSessionId'] || localParticipant.sessionId}`}
+          href={`/stats/${call.cid}?user_id=${call.currentUserId}&user_session_id=${call['unifiedSessionId'] || localParticipant.sessionId}&kind=details`}
           rel="noreferrer"
           target="_blank"
         >
-          Go to {localParticipant?.name || 'User'} Stats
+          Go to {localParticipant?.name || 'User'} Stats (Details)
+        </a>
+      )}
+      {call && localParticipant && (
+        <a
+          className="rd__link rd__link--faux-button rd__link--align-left"
+          href={`/stats/${call.cid}?user_id=${call.currentUserId}&user_session_id=${call['unifiedSessionId'] || localParticipant.sessionId}&kind=timeline`}
+          rel="noreferrer"
+          target="_blank"
+        >
+          Go to {localParticipant?.name || 'User'} Stats (Timeline)
         </a>
       )}
     </ul>

sample-apps/react/react-dogfood/pages/stats/[cid].tsx

@@ -36,9 +36,12 @@ export default function Stats(props: ServerSideCredentialsProps) {
         const userSessionId = router.query['user_session_id'] as
           | string
           | undefined;
+        const kind =
+          (router.query['kind'] as 'details' | 'timeline') || 'details';
         const stats = await _call.getCallParticipantsStats({
           userId,
           userSessionId,
+          kind,
         });
         console.log('Call participants stats:', stats);
         setData(stats);