@stream-io/video-react-sdk 1.12.6 → 1.12.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.12.6",
+  "version": "1.12.8",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.18.3",
+    "@stream-io/video-client": "1.18.5",
     "@stream-io/video-filters-web": "0.1.7",
-    "@stream-io/video-react-bindings": "1.5.5",
+    "@stream-io/video-react-bindings": "1.5.7",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -30,8 +30,12 @@ export const ToggleAudioPreviewButton = (
   const { caption, onMenuToggle, ...restCompositeButtonProps } = props;
   const { t } = useI18n();
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, optimisticIsMute, hasBrowserPermission } =
-    useMicrophoneState();
+  const {
+    microphone,
+    optimisticIsMute,
+    hasBrowserPermission,
+    isPromptingPermission,
+  } = useMicrophoneState();
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, () =>
     microphone.toggle(),
@@ -74,6 +78,13 @@ export const ToggleAudioPreviewButton = (
             children="!"
           />
         )}
+        {isPromptingPermission && (
+          <span
+            className="str-video__pending-permission"
+            title={t('Waiting for permission')}
+            children="?"
+          />
+        )}
       </CompositeButton>
     </WithTooltip>
   );
@@ -102,8 +113,12 @@ export const ToggleAudioPublishingButton = (
     useRequestPermission(OwnCapability.SEND_AUDIO);
 
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, optimisticIsMute, hasBrowserPermission } =
-    useMicrophoneState();
+  const {
+    microphone,
+    optimisticIsMute,
+    hasBrowserPermission,
+    isPromptingPermission,
+  } = useMicrophoneState();
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, async () => {
     if (!hasPermission) {
@@ -154,6 +169,14 @@ export const ToggleAudioPublishingButton = (
             {(!hasBrowserPermission || !hasPermission) && (
               <span className="str-video__no-media-permission">!</span>
             )}
+            {isPromptingPermission && (
+              <span
+                className="str-video__pending-permission"
+                title={t('Waiting for permission')}
+              >
+                ?
+              </span>
+            )}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -36,7 +36,12 @@ export const ToggleVideoPreviewButton = (
   } = props;
   const { t } = useI18n();
   const { useCameraState } = useCallStateHooks();
-  const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
+  const {
+    camera,
+    optimisticIsMute,
+    hasBrowserPermission,
+    isPromptingPermission,
+  } = useCameraState();
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, () => camera.toggle());
 
@@ -79,6 +84,13 @@ export const ToggleVideoPreviewButton = (
             children="!"
           />
         )}
+        {isPromptingPermission && (
+          <span
+            className="str-video__pending-permission"
+            title={t('Waiting for permission')}
+            children="?"
+          />
+        )}
       </CompositeButton>
     </WithTooltip>
   );
@@ -107,7 +119,12 @@ export const ToggleVideoPublishingButton = (
     useRequestPermission(OwnCapability.SEND_VIDEO);
 
   const { useCameraState, useCallSettings } = useCallStateHooks();
-  const { camera, optimisticIsMute, hasBrowserPermission } = useCameraState();
+  const {
+    camera,
+    optimisticIsMute,
+    hasBrowserPermission,
+    isPromptingPermission,
+  } = useCameraState();
   const callSettings = useCallSettings();
   const isPublishingVideoAllowed = callSettings?.video.enabled;
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
@@ -170,6 +187,14 @@ export const ToggleVideoPublishingButton = (
               !isPublishingVideoAllowed) && (
               <span className="str-video__no-media-permission">!</span>
             )}
+            {isPromptingPermission && (
+              <span
+                className="str-video__pending-permission"
+                title={t('Waiting for permission')}
+              >
+                ?
+              </span>
+            )}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

package/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx

@@ -171,13 +171,14 @@ export const ParticipantActionsContextMenu = () => {
           </GenericMenuButtonItem>
         )}
       </Restricted>
-      {participantViewElement && (
-        <GenericMenuButtonItem onClick={toggleFullscreenMode}>
-          {t('{{ direction }} fullscreen', {
-            direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-          })}
-        </GenericMenuButtonItem>
-      )}
+      {participantViewElement &&
+        typeof participantViewElement.requestFullscreen !== 'undefined' && (
+          <GenericMenuButtonItem onClick={toggleFullscreenMode}>
+            {t('{{ direction }} fullscreen', {
+              direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+            })}
+          </GenericMenuButtonItem>
+        )}
       {videoElement && document.pictureInPictureEnabled && (
         <GenericMenuButtonItem onClick={togglePictureInPicture}>
           {t('{{ direction }} picture-in-picture', {