@stream-io/video-react-sdk 1.2.8 → 1.2.10

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [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)
+
+
+### Bug Fixes
+
+* in some browsers event.key could be undefined ([#1421](https://github.com/GetStream/stream-video-js/issues/1421)) ([0a01c9f](https://github.com/GetStream/stream-video-js/commit/0a01c9fc6148457f9c9de0f8073f71143b05dc80))
+
 ### [1.2.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.2.7...@stream-io/video-react-sdk-1.2.8) (2024-06-25)
 
 ### Dependency Updates

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);
@@ -537,7 +539,8 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
             }
         };
         const handleKeyDown = (event) => {
-            if (event.key.toLowerCase() === 'escape' &&
+            if (event.key && // key can be undefined in some browsers
+                event.key.toLowerCase() === 'escape' &&
                 !event.altKey &&
                 !event.ctrlKey) {
                 setMenuShown(false);
@@ -1929,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
@@ -2191,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";
@@ -2315,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(() => {
@@ -2388,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();
@@ -2475,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 = (
 /**
@@ -2569,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 = () => {
@@ -2612,7 +2622,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.2.8" ).split('.');
+const [major, minor, patch] = ("1.2.10" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,