@stream-io/video-react-sdk 0.0.92 → 0.1.0

package/src/hooks/useRequestPermission.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { useCall, useHasPermissions } from '@stream-io/video-react-bindings';
+
+export const useRequestPermission = (permission: OwnCapability) => {
+  const call = useCall();
+  const hasPermission = useHasPermissions(permission);
+  const canRequestPermission =
+    !!call?.permissionsContext.canRequest(permission);
+  const [isAwaitingPermission, setIsAwaitingPermission] = useState(false); // TODO: load with possibly pending state
+
+  useEffect(() => {
+    const reset = () => setIsAwaitingPermission(false);
+
+    if (hasPermission) reset();
+  }, [hasPermission]);
+
+  const requestPermission = useCallback(async () => {
+    if (isAwaitingPermission || !canRequestPermission) return false;
+    if (hasPermission) return true;
+
+    setIsAwaitingPermission(true);
+
+    try {
+      await call?.requestPermissions({
+        permissions: [permission],
+      });
+    } catch (error) {
+      setIsAwaitingPermission(false);
+      throw new Error(`requestPermission failed: ${error}`);
+    }
+
+    return false;
+  }, [
+    call,
+    canRequestPermission,
+    hasPermission,
+    isAwaitingPermission,
+    permission,
+  ]);
+
+  return {
+    requestPermission,
+    hasPermission,
+    canRequestPermission,
+    isAwaitingPermission,
+  };
+};

package/src/hooks/useToggleAudioMuteState.ts

@@ -1,62 +1,33 @@
-import { useCallback, useEffect, useState } from 'react';
-import {
-  useCall,
-  useHasPermissions,
-  useLocalParticipant,
-} from '@stream-io/video-react-bindings';
+import { useCallback, useRef } from 'react';
+import { useLocalParticipant } from '@stream-io/video-react-bindings';
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 
 import { useMediaDevices } from '../core';
+import { useRequestPermission } from './useRequestPermission';
 
 export const useToggleAudioMuteState = () => {
   const { publishAudioStream, stopPublishingAudio } = useMediaDevices();
   const localParticipant = useLocalParticipant();
-  const call = useCall();
-  const hasPermission = useHasPermissions(OwnCapability.SEND_AUDIO);
-  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
 
-  const isAudioMute = !localParticipant?.publishedTracks.includes(
-    SfuModels.TrackType.AUDIO,
+  const { isAwaitingPermission, requestPermission } = useRequestPermission(
+    OwnCapability.SEND_AUDIO,
   );
 
-  useEffect(() => {
-    if (hasPermission) {
-      setIsAwaitingApproval(false);
-    }
-  }, [hasPermission]);
+  // to keep the toggle function as stable as possible
+  const isAudioMutedReference = useRef(false);
+
+  isAudioMutedReference.current = !localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
 
   const toggleAudioMuteState = useCallback(async () => {
-    if (
-      !hasPermission &&
-      call &&
-      call.permissionsContext.canRequest(OwnCapability.SEND_AUDIO)
-    ) {
-      setIsAwaitingApproval(true);
-      await call
-        .requestPermissions({
-          permissions: [OwnCapability.SEND_AUDIO],
-        })
-        .catch((reason) => {
-          console.log('RequestPermissions failed', reason);
-        });
-      return;
-    }
-    if (isAudioMute) {
-      if (hasPermission) {
-        await publishAudioStream();
-      } else {
-        console.log('Cannot publish audio stream. Insufficient permissions.');
-      }
-    } else {
-      stopPublishingAudio();
+    if (isAudioMutedReference.current) {
+      const canPublish = await requestPermission();
+      if (canPublish) return publishAudioStream();
     }
-  }, [
-    call,
-    hasPermission,
-    isAudioMute,
-    publishAudioStream,
-    stopPublishingAudio,
-  ]);
-
-  return { toggleAudioMuteState, isAwaitingApproval };
+
+    if (!isAudioMutedReference.current) stopPublishingAudio();
+  }, [publishAudioStream, requestPermission, stopPublishingAudio]);
+
+  return { toggleAudioMuteState, isAwaitingPermission };
 };

