Add onDeviceError callback to ControlBar (#921)

livekit · Jul 11, 2024 · d21fb66 · d21fb66
1 parent 7633dfc
commit d21fb66
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/.changeset/fresh-cameras-tell.md b/.changeset/fresh-cameras-tell.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Add onDeviceError callback to ControlBar
diff --git a/packages/react/etc/components-react.api.md b/packages/react/etc/components-react.api.md
@@ -186,7 +186,7 @@ export interface ConnectionStatusProps extends React_2.HTMLAttributes<HTMLDivEle
 }
 
 // @public
-export function ControlBar({ variation, controls, saveUserChoices, ...props }: ControlBarProps): React_2.JSX.Element;
+export function ControlBar({ variation, controls, saveUserChoices, onDeviceError, ...props }: ControlBarProps): React_2.JSX.Element;
 
 // @public (undocumented)
 export type ControlBarControls = {
@@ -202,6 +202,11 @@ export type ControlBarControls = {
 export interface ControlBarProps extends React_2.HTMLAttributes<HTMLDivElement> {
     // (undocumented)
     controls?: ControlBarControls;
+    // (undocumented)
+    onDeviceError?: (error: {
+        source: Track.Source;
+        error: Error;
+    }) => void;
     // @alpha
     saveUserChoices?: boolean;
     // (undocumented)

diff --git a/packages/react/src/prefabs/ControlBar.tsx b/packages/react/src/prefabs/ControlBar.tsx
@@ -25,6 +25,7 @@ export type ControlBarControls = {
 
 /** @public */
 export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
   variation?: 'minimal' | 'verbose' | 'textOnly';
   controls?: ControlBarControls;
   /**
@@ -56,6 +57,7 @@ export function ControlBar({
   variation,
   controls,
   saveUserChoices = true,
+  onDeviceError,
   ...props
 }: ControlBarProps) {
   const [isChatOpen, setIsChatOpen] = React.useState(false);
@@ -135,6 +137,7 @@ export function ControlBar({
             source={Track.Source.Microphone}
             showIcon={showIcon}
             onChange={microphoneOnChange}
+            onDeviceError={(error) => onDeviceError?.({ source: Track.Source.Microphone, error })}
           >
             {showText && 'Microphone'}
           </TrackToggle>
@@ -148,7 +151,12 @@ export function ControlBar({
       )}
       {visibleControls.camera && (
         <div className="lk-button-group">
-          <TrackToggle source={Track.Source.Camera} showIcon={showIcon} onChange={cameraOnChange}>
+          <TrackToggle
+            source={Track.Source.Camera}
+            showIcon={showIcon}
+            onChange={cameraOnChange}
+            onDeviceError={(error) => onDeviceError?.({ source: Track.Source.Camera, error })}
+          >
             {showText && 'Camera'}
           </TrackToggle>
           <div className="lk-button-group-menu">
@@ -165,6 +173,7 @@ export function ControlBar({
           captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
           showIcon={showIcon}
           onChange={onScreenShareChange}
+          onDeviceError={(error) => onDeviceError?.({ source: Track.Source.ScreenShare, error })}
         >
           {showText && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen')}
         </TrackToggle>