mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
Deduplicate media & voip icons using Compound Design Tokens (#129)
* Deduplicate media & voip icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
197168b3ba
commit
df4a223eb6
49 changed files with 497 additions and 149 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
|
@ -21,6 +21,10 @@ Please see LICENSE files in the repository root for full details.
|
|||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
top: 6px; /* center */
|
||||
left: 6px; /* center */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_disabled::before {
|
||||
|
|
@ -28,18 +32,10 @@ Please see LICENSE files in the repository root for full details.
|
|||
}
|
||||
|
||||
&.mx_PlayPauseButton_play::before {
|
||||
width: 13px;
|
||||
height: 16px;
|
||||
top: 8px; /* center */
|
||||
left: 12px; /* center */
|
||||
mask-image: url("$(res)/img/element-icons/play.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_PlayPauseButton_pause::before {
|
||||
width: 10px;
|
||||
height: 12px;
|
||||
top: 10px; /* center */
|
||||
left: 11px; /* center */
|
||||
mask-image: url("$(res)/img/element-icons/pause.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
&.mx_LegacyCallEvent_rejected,
|
||||
&.mx_LegacyCallEvent_noAnswer {
|
||||
.mx_LegacyCallEvent_type_icon::before {
|
||||
mask-image: url("$(res)/img/voip/declined-video.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
&.mx_LegacyCallEvent_video {
|
||||
.mx_LegacyCallEvent_type_icon::before {
|
||||
mask-image: url("$(res)/img/voip/missed-video.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
}
|
||||
|
||||
.mx_MessageComposer_voiceMessage::before {
|
||||
mask-image: url("$(res)/img/element-icons/mic.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
||||
}
|
||||
|
||||
.mx_MessageComposer_voiceBroadcast::before {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
|
||||
mask-image: url("$(res)/img/element-icons/speaker.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
|
||||
|
|
|
|||
|
|
@ -87,19 +87,19 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
&.mx_LegacyCallViewButtons_button_mic::before {
|
||||
height: 20px;
|
||||
mask-image: url("$(res)/img/element-icons/mic.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.mx_LegacyCallViewButtons_button_vid::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/cam-on.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_LegacyCallViewButtons_button_screensharing {
|
||||
background-color: $accent;
|
||||
|
||||
&::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/screensharing.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
|
||||
background-color: white; /* Same on both themes */
|
||||
}
|
||||
}
|
||||
|
|
@ -118,19 +118,19 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
&.mx_LegacyCallViewButtons_button_mic::before {
|
||||
height: 20px;
|
||||
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.mx_LegacyCallViewButtons_button_vid::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/cam-off.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_LegacyCallViewButtons_button_screensharing {
|
||||
background-color: $call-view-button-on-background;
|
||||
|
||||
&::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/screensharing.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
|
||||
background-color: $call-view-button-on-foreground;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,12 +123,12 @@ Please see LICENSE files in the repository root for full details.
|
|||
}
|
||||
|
||||
&.mx_CallView_deviceButton_audio::before {
|
||||
mask-image: url("$(res)/img/element-icons/mic.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
||||
mask-size: 14px;
|
||||
}
|
||||
|
||||
&.mx_CallView_deviceButton_video::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/cam-on.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -168,12 +168,12 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
.mx_CallView_deviceButton {
|
||||
&.mx_CallView_deviceButton_audio::before {
|
||||
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
|
||||
mask-size: 18px;
|
||||
}
|
||||
|
||||
&.mx_CallView_deviceButton_video::before {
|
||||
mask-image: url("$(res)/img/voip/call-view/cam-off.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,11 +72,11 @@ Please see LICENSE files in the repository root for full details.
|
|||
}
|
||||
|
||||
&.mx_VideoFeed_mic_muted::before {
|
||||
mask-image: url("$(res)/img/element-icons/Mic-off.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_VideoFeed_mic_unmuted::before {
|
||||
mask-image: url("$(res)/img/element-icons/mic.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.10228 3.76439C5.10228 2.23766 6.39969 1 8.00012 1C9.60054 1 10.8979 2.23766 10.8979 3.76439V7.89859C10.8979 9.42532 9.60054 10.663 8.00012 10.663C6.39969 10.663 5.10228 9.42532 5.10228 7.89859V3.76439Z" fill="currentColor"/>
|
||||
<path d="M2.92879 7.01612C3.44175 7.01612 3.85759 7.4128 3.85759 7.90214C3.85759 10.0766 5.70512 11.8419 7.98894 11.8476C7.99267 11.8476 7.99641 11.8475 8.00016 11.8475C8.00388 11.8475 8.0076 11.8476 8.01132 11.8476C10.295 11.8418 12.1424 10.0765 12.1424 7.90214C12.1424 7.4128 12.5582 7.01612 13.0712 7.01612C13.5842 7.01612 14 7.4128 14 7.90214C14 10.7596 11.8008 13.1261 8.92895 13.5515V14.114C8.92895 14.6033 8.51311 15 8.00016 15C7.4872 15 7.07136 14.6033 7.07136 14.114V13.5516C4.1994 13.1263 2 10.7597 2 7.90214C2 7.4128 2.41583 7.01612 2.92879 7.01612Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 924 B |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.833374 1C0.833374 0.447715 1.20647 0 1.66671 0H2.50004C2.96028 0 3.33337 0.447715 3.33337 1V11C3.33337 11.5523 2.96028 12 2.50004 12H1.66671C1.20647 12 0.833374 11.5523 0.833374 11V1Z" fill="#737D8C"/>
|
||||
<path d="M6.66671 1C6.66671 0.447715 7.0398 0 7.50004 0H8.33337C8.79361 0 9.16671 0.447715 9.16671 1V11C9.16671 11.5523 8.79361 12 8.33337 12H7.50004C7.0398 12 6.66671 11.5523 6.66671 11V1Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 525 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.5 14.2819V1.71812C0.5 0.951435 1.32728 0.469933 1.99392 0.848618L13.0526 7.13049C13.7274 7.5138 13.7274 8.4862 13.0526 8.86951L1.99392 15.1514C1.32728 15.5301 0.5 15.0486 0.5 14.2819Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 317 B |
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.21924 0.380761C1.71155 -0.12692 0.888441 -0.12692 0.380761 0.380761C-0.12692 0.888441 -0.12692 1.71155 0.380761 2.21924L7.79998 9.63846V13C7.79998 15.8719 10.1281 18.2 13 18.2C13.9643 18.2 14.8674 17.9375 15.6416 17.48L17.5195 19.358C16.2459 20.2649 14.6882 20.7988 13.0059 20.8L13 20.8L12.9941 20.8C8.68896 20.7968 5.19999 17.3058 5.19999 13C5.19999 12.282 4.61796 11.7 3.89999 11.7C3.18202 11.7 2.59999 12.282 2.59999 13C2.59999 18.3035 6.56977 22.6798 11.7 23.3195V24.7C11.7 25.4179 12.282 26 13 26C13.7179 26 14.3 25.4179 14.3 24.7V23.3195C16.1989 23.0827 17.9388 22.334 19.3773 21.2158L23.7808 25.6192C24.2884 26.1269 25.1115 26.1269 25.6192 25.6192C26.1269 25.1115 26.1269 24.2884 25.6192 23.7808L2.21924 0.380761Z" fill="currentColor"/>
|
||||
<path d="M20.5292 15.0447L22.5665 17.0862C23.103 15.8318 23.4 14.4506 23.4 13C23.4 12.282 22.818 11.7 22.1 11.7C21.382 11.7 20.8 12.282 20.8 13C20.8 13.7075 20.7058 14.393 20.5292 15.0447Z" fill="currentColor"/>
|
||||
<path d="M8.36 2.85008L18.2 12.7106V5.20001C18.2 2.32813 15.8719 1.87345e-05 13 1.87345e-05C10.9737 1.87345e-05 9.21819 1.15894 8.36 2.85008Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16.15" height="19.751" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M4.175 3.9a3.9 3.9 0 0 1 7.8 0v5.832a3.9 3.9 0 1 1-7.8 0zM1.25 8.488c.69 0 1.25.56 1.25 1.25a5.57 5.57 0 0 0 5.567 5.566h.017a5.57 5.57 0 0 0 5.566-5.566 1.25 1.25 0 0 1 2.5 0c0 4.03-2.96 7.37-6.825 7.97v.793a1.25 1.25 0 0 1-2.5 0v-.793C2.96 17.108 0 13.769 0 9.738c0-.69.56-1.25 1.25-1.25Z" clip-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 450 B |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V11C3 11.5523 2.55228 12 2 12H1C0.447715 12 0 11.5523 0 11V1Z" fill="currentColor"/>
|
||||
<path d="M7 1C7 0.447715 7.44772 0 8 0H9C9.55228 0 10 0.447715 10 1V11C10 11.5523 9.55228 12 9 12H8C7.44772 12 7 11.5523 7 11V1Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 406 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 14.2104V1.78956C0 1.00724 0.857827 0.527894 1.5241 0.937906L11.6161 7.14834C12.2506 7.53883 12.2506 8.46117 11.6161 8.85166L1.5241 15.0621C0.857828 15.4721 0 14.9928 0 14.2104Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 315 B |
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.97991 1.48403L4 4.80062L1 4.80062C0.447715 4.80062 0 5.24834 0 5.80062V10.2006C0 10.7529 0.447714 11.2006 0.999999 11.2006L4 11.2006L7.97991 14.5172C8.30557 14.7886 8.8 14.557 8.8 14.1331V1.86814C8.8 1.44422 8.30557 1.21265 7.97991 1.48403Z" fill="#737D8C"/>
|
||||
<path d="M14.1258 2.79107C13.8998 2.50044 13.4809 2.44808 13.1903 2.67413C12.9 2.89992 12.8475 3.3181 13.0726 3.6087L13.0731 3.60935L13.0738 3.61021L13.0829 3.62231C13.0917 3.63418 13.1059 3.65355 13.1248 3.68011C13.1625 3.73326 13.2187 3.81496 13.2872 3.92256C13.4243 4.13812 13.6097 4.45554 13.7955 4.85371C14.169 5.65407 14.5329 6.75597 14.5329 8.00036C14.5329 9.24475 14.169 10.3466 13.7955 11.147C13.6097 11.5452 13.4243 11.8626 13.2872 12.0782C13.2187 12.1858 13.1625 12.2675 13.1248 12.3206C13.1059 12.3472 13.0917 12.3665 13.0829 12.3784L13.0738 12.3905L13.0731 12.3914L13.0725 12.3921C12.8475 12.6827 12.9 13.1008 13.1903 13.3266C13.4809 13.5526 13.8998 13.5003 14.1258 13.2097L13.629 12.8232C14.1258 13.2096 14.1258 13.2097 14.1258 13.2097L14.1272 13.2079L14.1291 13.2055L14.1346 13.1982L14.1523 13.1748C14.1669 13.1552 14.187 13.1277 14.2119 13.0926C14.2617 13.0225 14.3305 12.9221 14.4121 12.794C14.5749 12.5381 14.7895 12.1698 15.0037 11.7109C15.4302 10.7969 15.8663 9.49883 15.8663 8.00036C15.8663 6.50189 15.4302 5.20379 15.0037 4.28987C14.7895 3.83089 14.5749 3.4626 14.4121 3.20673C14.3305 3.07862 14.2617 2.97818 14.2119 2.90811C14.187 2.87306 14.1669 2.84556 14.1523 2.82596L14.1346 2.80249L14.1291 2.79525L14.1272 2.79278L14.1264 2.79183C14.1264 2.79183 14.1258 2.79107 13.5996 3.20036L14.1258 2.79107Z" fill="#737D8C"/>
|
||||
<path d="M11.7264 5.19121C11.5004 4.90058 11.0815 4.84823 10.7909 5.07427C10.501 5.29973 10.4482 5.71698 10.6722 6.00752L10.6745 6.01057C10.6775 6.01457 10.6831 6.02223 10.691 6.03338C10.7069 6.05572 10.7318 6.09189 10.7628 6.14057C10.8249 6.23827 10.9103 6.38426 10.9961 6.56815C11.1696 6.93993 11.3335 7.44183 11.3335 8.00051C11.3335 8.55918 11.1696 9.06108 10.9961 9.43287C10.9103 9.61675 10.8249 9.76275 10.7628 9.86045C10.7318 9.90912 10.7069 9.94529 10.691 9.96763C10.6831 9.97879 10.6775 9.98645 10.6745 9.99044L10.6722 9.9935C10.4482 10.284 10.501 10.7013 10.7909 10.9267C11.0815 11.1528 11.5004 11.1004 11.7264 10.8098L11.2002 10.4005C11.7264 10.8098 11.7264 10.8098 11.7264 10.8098L11.7276 10.8083L11.7291 10.8064L11.7329 10.8014L11.7439 10.7868C11.7526 10.7751 11.7642 10.7593 11.7781 10.7396C11.806 10.7004 11.8436 10.6455 11.8876 10.5763C11.9755 10.4383 12.0901 10.2414 12.2043 9.99672C12.4308 9.51136 12.6669 8.81326 12.6669 8.00051C12.6669 7.18775 12.4308 6.48965 12.2043 6.0043C12.0901 5.75961 11.9755 5.56275 11.8876 5.42473C11.8436 5.35555 11.806 5.30065 11.7781 5.26138C11.7642 5.24173 11.7526 5.22596 11.7439 5.21422L11.7329 5.19964L11.7291 5.19465L11.7276 5.19274L11.727 5.19193C11.727 5.19193 11.7264 5.19121 11.2002 5.60051L11.7264 5.19121Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.9 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.12627 0.95955C1.51679 0.569025 2.14996 0.569025 2.54048 0.95955L17.5405 15.9595C17.931 16.3501 17.931 16.9832 17.5405 17.3738C17.15 17.7643 16.5168 17.7643 16.1263 17.3738L1.12627 2.37376C0.735743 1.98324 0.735743 1.35007 1.12627 0.95955ZM1.43587 4.77515C1.15931 5.2293 1 5.7627 1 6.33331V13.6666C1 15.3235 2.34315 16.6666 4 16.6666H13.2994L1.47784 4.82039C1.46319 4.80571 1.4492 4.79062 1.43587 4.77515ZM15.1667 6.33331V11.4864L7.03059 3.33331H12.1667C13.8235 3.33331 15.1667 4.67646 15.1667 6.33331ZM19.3753 5.46641L16.8334 7.49999V12.5L19.3753 14.5336C20.0301 15.0574 21 14.5912 21 13.7527V6.24728C21 5.40878 20.0301 4.9426 19.3753 5.46641Z" fill="#21262C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 817 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.35114 4.19971C1.94221 4.19971 0.800049 5.34187 0.800049 6.7508V15.2486C0.800049 16.6575 1.94221 17.7997 3.35114 17.7997H12.699C14.1079 17.7997 15.25 16.6575 15.25 15.2486V6.7508C15.25 5.34187 14.1079 4.19971 12.699 4.19971H3.35114ZM19.8184 6.15516L16.95 8.44989V13.5499L19.8184 15.8446C20.3752 16.2901 21.2 15.8936 21.2 15.1806V6.81918C21.2 6.10614 20.3752 5.70973 19.8184 6.15516Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 553 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4 4C2.07452 4 1 5.07452 1 6.4V17.6C1 18.9255 2.07452 20 3.4 20H20.6C21.9255 20 23 18.9255 23 17.6V6.4C23 5.07452 21.9255 4 20.6 4H3.4ZM11.9999 16C11.6464 16 11.3599 15.7135 11.3599 15.36V10.2049L9.38407 12.2166C9.13639 12.4688 8.73483 12.4688 8.48716 12.2166C8.23949 11.9644 8.23949 11.5556 8.48716 11.3034L11.5514 8.1834C11.7991 7.93122 12.2007 7.93122 12.4484 8.1834L15.5126 11.3034C15.7603 11.5556 15.7603 11.9644 15.5126 12.2166C15.265 12.4688 14.8634 12.4688 14.6157 12.2166L12.6399 10.2049V15.36C12.6399 15.7135 12.3534 16 11.9999 16Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 714 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.81815C0 3.76379 0.89543 2.90906 2 2.90906H9.33333C10.4379 2.90906 11.3333 3.76379 11.3333 4.81815V11.1818C11.3333 12.2361 10.4379 13.0909 9.33333 13.0909H2C0.895429 13.0909 0 12.2361 0 11.1818V4.81815ZM12.6667 6.09089L14.9169 4.37255C15.3534 4.03921 16 4.33587 16 4.86947V11.1305C16 11.6641 15.3534 11.9607 14.9169 11.6274L12.6667 9.90907V6.09089ZM7.82332 5.81539C7.96503 5.95709 7.96503 6.18685 7.82332 6.32855L6.17983 7.97204L7.89372 9.68593C8.03543 9.82763 8.03543 10.0574 7.89372 10.1991C7.75201 10.3408 7.52226 10.3408 7.38055 10.1991L5.66667 8.48521L3.95278 10.1991C3.81107 10.3408 3.58132 10.3408 3.43961 10.1991C3.29791 10.0574 3.29791 9.82763 3.43961 9.68593L5.1535 7.97204L3.51001 6.32855C3.36831 6.18685 3.36831 5.95709 3.51001 5.81539C3.65172 5.67368 3.88147 5.67368 4.02318 5.81539L5.66667 7.45887L7.31015 5.81539C7.45186 5.67368 7.68161 5.67368 7.82332 5.81539Z" fill="#737D8C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.81815C0 3.76379 0.89543 2.90906 2 2.90906H9.33333C10.4379 2.90906 11.3333 3.76379 11.3333 4.81815V11.1818C11.3333 12.2361 10.4379 13.0909 9.33333 13.0909H2C0.895429 13.0909 0 12.2361 0 11.1818V4.81815ZM12.6667 6.09089L14.9169 4.37255C15.3534 4.03921 16 4.33587 16 4.86947V11.1305C16 11.6641 15.3534 11.9607 14.9169 11.6274L12.6667 9.90907V6.09089ZM3.68584 8.54792C3.68584 8.82819 3.45653 9.05751 3.17625 9.05751C2.89598 9.05751 2.66667 8.82819 2.66667 8.54792V6.50957C2.66667 6.22929 2.89598 5.99998 3.17625 5.99998H5.2146C5.49488 5.99998 5.72419 6.22929 5.72419 6.50957C5.72419 6.78984 5.49488 7.01916 5.2146 7.01916H4.39926L6.2083 8.82819L8.73076 6.30573C8.9295 6.10699 9.25054 6.10699 9.44928 6.30573C9.64802 6.50447 9.64802 6.82551 9.44928 7.02425L6.56501 9.90852C6.36627 10.1073 6.04523 10.1073 5.84649 9.90852L3.68584 7.74787V8.54792Z" fill="#8D97A5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1,016 B |
|
|
@ -10,10 +10,10 @@ import React from "react";
|
|||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import classNames from "classnames";
|
||||
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
|
||||
import MicrophoneIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on-solid";
|
||||
|
||||
import { LiveBadge, VoiceBroadcastLiveness } from "../..";
|
||||
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
|
||||
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
|
||||
import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
|
|||
*/
|
||||
|
||||
import React, { ReactElement } from "react";
|
||||
import PauseIcon from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
|
||||
import PlayIcon from "@vector-im/compound-design-tokens/assets/web/icons/play-solid";
|
||||
|
||||
import { Icon as PlayIcon } from "../../../../res/img/compound/play-16.svg";
|
||||
import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../..";
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ Please see LICENSE files in the repository root for full details.
|
|||
*/
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
import PauseIcon from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
|
||||
import MicrophoneIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on-solid";
|
||||
|
||||
import {
|
||||
VoiceBroadcastControl,
|
||||
|
|
@ -18,9 +20,7 @@ import {
|
|||
import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
|
||||
import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
|
||||
import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg";
|
||||
import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg";
|
||||
import { Icon as RecordIcon } from "../../../../res/img/compound/record-10px.svg";
|
||||
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
|
||||
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
|
||||
|
|
|
|||
|
|
@ -29,9 +29,21 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
test user
|
||||
</span>
|
||||
|
|
@ -86,9 +98,21 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
test user
|
||||
</span>
|
||||
|
|
@ -143,9 +167,21 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
test user
|
||||
</span>
|
||||
|
|
@ -216,9 +252,21 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
test user
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state buffering as expe
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -23,9 +32,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state pause as expected
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -38,9 +56,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state playing as expect
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -53,9 +80,18 @@ exports[`<VoiceBroadcastPlaybackControl /> should render state stopped as expect
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -32,9 +32,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -84,9 +96,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="30s forward"
|
||||
|
|
@ -162,9 +183,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -198,9 +231,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="30s forward"
|
||||
|
|
@ -288,9 +330,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -324,9 +378,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="30s forward"
|
||||
|
|
@ -402,9 +465,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -438,9 +513,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="30s forward"
|
||||
|
|
@ -516,9 +600,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -560,9 +656,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="30s forward"
|
||||
|
|
@ -638,9 +743,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -664,9 +781,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -732,9 +858,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,21 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Default Device
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -85,9 +97,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -83,9 +83,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16 mx_Icon_alert"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Stop Recording"
|
||||
|
|
@ -175,9 +187,18 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Change input device"
|
||||
|
|
@ -185,9 +206,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16 mx_Icon_alert"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Stop Recording"
|
||||
|
|
|
|||
|
|
@ -44,9 +44,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -59,9 +71,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton"
|
||||
|
|
@ -129,9 +150,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -152,9 +185,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton"
|
||||
|
|
@ -233,9 +275,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -256,9 +310,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton"
|
||||
|
|
@ -326,9 +389,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -341,9 +416,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_12"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton"
|
||||
|
|
@ -411,9 +495,21 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
|
||||
/>
|
||||
<path
|
||||
d="M5 11a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8.001 8.001 0 0 1-7 7.938V21a1 1 0 1 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
@user:example.com
|
||||
</span>
|
||||
|
|
@ -426,9 +522,18 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
|
|||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
<svg
|
||||
class="mx_Icon mx_Icon_16"
|
||||
/>
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton"
|
||||
|
|
|
|||
Loading…
Reference in a new issue