package/src/hooks/useToggleCallRecording.ts

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  useCall,
+  useIsCallRecordingInProgress,
+} from '@stream-io/video-react-bindings';
+
+export const useToggleCallRecording = () => {
+  const call = useCall();
+  const isCallRecordingInProgress = useIsCallRecordingInProgress();
+  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
+
+  // TODO: add permissions
+
+  useEffect(() => {
+    // we wait until call.recording_started/stopped event to flips the
+    // `isCallRecordingInProgress` state variable.
+    // Once the flip happens, we remove the loading indicator
+    setIsAwaitingResponse((isAwaiting) => {
+      if (isAwaiting) return false;
+      return isAwaiting;
+    });
+  }, [isCallRecordingInProgress]);
+
+  const toggleCallRecording = useCallback(async () => {
+    try {
+      setIsAwaitingResponse(true);
+      if (isCallRecordingInProgress) {
+        await call?.stopRecording();
+      } else {
+        await call?.startRecording();
+      }
+    } catch (e) {
+      console.error(`Failed start recording`, e);
+    }
+  }, [call, isCallRecordingInProgress]);
+
+  return { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress };
+};

package/src/hooks/useToggleScreenShare.ts

@@ -0,0 +1,42 @@
+import { useCallback, useRef } from 'react';
+import { useCall, useLocalParticipant } from '@stream-io/video-react-bindings';
+import {
+  OwnCapability,
+  SfuModels,
+  getScreenShareStream,
+} from '@stream-io/video-client';
+import { useRequestPermission } from './useRequestPermission';
+
+export const useToggleScreenShare = () => {
+  const localParticipant = useLocalParticipant();
+  const call = useCall();
+  const isScreenSharingReference = useRef(false);
+  const { isAwaitingPermission, requestPermission } = useRequestPermission(
+    OwnCapability.SCREENSHARE,
+  );
+
+  const isScreenSharing = !!localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+
+  isScreenSharingReference.current = isScreenSharing;
+
+  const toggleScreenShare = useCallback(async () => {
+    if (!isScreenSharingReference.current) {
+      const canPublish = await requestPermission();
+      if (!canPublish) return;
+
+      const stream = await getScreenShareStream().catch((e) => {
+        console.log(`Can't share screen: ${e}`);
+      });
+
+      if (stream) {
+        return call?.publishScreenShareStream(stream);
+      }
+    }
+
+    call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+  }, [call, requestPermission]);
+
+  return { toggleScreenShare, isAwaitingPermission, isScreenSharing };
+};

package/src/hooks/useToggleVideoMuteState.ts

@@ -1,62 +1,33 @@
-import { useCallback, useEffect, useState } from 'react';
-import {
-  useCall,
-  useHasPermissions,
-  useLocalParticipant,
-} from '@stream-io/video-react-bindings';
+import { useCallback, useRef } from 'react';
+import { useLocalParticipant } from '@stream-io/video-react-bindings';
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 
 import { useMediaDevices } from '../core';
+import { useRequestPermission } from './useRequestPermission';
 
 export const useToggleVideoMuteState = () => {
   const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
   const localParticipant = useLocalParticipant();
-  const call = useCall();
-  const hasPermission = useHasPermissions(OwnCapability.SEND_VIDEO);
-  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
 
-  const isVideoMute = !localParticipant?.publishedTracks.includes(
-    SfuModels.TrackType.VIDEO,
+  const { isAwaitingPermission, requestPermission } = useRequestPermission(
+    OwnCapability.SEND_VIDEO,
   );
 
-  useEffect(() => {
-    if (hasPermission) {
-      setIsAwaitingApproval(false);
-    }
-  }, [hasPermission]);
+  // to keep the toggle function as stable as possible
+  const isVideoMutedReference = useRef(false);
+
+  isVideoMutedReference.current = !localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
 
   const toggleVideoMuteState = useCallback(async () => {
-    if (
-      !hasPermission &&
-      call &&
-      call.permissionsContext.canRequest(OwnCapability.SEND_VIDEO)
-    ) {
-      setIsAwaitingApproval(true);
-      await call
-        .requestPermissions({
-          permissions: [OwnCapability.SEND_VIDEO],
-        })
-        .catch((reason) => {
-          console.log('RequestPermissions failed', reason);
-        });
-      return;
-    }
-    if (isVideoMute) {
-      if (hasPermission) {
-        await publishVideoStream();
-      } else {
-        console.log('Cannot publish video. Insufficient permissions.');
-      }
-    } else {
-      stopPublishingVideo();
+    if (isVideoMutedReference.current) {
+      const canPublish = await requestPermission();
+      if (canPublish) return publishVideoStream();
     }
-  }, [
-    call,
-    hasPermission,
-    isVideoMute,
-    publishVideoStream,
-    stopPublishingVideo,
-  ]);
-
-  return { toggleVideoMuteState, isAwaitingApproval };
+
+    if (!isVideoMutedReference.current) stopPublishingVideo();
+  }, [publishVideoStream, requestPermission, stopPublishingVideo]);
+
+  return { toggleVideoMuteState, isAwaitingPermission };
 };