@stream-io/video-react-sdk 0.0.1-alpha.45 → 0.0.1-alpha.46

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.46](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.45...@stream-io/video-react-sdk-0.0.1-alpha.46) (2023-05-17)
+
+
+### Bug Fixes
+
+* reorganize call control buttons ([#514](https://github.com/GetStream/stream-video-js/issues/514)) ([ed1df9c](https://github.com/GetStream/stream-video-js/commit/ed1df9c230d20c2f08d0d97e2eaa962d22c7fc36))
+
+
+
 ## [0.0.1-alpha.45](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.44...@stream-io/video-react-sdk-0.0.1-alpha.45) (2023-05-17)
 
 

package/dist/src/components/CallControls/CallControls.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CallStatsButton, CancelCallButton, RecordCallButton, ScreenShareButton, ToggleAudioPublishingButton, ToggleCameraPublishingButton, } from './index';
+import { CallStatsButton, CancelCallButton, RecordCallButton, ScreenShareButton, ToggleAudioPublishingButton, ToggleVideoPublishingButton, } from './index';
 import { SpeakingWhileMutedNotification } from '../Notification';
 export const CallControls = (props) => {
     const { call, onLeave } = props;
-    return (_jsxs("div", Object.assign({ className: "str-video__call-controls" }, { children: [_jsx(RecordCallButton, { call: call }), _jsx(CallStatsButton, {}), _jsx(ScreenShareButton, { call: call }), _jsx(SpeakingWhileMutedNotification, { children: _jsx(ToggleAudioPublishingButton, {}) }), _jsx(ToggleCameraPublishingButton, {}), _jsx(CancelCallButton, { call: call, onLeave: onLeave })] })));
+    return (_jsxs("div", Object.assign({ className: "str-video__call-controls" }, { children: [_jsx(RecordCallButton, { call: call }), _jsx(CallStatsButton, {}), _jsx(ScreenShareButton, { call: call }), _jsx(SpeakingWhileMutedNotification, { children: _jsx(ToggleAudioPublishingButton, {}) }), _jsx(ToggleVideoPublishingButton, {}), _jsx(CancelCallButton, { call: call, onLeave: onLeave })] })));
 };
 //# sourceMappingURL=CallControls.js.map

package/dist/src/components/CallControls/CallControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../src/components/CallControls/CallControls.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,2BAA2B,EAC3B,4BAA4B,GAC7B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AAOjE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEhC,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,iBACvC,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,GAAI,EAChC,KAAC,eAAe,KAAG,EACnB,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,GAAI,EACjC,KAAC,8BAA8B,cAC7B,KAAC,2BAA2B,KAAG,GACA,EACjC,KAAC,4BAA4B,KAAG,EAChC,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,KAC9C,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CallControls.js","sourceRoot":"","sources":["../../../../src/components/CallControls/CallControls.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,2BAA2B,EAC3B,2BAA2B,GAC5B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AAOjE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEhC,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,iBACvC,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,GAAI,EAChC,KAAC,eAAe,KAAG,EACnB,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,GAAI,EACjC,KAAC,8BAA8B,cAC7B,KAAC,2BAA2B,KAAG,GACA,EACjC,KAAC,2BAA2B,KAAG,EAC/B,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,KAC9C,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallControls/ToggleAudioButton.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
-import { useCall, useHasPermissions, useI18n, Restricted, useLocalParticipant, } from '@stream-io/video-react-bindings';
+import { Restricted, useCall, useHasPermissions, useI18n, useLocalParticipant, } from '@stream-io/video-react-bindings';
 import { useMediaDevices } from '../../core';
 import { DeviceSelectorAudioInput } from '../DeviceSettings';
 import { CompositeButton, IconButton } from '../Button';
@@ -48,8 +48,13 @@ export const ToggleAudioPublishingButton = (props) => {
             });
             return;
         }
