@stream-io/video-react-sdk 1.4.5 → 1.6.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/CallLayout/LivestreamLayout.d.ts

@@ -26,6 +26,11 @@ export type LivestreamLayoutProps = {
      * Whether to show the speaker name. Defaults to `false`.
      */
     showSpeakerName?: boolean;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
     /**
      * The props to pass to the floating participant element.
      */

package/dist/src/core/components/CallLayout/PaginatedGridLayout.d.ts

@@ -9,6 +9,11 @@ export type PaginatedGridLayoutProps = {
      * @default false
      */
     excludeLocalParticipant?: boolean;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
     /**
      * Turns on/off the pagination arrows.
      * @default true

package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts

@@ -23,6 +23,11 @@ export type SpeakerLayoutProps = {
      * @default false
      */
     excludeLocalParticipant?: boolean;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
     /**
      * Turns on/off the pagination arrows.
      * @default true
@@ -30,6 +35,6 @@ export type SpeakerLayoutProps = {
     pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -18,6 +18,11 @@ export type ParticipantViewProps = {
      * You can use `none` if you're building an audio-only call.
      */
     trackType?: VideoTrackType | 'none';
+    /**
+     * Forces participant's video to be mirrored or unmirrored. By default, video track
+     * from the local participant is mirrored, and all other videos are not mirrored.
+     */
+    mirror?: boolean;
     /**
      * This prop is only useful for advanced use-cases (for example, building your own layout).
      * When set to `true` it will mute the give participant's audio stream on the client side.
@@ -54,6 +59,11 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
      * You can use `none` if you're building an audio-only call.
      */
     trackType?: VideoTrackType | "none";
+    /**
+     * Forces participant's video to be mirrored or unmirrored. By default, video track
+     * from the local participant is mirrored, and all other videos are not mirrored.
+     */
+    mirror?: boolean;
     /**
      * This prop is only useful for advanced use-cases (for example, building your own layout).
      * When set to `true` it will mute the give participant's audio stream on the client side.

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

@@ -2,6 +2,16 @@ 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;
+    /**
+     * Forces the video to be mirrored or unmirrored. By default, video track
+     * from the local participant is mirrored, and all other videos are not mirrored.
+     */
+    mirror?: boolean;
     /**
      * The track type to display.
      */
@@ -35,6 +45,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, mirror, 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.5",
+  "version": "1.6.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.4",
+    "@stream-io/video-client": "1.8.0",
     "@stream-io/video-filters-web": "0.1.4",
-    "@stream-io/video-react-bindings": "1.0.10",
+    "@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/CallLayout/LivestreamLayout.tsx

@@ -44,6 +44,12 @@ export type LivestreamLayoutProps = {
    */
   showSpeakerName?: boolean;
 
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
+
   /**
    * The props to pass to the floating participant element.
    */
@@ -116,6 +122,9 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
           )}
           participant={currentSpeaker}
           ParticipantViewUI={FloatingParticipantOverlay || Overlay}
+          mirror={
+            props.mirrorLocalParticipantVideo !== false ? undefined : false
+          }
           muteAudio // audio is rendered by ParticipantsAudio
         />
       )}

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -20,11 +20,12 @@ type PaginatedGridLayoutGroupProps = {
    * The group of participants to render.
    */
   group: Array<StreamVideoParticipant>;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder'> &
+} & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'mirror'> &
   Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 
 const PaginatedGridLayoutGroup = ({
   group,
+  mirror,
   VideoPlaceholder,
   ParticipantViewUI,
 }: PaginatedGridLayoutGroupProps) => {
@@ -43,6 +44,7 @@ const PaginatedGridLayoutGroup = ({
           key={participant.sessionId}
           participant={participant}
           muteAudio
+          mirror={mirror}
           VideoPlaceholder={VideoPlaceholder}
           ParticipantViewUI={ParticipantViewUI}
         />
@@ -63,6 +65,12 @@ export type PaginatedGridLayoutProps = {
    */
   excludeLocalParticipant?: boolean;
 
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
+
   /**
    * Turns on/off the pagination arrows.
    * @default true
@@ -76,6 +84,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
       ? props.groupSize || GROUP_SIZE
       : GROUP_SIZE,
     excludeLocalParticipant = false,
+    mirrorLocalParticipantVideo = true,
     pageArrowsVisible = true,
     VideoPlaceholder,
     ParticipantViewUI = DefaultParticipantViewUI,
@@ -121,6 +130,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
   }, [page, pageCount]);
 
   const selectedGroup = participantGroups[page];
+  const mirror = mirrorLocalParticipantVideo ? undefined : false;
 
   if (!call) return null;
 
@@ -143,6 +153,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
         {selectedGroup && (
           <PaginatedGridLayoutGroup
             group={selectedGroup}
+            mirror={mirror}
             VideoPlaceholder={VideoPlaceholder}
             ParticipantViewUI={ParticipantViewUI}
           />

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -41,6 +41,11 @@ export type SpeakerLayoutProps = {
    * @default false
    */
   excludeLocalParticipant?: boolean;
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
   /**
    * Turns on/off the pagination arrows.
    * @default true
@@ -58,6 +63,7 @@ export const SpeakerLayout = ({
   VideoPlaceholder,
   participantsBarPosition = 'bottom',
   participantsBarLimit,
+  mirrorLocalParticipantVideo = true,
   excludeLocalParticipant = false,
   pageArrowsVisible = true,
 }: SpeakerLayoutProps) => {
@@ -117,6 +123,8 @@ export const SpeakerLayout = ({
     );
   }
 
+  const mirror = mirrorLocalParticipantVideo ? undefined : false;
+
   if (!call) return null;
 
   return (
@@ -134,6 +142,7 @@ export const SpeakerLayout = ({
             <ParticipantView
               participant={participantInSpotlight}
               muteAudio={true}
+              mirror={mirror}
               trackType={
                 isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack'
               }
@@ -164,6 +173,7 @@ export const SpeakerLayout = ({
                       participant={participantInSpotlight}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      mirror={mirror}
                       muteAudio={true}
                     />
                   </div>
@@ -177,6 +187,7 @@ export const SpeakerLayout = ({
                       participant={participant}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      mirror={mirror}
                       muteAudio={true}
                     />
                   </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';
@@ -41,6 +42,12 @@ export type ParticipantViewProps = {
    */
   trackType?: VideoTrackType | 'none';
 
+  /**
+   * Forces participant's video to be mirrored or unmirrored. By default, video track
+   * from the local participant is mirrored, and all other videos are not mirrored.
+   */
+  mirror?: boolean;
+
   /**
    * This prop is only useful for advanced use-cases (for example, building your own layout).
    * When set to `true` it will mute the give participant's audio stream on the client side.
@@ -68,6 +75,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     {
       participant,
       trackType = 'videoTrack',
+      mirror,
       muteAudio,
       refs: { setVideoElement, setVideoPlaceholderElement } = {},
       className,
@@ -100,6 +108,9 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       trackType,
     });
 
+    const { useIncomingVideoSettings } = useCallStateHooks();
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+
     const participantViewContextValue = useMemo(
       () => ({
         participant,
@@ -167,6 +178,12 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
             participant={participant}
             trackType={trackType}
             refs={videoRefs}
+            enabled={
+              isLocalParticipant ||
+              trackType !== 'videoTrack' ||
+              isParticipantVideoEnabled(participant.sessionId)
+            }
+            mirror={mirror}
             autoPlay
           />
           {isComponentType(ParticipantViewUI) ? (

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

@@ -20,6 +20,16 @@ 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;
+  /**
+   * Forces the video to be mirrored or unmirrored. By default, video track
+   * from the local participant is mirrored, and all other videos are not mirrored.
+   */
+  mirror?: boolean;
   /**
    * The track type to display.
    */
@@ -54,6 +64,8 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
 };
 
 export const Video = ({
+  enabled,
+  mirror,
   trackType,
   participant,
   className,
@@ -139,8 +151,11 @@ export const Video = ({
     trackType === 'none' ||
     viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
 
-  const hasNoVideoOrInvisible = !isPublishingTrack || isInvisible;
-  const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
+  const hasNoVideoOrInvisible = !enabled || !isPublishingTrack || isInvisible;
+  const mirrorVideo =
+    mirror === undefined
+      ? isLocalParticipant && trackType === 'videoTrack'
+      : mirror;
   const isScreenShareTrack = trackType === 'screenShareTrack';
   return (
     <>