@stream-io/video-react-sdk 1.4.4 → 1.5.0

package/dist/src/components/DropdownSelect/DropdownSelect.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 export type DropDownSelectOptionProps = {
     label: string;
     selected?: boolean;
-    icon: string;
+    icon?: string;
 };
 export declare const DropDownSelectOption: (props: DropDownSelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DropDownSelect: (props: {

package/dist/src/core/components/Video/Video.d.ts

@@ -2,6 +2,11 @@ import { ComponentPropsWithoutRef, ComponentType } from 'react';
 import { StreamVideoParticipant, VideoTrackType } from '@stream-io/video-client';
 import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
+    /**
+     * Pass false to disable rendering video and render fallback
+     * even if the participant has published video.
+     */
+    enabled?: boolean;
     /**
      * The track type to display.
      */
@@ -35,6 +40,6 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
     };
 };
 export declare const Video: {
-    ({ trackType, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ enabled, trackType, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.7.3",
+    "@stream-io/video-client": "1.8.0",
     "@stream-io/video-filters-web": "0.1.4",
-    "@stream-io/video-react-bindings": "1.0.9",
+    "@stream-io/video-react-bindings": "1.1.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"
@@ -48,7 +48,7 @@
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "@stream-io/audio-filters-web": "^0.2.2",
-    "@stream-io/video-styling": "^1.0.6",
+    "@stream-io/video-styling": "^1.1.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",

package/src/components/Button/CompositeButton.tsx

@@ -31,6 +31,7 @@ export const CompositeButton = forwardRef<
   IconButtonWithMenuProps
 >(function CompositeButton(
   {
+    disabled,
     caption,
     children,
     className,
@@ -63,6 +64,7 @@ export const CompositeButton = forwardRef<
             active && variant === 'primary',
           'str-video__composite-button__button-group--active-secondary':
             active && variant === 'secondary',
+          'str-video__composite-button__button-group--disabled': disabled,
         })}
       >
         <button
@@ -72,6 +74,7 @@ export const CompositeButton = forwardRef<
             e.preventDefault();
             onClick?.(e);
           }}
+          disabled={disabled}
           {...restButtonProps}
         >
           {children}

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -11,10 +11,8 @@ import { IconButton } from '../Button';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 import { WithTooltip } from '../Tooltip';
 import { Avatar } from '../Avatar';
-import {
-  ParticipantActionsContextMenu,
-  ParticipantViewContext,
-} from '../../core/';
+import { ParticipantActionsContextMenu } from '../../core/components/ParticipantView/ParticipantActionsContextMenu';
+import { ParticipantViewContext } from '../../core/components/ParticipantView/ParticipantViewContext';
 
 type CallParticipantListingItemProps = {
   /** Participant object be rendered */

package/src/components/DropdownSelect/DropdownSelect.tsx

@@ -162,7 +162,7 @@ const Select = (props: {
 export type DropDownSelectOptionProps = {
   label: string;
   selected?: boolean;
-  icon: string;
+  icon?: string;
 };
 
 export const DropDownSelectOption = (props: DropDownSelectOptionProps) => {
@@ -179,7 +179,7 @@ export const DropDownSelectOption = (props: DropDownSelectOptionProps) => {
         onClick: () => handleSelect(index),
       })}
     >
-      <Icon className="str-video__dropdown-icon" icon={icon} />
+      {icon && <Icon className="str-video__dropdown-icon" icon={icon} />}
       <span className="str-video__dropdown-label">{label}</span>
     </div>
   );

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

@@ -11,9 +11,9 @@ import { useParticipantViewContext } from './ParticipantViewContext';
 import {
   GenericMenu,
   GenericMenuButtonItem,
-  Icon,
   useMenuContext,
-} from '../../../components';
+} from '../../../components/Menu';
+import { Icon } from '../../../components/Icon';
 
 export const ParticipantActionsContextMenu = () => {
   const { participant, participantViewElement, videoElement } =

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

@@ -13,6 +13,7 @@ import {
   StreamVideoParticipant,
   VideoTrackType,
 } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import { Audio } from '../Audio';
 import { Video, VideoProps } from '../Video';
@@ -100,6 +101,9 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       trackType,
     });
 
+    const { useIncomingVideoSettings } = useCallStateHooks();
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+
     const participantViewContextValue = useMemo(
       () => ({
         participant,
@@ -167,6 +171,11 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
             participant={participant}
             trackType={trackType}
             refs={videoRefs}
+            enabled={
+              isLocalParticipant ||
+              trackType !== 'videoTrack' ||
+              isParticipantVideoEnabled(participant.sessionId)
+            }
             autoPlay
           />
           {isComponentType(ParticipantViewUI) ? (

package/src/core/components/Video/Video.tsx

@@ -20,6 +20,12 @@ import {
 import { useCall } from '@stream-io/video-react-bindings';
 
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
+  /**
+   * Pass false to disable rendering video and render fallback
+   * even if the participant has published video.
+   */
+  enabled?: boolean;
+
   /**
    * The track type to display.
    */
@@ -54,6 +60,7 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
 };
 
 export const Video = ({
+  enabled,
   trackType,
   participant,
   className,
@@ -139,7 +146,7 @@ export const Video = ({
     trackType === 'none' ||
     viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
 
-  const hasNoVideoOrInvisible = !isPublishingTrack || isInvisible;
+  const hasNoVideoOrInvisible = !enabled || !isPublishingTrack || isInvisible;
   const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
   const isScreenShareTrack = trackType === 'screenShareTrack';
   return (