-        if (isAudioMute && hasPermission) {
-            yield publishAudioStream();
+        if (isAudioMute) {
+            if (hasPermission) {
+                yield publishAudioStream();
+            }
+            else {
+                console.log('Cannot publish audio stream. Insufficient permissions.');
+            }
         }
         else {
             stopPublishingAudio();

package/dist/src/components/CallControls/ToggleAudioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleAudioButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/ToggleAudioButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToggleAudioButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/ToggleAudioButton.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EACL,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,OAAO,EACP,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,OAAO,GACuB,EAAE,EAAE;IAClC,MAAM,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,GAAG,eAAe,EAAE,CAAC;IACxE,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,KAAC,eAAe,kBACd,IAAI,EAAE,wBAAwB,EAC9B,MAAM,EAAE,CAAC,mBAAmB,EAC5B,OAAO,EAAE,OAAO,IAAI,CAAC,CAAC,KAAK,CAAC,gBAE5B,KAAC,UAAU,IACT,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,oBAAoB,GAC7B,IACc,CACnB,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,KAAuC,EACvC,EAAE;IACF,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IACtE,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,eAAe,CAAC,QAAQ,CAC7D,SAAS,CAAC,SAAS,CAAC,KAAK,CAC1B,CAAA,CAAC;IAEF,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;IACpE,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,WAAW,GAAG,WAAW,CAAC,GAAS,EAAE;QACzC,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,wDAAwD,CAAC,CAAC;aACvE;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,CACL,KAAC,UAAU,kBAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,gBACpD,KAAC,sBAAsB,kBACrB,UAAU,EAAE,aAAa,CAAC,UAAU,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAC,oBAAoB,EACpC,uBAAuB,EAAC,oCAAoC,EAC5D,cAAc,EAAC,0BAA0B,gBAEzC,KAAC,eAAe,kBACd,IAAI,EAAE,wBAAwB,EAC9B,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,OAAO,gBAEhB,KAAC,UAAU,IACT,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACrC,OAAO,EAAE,WAAW,GACpB,IACc,IACK,IACd,CACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallControls/ToggleVideoButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type ToggleVideoPreviewButtonProps = {
+    caption?: string;
+};
+export declare const ToggleVideoPreviewButton: ({ caption, }: ToggleVideoPreviewButtonProps) => JSX.Element;
+type ToggleVideoPublishingButtonProps = {
+    caption?: string;
+};
+export declare const ToggleVideoPublishingButton: ({ caption, }: ToggleVideoPublishingButtonProps) => JSX.Element;
+export {};

package/dist/src/components/CallControls/{ToggleCameraButton.js → ToggleVideoButton.js}

@@ -12,14 +12,14 @@ import { useCallback, useEffect, useState } from 'react';
 import { Restricted, useCall, useHasPermissions, useLocalParticipant, } from '@stream-io/video-react-bindings';
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import { CompositeButton, IconButton } from '../Button/';
-import { useMediaDevices } from '../../core/contexts';
+import { useMediaDevices } from '../../core';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
-export const ToggleCameraPreviewButton = ({ caption = 'Video', }) => {
+export const ToggleVideoPreviewButton = ({ caption = 'Video', }) => {
     const { toggleVideoMuteState, initialVideoState } = useMediaDevices();
     return (_jsx(CompositeButton, Object.assign({ Menu: DeviceSelectorVideo, active: !initialVideoState.enabled, caption: caption }, { children: _jsx(IconButton, { icon: initialVideoState.enabled ? 'camera' : 'camera-off', onClick: toggleVideoMuteState }) })));
 };
-export const ToggleCameraPublishingButton = ({ caption = 'Video', }) => {
+export const ToggleVideoPublishingButton = ({ caption = 'Video', }) => {
     const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
     const localParticipant = useLocalParticipant();
     const isVideoMute = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.publishedTracks.includes(SfuModels.TrackType.VIDEO));
@@ -45,8 +45,13 @@ export const ToggleCameraPublishingButton = ({ caption = 'Video', }) => {
             });
             return;
         }
-        if (isVideoMute && hasPermission) {
-            yield publishVideoStream();
+        if (isVideoMute) {
+            if (hasPermission) {
+                yield publishVideoStream();
+            }
+            else {
+                console.log('Cannot publish video. Insufficient permissions.');
+            }
         }
         else {
             stopPublishingVideo();
@@ -60,4 +65,4 @@ export const ToggleCameraPublishingButton = ({ caption = 'Video', }) => {
     ]);
     return (_jsx(Restricted, Object.assign({ requiredGrants: [OwnCapability.SEND_VIDEO] }, { children: _jsx(PermissionNotification, Object.assign({ 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." }, { children: _jsx(CompositeButton, Object.assign({ Menu: DeviceSelectorVideo, active: isVideoMute, caption: caption }, { children: _jsx(IconButton, { icon: isVideoMute ? 'camera-off' : 'camera', onClick: handleClick }) })) })) })));
 };
-//# sourceMappingURL=ToggleCameraButton.js.map
+//# sourceMappingURL=ToggleVideoButton.js.map

package/dist/src/components/CallControls/ToggleVideoButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleVideoButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/ToggleVideoButton.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/CallControls/index.d.ts

@@ -6,6 +6,5 @@ export * from './ReactionsButton';
 export * from './RecordCallButton';
 export * from './ScreenShareButton';
 export * from './ToggleAudioButton';
-export * from './ToggleCameraButton';
 export * from './ToggleAudioOutputButton';
-export * from './ToggleParticipantListButton';
+export * from './ToggleVideoButton';

package/dist/src/components/CallControls/index.js

@@ -6,7 +6,6 @@ export * from './ReactionsButton';
 export * from './RecordCallButton';
 export * from './ScreenShareButton';
 export * from './ToggleAudioButton';
-export * from './ToggleCameraButton';
 export * from './ToggleAudioOutputButton';
-export * from './ToggleParticipantListButton';
+export * from './ToggleVideoButton';
 //# sourceMappingURL=index.js.map

package/dist/src/components/CallControls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CallControls/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CallControls/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -25,9 +25,9 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.0.1-alpha.29",
-    "@stream-io/video-client": "^0.0.1-alpha.153",
-    "@stream-io/video-react-bindings": "^0.0.1-alpha.40",
+    "@stream-io/i18n": "^0.0.1-alpha.30",
+    "@stream-io/video-client": "^0.0.1-alpha.154",
+    "@stream-io/video-react-bindings": "^0.0.1-alpha.41",
     "clsx": "^1.2.1",
     "rxjs": "~7.8.1"
   },
@@ -36,7 +36,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.0.1-alpha.23",
+    "@stream-io/video-styling": "^0.0.1-alpha.24",
     "@types/rimraf": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -45,5 +45,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.45"
+  "version": "0.0.1-alpha.46"
 }

package/src/components/CallControls/CallControls.tsx

@@ -5,7 +5,7 @@ import {
   RecordCallButton,
   ScreenShareButton,
   ToggleAudioPublishingButton,
-  ToggleCameraPublishingButton,
+  ToggleVideoPublishingButton,
 } from './index';
 import { SpeakingWhileMutedNotification } from '../Notification';
 
@@ -25,7 +25,7 @@ export const CallControls = (props: CallControlsProps) => {
       <SpeakingWhileMutedNotification>
         <ToggleAudioPublishingButton />
       </SpeakingWhileMutedNotification>
-      <ToggleCameraPublishingButton />
+      <ToggleVideoPublishingButton />
       <CancelCallButton call={call} onLeave={onLeave} />
     </div>
   );

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import {
+  Restricted,
   useCall,
   useHasPermissions,
   useI18n,
-  Restricted,
   useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 
@@ -77,8 +77,12 @@ export const ToggleAudioPublishingButton = (
         });
       return;
     }
-    if (isAudioMute && hasPermission) {
-      await publishAudioStream();
+    if (isAudioMute) {
+      if (hasPermission) {
+        await publishAudioStream();
+      } else {
+        console.log('Cannot publish audio stream. Insufficient permissions.');
+      }
     } else {
       stopPublishingAudio();
     }

package/src/components/CallControls/{ToggleCameraButton.tsx → ToggleVideoButton.tsx}

@@ -8,15 +8,15 @@ import {
 
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import { CompositeButton, IconButton } from '../Button/';
-import { useMediaDevices } from '../../core/contexts';
+import { useMediaDevices } from '../../core';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
 
-export type ToggleCameraPreviewButtonProps = { caption?: string };
+export type ToggleVideoPreviewButtonProps = { caption?: string };
 
-export const ToggleCameraPreviewButton = ({
+export const ToggleVideoPreviewButton = ({
   caption = 'Video',
-}: ToggleCameraPreviewButtonProps) => {
+}: ToggleVideoPreviewButtonProps) => {
   const { toggleVideoMuteState, initialVideoState } = useMediaDevices();
 
   return (
@@ -33,13 +33,13 @@ export const ToggleCameraPreviewButton = ({
   );
 };
 
-type ToggleCameraPublishingButtonProps = {
+type ToggleVideoPublishingButtonProps = {
   caption?: string;
 };
 
-export const ToggleCameraPublishingButton = ({
+export const ToggleVideoPublishingButton = ({
   caption = 'Video',
-}: ToggleCameraPublishingButtonProps) => {
+}: ToggleVideoPublishingButtonProps) => {
   const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
   const localParticipant = useLocalParticipant();
   const isVideoMute = !localParticipant?.publishedTracks.includes(
@@ -71,8 +71,12 @@ export const ToggleCameraPublishingButton = ({
         });
       return;
     }
-    if (isVideoMute && hasPermission) {
-      await publishVideoStream();
+    if (isVideoMute) {
+      if (hasPermission) {
+        await publishVideoStream();
+      } else {
+        console.log('Cannot publish video. Insufficient permissions.');
+      }
     } else {
       stopPublishingVideo();
     }

package/src/components/CallControls/index.ts

@@ -6,6 +6,5 @@ export * from './ReactionsButton';
 export * from './RecordCallButton';
 export * from './ScreenShareButton';
 export * from './ToggleAudioButton';
-export * from './ToggleCameraButton';
 export * from './ToggleAudioOutputButton';
-export * from './ToggleParticipantListButton';
+export * from './ToggleVideoButton';

package/dist/src/components/CallControls/ToggleCameraButton.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type ToggleCameraPreviewButtonProps = {
-    caption?: string;
-};
-export declare const ToggleCameraPreviewButton: ({ caption, }: ToggleCameraPreviewButtonProps) => JSX.Element;
-type ToggleCameraPublishingButtonProps = {
-    caption?: string;
-};
-export declare const ToggleCameraPublishingButton: ({ caption, }: ToggleCameraPublishingButtonProps) => JSX.Element;
-export {};

package/dist/src/components/CallControls/ToggleCameraButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleCameraButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/ToggleCameraButton.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/CallControls/ToggleParticipantListButton.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ButtonWithIconProps } from '../Button/';
-export type ToggleParticipantListButtonProps = {
-    caption?: string;
-} & Omit<ButtonWithIconProps, 'icon' | 'ref'>;
-export declare const ToggleParticipantListButton: (props: ToggleParticipantListButtonProps) => JSX.Element;

package/dist/src/components/CallControls/ToggleParticipantListButton.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CompositeButton, IconButton } from '../Button/';
-export const ToggleParticipantListButton = (props) => {
-    const { enabled, caption = 'Participants' } = props;
-    return (_jsx(CompositeButton, Object.assign({ active: enabled, caption: caption }, { children: _jsx(IconButton, Object.assign({ icon: "participants" }, props)) })));
-};
-//# sourceMappingURL=ToggleParticipantListButton.js.map

package/dist/src/components/CallControls/ToggleParticipantListButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleParticipantListButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/ToggleParticipantListButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO9E,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,KAAuC,EACvC,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,eAAe,kBAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,gBAChD,KAAC,UAAU,kBAAC,IAAI,EAAC,cAAc,IAAK,KAAK,EAAI,IAC7B,CACnB,CAAC;AACJ,CAAC,CAAC"}

package/src/components/CallControls/ToggleParticipantListButton.tsx

@@ -1,17 +0,0 @@
-import { ButtonWithIconProps, CompositeButton, IconButton } from '../Button/';
-
-export type ToggleParticipantListButtonProps = { caption?: string } & Omit<
-  ButtonWithIconProps,
-  'icon' | 'ref'
->;
-
-export const ToggleParticipantListButton = (
-  props: ToggleParticipantListButtonProps,
-) => {
-  const { enabled, caption = 'Participants' } = props;
-  return (
-    <CompositeButton active={enabled} caption={caption}>
-      <IconButton icon="participants" {...props} />
-    </CompositeButton>
-  );
-};