@stream-io/video-react-sdk 1.2.9 → 1.2.11

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [1.2.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.2.10...@stream-io/video-react-sdk-1.2.11) (2024-06-28)
+
+### Dependency Updates
+
+* `@stream-io/video-styling` updated to version `1.0.5`
+### [1.2.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.2.9...@stream-io/video-react-sdk-1.2.10) (2024-06-26)
+
+
+### Bug Fixes
+
+* **react:** provide displayName for our core components ([#1423](https://github.com/GetStream/stream-video-js/issues/1423)) ([724c444](https://github.com/GetStream/stream-video-js/commit/724c4449f3f4dfd4c468323e1a8dde1d12e56135))
+
 ### [1.2.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.2.8...@stream-io/video-react-sdk-1.2.9) (2024-06-25)
 
 

package/dist/css/styles.css

@@ -2437,7 +2437,7 @@
 }
 
 .str-video__video {
-  background-color: var(--str-video__background-color6);
+  background-color: var(--str-video__background-color5);
 }
 
 .str-video__video-placeholder {

package/dist/index.cjs.js

@@ -24,6 +24,7 @@ const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     }, [call, sessionId, audioElement, trackType]);
     return (jsxRuntime.jsx("audio", { autoPlay: true, ...rest, ref: setAudioElement, "data-user-id": userId, "data-session-id": sessionId, "data-track-type": trackType }));
 };
+Audio.displayName = 'Audio';
 
 const ParticipantsAudio = (props) => {
     const { participants, audioProps } = props;
@@ -39,6 +40,7 @@ const ParticipantsAudio = (props) => {
             return (jsxRuntime.jsxs(react.Fragment, { children: [audioTrackElement, screenShareAudioTrackElement] }, sessionId));
         }) }));
 };
+ParticipantsAudio.displayName = 'ParticipantsAudio';
 
 const ParticipantViewContext = react.createContext(undefined);
 const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
@@ -1930,6 +1932,7 @@ const Video$1 = ({ trackType, participant, className, VideoPlaceholder = Default
                     refs?.setVideoElement?.(element);
                 } })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
 };
+Video$1.displayName = 'Video';
 
 /**
  * @description Extends video element with `stream` property
@@ -2192,9 +2195,11 @@ const ParticipantView = react.forwardRef(function ParticipantView({ participant,
             setTrackedElement(element);
         }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
 });
+ParticipantView.displayName = 'ParticipantView';
 
 // re-exporting the StreamCallProvider as StreamCall
 const StreamCall = videoReactBindings.StreamCallProvider;
+StreamCall.displayName = 'StreamCall';
 
 var Joining = "Joining";
 var Mic = "Mic";
@@ -2316,6 +2321,7 @@ const translations = { en };
 const StreamVideo = (props) => {
     return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { translationsOverrides: translations, ...props }));
 };
+StreamVideo.displayName = 'StreamVideo';
 
 const usePaginatedLayoutSortPreset = (call) => {
     react.useEffect(() => {
@@ -2389,6 +2395,7 @@ const ParticipantOverlay = (props) => {
     const { t } = videoReactBindings.useI18n();
     return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] }) }));
 };
+LivestreamLayout.displayName = 'LivestreamLayout';
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
     const isCallLive = useIsCallLive();
@@ -2476,6 +2483,7 @@ const PaginatedGridLayout = (props) => {
         return null;
     return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
 };
+PaginatedGridLayout.displayName = 'PaginatedGridLayout';
 
 const useCalculateHardLimit = (
 /**
@@ -2570,6 +2578,7 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
     return (jsxRuntime.jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: clsx('str-video__speaker-layout', participantsBarPosition &&
                     `str-video__speaker-layout--variant-${participantsBarPosition}`), children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__spotlight", children: participantInSpotlight && (jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) }), participantsWithAppliedLimit.length > 0 && participantsBarPosition && (jsxRuntime.jsxs("div", { ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper", children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement, children: jsxRuntime.jsxs("div", { ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar", children: [isSpeakerScreenSharing && (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }, participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }, participant.sessionId)))] }) }), isVertical && (jsxRuntime.jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), isHorizontal && (jsxRuntime.jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] }))] })] }));
 };
+SpeakerLayout.displayName = 'SpeakerLayout';
 const HorizontalScrollButtons = ({ scrollWrapper, }) => {
     const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
     const scrollStartClickHandler = () => {
@@ -2613,7 +2622,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.2.9" ).split('.');
+const [major, minor, patch] = ("1.2.11" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,