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

package/dist/src/hooks/useToggleCallRecording.d.ts

@@ -0,0 +1,5 @@
+export declare const useToggleCallRecording: () => {
+    toggleCallRecording: () => Promise<void>;
+    isAwaitingResponse: boolean;
+    isCallRecordingInProgress: boolean;
+};

package/dist/src/hooks/useToggleCallRecording.js

@@ -0,0 +1,43 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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(() => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setIsAwaitingResponse(true);
+            if (isCallRecordingInProgress) {
+                yield (call === null || call === void 0 ? void 0 : call.stopRecording());
+            }
+            else {
+                yield (call === null || call === void 0 ? void 0 : call.startRecording());
+            }
+        }
+        catch (e) {
+            console.error(`Failed start recording`, e);
+        }
+    }), [call, isCallRecordingInProgress]);
+    return { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress };
+};
+//# sourceMappingURL=useToggleCallRecording.js.map

package/dist/src/hooks/useToggleCallRecording.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleCallRecording.js","sourceRoot":"","sources":["../../../src/hooks/useToggleCallRecording.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,OAAO,EACP,4BAA4B,GAC7B,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,yBAAyB,GAAG,4BAA4B,EAAE,CAAC;IACjE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,wBAAwB;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,kEAAkE;QAClE,8CAA8C;QAC9C,yDAAyD;QACzD,qBAAqB,CAAC,CAAC,UAAU,EAAE,EAAE;YACnC,IAAI,UAAU;gBAAE,OAAO,KAAK,CAAC;YAC7B,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAEhC,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAS,EAAE;QACjD,IAAI;YACF,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,IAAI,yBAAyB,EAAE;gBAC7B,MAAM,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,EAAE,CAAA,CAAC;aAC7B;iBAAM;gBACL,MAAM,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,EAAE,CAAA,CAAC;aAC9B;SACF;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC;SAC5C;IACH,CAAC,CAAA,EAAE,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAEtC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,CAAC;AAChF,CAAC,CAAC"}

package/dist/src/hooks/useToggleScreenShare.d.ts

@@ -0,0 +1,5 @@
+export declare const useToggleScreenShare: () => {
+    toggleScreenShare: () => Promise<void>;
+    isAwaitingPermission: boolean;
+    isScreenSharing: boolean;
+};

package/dist/src/hooks/useToggleScreenShare.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 === null || localParticipant === void 0 ? void 0 : localParticipant.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE));
+    isScreenSharingReference.current = isScreenSharing;
+    const toggleScreenShare = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!isScreenSharingReference.current) {
+            const canPublish = yield requestPermission();
+            if (!canPublish)
+                return;
+            const stream = yield getScreenShareStream().catch((e) => {
+                console.log(`Can't share screen: ${e}`);
+            });
+            if (stream) {
+                return call === null || call === void 0 ? void 0 : call.publishScreenShareStream(stream);
+            }
+        }
+        call === null || call === void 0 ? void 0 : call.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+    }), [call, requestPermission]);
+    return { toggleScreenShare, isAwaitingPermission, isScreenSharing };
+};
+//# sourceMappingURL=useToggleScreenShare.js.map

package/dist/src/hooks/useToggleScreenShare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggleScreenShare.js","sourceRoot":"","sources":["../../../src/hooks/useToggleScreenShare.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EACL,aAAa,EACb,SAAS,EACT,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CACtE,aAAa,CAAC,WAAW,CAC1B,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,CAAC,QAAQ,CAClE,SAAS,CAAC,SAAS,CAAC,YAAY,CACjC,CAAA,CAAC;IAEF,wBAAwB,CAAC,OAAO,GAAG,eAAe,CAAC;IAEnD,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAS,EAAE;QAC/C,IAAI,CAAC,wBAAwB,CAAC,OAAO,EAAE;YACrC,MAAM,UAAU,GAAG,MAAM,iBAAiB,EAAE,CAAC;YAC7C,IAAI,CAAC,UAAU;gBAAE,OAAO;YAExB,MAAM,MAAM,GAAG,MAAM,oBAAoB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;gBACtD,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;YAEH,IAAI,MAAM,EAAE;gBACV,OAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;aAC/C;SACF;QAED,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC,CAAA,EAAE,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,eAAe,EAAE,CAAC;AACtE,CAAC,CAAC"}

package/dist/src/hooks/useToggleVideoMuteState.d.ts

