@stream-io/video-react-sdk 0.0.1-alpha.9 → 0.0.1-alpha.91

package/dist/src/core/hooks/useVideoPublisher.js

@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { useCallback, useEffect } from 'react';
 import { map } from 'rxjs';
-import { CallingState, getVideoStream, OwnCapability, SfuModels, watchForAddedDefaultVideoDevice, watchForDisconnectedVideoDevice, } from '@stream-io/video-client';
-import { useCall, useCallCallingState, useCallState, useLocalParticipant, } from '@stream-io/video-react-bindings';
+import { CallingState, getVideoStream, OwnCapability, SfuModels, VideoSettingsCameraFacingEnum, watchForAddedDefaultVideoDevice, watchForDisconnectedVideoDevice, } from '@stream-io/video-client';
+import { useCall, useCallCallingState, useCallMetadata, useCallState, useLocalParticipant, } from '@stream-io/video-react-bindings';
 import { useDebugPreferredVideoCodec } from '../../components/Debug/useIsDebugMode';
 /**
  * @internal
@@ -24,6 +24,9 @@ export const useVideoPublisher = ({ initialVideoMuted, videoDeviceId, }) => {
     const { localParticipant$ } = callState;
     const preferredCodec = useDebugPreferredVideoCodec();
     const isPublishingVideo = participant === null || participant === void 0 ? void 0 : participant.publishedTracks.includes(SfuModels.TrackType.VIDEO);
+    const metadata = useCallMetadata();
+    const videoSettings = metadata === null || metadata === void 0 ? void 0 : metadata.settings.video;
+    const targetResolution = videoSettings === null || videoSettings === void 0 ? void 0 : videoSettings.target_resolution;
     const publishVideoStream = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!call)
             return;
@@ -31,13 +34,25 @@ export const useVideoPublisher = ({ initialVideoMuted, videoDeviceId, }) => {
             throw new Error(`No permission to publish video`);
         }
         try {
-            const videoStream = yield getVideoStream(videoDeviceId);
+            const videoStream = yield getVideoStream({
+                deviceId: videoDeviceId,
+                width: targetResolution === null || targetResolution === void 0 ? void 0 : targetResolution.width,
+                height: targetResolution === null || targetResolution === void 0 ? void 0 : targetResolution.height,
+                facingMode: toFacingMode(videoSettings === null || videoSettings === void 0 ? void 0 : videoSettings.camera_facing),
+            });
             yield call.publishVideoStream(videoStream, { preferredCodec });
         }
         catch (e) {
             console.log('Failed to publish video stream', e);
         }
-    }), [call, preferredCodec, videoDeviceId]);
+    }), [
+        call,
+        preferredCodec,
+        targetResolution === null || targetResolution === void 0 ? void 0 : targetResolution.height,
+        targetResolution === null || targetResolution === void 0 ? void 0 : targetResolution.width,
+        videoDeviceId,
+        videoSettings === null || videoSettings === void 0 ? void 0 : videoSettings.camera_facing,
+    ]);
     useEffect(() => {
         if (callingState === CallingState.JOINED && !initialVideoMuted) {
             publishVideoStream().catch((e) => {
@@ -71,12 +86,16 @@ export const useVideoPublisher = ({ initialVideoMuted, videoDeviceId, }) => {
             // We need to stop the original track first in order
             // we can retrieve the new default device stream
             track.stop();
-            const videoStream = yield getVideoStream('default');
+            const videoStream = yield getVideoStream({
+                deviceId: 'default',
+            });
             yield call.publishVideoStream(videoStream);
         }));
         const handleTrackEnded = () => __awaiter(void 0, void 0, void 0, function* () {
             if (selectedVideoDeviceId === videoDeviceId) {
-                const videoStream = yield getVideoStream(videoDeviceId);
+                const videoStream = yield getVideoStream({
+                    deviceId: videoDeviceId,
+                });
                 yield call.publishVideoStream(videoStream);
             }
         });
@@ -88,4 +107,14 @@ export const useVideoPublisher = ({ initialVideoMuted, videoDeviceId, }) => {
     }, [videoDeviceId, call, participant === null || participant === void 0 ? void 0 : participant.videoStream, isPublishingVideo]);
     return publishVideoStream;
 };
+const toFacingMode = (value) => {
+    switch (value) {
+        case VideoSettingsCameraFacingEnum.FRONT:
+            return 'user';
+        case VideoSettingsCameraFacingEnum.BACK:
+            return 'environment';
+        default:
+            return undefined;
+    }
+};
 //# sourceMappingURL=useVideoPublisher.js.map

package/dist/src/core/hooks/useVideoPublisher.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVideoPublisher.js","sourceRoot":"","sources":["../../../../src/core/hooks/useVideoPublisher.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useVideoPublisher.js","sourceRoot":"","sources":["../../../../src/core/hooks/useVideoPublisher.ts"],"names":[],"mappings":"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"}

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

@@ -1,2 +1 @@
-export * from './useRtcStats';
 export * from './useFloatingUIPreset';

package/dist/src/hooks/index.js

@@ -1,3 +1,2 @@
-export * from './useRtcStats';
 export * from './useFloatingUIPreset';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/src/utilities/applyElementToRef.d.ts

@@ -0,0 +1,2 @@
+import type { ForwardedRef } from 'react';
+export declare const applyElementToRef: <T extends HTMLElement | null>(ref: ForwardedRef<T>, element: T) => void;

package/dist/src/utilities/applyElementToRef.js

@@ -0,0 +1,8 @@
+export const applyElementToRef = (ref, element) => {
+    if (!ref)
+        return;
+    if (typeof ref === 'function')
+        return ref(element);
+    ref.current = element;
+};
+//# sourceMappingURL=applyElementToRef.js.map

package/dist/src/utilities/applyElementToRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyElementToRef.js","sourceRoot":"","sources":["../../../src/utilities/applyElementToRef.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAAoB,EACpB,OAAU,EACV,EAAE;IACF,IAAI,CAAC,GAAG;QAAE,OAAO;IAEjB,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;IAEnD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,CAAC,CAAC"}

package/dist/src/utilities/chunk.d.ts

@@ -0,0 +1 @@
+export declare const chunk: <T extends unknown[]>(array: T, size: number) => T[];

package/dist/src/utilities/chunk.js

@@ -0,0 +1,5 @@
+export const chunk = (array, size) => {
+    const chunkCount = Math.ceil(array.length / size);
+    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
+};
+//# sourceMappingURL=chunk.js.map

package/dist/src/utilities/chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk.js","sourceRoot":"","sources":["../../../src/utilities/chunk.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAsB,KAAQ,EAAE,IAAY,EAAE,EAAE;IACnE,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAElD,OAAO,KAAK,CAAC,IAAI,CACf,EAAE,MAAM,EAAE,UAAU,EAAE,EACtB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAM,CAClE,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/utilities/index.d.ts

@@ -0,0 +1,3 @@
+export * from './isComponentType';
+export * from './chunk';
+export * from './applyElementToRef';

package/dist/src/utilities/index.js

@@ -0,0 +1,4 @@
+export * from './isComponentType';
+export * from './chunk';
+export * from './applyElementToRef';
+//# sourceMappingURL=index.js.map

package/dist/src/utilities/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}

package/dist/src/utilities/isComponentType.d.ts

@@ -0,0 +1,2 @@
+import { ComponentType, ReactElement } from 'react';
+export declare const isComponentType: <T extends {}>(elementOrComponent?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<T> | null | undefined) => elementOrComponent is ComponentType<T>;

package/dist/src/utilities/isComponentType.js

@@ -0,0 +1,7 @@
+import { isValidElement } from 'react';
+export const isComponentType = (elementOrComponent) => {
+    return elementOrComponent === null
+        ? false
+        : !isValidElement(elementOrComponent);
+};
+//# sourceMappingURL=isComponentType.js.map

package/dist/src/utilities/isComponentType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isComponentType.js","sourceRoot":"","sources":["../../../src/utilities/isComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAgB,MAAM,OAAO,CAAC;AAEpE,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,kBAA2D,EACnB,EAAE;IAC1C,OAAO,kBAAkB,KAAK,IAAI;QAChC,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/package.json

@@ -7,9 +7,9 @@
   "scripts": {
     "clean": "rimraf dist",
     "start": "tsc --project tsconfig.json --watch",
-    "build": "tsc --project tsconfig.production.json",
-    "copy-css": "cp -r ../../node_modules/@stream-io/video-styling/dist/ dist",
-    "generate-docs": "../../scripts/generate-docs.sh React @stream-io/video-react-sdk react-sdk",
+    "build": "tsc --project tsconfig.production.json && yarn copy-css",
+    "copy-css": "cp -R ../../node_modules/@stream-io/video-styling/dist/* dist/",
+    "generate-docs": "../../scripts/generate-docs-react.sh React @stream-io/video-react-sdk react-sdk",
     "start:docs": "npx stream-chat-docusaurus -s"
   },
   "files": [
@@ -25,25 +25,27 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.0.1-alpha.5",
-    "@stream-io/video-client": "^0.0.1-alpha.124",
-    "@stream-io/video-react-bindings": "^0.0.1-alpha.8",
+    "@stream-io/i18n": "^0.0.1-alpha.73",
+    "@stream-io/video-client": "^0.0.2-alpha.2",
+    "@stream-io/video-react-bindings": "^0.0.1-alpha.84",
     "clsx": "^1.2.1",
-    "rxjs": "~7.5.7"
+    "rxjs": "~7.8.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.0.1-alpha.3",
+    "@stream-io/video-styling": "^0.0.1-alpha.68",
+    "@types/prop-types": "^15.7.5",
     "@types/rimraf": "^3.0.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "replace-in-file": "^6.3.5",
     "rimraf": "^3.0.2",
-    "typedoc": "^0.23.24",
+    "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.9"
+  "version": "0.0.1-alpha.91"
 }

package/src/components/Button/CompositeButton.tsx

@@ -1,14 +1,11 @@
 import clsx from 'clsx';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
-import {
-  ComponentType,
-  forwardRef,
-  isValidElement,
-  PropsWithChildren,
-} from 'react';
-import { IconButton } from './IconButton';
+import { ComponentType, forwardRef, PropsWithChildren } from 'react';
 import { Placement } from '@floating-ui/react';
 
+import { IconButton } from './IconButton';
+import { isComponentType } from '../../utilities';
+
 export type IconButtonWithMenuProps = PropsWithChildren<{
   active?: boolean;
   Menu?: ComponentType | JSX.Element;
@@ -16,12 +13,6 @@ export type IconButtonWithMenuProps = PropsWithChildren<{
   menuPlacement?: Placement;
 }>;
 
-const isComponentType = (
-  elementOrComponent: ComponentType | JSX.Element,
-): elementOrComponent is ComponentType => {
-  return !isValidElement(elementOrComponent);
-};
-
 export const CompositeButton = forwardRef<
   HTMLDivElement,
   IconButtonWithMenuProps

package/src/components/CallControls/AcceptCallButton.tsx

@@ -0,0 +1,36 @@
+import { MouseEventHandler, useCallback } from 'react';
+import { IconButton } from '../Button';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export type AcceptCallButtonProps = {
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onAccept?: () => void;
+};
+
+export const AcceptCallButton = ({
+  disabled,
+  onAccept,
+  onClick,
+}: AcceptCallButtonProps) => {
+  const call = useCall();
+  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.join();
+        onAccept?.();
+      }
+    },
+    [onClick, onAccept, call],
+  );
+  return (
+    <IconButton
+      disabled={disabled}
+      icon="call-accept"
+      variant="success"
+      onClick={handleClick}
+    />
+  );
+};

package/src/components/CallControls/CallControls.tsx

@@ -1,32 +1,26 @@
-import { Call } from '@stream-io/video-client';
 import {
   CallStatsButton,
   CancelCallButton,
   RecordCallButton,
   ScreenShareButton,
   ToggleAudioPublishingButton,
-  ToggleCameraPublishingButton,
+  ToggleVideoPublishingButton,
 } from './index';
 import { SpeakingWhileMutedNotification } from '../Notification';
 
 export type CallControlsProps = {
-  call: Call;
   onLeave?: () => void;
 };
 
-export const CallControls = (props: CallControlsProps) => {
-  const { call, onLeave } = props;
-
-  return (
-    <div className="str-video__call-controls">
-      <RecordCallButton call={call} />
-      <CallStatsButton />
-      <ScreenShareButton call={call} />
-      <SpeakingWhileMutedNotification>
-        <ToggleAudioPublishingButton />
-      </SpeakingWhileMutedNotification>
-      <ToggleCameraPublishingButton />
-      <CancelCallButton call={call} onLeave={onLeave} />
-    </div>
-  );
-};
+export const CallControls = ({ onLeave }: CallControlsProps) => (
+  <div className="str-video__call-controls">
+    <RecordCallButton />
+    <CallStatsButton />
+    <ScreenShareButton />
+    <SpeakingWhileMutedNotification>
+      <ToggleAudioPublishingButton />
+    </SpeakingWhileMutedNotification>
+    <ToggleVideoPublishingButton />
+    <CancelCallButton onLeave={onLeave} />
+  </div>
+);

package/src/components/CallControls/CallStatsButton.tsx

@@ -1,22 +1,14 @@
 import { forwardRef } from 'react';
 
-import { CallStats } from '../StreamCall/CallStats';
+import { CallStats } from '../CallStats';
 import { CompositeButton, IconButton } from '../Button/';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 
-type CallStatsButtonProps = {
-  caption?: string;
-};
-
-export const CallStatsButton = ({
-  caption = 'Stats',
-}: CallStatsButtonProps) => {
-  return (
-    <MenuToggle placement="top-end" ToggleButton={ToggleMenuButton}>
-      <CallStats />
-    </MenuToggle>
-  );
-};
+export const CallStatsButton = () => (
+  <MenuToggle placement="top-end" ToggleButton={ToggleMenuButton}>
+    <CallStats />
+  </MenuToggle>
+);
 
 const ToggleMenuButton = forwardRef<
   HTMLDivElement,

package/src/components/CallControls/CancelCallButton.tsx

@@ -1,18 +1,19 @@
 import { MouseEventHandler, useCallback } from 'react';
-import { Call } from '@stream-io/video-client';
 import { IconButton } from '../Button/';
+import { useCall } from '@stream-io/video-react-bindings';
 
 export type CancelCallButtonProps = {
-  call: Call;
+  disabled?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onLeave?: () => void;
 };
 
 export const CancelCallButton = ({
-  call,
+  disabled,
   onClick,
   onLeave,
 }: CancelCallButtonProps) => {
+  const call = useCall();
   const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     async (e) => {
       if (onClick) {
@@ -24,5 +25,12 @@ export const CancelCallButton = ({
     },
     [onClick, onLeave, call],
   );
-  return <IconButton icon="call-end" variant="danger" onClick={handleClick} />;
+  return (
+    <IconButton
+      disabled={disabled}
+      icon="call-end"
+      variant="danger"
+      onClick={handleClick}
+    />
+  );
 };

package/src/components/CallControls/ReactionsButton.tsx

@@ -1,9 +1,8 @@
 import { OwnCapability, StreamReaction } from '@stream-io/video-client';
-import { useCall } from '@stream-io/video-react-bindings';
+import { Restricted, useCall } from '@stream-io/video-react-bindings';
 
 import { CompositeButton, IconButton } from '../Button';
 import { defaultEmojiReactions } from '../Reaction';
-import { Restricted } from '../Moderation';
 
 export const defaultReactions: StreamReaction[] = [
   {

package/src/components/CallControls/RecordCallButton.tsx

@@ -1,19 +1,21 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Call, OwnCapability } from '@stream-io/video-client';
-import { useIsCallRecordingInProgress } from '@stream-io/video-react-bindings';
+import { OwnCapability } from '@stream-io/video-client';
+import {
+  Restricted,
+  useCall,
+  useIsCallRecordingInProgress,
+} from '@stream-io/video-react-bindings';
 import { CompositeButton, IconButton } from '../Button/';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { Restricted } from '../Moderation';
 
 export type RecordCallButtonProps = {
-  call: Call;
   caption?: string;
 };
 
 export const RecordCallButton = ({
-  call,
   caption = 'Record',
 }: RecordCallButtonProps) => {
+  const call = useCall();
   const isCallRecordingInProgress = useIsCallRecordingInProgress();
   const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
   useEffect(() => {
@@ -30,9 +32,9 @@ export const RecordCallButton = ({
     try {
       setIsAwaitingResponse(true);
       if (isCallRecordingInProgress) {
-        await call.stopRecording();
+        await call?.stopRecording();
       } else {
-        await call.startRecording();
+        await call?.startRecording();
       }
     } catch (e) {
       console.error(`Failed start recording`, e);
@@ -57,6 +59,9 @@ export const RecordCallButton = ({
           />
         ) : (
           <IconButton
+            // FIXME OL: sort out this ambiguity
+            enabled={!!call}
+            disabled={!call}
             icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}
             title="Record call"
             onClick={toggleRecording}

package/src/components/CallControls/ScreenShareButton.tsx

@@ -1,28 +1,27 @@
 import { useEffect, useState } from 'react';
 import {
-  Call,
   getScreenShareStream,
   OwnCapability,
   SfuModels,
 } from '@stream-io/video-client';
 import {
+  Restricted,
+  useCall,
   useHasOngoingScreenShare,
   useHasPermissions,
   useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 import { CompositeButton, IconButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
-import { Restricted } from '../Moderation';
 
 export type ScreenShareButtonProps = {
-  call: Call;
   caption?: string;
 };
 
 export const ScreenShareButton = ({
-  call,
   caption = 'Screen Share',
 }: ScreenShareButtonProps) => {
+  const call = useCall();
   const localParticipant = useLocalParticipant();
   const isSomeoneScreenSharing = useHasOngoingScreenShare();
   const isScreenSharing = localParticipant?.publishedTracks.includes(
@@ -49,11 +48,11 @@ export const ScreenShareButton = ({
           <IconButton
             icon={isScreenSharing ? 'screen-share-on' : 'screen-share-off'}
             title="Share screen"
-            disabled={!isScreenSharing && isSomeoneScreenSharing}
+            disabled={(!isScreenSharing && isSomeoneScreenSharing) || !call}
             onClick={async () => {
               if (
                 !hasPermission &&
-                call.permissionsContext.canRequest(OwnCapability.SCREENSHARE)
+                call?.permissionsContext.canRequest(OwnCapability.SCREENSHARE)
               ) {
                 setIsAwaitingApproval(true);
                 await call
@@ -71,10 +70,10 @@ export const ScreenShareButton = ({
                   console.log(`Can't share screen: ${e}`);
                 });
                 if (stream) {
-                  await call.publishScreenShareStream(stream);
+                  await call?.publishScreenShareStream(stream);
                 }
               } else {
-                await call.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+                await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
               }
             }}
           />

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,24 +1,25 @@
 import { useCallback, useEffect, useState } from 'react';
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import {
+  Restricted,
   useCall,
   useHasPermissions,
-  useLocalParticipant,
   useI18n,
+  useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 
-import { useMediaDevices } from '../../core/contexts';
+import { useMediaDevices } from '../../core';
 import { DeviceSelectorAudioInput } from '../DeviceSettings';
 import { CompositeButton, IconButton } from '../Button';
 import { PermissionNotification } from '../Notification';
-import { Restricted } from '../Moderation';
 
 export type ToggleAudioPreviewButtonProps = { caption?: string };
 
 export const ToggleAudioPreviewButton = ({
   caption,
 }: ToggleAudioPreviewButtonProps) => {
-  const { initialAudioEnabled, toggleAudioMuteState } = useMediaDevices();
+  const { initialAudioEnabled, toggleInitialAudioMuteState } =
+    useMediaDevices();
   const { t } = useI18n();
 
   return (
@@ -29,7 +30,7 @@ export const ToggleAudioPreviewButton = ({
     >
       <IconButton
         icon={initialAudioEnabled ? 'mic' : 'mic-off'}
-        onClick={toggleAudioMuteState}
+        onClick={toggleInitialAudioMuteState}
       />
     </CompositeButton>
   );
@@ -39,12 +40,16 @@ export type ToggleAudioPublishingButtonProps = {
   caption?: string;
 };
 
-export const ToggleAudioPublishingButton = ({
-  caption,
-}: ToggleAudioPublishingButtonProps) => {
-  const { publishAudioStream, stopPublishingAudio } = useMediaDevices();
+export const ToggleAudioPublishingButton = (
+  props: ToggleAudioPublishingButtonProps,
+) => {
+  const { publishAudioStream, stopPublishingAudio, setInitialAudioEnabled } =
+    useMediaDevices();
   const localParticipant = useLocalParticipant();
   const { t } = useI18n();
+
+  const { caption = t('Mic') } = props;
+
   const isAudioMute = !localParticipant?.publishedTracks.includes(
     SfuModels.TrackType.AUDIO,
   );
@@ -74,8 +79,13 @@ export const ToggleAudioPublishingButton = ({
         });
       return;
     }
-    if (isAudioMute && hasPermission) {
-      await publishAudioStream();
+    if (isAudioMute) {
+      if (hasPermission) {
+        setInitialAudioEnabled(true);
+        await publishAudioStream();
+      } else {
+        console.log('Cannot publish audio stream. Insufficient permissions.');
+      }
     } else {
       stopPublishingAudio();
     }
@@ -84,6 +94,7 @@ export const ToggleAudioPublishingButton = ({
     hasPermission,
     isAudioMute,
     publishAudioStream,
+    setInitialAudioEnabled,
     stopPublishingAudio,
   ]);
 
@@ -99,7 +110,7 @@ export const ToggleAudioPublishingButton = ({
         <CompositeButton
           Menu={DeviceSelectorAudioInput}
           active={isAudioMute}
-          caption={caption || t('Mic')}
+          caption={caption}
         >
           <IconButton
             icon={isAudioMute ? 'mic-off' : 'mic'}