From 57c09dbf7fc6e3f417a0eb53ce2be99a996240ef Mon Sep 17 00:00:00 2001
From: Konrad Bochnia <kbochnia@gmail.com>
Date: Wed, 18 Oct 2023 12:25:47 +0200
Subject: [PATCH] Add autoStreaming and preview options to screenshare (#51)

* Fix screenshare state being lost on disconnect

* Add `autoStreaming` and `preview` options to screenshare

* Run prettier
---
 .../package-lock.json                         |  2 +-
 .../src/MainControls.tsx                      | 21 +++++++++++
 src/reducer.tsx                               |  4 +--
 src/useMedia/index.tsx                        | 28 +++++++++++++--
 src/useMedia/types.ts                         |  2 ++
 yarn.lock                                     | 36 +++++++++----------
 6 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/examples/use-camera-and-microphone-example/package-lock.json b/examples/use-camera-and-microphone-example/package-lock.json
index dbc8c36..cdebda6 100644
--- a/examples/use-camera-and-microphone-example/package-lock.json
+++ b/examples/use-camera-and-microphone-example/package-lock.json
@@ -40,7 +40,7 @@
       "version": "0.1.3",
       "license": "Apache-2.0",
       "dependencies": {
-        "@jellyfish-dev/ts-client-sdk": "0.1.3",
+        "@jellyfish-dev/ts-client-sdk": "^0.2.0",
         "events": "3.3.0",
         "lodash.isequal": "4.5.0"
       },
diff --git a/examples/use-camera-and-microphone-example/src/MainControls.tsx b/examples/use-camera-and-microphone-example/src/MainControls.tsx
index 936a2e4..c78f349 100644
--- a/examples/use-camera-and-microphone-example/src/MainControls.tsx
+++ b/examples/use-camera-and-microphone-example/src/MainControls.tsx
@@ -32,6 +32,9 @@ const videoPreviewAtom = atomWithStorage<boolean | undefined>("videoPreview", un
 const audioAutoStreamingAtom = atomWithStorage<boolean | undefined>("audioAutoStreaming", undefined);
 const audioPreviewAtom = atomWithStorage<boolean | undefined>("audioPreviewAtom", undefined);
 
+const screenshareAutoStreamingAtom = atomWithStorage<boolean | undefined>("screenshareAutoStreaming", undefined);
+const screensharePreviewAtom = atomWithStorage<boolean | undefined>("screensharePreviewAtom", undefined);
+
 const autostartAtom = atomWithStorage<boolean>("autostart", false, undefined, { unstable_getOnInit: true });
 
 export const MainControls = () => {
@@ -47,6 +50,9 @@ export const MainControls = () => {
   const [audioAutoStreaming, setAudioAutoStreaming] = useAtom(audioAutoStreamingAtom);
   const [audioPreview, setAudioPreview] = useAtom(audioPreviewAtom);
 
+  const [screenshareAutoStreaming, setScreenshareAutoStreaming] = useAtom(screenshareAutoStreamingAtom);
+  const [screensharePreview, setScreensharePreview] = useAtom(screensharePreviewAtom);
+
   const [autostart, setAutostart] = useAtom(autostartAtom);
 
   const { init } = useSetupMedia({
@@ -67,6 +73,8 @@ export const MainControls = () => {
       defaultTrackMetadata: DEFAULT_AUDIO_TRACK_METADATA,
     },
     screenshare: {
+      autoStreaming: screenshareAutoStreaming,
+      preview: screensharePreview,
       trackConstraints: true,
       defaultTrackMetadata: DEFAULT_VIDEO_TRACK_METADATA,
     },
@@ -129,6 +137,19 @@ export const MainControls = () => {
             set={setAudioPreview}
             radioClass="radio-secondary"
           />
+
+          <ThreeStateRadio
+            name="Screenshare Auto Streaming (default false)"
+            value={screenshareAutoStreaming}
+            set={setScreenshareAutoStreaming}
+            radioClass="radio-secondary"
+          />
+          <ThreeStateRadio
+            name="Screenshare Preview (default true)"
+            value={screensharePreview}
+            set={setScreensharePreview}
+            radioClass="radio-secondary"
+          />
         </div>
         <div className="flex flex-row flex-wrap w-full gap-2">
           <button
diff --git a/src/reducer.tsx b/src/reducer.tsx
index 8257e2d..a639167 100644
--- a/src/reducer.tsx
+++ b/src/reducer.tsx
@@ -391,7 +391,7 @@ export const reducer = <PeerMetadata, TrackMetadata>(
     case "disconnect":
       state?.connectivity?.client?.removeAllListeners();
       state?.connectivity?.client?.disconnect();
-      return { ...createDefaultState(), media: state.media };
+      return { ...createDefaultState(), media: state.media, screenshare: state.screenshare, devices: state.devices };
     // connections events
     case "onSocketOpen":
       return onSocketOpen<PeerMetadata, TrackMetadata>()(state);
@@ -405,7 +405,7 @@ export const reducer = <PeerMetadata, TrackMetadata>(
       state?.connectivity?.client?.removeAllListeners();
       state?.connectivity?.client?.disconnect();
       // return onDisconnected<PeerMetadata, TrackMetadata>()(state)
-      return { ...createDefaultState(), media: state.media };
+      return { ...createDefaultState(), media: state.media, screenshare: state.screenshare, devices: state.devices };
     case "onAuthSuccess":
       return onAuthSuccess<PeerMetadata, TrackMetadata>()(state);
     case "onAuthError":
diff --git a/src/useMedia/index.tsx b/src/useMedia/index.tsx
index bed27a2..d84d46c 100644
--- a/src/useMedia/index.tsx
+++ b/src/useMedia/index.tsx
@@ -118,8 +118,23 @@ export const useSetupMedia = <PeerMetadata, TrackMetadata>(
     if (config.microphone.autoStreaming && mediaRef.current.data?.audio.status === "OK") {
       addTrack("audio", config.microphone.defaultTrackMetadata, undefined, config.microphone.defaultMaxBandwidth);
     }
+
+    if (config.screenshare.autoStreaming && screenshareMediaRef.current.data?.status === "OK") {
+      addTrack(
+        "screenshare",
+        config.screenshare.defaultTrackMetadata,
+        undefined,
+        config.screenshare.defaultMaxBandwidth
+      );
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.status, config.camera.autoStreaming, config.microphone.autoStreaming, addTrack]);
+  }, [
+    state.status,
+    config.camera.autoStreaming,
+    config.microphone.autoStreaming,
+    config.screenshare.autoStreaming,
+    addTrack,
+  ]);
 
   const removeTrack = useCallback(
     (type: Type) => {
@@ -172,7 +187,16 @@ export const useSetupMedia = <PeerMetadata, TrackMetadata>(
     const screenshareTrack = screenshareResult.data?.media?.track;
     const screenshareStream = screenshareResult.data?.media?.stream;
 
-    if (screenshareTrackIdRef.current && screenshareTrack && screenshareStream) {
+    const screensharePreview = config.screenshare.preview ?? true;
+
+    if (!screensharePreview && screenshareResult.data?.status === "OK" && screenshareStream) {
+      addTrack(
+        "screenshare",
+        config.screenshare.defaultTrackMetadata,
+        undefined,
+        config.screenshare.defaultMaxBandwidth
+      );
+    } else if (screenshareTrackIdRef.current && screenshareTrack && screenshareStream) {
       // todo track metadata
       if (!screenshareTrackIdRef.current) return;
       replaceTrack("screenshare", screenshareTrack, screenshareStream, undefined);
diff --git a/src/useMedia/types.ts b/src/useMedia/types.ts
index d6ad1f4..1e432e5 100644
--- a/src/useMedia/types.ts
+++ b/src/useMedia/types.ts
@@ -19,6 +19,8 @@ export type UseSetupMediaConfig<TrackMetadata> = {
     defaultMaxBandwidth?: TrackBandwidthLimit;
   };
   screenshare: {
+    autoStreaming?: boolean;
+    preview?: boolean;
     trackConstraints: boolean | MediaTrackConstraints;
     defaultTrackMetadata?: TrackMetadata;
     defaultMaxBandwidth?: TrackBandwidthLimit;
diff --git a/yarn.lock b/yarn.lock
index 6dd8e37..612948f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -68,9 +68,9 @@
     "uuid" "^8.3.2"
 
 "@jellyfish-dev/ts-client-sdk@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/@jellyfish-dev/ts-client-sdk/-/ts-client-sdk-0.2.0.tgz"
-  integrity sha512-Bk9YWo7rG5CtHc2pawRtSRn/m3o5SIj2TXtXSEcrFEVoYbjHnNlCW5ns+LpvCOvspBxXTJfiXReBCzqpIpBkWQ==
+  "integrity" "sha512-Bk9YWo7rG5CtHc2pawRtSRn/m3o5SIj2TXtXSEcrFEVoYbjHnNlCW5ns+LpvCOvspBxXTJfiXReBCzqpIpBkWQ=="
+  "resolved" "https://registry.npmjs.org/@jellyfish-dev/ts-client-sdk/-/ts-client-sdk-0.2.0.tgz"
+  "version" "0.2.0"
   dependencies:
     "@jellyfish-dev/membrane-webrtc-js" "^0.5.1"
     "events" "^3.3.0"
@@ -174,9 +174,9 @@
   "version" "4.14.195"
 
 "@types/node@>=13.7.0":
-  version "20.8.2"
-  resolved "https://registry.npmjs.org/@types/node/-/node-20.8.2.tgz"
-  integrity sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w==
+  "integrity" "sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w=="
+  "resolved" "https://registry.npmjs.org/@types/node/-/node-20.8.2.tgz"
+  "version" "20.8.2"
 
 "@types/prop-types@*":
   "integrity" "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
@@ -440,10 +440,10 @@
   dependencies:
     "esutils" "^2.0.2"
 
-dprint-node@^1.0.7:
-  version "1.0.8"
-  resolved "https://registry.npmjs.org/dprint-node/-/dprint-node-1.0.8.tgz"
-  integrity sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg==
+"dprint-node@^1.0.7":
+  "integrity" "sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg=="
+  "resolved" "https://registry.npmjs.org/dprint-node/-/dprint-node-1.0.8.tgz"
+  "version" "1.0.8"
   dependencies:
     "detect-libc" "^1.0.3"
 
@@ -1110,10 +1110,10 @@ dprint-node@^1.0.7:
   dependencies:
     "is-number" "^7.0.0"
 
-ts-poet@^6.5.0:
-  version "6.6.0"
-  resolved "https://registry.npmjs.org/ts-poet/-/ts-poet-6.6.0.tgz"
-  integrity sha512-4vEH/wkhcjRPFOdBwIh9ItO6jOoumVLRF4aABDX5JSNEubSqwOulihxQPqai+OkuygJm3WYMInxXQX4QwVNMuw==
+"ts-poet@^6.5.0":
+  "integrity" "sha512-4vEH/wkhcjRPFOdBwIh9ItO6jOoumVLRF4aABDX5JSNEubSqwOulihxQPqai+OkuygJm3WYMInxXQX4QwVNMuw=="
+  "resolved" "https://registry.npmjs.org/ts-poet/-/ts-poet-6.6.0.tgz"
+  "version" "6.6.0"
   dependencies:
     "dprint-node" "^1.0.7"
 
@@ -1125,10 +1125,10 @@ ts-poet@^6.5.0:
     "long" "^5.2.3"
     "protobufjs" "^7.2.4"
 
-ts-proto@^1.147.2:
-  version "1.160.0"
-  resolved "https://registry.npmjs.org/ts-proto/-/ts-proto-1.160.0.tgz"
-  integrity sha512-AUJQ0noLEkLew81MYmNPF/z8QDIBxAIJ4UKt9sH2AwdaywOTk1jh1NoluoCr3cGScpVh0GHWCB/UA4V0fOO8fg==
+"ts-proto@^1.147.2":
+  "integrity" "sha512-AUJQ0noLEkLew81MYmNPF/z8QDIBxAIJ4UKt9sH2AwdaywOTk1jh1NoluoCr3cGScpVh0GHWCB/UA4V0fOO8fg=="
+  "resolved" "https://registry.npmjs.org/ts-proto/-/ts-proto-1.160.0.tgz"
+  "version" "1.160.0"
   dependencies:
     "case-anything" "^2.1.13"
     "protobufjs" "^7.2.4"