@@ -1,4 +1,4 @@
 export declare const useToggleVideoMuteState: () => {
     toggleVideoMuteState: () => Promise<void>;
-    isAwaitingApproval: boolean;
+    isAwaitingPermission: boolean;
 };

package/dist/src/hooks/useToggleVideoMuteState.js

@@ -7,54 +7,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-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 === null || localParticipant === void 0 ? void 0 : localParticipant.publishedTracks.includes(SfuModels.TrackType.VIDEO));
-    useEffect(() => {
-        if (hasPermission) {
-            setIsAwaitingApproval(false);
-        }
-    }, [hasPermission]);
+    const { isAwaitingPermission, requestPermission } = useRequestPermission(OwnCapability.SEND_VIDEO);
+    // to keep the toggle function as stable as possible
+    const isVideoMutedReference = useRef(false);
+    isVideoMutedReference.current = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.publishedTracks.includes(SfuModels.TrackType.VIDEO));
     const toggleVideoMuteState = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!hasPermission &&
-            call &&
-            call.permissionsContext.canRequest(OwnCapability.SEND_VIDEO)) {
-            setIsAwaitingApproval(true);
-            yield call
-                .requestPermissions({
-                permissions: [OwnCapability.SEND_VIDEO],
-            })
-                .catch((reason) => {
-                console.log('RequestPermissions failed', reason);
-            });
-            return;
-        }
-        if (isVideoMute) {
-            if (hasPermission) {
-                yield publishVideoStream();
-            }
-            else {
-                console.log('Cannot publish video. Insufficient permissions.');
-            }
+        if (isVideoMutedReference.current) {
+            const canPublish = yield requestPermission();
+            if (canPublish)
+                return publishVideoStream();
         }
-        else {
+        if (!isVideoMutedReference.current)
             stopPublishingVideo();
-        }
-    }), [
-        call,
-        hasPermission,
-        isVideoMute,
-        publishVideoStream,
-        stopPublishingVideo,
-    ]);
-    return { toggleVideoMuteState, isAwaitingApproval };
+    }), [publishVideoStream, requestPermission, stopPublishingVideo]);
+    return { toggleVideoMuteState, isAwaitingPermission };
 };
 //# sourceMappingURL=useToggleVideoMuteState.js.map

