@stream-io/video-react-sdk 1.30.0 → 1.31.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.31.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.30.1...@stream-io/video-react-sdk-1.31.0) (2026-01-09)
+
+### Dependency Updates
+
+- `@stream-io/video-styling` updated to version `1.10.0`
+- `@stream-io/video-client` updated to version `1.40.0`
+- `@stream-io/video-react-bindings` updated to version `1.12.7`
+
+### Features
+
+- **react:** Add Grid View During PIP ([#2076](https://github.com/GetStream/stream-video-js/issues/2076)) ([be82657](https://github.com/GetStream/stream-video-js/commit/be826575eee9f16c971f907383fff49b31b1384b))
+
+### Bug Fixes
+
+- **react:** React Compiler strips memoization and causes MenuPortal to re-mount ([#2077](https://github.com/GetStream/stream-video-js/issues/2077)) ([9ea702f](https://github.com/GetStream/stream-video-js/commit/9ea702f3a4280e2782f07c54fcb16077094a187b))
+
+## [1.30.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.30.0...@stream-io/video-react-sdk-1.30.1) (2025-12-30)
+
+### Dependency Updates
+
+- `@stream-io/video-client` updated to version `1.39.3`
+- `@stream-io/video-react-bindings` updated to version `1.12.6`
+
 ## [1.30.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.29.2...@stream-io/video-react-sdk-1.30.0) (2025-12-23)
 
 ### Dependency Updates

package/dist/css/styles.css

@@ -893,6 +893,128 @@
   height: 1rem;
 }
 
+.str-video__pip-layout--grid {
+  flex-wrap: nowrap;
+}
+
+.str-video__pip-layout__grid-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.str-video__pip-layout__pagination-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  padding: var(--str-video__spacing-xxs);
+  min-width: auto;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+.str-video__pip-layout__pagination-button:hover:not(:disabled) {
+  opacity: 1;
+}
+.str-video__pip-layout__pagination-button .str-video__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.str-video__pip-layout__pagination-button--left {
+  left: 0;
+}
+.str-video__pip-layout__pagination-button--right {
+  right: 0;
+}
+
+.str-video__pip-layout__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--pip-cols), 1fr);
+  gap: var(--str-video__spacing-xxs);
+  width: 100%;
+  max-height: 100%;
+  flex: 1 1 auto;
+}
+.str-video__pip-layout__grid .str-video__participant-view {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.str-video__pip-layout__grid .str-video__participant-view--speaking {
+  outline: none;
+}
+.str-video__pip-layout__grid .str-video__participant-view--speaking::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--str-video__primary-color);
+  border-radius: var(--str-video__border-radius-sm);
+  pointer-events: none;
+  z-index: 1;
+}
+.str-video__pip-layout__grid .str-video__participant-view .str-video__notification {
+  display: none;
+}
+.str-video__pip-layout__grid .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid .str-video__video-placeholder__initials-fallback {
+  width: 32px;
+  height: 32px;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--single {
+  --pip-cols: 1;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--single .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--single .str-video__video-placeholder__initials-fallback {
+  width: 80px;
+  height: 80px;
+  font-size: var(--str-video__font-size-xxl);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--small {
+  --pip-cols: 2;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--small .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--small .str-video__video-placeholder__initials-fallback {
+  width: 60px;
+  height: 60px;
+  font-size: var(--str-video__font-size-xl);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--medium {
+  --pip-cols: 3;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--medium .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--medium .str-video__video-placeholder__initials-fallback {
+  width: 45px;
+  height: 45px;
+  font-size: var(--str-video__font-size-md);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--large {
+  --pip-cols: 4;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--large .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--large .str-video__video-placeholder__initials-fallback {
+  width: 35px;
+  height: 35px;
+  font-size: var(--str-video__font-size-sm);
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--overflow {
+  --pip-cols: 5;
+  overflow-y: auto;
+}
+.str-video__pip-layout__grid.str-video__pip-layout__grid--overflow .str-video__video-placeholder__avatar,
+.str-video__pip-layout__grid.str-video__pip-layout__grid--overflow .str-video__video-placeholder__initials-fallback {
+  width: 25px;
+  height: 25px;
+  font-size: var(--str-video__font-size-xs);
+}
+
 .str-video__pip-screen-share-local {
   background: var(--str-video__background-color5);
 }