@stream-io/video-styling 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.14.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-styling-1.13.0...@stream-io/video-styling-1.14.0) (2026-05-18)
+
+### Features
+
+- Automatic audio recovery ([#2240](https://github.com/GetStream/stream-video-js/issues/2240)) ([8131e5b](https://github.com/GetStream/stream-video-js/commit/8131e5b35a1c87c46d99eeaab434f8889ba5d126))
+
+## [1.13.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-styling-1.12.0...@stream-io/video-styling-1.13.0) (2026-04-09)
+
+### Features
+
+- **react-sdk:** Device preview and level indicators to device settings ([#2186](https://github.com/GetStream/stream-video-js/issues/2186)) ([65787d2](https://github.com/GetStream/stream-video-js/commit/65787d222d01f784766e0a7eb757cb3169e08435))
+
 ## [1.12.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-styling-1.11.0...@stream-io/video-styling-1.12.0) (2026-03-20)
 
 ### Features

package/dist/css/embedded.css

@@ -463,6 +463,7 @@
 }
 
 .str-video__no-media-permission,
+.str-video__system-muted,
 .str-video__pending-permission {
   position: absolute;
   height: 12px;
@@ -489,6 +490,11 @@
   color: var(--str-video__text-color1);
 }
 
+.str-video__system-muted {
+  background-color: var(--str-video__alert-caution);
+  color: var(--str-video__base-color4);
+}
+
 .str-video__composite-button.str-video__device-unavailable .str-video__composite-button__button-group {
   background-color: var(--str-video__button-default-disabled);
 }
@@ -1562,6 +1568,60 @@
   transform-origin: left center;
 }
 
+.str-video__device-level-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.str-video__device-level-indicator .str-video__device-level-indicator__bar {
+  width: 0.1875rem;
+  height: 0.75rem;
+  border-radius: var(--str-video__border-radius-xs);
+  background-color: var(--str-video__base-color3);
+  transition: background-color 0.1s;
+}
+.str-video__device-level-indicator .str-video__device-level-indicator__bar--active {
+  background-color: var(--str-video__primary-color);
+}
+
+.str-video__device-preview {
+  appearance: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 12rem;
+  cursor: pointer;
+}
+.str-video__device-preview .str-video__device-preview__label {
+  padding: var(--str-video__spacing-xs) 0;
+  font-size: var(--str-video__font-size-xs);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.str-video__device-preview .str-video__device-video-preview__video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  border-radius: var(--str-video__border-radius-sm);
+  border: 2px solid var(--str-video__base-color3);
+  background-color: var(--str-video__base-color5);
+  transform: scaleX(-1);
+}
+.str-video__device-preview--selected .str-video__device-video-preview__video {
+  border-color: var(--str-video__primary-color);
+}
+
 .str-video__speaker-test {
   padding: var(--str-video__spacing-sm) 0;
 }