package/dist/src/hooks/useToggleVideoMuteState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleVideoMuteState.js","sourceRoot":"","sources":["../../../src/hooks/useToggleVideoMuteState.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IACtE,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,aAAa,GAAG,iBAAiB,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,CAAC,QAAQ,CAC7D,SAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAA,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,EAAE;YACjB,qBAAqB,CAAC,KAAK,CAAC,CAAC;SAC9B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAS,EAAE;QAClD,IACE,CAAC,aAAa;YACd,IAAI;YACJ,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAC5D;YACA,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,MAAM,IAAI;iBACP,kBAAkB,CAAC;gBAClB,WAAW,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC;aACxC,CAAC;iBACD,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;gBAChB,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC;YACnD,CAAC,CAAC,CAAC;YACL,OAAO;SACR;QACD,IAAI,WAAW,EAAE;YACf,IAAI,aAAa,EAAE;gBACjB,MAAM,kBAAkB,EAAE,CAAC;aAC5B;iBAAM;gBACL,OAAO,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC;aAChE;SACF;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,CAAA,EAAE;QACD,IAAI;QACJ,aAAa;QACb,WAAW;QACX,kBAAkB;QAClB,mBAAmB;KACpB,CAAC,CAAC;IAEH,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;AACtD,CAAC,CAAC"}
+{"version":3,"file":"useToggleVideoMuteState.js","sourceRoot":"","sources":["../../../src/hooks/useToggleVideoMuteState.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IACtE,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,MAAM,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CACtE,aAAa,CAAC,UAAU,CACzB,CAAC;IAEF,oDAAoD;IACpD,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C,qBAAqB,CAAC,OAAO,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,CAAC,QAAQ,CACzE,SAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAS,EAAE;QAClD,IAAI,qBAAqB,CAAC,OAAO,EAAE;YACjC,MAAM,UAAU,GAAG,MAAM,iBAAiB,EAAE,CAAC;YAC7C,IAAI,UAAU;gBAAE,OAAO,kBAAkB,EAAE,CAAC;SAC7C;QAED,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE,mBAAmB,EAAE,CAAC;IAC5D,CAAC,CAAA,EAAE,CAAC,kBAAkB,EAAE,iBAAiB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjE,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,CAAC;AACxD,CAAC,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.92";
+export declare const version = "0.1.0";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '0.0.92';
+export const version = '0.1.0';
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.0.92",
+  "version": "0.1.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -32,9 +32,9 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.1.0",
+    "@stream-io/i18n": "^0.1.1",
     "@stream-io/video-client": "^0.0.51",
-    "@stream-io/video-react-bindings": "^0.0.54",
+    "@stream-io/video-react-bindings": "^0.1.0",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "rxjs": "~7.8.1"

package/src/components/CallControls/ReactionsButton.tsx

@@ -1,5 +1,5 @@
 import { OwnCapability, StreamReaction } from '@stream-io/video-client';
-import { Restricted, useCall } from '@stream-io/video-react-bindings';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 
 import { CompositeButton, IconButton } from '../Button';
 import { defaultEmojiReactionMap } from '../Reaction';
@@ -27,17 +27,19 @@ export interface ReactionsButtonProps {
 export const ReactionsButton = ({
   reactions = defaultReactions,
 }: ReactionsButtonProps) => {
+  const { t } = useI18n();
+
   return (
     <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
       <CompositeButton
         active={false}
-        caption="Reactions"
+        caption={t('Reactions')}
         menuPlacement="top-start"
         Menu={<DefaultReactionsMenu reactions={reactions} />}
       >
         <IconButton
           icon="reactions"
-          title="Reactions"
+          title={t('Reactions')}
           onClick={() => {
             console.log('Reactions');
           }}

package/src/components/CallControls/RecordCallButton.tsx

@@ -1,12 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCall,
-  useIsCallRecordingInProgress,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 import { CompositeButton, IconButton } from '../Button/';
 import { LoadingIndicator } from '../LoadingIndicator';
+import { useToggleCallRecording } from '../../hooks/useToggleCallRecording';
 
 export type RecordCallButtonProps = {
   caption?: string;
@@ -16,30 +12,10 @@ export const RecordCallButton = ({
   caption = 'Record',
 }: RecordCallButtonProps) => {
   const call = useCall();
-  const isCallRecordingInProgress = useIsCallRecordingInProgress();
-  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
-  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 toggleRecording = useCallback(async () => {
-    try {
-      setIsAwaitingResponse(true);
-      if (isCallRecordingInProgress) {
-        await call?.stopRecording();
-      } else {
-        await call?.startRecording();
-      }
-    } catch (e) {
-      console.error(`Failed start recording`, e);
-    }
-  }, [call, isCallRecordingInProgress]);
+  const { t } = useI18n();
+  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =
+    useToggleCallRecording();
 
   return (
     <Restricted
@@ -53,8 +29,8 @@ export const RecordCallButton = ({
           <LoadingIndicator
             tooltip={
               isCallRecordingInProgress
-                ? 'Waiting for recording to stop... '
-                : 'Waiting for recording to start...'
+                ? t('Waiting for recording to stop...')
+                : t('Waiting for recording to start...')
             }
           />
         ) : (
@@ -63,8 +39,8 @@ export const RecordCallButton = ({
             enabled={!!call}
             disabled={!call}
             icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}
-            title="Record call"
-            onClick={toggleRecording}
+            title={t('Record call')}
+            onClick={toggleCallRecording}
           />
         )}
       </CompositeButton>

package/src/components/CallControls/ScreenShareButton.tsx

@@ -1,18 +1,13 @@
-import { useEffect, useState } from 'react';
-import {
-  getScreenShareStream,
-  OwnCapability,
-  SfuModels,
-} from '@stream-io/video-client';
+import { OwnCapability } from '@stream-io/video-client';
 import {
   Restricted,
   useCall,
   useHasOngoingScreenShare,
-  useHasPermissions,
-  useLocalParticipant,
+  useI18n,
 } from '@stream-io/video-react-bindings';
 import { CompositeButton, IconButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
+import { useToggleScreenShare } from '../../hooks';
 
 export type ScreenShareButtonProps = {
   caption?: string;
@@ -22,60 +17,27 @@ export const ScreenShareButton = ({
   caption = 'Screen Share',
 }: ScreenShareButtonProps) => {
   const call = useCall();
-  const localParticipant = useLocalParticipant();
   const isSomeoneScreenSharing = useHasOngoingScreenShare();
-  const isScreenSharing = localParticipant?.publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE,
-  );
 
-  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
-  const hasPermission = useHasPermissions(OwnCapability.SCREENSHARE);
-  useEffect(() => {
-    if (hasPermission) {
-      setIsAwaitingApproval(false);
-    }
-  }, [hasPermission]);
+  const { t } = useI18n();
+  const { toggleScreenShare, isAwaitingPermission, isScreenSharing } =
+    useToggleScreenShare();
+
   return (
     <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
       <PermissionNotification
         permission={OwnCapability.SCREENSHARE}
-        isAwaitingApproval={isAwaitingApproval}
-        messageApproved="You can now share your screen."
-        messageAwaitingApproval="Awaiting for an approval to share screen."
-        messageRevoked="You can no longer share your screen."
+        isAwaitingApproval={isAwaitingPermission}
+        messageApproved={t('You can now share your screen.')}
+        messageAwaitingApproval={t('Awaiting for an approval to share screen.')}
+        messageRevoked={t('You can no longer share your screen.')}
       >
         <CompositeButton active={isSomeoneScreenSharing} caption={caption}>
           <IconButton
             icon={isScreenSharing ? 'screen-share-on' : 'screen-share-off'}
-            title="Share screen"
+            title={t('Share screen')}
             disabled={(!isScreenSharing && isSomeoneScreenSharing) || !call}
-            onClick={async () => {
-              if (
-                !hasPermission &&
-                call?.permissionsContext.canRequest(OwnCapability.SCREENSHARE)
-              ) {
-                setIsAwaitingApproval(true);
-                await call
-                  .requestPermissions({
-                    permissions: [OwnCapability.SCREENSHARE],
-                  })
-                  .catch((reason) => {
-                    console.log('RequestPermissions failed', reason);
-                  });
-                return;
-              }
-
-              if (!isScreenSharing && hasPermission) {
-                const stream = await getScreenShareStream().catch((e) => {
-                  console.log(`Can't share screen: ${e}`);
-                });
-                if (stream) {
-                  await call?.publishScreenShareStream(stream);
-                }
-              } else {
-                await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
-              }
-            }}
+            onClick={toggleScreenShare}
           />
         </CompositeButton>
       </PermissionNotification>

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -56,17 +56,17 @@ export const ToggleAudioPublishingButton = (
     SfuModels.TrackType.AUDIO,
   );
 
-  const { toggleAudioMuteState: handleClick, isAwaitingApproval } =
+  const { toggleAudioMuteState: handleClick, isAwaitingPermission } =
     useToggleAudioMuteState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
       <PermissionNotification
         permission={OwnCapability.SEND_AUDIO}
-        isAwaitingApproval={isAwaitingApproval}
-        messageApproved="You can now speak."
-        messageAwaitingApproval="Awaiting for an approval to speak."
-        messageRevoked="You can no longer speak."
+        isAwaitingApproval={isAwaitingPermission}
+        messageApproved={t('You can now speak.')}
+        messageAwaitingApproval={t('Awaiting for an approval to speak.')}
+        messageRevoked={t('You can no longer speak.')}
       >
         <CompositeButton Menu={Menu} active={isAudioMute} caption={caption}>
           <IconButton

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -55,17 +55,19 @@ export const ToggleVideoPublishingButton = (
     SfuModels.TrackType.VIDEO,
   );
 
-  const { toggleVideoMuteState: handleClick, isAwaitingApproval } =
+  const { toggleVideoMuteState: handleClick, isAwaitingPermission } =
     useToggleVideoMuteState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <PermissionNotification
         permission={OwnCapability.SEND_VIDEO}
-        isAwaitingApproval={isAwaitingApproval}
-        messageApproved="You can now share your video."
-        messageAwaitingApproval="Awaiting for an approval to share your video."
-        messageRevoked="You can no longer share your video."
+        isAwaitingApproval={isAwaitingPermission}
+        messageApproved={t('You can now share your video.')}
+        messageAwaitingApproval={t(
+          'Awaiting for an approval to share your video.',
+        )}
+        messageRevoked={t('You can no longer share your video.')}
       >
         <CompositeButton Menu={Menu} active={isVideoMute} caption={caption}>
           <IconButton

package/src/components/Permissions/PermissionRequests.tsx

@@ -16,11 +16,13 @@ import {
 import {
   useCall,
   useHasPermissions,
+  useI18n,
   useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
 
 import { useFloatingUIPreset } from '../../hooks';
+import { TranslatorFunction } from '@stream-io/i18n';
 
 const byNameOrId = (a: UserResponse, b: UserResponse) => {
   if (a.name && b.name && a.name < b.name) return -1;
@@ -30,6 +32,11 @@ const byNameOrId = (a: UserResponse, b: UserResponse) => {
   return 0;
 };
 
+type HandleUpdatePermission = (
+  request: PermissionRequestEvent,
+  type: 'grant' | 'revoke' | 'dismiss',
+) => () => Promise<void>;
+
 export const PermissionRequests = () => {
   const call = useCall();
   const localParticipant = useLocalParticipant();
@@ -63,16 +70,18 @@ export const PermissionRequests = () => {
     };
   }, [call, canUpdateCallPermissions, localParticipant]);
 
-  const handleUpdatePermission = (
-    request: PermissionRequestEvent,
-    allow: boolean,
-  ) => {
+  const handleUpdatePermission: HandleUpdatePermission = (request, type) => {
     return async () => {
       const { user, permissions } = request;
-      if (allow) {
-        await call?.grantPermissions(user.id, permissions);
-      } else {
-        await call?.revokePermissions(user.id, permissions);
+      switch (type) {
+        case 'grant':
+          await call?.grantPermissions(user.id, permissions);
+          break;
+        case 'revoke':
+          await call?.revokePermissions(user.id, permissions);
+          break;
+        default:
+          break;
       }
       setPermissionRequests((requests) =>
         requests.filter((r) => r !== request),
@@ -122,10 +131,7 @@ export const PermissionRequests = () => {
 
 export type PermissionRequestListProps = ComponentProps<'div'> & {
   permissionRequests: PermissionRequestEvent[];
-  handleUpdatePermission: (
-    request: PermissionRequestEvent,
-    allow: boolean,
-  ) => () => Promise<void>;
+  handleUpdatePermission: HandleUpdatePermission;
 };
 
 export const PermissionRequestList = forwardRef<
@@ -133,6 +139,9 @@ export const PermissionRequestList = forwardRef<
   PermissionRequestListProps
 >((props, ref) => {
   const { permissionRequests, handleUpdatePermission, ...rest } = props;
+
+  const { t } = useI18n();
+
   return (
     <div className="str-video__permission-requests-list" ref={ref} {...rest}>
       {permissionRequests.map((request, reqIndex) => {
@@ -142,21 +151,28 @@ export const PermissionRequestList = forwardRef<
             {permissions.map((permission) => (
               <div className="str-video__permission-request" key={permission}>
                 <div className="str-video__permission-request__message">
-                  {messageForPermission(user.name || user.id, permission)}
+                  {messageForPermission(user.name || user.id, permission, t)}
                 </div>
                 <Button
                   className="str-video__permission-request__button--allow"
                   type="button"
-                  onClick={handleUpdatePermission(request, true)}
+                  onClick={handleUpdatePermission(request, 'grant')}
                 >
-                  Allow
+                  {t('Allow')}
                 </Button>
                 <Button
                   className="str-video__permission-request__button--reject"
                   type="button"
-                  onClick={handleUpdatePermission(request, false)}
+                  onClick={handleUpdatePermission(request, 'revoke')}
                 >
-                  Reject
+                  {t('Revoke')}
+                </Button>
+                <Button
+                  className="str-video__permission-request__button--reject"
+                  type="button"
+                  onClick={handleUpdatePermission(request, 'dismiss')}
+                >
+                  {t('Dismiss')}
                 </Button>
               </div>
             ))}
@@ -179,15 +195,26 @@ const Button = (
   );
 };
 
-const messageForPermission = (userName: string, permission: string) => {
+const messageForPermission = (
+  userName: string,
+  permission: string,
+  t: TranslatorFunction,
+) => {
   switch (permission) {
     case OwnCapability.SEND_AUDIO:
-      return `${userName} is requesting to speak`;
+      return t('{{ userName }} is requesting to speak', { userName });
     case OwnCapability.SEND_VIDEO:
-      return `${userName} is requesting to share their camera`;
+      return t('{{ userName }} is requesting to share their camera', {
+        userName,
+      });
     case OwnCapability.SCREENSHARE:
-      return `${userName} is requesting to present their screen`;
+      return t('{{ userName }} is requesting to present their screen', {
+        userName,
+      });
     default:
-      return `${userName} is requesting permission: ${permission}`;
+      return t('{{ userName }} is requesting permission: {{ permission }}', {
+        userName,
+        permission,
+      });
   }
 };

package/src/hooks/index.ts

@@ -2,3 +2,6 @@ export * from './useFloatingUIPreset';
 export * from './useScrollPosition';
 export * from './useToggleAudioMuteState';
 export * from './useToggleVideoMuteState';
+export * from './useToggleScreenShare';
+export * from './useToggleCallRecording';
+export * from './useRequestPermission';