From 5deb00b2a22a98ddc5ae646e27e3b2e6040cfe8f Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Mon, 19 Aug 2024 11:17:34 +0200 Subject: [PATCH 1/4] FCE-376 Fix cleanup in disconnect event handler --- .../use-camera-and-microphone/src/DeviceControls.tsx | 2 +- .../use-camera-and-microphone/src/MainControls.tsx | 4 ++-- packages/react-client/src/Client.ts | 6 ++++-- packages/react-client/src/trackManager.ts | 10 +++++++--- packages/react-client/src/types.ts | 2 +- 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/examples/react-client/use-camera-and-microphone/src/DeviceControls.tsx b/examples/react-client/use-camera-and-microphone/src/DeviceControls.tsx index 6b3ed55a..945b9ce8 100644 --- a/examples/react-client/use-camera-and-microphone/src/DeviceControls.tsx +++ b/examples/react-client/use-camera-and-microphone/src/DeviceControls.tsx @@ -38,7 +38,7 @@ export const DeviceControls = ({ className="btn btn-error btn-sm" disabled={!device?.stream} onClick={() => { - device?.cleanup(); + device?.stop(); }} > Stop {type} device diff --git a/examples/react-client/use-camera-and-microphone/src/MainControls.tsx b/examples/react-client/use-camera-and-microphone/src/MainControls.tsx index 7f95319c..3da6840d 100644 --- a/examples/react-client/use-camera-and-microphone/src/MainControls.tsx +++ b/examples/react-client/use-camera-and-microphone/src/MainControls.tsx @@ -375,7 +375,7 @@ export const MainControls = () => { }} defaultOptionText="Select video device" stop={() => { - video.cleanup(); + video.stop(); }} /> @@ -389,7 +389,7 @@ export const MainControls = () => { }} defaultOptionText="Select audio device" stop={() => { - audio.cleanup(); + audio.stop(); }} /> diff --git a/packages/react-client/src/Client.ts b/packages/react-client/src/Client.ts index e9c7b43d..effa5f8d 100644 --- a/packages/react-client/src/Client.ts +++ b/packages/react-client/src/Client.ts @@ -399,8 +399,10 @@ export class Client extends (EventEmitter as { this.tsClient.on("disconnected", () => { this.status = null; - this.videoTrackManager.stopStreaming(); - this.audioTrackManager.stopStreaming(); + + this.videoTrackManager.cleanup() + this.audioTrackManager.cleanup() + this.stateToSnapshot(); this.emit("disconnected", this); diff --git a/packages/react-client/src/trackManager.ts b/packages/react-client/src/trackManager.ts index 293761da..a922a54b 100644 --- a/packages/react-client/src/trackManager.ts +++ b/packages/react-client/src/trackManager.ts @@ -4,8 +4,8 @@ import type { Track } from "./state.types"; import { getRemoteOrLocalTrack } from "./utils/track"; export class TrackManager implements GenericTrackManager { - private mediaManager: GenericMediaManager; - private tsClient: FishjamClient; + private readonly mediaManager: GenericMediaManager; + private readonly tsClient: FishjamClient; private currentTrackId: string | null = null; constructor(tsClient: FishjamClient, deviceManager: GenericMediaManager) { @@ -31,10 +31,14 @@ export class TrackManager implements GenericTrackMa this.mediaManager?.start(deviceId ?? true); }; - public cleanup = async () => { + public stop = async () => { this?.mediaManager?.stop(); }; + public cleanup = () => { + this.currentTrackId = null + }; + public startStreaming = async ( trackMetadata?: TrackMetadata, simulcastConfig?: SimulcastConfig, diff --git a/packages/react-client/src/types.ts b/packages/react-client/src/types.ts index 9963f629..98ebac0a 100644 --- a/packages/react-client/src/types.ts +++ b/packages/react-client/src/types.ts @@ -155,7 +155,7 @@ export interface GenericMediaManager { export interface GenericTrackManager { initialize: (deviceId?: string) => Promise; - cleanup: () => Promise; + stop: () => Promise; startStreaming: ( trackMetadata?: TrackMetadata, simulcastConfig?: SimulcastConfig, From 50f4da55f4e942e9054dafbde2d7918e09662f4b Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Mon, 19 Aug 2024 11:32:40 +0200 Subject: [PATCH 2/4] Expose ScreenShareAPI --- packages/react-client/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-client/src/index.ts b/packages/react-client/src/index.ts index 6a712bc4..84589be8 100644 --- a/packages/react-client/src/index.ts +++ b/packages/react-client/src/index.ts @@ -24,6 +24,7 @@ export type { UseSetupMediaResult, UseSetupMediaConfig, CreateFishjamClient, + ScreenshareApi, UseConnect, GenericTrackManager, } from "./types"; From 906c840ee4f49d42db9e8b076b8ee8e3523ab6d7 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Mon, 19 Aug 2024 11:33:34 +0200 Subject: [PATCH 3/4] Fix format and lint --- packages/react-client/src/Client.ts | 4 ++-- packages/react-client/src/trackManager.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-client/src/Client.ts b/packages/react-client/src/Client.ts index effa5f8d..3ee2aac7 100644 --- a/packages/react-client/src/Client.ts +++ b/packages/react-client/src/Client.ts @@ -400,8 +400,8 @@ export class Client extends (EventEmitter as { this.tsClient.on("disconnected", () => { this.status = null; - this.videoTrackManager.cleanup() - this.audioTrackManager.cleanup() + this.videoTrackManager.cleanup(); + this.audioTrackManager.cleanup(); this.stateToSnapshot(); diff --git a/packages/react-client/src/trackManager.ts b/packages/react-client/src/trackManager.ts index a922a54b..9f43f563 100644 --- a/packages/react-client/src/trackManager.ts +++ b/packages/react-client/src/trackManager.ts @@ -36,7 +36,7 @@ export class TrackManager implements GenericTrackMa }; public cleanup = () => { - this.currentTrackId = null + this.currentTrackId = null; }; public startStreaming = async ( From 4738afe1e72214393929087a5c7b443988332e13 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Mon, 19 Aug 2024 14:30:18 +0200 Subject: [PATCH 4/4] add start streaming prop types --- packages/react-client/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-client/src/types.ts b/packages/react-client/src/types.ts index 98ebac0a..8a6ad492 100644 --- a/packages/react-client/src/types.ts +++ b/packages/react-client/src/types.ts @@ -181,7 +181,7 @@ export type UserMediaAPI = { }; export type ScreenshareApi = { - startStreaming: () => Promise; + startStreaming: (props?: { metadata?: TrackMetadata; requestAudio?: boolean }) => Promise; stopStreaming: () => Promise; stream: MediaStream | null; videoTrack: MediaStreamTrack | null;