@stream-io/video-styling 1.12.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/css/embedded.css +60 -0
- package/dist/css/embedded.css.map +1 -1
- package/dist/css/styles.css +60 -0
- package/dist/css/styles.css.map +1 -1
- package/package.json +1 -1
- package/src/CallControls/CallControls-layout.scss +6 -0
- package/src/DeviceSettings/DeviceSettings-layout.scss +59 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [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)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- Automatic audio recovery ([#2240](https://github.com/GetStream/stream-video-js/issues/2240)) ([8131e5b](https://github.com/GetStream/stream-video-js/commit/8131e5b35a1c87c46d99eeaab434f8889ba5d126))
|
|
10
|
+
|
|
11
|
+
## [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)
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- **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))
|
|
16
|
+
|
|
5
17
|
## [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)
|
|
6
18
|
|
|
7
19
|
### Features
|
package/dist/css/embedded.css
CHANGED
|
@@ -463,6 +463,7 @@
|
|
|
463
463
|
}
|
|
464
464
|
|
|
465
465
|
.str-video__no-media-permission,
|
|
466
|
+
.str-video__system-muted,
|
|
466
467
|
.str-video__pending-permission {
|
|
467
468
|
position: absolute;
|
|
468
469
|
height: 12px;
|
|
@@ -489,6 +490,11 @@
|
|
|
489
490
|
color: var(--str-video__text-color1);
|
|
490
491
|
}
|
|
491
492
|
|
|
493
|
+
.str-video__system-muted {
|
|
494
|
+
background-color: var(--str-video__alert-caution);
|
|
495
|
+
color: var(--str-video__base-color4);
|
|
496
|
+
}
|
|
497
|
+
|
|
492
498
|
.str-video__composite-button.str-video__device-unavailable .str-video__composite-button__button-group {
|
|
493
499
|
background-color: var(--str-video__button-default-disabled);
|
|
494
500
|
}
|
|
@@ -1562,6 +1568,60 @@
|
|
|
1562
1568
|
transform-origin: left center;
|
|
1563
1569
|
}
|
|
1564
1570
|
|
|
1571
|
+
.str-video__device-level-indicator {
|
|
1572
|
+
display: flex;
|
|
1573
|
+
align-items: center;
|
|
1574
|
+
gap: 0.125rem;
|
|
1575
|
+
flex-shrink: 0;
|
|
1576
|
+
margin-left: auto;
|
|
1577
|
+
}
|
|
1578
|
+
.str-video__device-level-indicator .str-video__device-level-indicator__bar {
|
|
1579
|
+
width: 0.1875rem;
|
|
1580
|
+
height: 0.75rem;
|
|
1581
|
+
border-radius: var(--str-video__border-radius-xs);
|
|
1582
|
+
background-color: var(--str-video__base-color3);
|
|
1583
|
+
transition: background-color 0.1s;
|
|
1584
|
+
}
|
|
1585
|
+
.str-video__device-level-indicator .str-video__device-level-indicator__bar--active {
|
|
1586
|
+
background-color: var(--str-video__primary-color);
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
.str-video__device-preview {
|
|
1590
|
+
appearance: none;
|
|
1591
|
+
padding: 0;
|
|
1592
|
+
border: 0;
|
|
1593
|
+
background: transparent;
|
|
1594
|
+
color: inherit;
|
|
1595
|
+
font: inherit;
|
|
1596
|
+
text-align: inherit;
|
|
1597
|
+
display: flex;
|
|
1598
|
+
flex-direction: column;
|
|
1599
|
+
align-items: stretch;
|
|
1600
|
+
max-width: 12rem;
|
|
1601
|
+
cursor: pointer;
|
|
1602
|
+
}
|
|
1603
|
+
.str-video__device-preview .str-video__device-preview__label {
|
|
1604
|
+
padding: var(--str-video__spacing-xs) 0;
|
|
1605
|
+
font-size: var(--str-video__font-size-xs);
|
|
1606
|
+
text-align: center;
|
|
1607
|
+
overflow: hidden;
|
|
1608
|
+
text-overflow: ellipsis;
|
|
1609
|
+
white-space: nowrap;
|
|
1610
|
+
}
|
|
1611
|
+
.str-video__device-preview .str-video__device-video-preview__video {
|
|
1612
|
+
display: block;
|
|
1613
|
+
width: 100%;
|
|
1614
|
+
aspect-ratio: 16/9;
|
|
1615
|
+
object-fit: cover;
|
|
1616
|
+
border-radius: var(--str-video__border-radius-sm);
|
|
1617
|
+
border: 2px solid var(--str-video__base-color3);
|
|
1618
|
+
background-color: var(--str-video__base-color5);
|
|
1619
|
+
transform: scaleX(-1);
|
|
1620
|
+
}
|
|
1621
|
+
.str-video__device-preview--selected .str-video__device-video-preview__video {
|
|
1622
|
+
border-color: var(--str-video__primary-color);
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1565
1625
|
.str-video__speaker-test {
|
|
1566
1626
|
padding: var(--str-video__spacing-sm) 0;
|
|
1567
1627
|
}
|