@stream-io/video-react-sdk 1.26.0 → 1.26.1

package/dist/src/components/DeviceSettings/index.d.ts

@@ -1,3 +1,4 @@
+export * from './AudioVolumeIndicator';
 export * from './DeviceSettings';
 export * from './DeviceSelector';
 export * from './DeviceSelectorAudio';

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

@@ -1,3 +1,4 @@
+import { ComponentType, ReactElement } from 'react';
 /**
  * The props for the {@link LivestreamLayout} component.
  */
@@ -40,6 +41,10 @@ export type LivestreamLayoutProps = {
          */
         position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     };
+    /**
+     * Override the default participant view overlay UI.
+     */
+    ParticipantViewUI?: ComponentType | ReactElement | null;
 };
 export declare const LivestreamLayout: {
     (props: LivestreamLayoutProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.26.0",
+  "version": "1.26.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.36.1",
+    "@stream-io/video-client": "1.37.0",
     "@stream-io/video-filters-web": "0.4.0",
-    "@stream-io/video-react-bindings": "1.11.0",
+    "@stream-io/video-react-bindings": "1.11.1",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/components/DeviceSettings/index.ts

@@ -1,3 +1,4 @@
+export * from './AudioVolumeIndicator';
 export * from './DeviceSettings';
 export * from './DeviceSelector';
 export * from './DeviceSelectorAudio';

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

@@ -1,5 +1,11 @@
 import clsx from 'clsx';
-import { useCallback, useEffect, useState } from 'react';
+import {
+  ComponentType,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
   useCall,
   useCallStateHooks,
@@ -62,6 +68,11 @@ export type LivestreamLayoutProps = {
      */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   };
+
+  /**
+   * Override the default participant view overlay UI.
+   */
+  ParticipantViewUI?: ComponentType | ReactElement | null;
 };
 
 export const LivestreamLayout = (props: LivestreamLayoutProps) => {
@@ -77,27 +88,31 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
 
   usePaginatedLayoutSortPreset(call);
 
-  const overlay = (
+  const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+  const overlay = ParticipantViewUI ?? (
     <ParticipantOverlay
       showParticipantCount={props.showParticipantCount}
       showDuration={props.showDuration}
       showLiveBadge={props.showLiveBadge}
       showSpeakerName={props.showSpeakerName}
+      enableFullScreen={props.enableFullScreen}
     />
   );
 
-  const { floatingParticipantProps, muted } = props;
-  const floatingParticipantOverlay = hasOngoingScreenShare && (
-    <ParticipantOverlay
-      // these elements aren't needed for the video feed
-      showParticipantCount={
-        floatingParticipantProps?.showParticipantCount ?? false
-      }
-      showDuration={floatingParticipantProps?.showDuration ?? false}
-      showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}
-      showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}
-    />
-  );
+  const floatingParticipantOverlay =
+    hasOngoingScreenShare &&
+    (ParticipantViewUI ?? (
+      <ParticipantOverlay
+        // these elements aren't needed for the video feed
+        showParticipantCount={
+          floatingParticipantProps?.showParticipantCount ?? false
+        }
+        showDuration={floatingParticipantProps?.showDuration ?? false}
+        showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}
+        showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}
+        enableFullScreen={floatingParticipantProps?.enableFullScreen ?? true}
+      />
+    ));
 
   return (
     <div className="str-video__livestream-layout__wrapper">
@@ -192,6 +207,12 @@ const ParticipantOverlay = (props: {
     showLiveBadge = true,
     showSpeakerName = false,
   } = props;
+  const overlayBarVisible =
+    enableFullScreen ||
+    showParticipantCount ||
+    showDuration ||
+    showLiveBadge ||
+    showSpeakerName;
   const { participant } = useParticipantViewContext();
   const { useParticipantCount } = useCallStateHooks();
   const participantCount = useParticipantCount();
@@ -200,37 +221,39 @@ const ParticipantOverlay = (props: {
   const { t } = useI18n();
   return (
     <div className="str-video__livestream-layout__overlay">
-      <div className="str-video__livestream-layout__overlay__bar">
-        {showLiveBadge && (
-          <span className="str-video__livestream-layout__live-badge">
-            {t('Live')}
-          </span>
-        )}
-        {showParticipantCount && (
-          <span className="str-video__livestream-layout__viewers-count">
-            {participantCount}
-          </span>
-        )}
-        {showSpeakerName && (
-          <span
-            className="str-video__livestream-layout__speaker-name"
-            title={participant.name || participant.userId || ''}
-          >
-            {participant.name || participant.userId || ''}
-          </span>
-        )}
-        {showDuration && (
-          <span className="str-video__livestream-layout__duration">
-            {formatDuration(duration)}
-          </span>
-        )}
-        {enableFullScreen && (
-          <span
-            className="str-video__livestream-layout__go-fullscreen"
-            onClick={toggleFullScreen}
-          />
-        )}
-      </div>
+      {overlayBarVisible && (
+        <div className="str-video__livestream-layout__overlay__bar">
+          {showLiveBadge && (
+            <span className="str-video__livestream-layout__live-badge">
+              {t('Live')}
+            </span>
+          )}
+          {showParticipantCount && (
+            <span className="str-video__livestream-layout__viewers-count">
+              {participantCount}
+            </span>
+          )}
+          {showSpeakerName && (
+            <span
+              className="str-video__livestream-layout__speaker-name"
+              title={participant.name || participant.userId || ''}
+            >
+              {participant.name || participant.userId || ''}
+            </span>
+          )}
+          {showDuration && (
+            <span className="str-video__livestream-layout__duration">
+              {formatDuration(duration)}
+            </span>
+          )}
+          {enableFullScreen && (
+            <span
+              className="str-video__livestream-layout__go-fullscreen"
+              onClick={toggleFullScreen}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 };