Fix bug where LocalVideoProvider doesnt update isVideoEnabled on unplugged video device

Author: michhyun1

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 ### Fixed
+- Fix a bug where the `isVideoEnabled` is still true even when the video device is unplugged. 
 
 - When audio inputs change in a meeting, `AudioInputProvider` will only automatically select a new audio input device if a meeting is joined with `DeviceLabels.Audio` or `DeviceLabels.AudioAndVideo` device labels.
 - Publish `MeetingStatus.Failed` only when a non-terminal failure is encountered. Currently, some Amazon Chime SDK for JavaScript meeting session statuses pass both the `sessionStatus.isFailure()` as well as `sessionStatus.isTerminal()` in JS SDK, thus, for a status if it is in both, it will be considered as non-terminal failure and `MeetingStatus.TerminalFailure` will never get set for such statuses. Check [MeetingSessionStatus](https://github.com/aws/amazon-chime-sdk-js/blob/main/src/meetingsession/MeetingSessionStatus.ts) file for more information on both methods in JS SDK.

src/providers/LocalVideoProvider/docs/LocalVideoProvider.stories.mdx

@@ -11,6 +11,8 @@ The React SDK depends on the Amazon Chime SDK for JavaScript, wherein, a single
 To start/stop a video preview, please check `PreviewVideo` component [documentation](/docs/sdk-components-previewvideo--page).
 To start/stop user's local video, use `toggleVideo` function from the `LocalVideoProvider`.
 
+In the case of a video being unplugged, the React SDK will automatically stop the local video tile, and will not choose another video device automatically.
+
 ## State
 
 ```javascript

src/providers/LocalVideoProvider/index.tsx

@@ -23,7 +23,7 @@ const LocalVideoProvider: React.FC = ({ children }) => {
   const logger = useLogger();
   const meetingManager = useMeetingManager();
   const audioVideo = useAudioVideo();
-  const { selectedDevice } = useVideoInputs();
+  const { devices, selectedDevice } = useVideoInputs();
   const [isVideoEnabled, setIsVideoEnabled] = useState(false);
   const [hasReachedVideoLimit, setHasReachedVideoLimit] = useState(false);
   const [tileId, setTileId] = useState<number | null>(null);
@@ -63,6 +63,14 @@ const LocalVideoProvider: React.FC = ({ children }) => {
     }
   }, [hasReachedVideoLimit]);
 
+  // In the case that the selected device is unplugged, the JS SDK will automatically call stopLocalVideoTile
+  // We can then set the isVideoEnabled to false
+  useEffect(() => {
+    if (!audioVideo?.hasStartedLocalVideoTile()) {
+      setIsVideoEnabled(false);
+    }
+  }, [devices]);
+
   const toggleVideo = useCallback(async (): Promise<void> => {
     try {
       if (isVideoEnabled || !selectedDevice) {