Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve VoIP UI/UX (#7048)

Browse Source 
* Remove speaking indicator

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove mic icon for primary feed

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove caching as it doesn't seem to be neccessary

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add call view buttons colors

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Refactor button code

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Update call view button icons

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* i18n

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Add dialpad icon

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix button sizing in PiP

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix secondary voice video feed color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-11-15 18:24:11 +01:00 committed by GitHub
parent 431098b56b
commit bafeb38472
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 247 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
res/css/views/voip/CallView/_CallViewButtons.scss
View File

@ -20,10 +20,11 @@ limitations under the License.
position: absolute;
display: flex;
justify-content: center;
bottom: 5px;
bottom: 24px;
opacity: 1;
transition: opacity 0.5s;
z-index: 200; // To be above _all_ feeds
gap: 18px;
&.mx_CallViewButtons_hidden {
opacity: 0.001; // opacity 0 can cause a re-layout
@ -32,69 +33,121 @@ limitations under the License.
.mx_CallViewButtons_button {
cursor: pointer;
margin-left: 2px;
margin-right: 2px;
background-color: $call-view-button-on-background;
border-radius: 100%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
&::before {
content: '';
display: inline-block;
height: 48px;
width: 48px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: $call-view-button-on-foreground;
height: 24px;
width: 24px;
}
// State buttons
&.mx_CallViewButtons_button_on {
background-color: $call-view-button-on-background;
&::before {
background-color: $call-view-button-on-foreground;
}
&.mx_CallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
&.mx_CallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
&.mx_CallViewButtons_button_screensharing {
background-color: $accent;
&::before {
mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
background-color: white; // Same on both themes
}
}
&.mx_CallViewButtons_button_sidebar::before {
mask-image: url('$(res)/img/voip/call-view/sidebar-on.svg');
}
}
&.mx_CallViewButtons_button_off {
background-color: $call-view-button-off-background;
&::before {
background-color: $call-view-button-off-foreground;
}
&.mx_CallViewButtons_button_mic::before {
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
}
&.mx_CallViewButtons_button_vid::before {
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
}
&.mx_CallViewButtons_button_screensharing {
background-color: $call-view-button-on-background;
&::before {
mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
background-color: $call-view-button-on-foreground;
}
}
&.mx_CallViewButtons_button_sidebar {
background-color: $call-view-button-on-background;
&::before {
mask-image: url('$(res)/img/voip/call-view/sidebar-off.svg');
background-color: $call-view-button-on-foreground;
}
}
}
// State buttons
// Stateless buttons
&.mx_CallViewButtons_dialpad::before {
background-image: url('$(res)/img/voip/dialpad.svg');
mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
}
&.mx_CallViewButtons_button_micOn::before {
background-image: url('$(res)/img/voip/mic-on.svg');
}
&.mx_CallViewButtons_button_hangup {
background-color: $alert;
&.mx_CallViewButtons_button_micOff::before {
background-image: url('$(res)/img/voip/mic-off.svg');
}
&.mx_CallViewButtons_button_vidOn::before {
background-image: url('$(res)/img/voip/vid-on.svg');
}
&.mx_CallViewButtons_button_vidOff::before {
background-image: url('$(res)/img/voip/vid-off.svg');
}
&.mx_CallViewButtons_button_screensharingOn::before {
background-image: url('$(res)/img/voip/screensharing-on.svg');
}
&.mx_CallViewButtons_button_screensharingOff::before {
background-image: url('$(res)/img/voip/screensharing-off.svg');
}
&.mx_CallViewButtons_button_sidebarOn::before {
background-image: url('$(res)/img/voip/sidebar-on.svg');
}
&.mx_CallViewButtons_button_sidebarOff::before {
background-image: url('$(res)/img/voip/sidebar-off.svg');
}
&.mx_CallViewButtons_button_hangup::before {
background-image: url('$(res)/img/voip/hangup.svg');
&::before {
mask-image: url('$(res)/img/voip/call-view/hangup.svg');
background-color: white; // Same on both themes
}
}
&.mx_CallViewButtons_button_more::before {
background-image: url('$(res)/img/voip/more.svg');
mask-image: url('$(res)/img/voip/call-view/more.svg');
}
// Stateless buttons
// Invisible state
&.mx_CallViewButtons_button_invisible {
visibility: hidden;
pointer-events: none;
position: absolute;
}
// Invisible state
}
}

10
res/css/views/voip/_CallView.scss
View File

@ -49,13 +49,16 @@ limitations under the License.
}
.mx_CallViewButtons {
bottom: 0px;
bottom: 13px;
}
.mx_CallViewButtons_button {
width: 34px;
height: 34px;
&::before {
width: 36px;
height: 36px;
width: 22px;
height: 22px;
}
}
@ -74,7 +77,6 @@ limitations under the License.
> .mx_VideoFeed {
width: 100%;
height: 100%;
border-width: 0 !important; // Override mx_VideoFeed_speaking
&.mx_VideoFeed_voice {
display: flex;

2
res/css/views/voip/_CallViewSidebar.scss
View File

@ -39,6 +39,8 @@ limitations under the License.
display: flex;
align-items: center;
justify-content: center;
background-color: $video-feed-secondary-background;
}
.mx_VideoFeed_video {

8
res/css/views/voip/_VideoFeed.scss
View File

@ -26,14 +26,6 @@ limitations under the License.
aspect-ratio: 16 / 9;
}
&.mx_VideoFeed_speaking {
border: $accent 2px solid;
.mx_VideoFeed_video {
border-radius: 0;
}
}
.mx_VideoFeed_video {
width: 100%;
background-color: transparent;

3
res/img/voip/call-view/cam-off.svg Normal file
View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 817 B

3
res/img/voip/call-view/cam-on.svg Normal file
View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 553 B

3
res/img/voip/call-view/dialpad.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 19C10.9 19 10 19.9 10 21C10 22.1 10.9 23 12 23C13.1 23 14 22.1 14 21C14 19.9 13.1 19 12 19ZM6 1C4.9 1 4 1.9 4 3C4 4.1 4.9 5 6 5C7.1 5 8 4.1 8 3C8 1.9 7.1 1 6 1ZM6 7C4.9 7 4 7.9 4 9C4 10.1 4.9 11 6 11C7.1 11 8 10.1 8 9C8 7.9 7.1 7 6 7ZM6 13C4.9 13 4 13.9 4 15C4 16.1 4.9 17 6 17C7.1 17 8 16.1 8 15C8 13.9 7.1 13 6 13ZM18 5C19.1 5 20 4.1 20 3C20 1.9 19.1 1 18 1C16.9 1 16 1.9 16 3C16 4.1 16.9 5 18 5ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13ZM18 13C16.9 13 16 13.9 16 15C16 16.1 16.9 17 18 17C19.1 17 20 16.1 20 15C20 13.9 19.1 13 18 13ZM18 7C16.9 7 16 7.9 16 9C16 10.1 16.9 11 18 11C19.1 11 20 10.1 20 9C20 7.9 19.1 7 18 7ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 1C10.9 1 10 1.9 10 3C10 4.1 10.9 5 12 5C13.1 5 14 4.1 14 3C14 1.9 13.1 1 12 1Z" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 979 B

3
res/img/voip/call-view/hangup.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0071 7.39308C9.57295 7.33796 6.62364 7.71014 5.90662 7.8987C5.86422 7.90986 5.81537 7.92232 5.76073 7.93627C4.65985 8.21723 1.2103 9.09763 0.837594 11.8872C0.548842 14.0484 1.99488 14.7025 2.71774 14.6029C3.21806 14.5402 4.65057 14.3136 5.97414 14.0762C7.27383 13.843 7.27317 12.9856 7.27273 12.4058C7.27272 12.3951 7.27271 12.3846 7.27271 12.3741L7.27271 11.2085C7.27271 10.9117 7.55166 10.7401 7.93642 10.6937C9.29847 10.5087 10.4355 10.5082 11.0047 10.5082L11.0095 10.5082C11.5786 10.5082 12.7015 10.5087 14.0636 10.6938C14.4483 10.7401 14.7273 10.9117 14.7273 11.2085L14.7273 12.3741C14.7273 12.3846 14.7273 12.3952 14.7273 12.4058C14.7268 12.9856 14.7261 13.843 16.0258 14.0762C17.3494 14.3136 18.7819 14.5402 19.2822 14.6029C20.0051 14.7025 21.4511 14.0484 21.1624 11.8872C20.7897 9.09763 17.3401 8.21724 16.2393 7.93628C16.1846 7.92233 16.1358 7.90986 16.0934 7.89871C15.3763 7.71015 12.4412 7.33796 11.0071 7.39308Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
res/img/voip/call-view/mic-off.svg Normal file
View File

@ -0,0 +1,3 @@
<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.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L8 9.41421V12C8 14.2091 9.79086 16 12 16C12.7418 16 13.4365 15.7981 14.032 15.4462L15.4765 16.8907C14.4957 17.5892 13.2958 18 12 18C8.68629 18 6 15.3137 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 16.0796 7.05369 19.446 11 19.9381V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19.9381C14.4607 19.756 15.7991 19.18 16.9056 18.3199L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L3.70711 2.29289ZM17.7917 13.5729L19.3589 15.1433C19.7715 14.1783 20 13.1159 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5443 17.9275 13.0716 17.7917 13.5729ZM8.43077 4.19238L16 11.7774V6C16 3.79086 14.2091 2 12 2C10.4413 2 9.09091 2.89149 8.43077 4.19238Z" fill="#21262C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
res/img/voip/call-view/mic-on.svg Normal file
View File

@ -0,0 +1,3 @@
<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="M8.09999 6.15C8.09999 3.99609 9.84608 2.25 12 2.25C14.1539 2.25 15.9 3.99609 15.9 6.15V11.9825C15.9 14.1365 14.1539 15.8825 12 15.8825C9.84608 15.8825 8.09999 14.1365 8.09999 11.9825V6.15ZM5.1748 10.7375C5.86516 10.7375 6.4248 11.2972 6.4248 11.9875C6.4248 15.0574 8.91483 17.5493 11.9915 17.5538C11.9943 17.5538 11.9972 17.5538 12 17.5538C12.0028 17.5538 12.0056 17.5538 12.0084 17.5538C15.085 17.5492 17.5748 15.0573 17.5748 11.9875C17.5748 11.2972 18.1344 10.7375 18.8248 10.7375C19.5152 10.7375 20.0748 11.2972 20.0748 11.9875C20.0748 16.0189 17.115 19.3576 13.25 19.9577V20.7513C13.25 21.4416 12.6904 22.0013 12 22.0013C11.3096 22.0013 10.75 21.4416 10.75 20.7513V19.9578C6.88482 19.3578 3.9248 16.0191 3.9248 11.9875C3.9248 11.2972 4.48445 10.7375 5.1748 10.7375Z" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 940 B

3
res/img/voip/call-view/more.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.66699 2C4.66699 3.10457 3.77156 4 2.66699 4C1.56242 4 0.666992 3.10457 0.666992 2C0.666992 0.895431 1.56242 0 2.66699 0C3.77156 0 4.66699 0.895431 4.66699 2ZM12 2C12 3.10457 11.1046 4 10 4C8.89543 4 8 3.10457 8 2C8 0.895431 8.89543 0 10 0C11.1046 0 12 0.895431 12 2ZM17.333 4C18.4376 4 19.333 3.10457 19.333 2C19.333 0.895431 18.4376 0 17.333 0C16.2284 0 15.333 0.895431 15.333 2C15.333 3.10457 16.2284 4 17.333 4Z" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 586 B

3
res/img/voip/call-view/screensharing.svg Normal file
View File

@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 714 B

6
res/img/voip/call-view/sidebar-off.svg Normal file
View File

@ -0,0 +1,6 @@
<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="M1.99976 5.64759V17.1382C1.99976 18.1507 2.8206 18.9716 3.83316 18.9716H14.4206L1.99976 5.64759ZM15.9125 15.1C16.3503 13.8013 17.16 12.7192 18.4289 12.196C17.8036 11.6568 17.4058 10.846 17.4058 9.93928C17.4058 8.31596 18.6808 7 20.2537 7C20.7764 7 21.2661 7.14529 21.6871 7.39886V5.83341C21.6871 4.82084 20.8663 4 19.8537 4H5.5648L15.9125 15.1Z" fill="#737D8C"/>
<ellipse cx="20.2543" cy="9.93931" rx="1.99232" ry="2.05619" fill="#737D8C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2448 19.7472C20.2476 19.7472 20.2503 19.7472 20.2531 19.7472C21.0024 19.7472 23.9998 19.7472 23.9998 17.4271C23.9998 15.1069 22.8845 12.7868 20.2531 12.7868C18.1577 12.7868 17.056 14.1935 16.6692 15.9116L20.2448 19.7472Z" fill="#737D8C"/>
<rect width="26.1178" height="2.24431" rx="1.12216" transform="matrix(0.681883 0.731461 -0.742244 0.670129 1.66553 2)" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

5
res/img/voip/call-view/sidebar-on.svg Normal file
View File

@ -0,0 +1,5 @@
<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="M1 5.83341C1 4.82084 1.82084 4 2.83341 4H18.854C19.8665 4 20.6874 4.82084 20.6874 5.83341V7.39886C20.2664 7.14529 19.7766 7 19.254 7C17.6811 7 16.406 8.31596 16.406 9.93928C16.406 10.846 16.8038 11.6568 17.4291 12.196C15.358 13.05 14.51 15.3933 14.5063 17.7367C14.5056 18.2241 14.6298 18.6314 14.8394 18.9716H2.83341C1.82084 18.9716 1 18.1507 1 17.1382V5.83341Z" fill="#737D8C"/>
<path d="M19.2531 12.7868C16.5622 12.7868 15.51 15.1069 15.5063 17.4271C15.503 19.5501 18.5038 19.7472 19.2531 19.7472C20.0025 19.7472 22.9999 19.7472 22.9999 17.4271C22.9999 15.1069 21.8846 12.7868 19.2531 12.7868Z" fill="#737D8C"/>
<ellipse cx="19.2543" cy="9.93931" rx="1.99232" ry="2.05619" fill="#737D8C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 844 B

17
res/img/voip/dialpad.svg
View File

@ -1,17 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="white"/>
</g>
<path d="M24 25.8335C23.0833 25.8335 22.3333 26.5835 22.3333 27.5002C22.3333 28.4168 23.0833 29.1668 24 29.1668C24.9167 29.1668 25.6667 28.4168 25.6667 27.5002C25.6667 26.5835 24.9167 25.8335 24 25.8335ZM19 10.8335C18.0833 10.8335 17.3333 11.5835 17.3333 12.5002C17.3333 13.4168 18.0833 14.1668 19 14.1668C19.9167 14.1668 20.6667 13.4168 20.6667 12.5002C20.6667 11.5835 19.9167 10.8335 19 10.8335ZM19 15.8335C18.0833 15.8335 17.3333 16.5835 17.3333 17.5002C17.3333 18.4168 18.0833 19.1668 19 19.1668C19.9167 19.1668 20.6667 18.4168 20.6667 17.5002C20.6667 16.5835 19.9167 15.8335 19 15.8335ZM19 20.8335C18.0833 20.8335 17.3333 21.5835 17.3333 22.5002C17.3333 23.4168 18.0833 24.1668 19 24.1668C19.9167 24.1668 20.6667 23.4168 20.6667 22.5002C20.6667 21.5835 19.9167 20.8335 19 20.8335ZM29 14.1668C29.9167 14.1668 30.6667 13.4168 30.6667 12.5002C30.6667 11.5835 29.9167 10.8335 29 10.8335C28.0833 10.8335 27.3333 11.5835 27.3333 12.5002C27.3333 13.4168 28.0833 14.1668 29 14.1668ZM24 20.8335C23.0833 20.8335 22.3333 21.5835 22.3333 22.5002C22.3333 23.4168 23.0833 24.1668 24 24.1668C24.9167 24.1668 25.6667 23.4168 25.6667 22.5002C25.6667 21.5835 24.9167 20.8335 24 20.8335ZM29 20.8335C28.0833 20.8335 27.3333 21.5835 27.3333 22.5002C27.3333 23.4168 28.0833 24.1668 29 24.1668C29.9167 24.1668 30.6667 23.4168 30.6667 22.5002C30.6667 21.5835 29.9167 20.8335 29 20.8335ZM29 15.8335C28.0833 15.8335 27.3333 16.5835 27.3333 17.5002C27.3333 18.4168 28.0833 19.1668 29 19.1668C29.9167 19.1668 30.6667 18.4168 30.6667 17.5002C30.6667 16.5835 29.9167 15.8335 29 15.8335ZM24 15.8335C23.0833 15.8335 22.3333 16.5835 22.3333 17.5002C22.3333 18.4168 23.0833 19.1668 24 19.1668C24.9167 19.1668 25.6667 18.4168 25.6667 17.5002C25.6667 16.5835 24.9167 15.8335 24 15.8335ZM24 10.8335C23.0833 10.8335 22.3333 11.5835 22.3333 12.5002C22.3333 13.4168 23.0833 14.1668 24 14.1668C24.9167 14.1668 25.6667 13.4168 25.6667 12.5002C25.6667 11.5835 24.9167 10.8335 24 10.8335Z" fill="#737D8C"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

17
res/img/voip/hangup.svg
View File

@ -1,17 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="#FE2928"/>
</g>
<path d="m 24.008382,14.7565 c -1.6873,-0.0649 -5.157,0.373 -6.0006,0.5948 -0.0499,0.0131 -0.1074,0.0278 -0.1716,0.0442 -1.2952,0.3306 -5.35348,1.3663 -5.79196,4.6481 -0.33971,2.5426 1.36151,3.3122 2.21196,3.195 0.5886,-0.0738 2.2739,-0.3403 3.831,-0.6197 1.5291,-0.2743 1.5283,-1.283 1.5278,-1.9651 0,-0.0125 0,-0.025 0,-0.0373 v -1.3712 c 0,-0.3492 0.3281,-0.5511 0.7808,-0.6057 1.6024,-0.2176 2.9401,-0.2183 3.6097,-0.2183 h 0.0057 c 0.6695,0 1.9906,7e-4 3.593,0.2183 0.4527,0.0546 0.7808,0.2565 0.7808,0.6057 v 1.3712 c 0,0.0124 0,0.0248 0,0.0373 -5e-4,0.6821 -0.0013,1.6908 1.5278,1.9652 1.5571,0.2793 3.2424,0.5458 3.831,0.6196 0.8504,0.1172 2.5517,-0.6524 2.212,-3.195 -0.4385,-3.2818 -4.4968,-4.3175 -5.792,-4.6481 -0.0642,-0.0164 -0.1217,-0.031 -0.1716,-0.0442 -0.8435,-0.2218 -4.2966,-0.6597 -5.9838,-0.5948 z" fill="#ffffff" />
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

18
res/img/voip/mic-off.svg
View File

@ -1,18 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="#61708B"/>
</g>
<path d="M15 11L33 29" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 14.5921V20C20 22.2091 21.7909 24 24 24C25.4616 24 26.7402 23.216 27.4381 22.0457L20 14.5921ZM28.8804 23.491C27.7918 25.0102 26.0115 26 24 26C20.6863 26 18 23.3137 18 20C18 19.4477 17.5523 19 17 19C16.4477 19 16 19.4477 16 20C16 24.0796 19.0537 27.446 23 27.9381V29C23 29.5523 23.4477 30 24 30C24.5523 30 25 29.5523 25 29V27.9381C27.1511 27.6699 29.037 26.5476 30.3077 24.9213L28.8804 23.491ZM31.3589 23.1433L29.7917 21.5729C29.9275 21.0716 30 20.5443 30 20C30 19.4477 30.4477 19 31 19C31.5523 19 32 19.4477 32 20C32 21.1159 31.7715 22.1783 31.3589 23.1433ZM28 19.7774L20.4308 12.1924C21.0909 10.8915 22.4413 10 24 10C26.2091 10 28 11.7909 28 14V19.7774Z" fill="white"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

17
res/img/voip/mic-on.svg
View File

@ -1,17 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="white"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 14C20 11.7909 21.7909 10 24 10C26.2091 10 28 11.7909 28 14V20C28 22.2091 26.2091 24 24 24C21.7909 24 20 22.2091 20 20V14ZM17 19C17.5523 19 18 19.4477 18 20C18 23.3137 20.6863 26 24 26C27.3137 26 30 23.3137 30 20C30 19.4477 30.4477 19 31 19C31.5523 19 32 19.4477 32 20C32 24.0796 28.9463 27.446 25 27.9381V29C25 29.5523 24.5523 30 24 30C23.4477 30 23 29.5523 23 29V27.9381C19.0537 27.446 16 24.0796 16 20C16 19.4477 16.4477 19 17 19Z" fill="#61708B"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

17
res/img/voip/more.svg
View File

@ -1,17 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="white"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.667 20C18.667 21.1046 17.7716 22 16.667 22C15.5624 22 14.667 21.1046 14.667 20C14.667 18.8954 15.5624 18 16.667 18C17.7716 18 18.667 18.8954 18.667 20ZM26 20C26 21.1046 25.1046 22 24 22C22.8954 22 22 21.1046 22 20C22 18.8954 22.8954 18 24 18C25.1046 18 26 18.8954 26 20ZM31.333 22C32.4376 22 33.333 21.1046 33.333 20C33.333 18.8954 32.4376 18 31.333 18C30.2284 18 29.333 18.8954 29.333 20C29.333 21.1046 30.2284 22 31.333 22Z" fill="#737D8C"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

18
res/img/voip/screensharing-off.svg
View File

@ -1,18 +0,0 @@
<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="25" cy="20" r="20" fill="white"/>
</g>
<rect x="14.6008" y="12.8" width="20.8" height="14.4" rx="1.6" fill="white" stroke="#737D8C" stroke-width="1.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3617 23.36C24.3617 23.7135 24.6483 24 25.0017 24C25.3552 24 25.6417 23.7135 25.6417 23.36L25.6417 18.1851L27.6692 20.2125C27.9191 20.4625 28.3243 20.4625 28.5743 20.2125C28.8242 19.9626 28.8242 19.5574 28.5743 19.3075L25.4543 16.1875C25.2043 15.9375 24.7991 15.9375 24.5492 16.1875L21.4292 19.3075C21.1792 19.5574 21.1792 19.9626 21.4292 20.2125C21.6791 20.4625 22.0843 20.4625 22.3343 20.2125L24.3617 18.1851L24.3617 23.36Z" fill="#737D8C"/>
<defs>
<filter id="filter0_d" x="0.947663" y="0" width="48.1047" height="48.1047" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4.05234"/>
<feGaussianBlur stdDeviation="2.02617"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

18
res/img/voip/screensharing-on.svg
View File

@ -1,18 +0,0 @@
<svg width="50" height="49" viewBox="0 0 50 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="25" cy="20" r="20" fill="#0DBD8B"/>
</g>
<rect x="14.6008" y="12.8" width="20.8" height="14.4" rx="1.6" fill="#0DBD8B" stroke="white" stroke-width="1.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3617 23.36C24.3617 23.7135 24.6483 24 25.0017 24C25.3552 24 25.6417 23.7135 25.6417 23.36L25.6417 18.1851L27.6692 20.2125C27.9191 20.4625 28.3243 20.4625 28.5743 20.2125C28.8242 19.9626 28.8242 19.5574 28.5743 19.3075L25.4543 16.1875C25.2043 15.9375 24.7991 15.9375 24.5492 16.1875L21.4292 19.3075C21.1792 19.5574 21.1792 19.9626 21.4292 20.2125C21.6791 20.4625 22.0843 20.4625 22.3343 20.2125L24.3617 18.1851L24.3617 23.36Z" fill="white"/>
<defs>
<filter id="filter0_d" x="0.947663" y="0" width="48.1047" height="48.1047" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4.05234"/>
<feGaussianBlur stdDeviation="2.02617"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

20
res/img/voip/sidebar-off.svg
View File

@ -1,20 +0,0 @@
<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="#737D8C"/>
</g>
<rect x="12.5618" y="12.8992" width="20.3525" height="14.4496" rx="2.43819" fill="white" stroke="#737D8C" stroke-width="1.12362"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9132 20.5009C33.2675 20.5009 34.3655 19.4205 34.3655 18.0876C34.3655 16.7548 33.2675 15.6743 31.9132 15.6743C30.5589 15.6743 29.4609 16.7548 29.4609 18.0876C29.4609 19.4205 30.5589 20.5009 31.9132 20.5009ZM27.8242 26.132C27.8282 23.7187 28.976 21.3054 31.9113 21.3054C34.7818 21.3054 35.9984 23.7187 35.9984 26.132C35.9984 28.5453 32.7288 28.5453 31.9113 28.5453C31.0939 28.5453 27.8206 28.3403 27.8242 26.132Z" fill="white"/>
<path d="M27.8242 26.132L28.386 26.1329L27.8242 26.132ZM35.9984 26.132H35.4366H35.9984ZM33.8037 18.0876C33.8037 19.1017 32.9658 19.9391 31.9132 19.9391V21.0627C33.5693 21.0627 34.9273 19.7392 34.9273 18.0876H33.8037ZM31.9132 16.2361C32.9658 16.2361 33.8037 17.0735 33.8037 18.0876H34.9273C34.9273 16.4361 33.5693 15.1125 31.9132 15.1125V16.2361ZM30.0227 18.0876C30.0227 17.0735 30.8606 16.2361 31.9132 16.2361V15.1125C30.2571 15.1125 28.8991 16.4361 28.8991 18.0876H30.0227ZM31.9132 19.9391C30.8606 19.9391 30.0227 19.1017 30.0227 18.0876H28.8991C28.8991 19.7392 30.2571 21.0627 31.9132 21.0627V19.9391ZM31.9113 20.7436C30.2659 20.7436 29.0747 21.4314 28.3132 22.4845C27.5693 23.5133 27.2645 24.8471 27.2624 26.1311L28.386 26.1329C28.3879 25.0036 28.659 23.924 29.2238 23.1429C29.771 22.386 30.6214 21.8672 31.9113 21.8672V20.7436ZM36.5602 26.132C36.5602 24.8414 36.2364 23.5081 35.4845 22.4817C34.7168 21.4338 33.5275 20.7436 31.9113 20.7436V21.8672C33.1657 21.8672 34.0199 22.3836 34.5781 23.1457C35.1521 23.9293 35.4366 25.0093 35.4366 26.132H36.5602ZM31.9113 29.1071C32.3157 29.1071 33.4213 29.1105 34.4365 28.7775C34.9481 28.6096 35.4778 28.3438 35.8839 27.9122C36.3025 27.4673 36.5602 26.8767 36.5602 26.132H35.4366C35.4366 26.594 35.2857 26.9083 35.0656 27.1422C34.8331 27.3893 34.4943 27.576 34.0863 27.7098C33.2623 27.9801 32.3244 27.9835 31.9113 27.9835V29.1071ZM27.2624 26.1311C27.26 27.5996 28.3757 28.3418 29.3716 28.6961C30.3797 29.0547 31.4763 29.1071 31.9113 29.1071V27.9835C31.5289 27.9835 30.5802 27.9334 29.7482 27.6375C28.9039 27.3371 28.3848 26.8728 28.386 26.1329L27.2624 26.1311Z" fill="#737D8C"/>
<rect x="0.0339116" y="-0.787426" width="29.1443" height="3.36793" rx="1.68396" transform="matrix(0.681883 0.731461 -0.742244 0.670129 13.0943 8.71545)" fill="white" stroke="#737D8C" stroke-width="1.12362"/>
<defs>
<filter id="filter0_d" x="0.589744" y="0" width="46.8205" height="46.8205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3.41026"/>
<feGaussianBlur stdDeviation="1.70513"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

19
res/img/voip/sidebar-on.svg
View File

@ -1,19 +0,0 @@
<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="white"/>
</g>
<rect x="12.5" y="12.5" width="20.4763" height="15.3319" rx="2.5" fill="#737D8C" stroke="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.912 20.5618C33.2664 20.5618 34.3643 19.4287 34.3643 18.0309C34.3643 16.6331 33.2664 15.5 31.912 15.5C30.5577 15.5 29.4598 16.6331 29.4598 18.0309C29.4598 19.4287 30.5577 20.5618 31.912 20.5618ZM27.8242 26.467C27.8282 23.9361 28.976 21.4052 31.9113 21.4052C34.7818 21.4052 35.9985 23.9361 35.9985 26.467C35.9985 28.9978 32.7288 28.9978 31.9114 28.9978C31.0939 28.9978 27.8206 28.7829 27.8242 26.467Z" fill="#737D8C"/>
<path d="M27.8242 26.467L27.3242 26.4662L27.8242 26.467ZM35.9985 26.467H36.4985H35.9985ZM33.8643 18.0309C33.8643 19.1675 32.9755 20.0618 31.912 20.0618V21.0618C33.5573 21.0618 34.8643 19.6898 34.8643 18.0309H33.8643ZM31.912 16C32.9755 16 33.8643 16.8943 33.8643 18.0309H34.8643C34.8643 16.372 33.5573 15 31.912 15V16ZM29.9598 18.0309C29.9598 16.8943 30.8486 16 31.912 16V15C30.2668 15 28.9598 16.372 28.9598 18.0309H29.9598ZM31.912 20.0618C30.8486 20.0618 29.9598 19.1675 29.9598 18.0309H28.9598C28.9598 19.6898 30.2668 21.0618 31.912 21.0618V20.0618ZM31.9113 20.9052C30.2753 20.9052 29.1023 21.622 28.3569 22.7032C27.6274 23.7612 27.3263 25.1361 27.3242 26.4662L28.3242 26.4677C28.3261 25.2669 28.6009 24.1109 29.1802 23.2708C29.7434 22.4538 30.612 21.9052 31.9113 21.9052V20.9052ZM36.4985 26.467C36.4985 25.1313 36.1789 23.7567 35.4412 22.7007C34.6893 21.6242 33.5177 20.9052 31.9113 20.9052V21.9052C33.1755 21.9052 34.0475 22.4516 34.6214 23.2733C35.2097 24.1154 35.4985 25.2717 35.4985 26.467H36.4985ZM31.9114 29.4978C32.3162 29.4978 33.416 29.5011 34.4241 29.1543C34.9326 28.9794 35.4519 28.7044 35.847 28.264C36.2515 27.8131 36.4985 27.2184 36.4985 26.467H35.4985C35.4985 26.9809 35.3367 27.3354 35.1026 27.5962C34.8591 27.8677 34.5099 28.0673 34.0988 28.2087C33.2677 28.4946 32.3239 28.4978 31.9114 28.4978V29.4978ZM27.3242 26.4662C27.3219 27.9345 28.3854 28.6964 29.3851 29.0693C30.3864 29.4429 31.4779 29.4978 31.9114 29.4978V28.4978C31.5274 28.4978 30.5735 28.4453 29.7346 28.1324C28.8943 27.8189 28.3229 27.3153 28.3242 26.4677L27.3242 26.4662Z" fill="white"/>
<defs>
<filter id="filter0_d" x="0.589744" y="0" width="46.8205" height="46.8205" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3.41026"/>
<feGaussianBlur stdDeviation="1.70513"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

19
res/img/voip/vid-off.svg
View File

@ -1,19 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="#61708B"/>
</g>
<path d="M14.8334 11.6666L29.8334 26.6666" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 13.3333H17.676L28.1667 23.8458V26.1791C28.1595 26.1713 28.1521 26.1636 28.1446 26.1561L15.662 13.6474C16.0648 13.4464 16.5192 13.3333 17 13.3333ZM14.4359 14.7751C14.1593 15.2292 14 15.7626 14 16.3332V23.6666C14 25.3234 15.3431 26.6666 17 26.6666H26.2994L14.4778 14.8203C14.4632 14.8056 14.4492 14.7906 14.4359 14.7751ZM28.1667 16.3333V21.4863L20.0306 13.3333H25.1667C26.8235 13.3333 28.1667 14.6764 28.1667 16.3333Z" fill="white"/>
<path d="M29.8334 17.5L32.3753 15.4664C33.0301 14.9426 34 15.4087 34 16.2473V23.7527C34 24.5912 33.0301 25.0573 32.3753 24.5335L29.8334 22.5V17.5Z" fill="white"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

18
res/img/voip/vid-on.svg
View File

@ -1,18 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle cx="24" cy="20" r="20" fill="white"/>
</g>
<path d="M14 16.3334C14 14.6765 15.3431 13.3334 17 13.3334H25.1667C26.8235 13.3334 28.1667 14.6765 28.1667 16.3334V23.6667C28.1667 25.3236 26.8235 26.6667 25.1667 26.6667H17C15.3431 26.6667 14 25.3236 14 23.6667V16.3334Z" fill="#61708B"/>
<path d="M29.8334 17.5001L32.3753 15.4665C33.0301 14.9427 34 15.4089 34 16.2474V23.7528C34 24.5913 33.0301 25.0575 32.3753 24.5337L29.8334 22.5001V17.5001Z" fill="#61708B"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

10
res/themes/dark/css/_dark.scss
View File

@ -179,6 +179,16 @@ $eventbubble-bg-hover: #1C2026;
$eventbubble-reply-color: #C1C6CD;
// ********************
// VoIP
// ********************
$call-view-button-on-foreground: $primary-content;
$call-view-button-on-background: $system;
$call-view-button-off-foreground: $system;
$call-view-button-off-background: $primary-content;
$video-feed-secondary-background: $system;
// ********************
// One-off colors
// ********************
$kbd-border-color: #000000;

7
res/themes/legacy-dark/css/_legacy-dark.scss
View File

@ -117,7 +117,12 @@ $space-nav: rgba($panel-base, 0.1);
// ********************
$theme-button-bg-color: #e3e8f0;
$call-view-button-on-foreground: $primary-content;
$call-view-button-on-background: $system;
$call-view-button-off-foreground: $system;
$call-view-button-off-background: $primary-content;
$video-feed-secondary-background: $system;
$roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
$roomlist-filter-active-bg-color: $roomlist-button-bg-color;

7
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -176,6 +176,13 @@ $space-nav: rgba($tertiary-content, 0.15);
$voipcall-plinth-color: $system;
$call-view-button-on-foreground: $secondary-content;
$call-view-button-on-background: $background;
$call-view-button-off-foreground: $background;
$call-view-button-off-background: $secondary-content;
$video-feed-secondary-background: #394049; // XXX: Color from dark theme
$username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8;
$username-variant3-color: #03b381;

8
res/themes/light/css/_light.scss
View File

@ -259,7 +259,13 @@ $lightbox-background-bg-opacity: 0.95;
// VoIP
// ********************
$voipcall-plinth-color: $system;
// more colors to come
$call-view-button-on-foreground: $secondary-content;
$call-view-button-on-background: $background;
$call-view-button-off-foreground: $background;
$call-view-button-off-background: $secondary-content;
$video-feed-secondary-background: #394049; // XXX: Color from dark theme
// ********************
// One-off colors

183
src/components/views/voip/CallView/CallViewButtons.tsx
View File

@ -39,6 +39,31 @@ const TOOLTIP_Y_OFFSET = -24;
const CONTROLS_HIDE_DELAY = 2000;
interface IButtonProps {
state: boolean;
className: string;
onLabel: string;
offLabel: string;
onClick: () => void;
}
const CallViewToggleButton: React.FC<IButtonProps> = ({ state: isOn, className, onLabel, offLabel, onClick }) => {
const classes = classNames("mx_CallViewButtons_button", className, {
mx_CallViewButtons_button_on: isOn,
mx_CallViewButtons_button_off: !isOn,
});
return (
<AccessibleTooltipButton
className={classes}
onClick={onClick}
title={isOn ? onLabel : offLabel}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
);
};
interface IProps {
call: MatrixCall;
pipMode: boolean;
@ -142,113 +167,10 @@ export default class CallViewButtons extends React.Component<IProps, IState> {
};
public render(): JSX.Element {
const micClasses = classNames("mx_CallViewButtons_button", {
mx_CallViewButtons_button_micOn: !this.props.buttonsState.micMuted,
mx_CallViewButtons_button_micOff: this.props.buttonsState.micMuted,
});
const vidClasses = classNames("mx_CallViewButtons_button", {
mx_CallViewButtons_button_vidOn: !this.props.buttonsState.vidMuted,
mx_CallViewButtons_button_vidOff: this.props.buttonsState.vidMuted,
});
const screensharingClasses = classNames("mx_CallViewButtons_button", {
mx_CallViewButtons_button_screensharingOn: this.props.buttonsState.screensharing,
mx_CallViewButtons_button_screensharingOff: !this.props.buttonsState.screensharing,
});
const sidebarButtonClasses = classNames("mx_CallViewButtons_button", {
mx_CallViewButtons_button_sidebarOn: this.props.buttonsState.sidebarShown,
mx_CallViewButtons_button_sidebarOff: !this.props.buttonsState.sidebarShown,
});
// Put the other states of the mic/video icons in the document to make sure they're cached
// (otherwise the icon disappears briefly when toggled)
const micCacheClasses = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_button_invisible", {
mx_CallViewButtons_button_micOn: this.props.buttonsState.micMuted,
mx_CallViewButtons_button_micOff: !this.props.buttonsState.micMuted,
});
const vidCacheClasses = classNames("mx_CallViewButtons_button", "mx_CallViewButtons_button_invisible", {
mx_CallViewButtons_button_vidOn: this.props.buttonsState.micMuted,
mx_CallViewButtons_button_vidOff: !this.props.buttonsState.micMuted,
});
const callControlsClasses = classNames("mx_CallViewButtons", {
mx_CallViewButtons_hidden: !this.state.visible,
});
let vidMuteButton;
if (this.props.buttonsVisibility.vidMute) {
vidMuteButton = (
<AccessibleTooltipButton
className={vidClasses}
onClick={this.props.handlers.onVidMuteClick}
title={this.props.buttonsState.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
);
}
let screensharingButton;
if (this.props.buttonsVisibility.screensharing) {
screensharingButton = (
<AccessibleTooltipButton
className={screensharingClasses}
onClick={this.props.handlers.onScreenshareClick}
title={this.props.buttonsState.screensharing
? _t("Stop sharing your screen")
: _t("Start sharing your screen")
}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
);
}
let sidebarButton;
if (this.props.buttonsVisibility.sidebar) {
sidebarButton = (
<AccessibleTooltipButton
className={sidebarButtonClasses}
onClick={this.props.handlers.onToggleSidebarClick}
title={this.props.buttonsState.sidebarShown ? _t("Hide sidebar") : _t("Show sidebar")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
);
}
let contextMenuButton;
if (this.props.buttonsVisibility.contextMenu) {
contextMenuButton = (
<ContextMenuTooltipButton
className="mx_CallViewButtons_button mx_CallViewButtons_button_more"
onClick={this.onMoreClick}
inputRef={this.contextMenuButton}
isExpanded={this.state.showMoreMenu}
title={_t("More")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
);
}
let dialpadButton;
if (this.props.buttonsVisibility.dialpad) {
dialpadButton = (
<ContextMenuTooltipButton
className="mx_CallViewButtons_button mx_CallViewButtons_dialpad"
inputRef={this.dialpadButton}
onClick={this.onDialpadClick}
isExpanded={this.state.showDialpad}
title={_t("Dialpad")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/>
);
}
let dialPad;
if (this.state.showDialpad) {
dialPad = <DialpadContextMenu
@ -289,20 +211,53 @@ export default class CallViewButtons extends React.Component<IProps, IState> {
>
{ dialPad }
{ contextMenu }
{ dialpadButton }
<AccessibleTooltipButton
className={micClasses}
onClick={this.props.handlers.onMicMuteClick}
title={this.props.buttonsState.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
{ this.props.buttonsVisibility.dialpad && <ContextMenuTooltipButton
className="mx_CallViewButtons_button mx_CallViewButtons_dialpad"
inputRef={this.dialpadButton}
onClick={this.onDialpadClick}
isExpanded={this.state.showDialpad}
title={_t("Dialpad")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/> }
<CallViewToggleButton
state={!this.props.buttonsState.micMuted}
className="mx_CallViewButtons_button_mic"
onLabel={_t("Mute the microphone")}
offLabel={_t("Unmute the microphone")}
onClick={this.props.handlers.onMicMuteClick}
/>
{ vidMuteButton }
<div className={micCacheClasses} />
<div className={vidCacheClasses} />
{ screensharingButton }
{ sidebarButton }
{ contextMenuButton }
{ this.props.buttonsVisibility.vidMute && <CallViewToggleButton
state={!this.props.buttonsState.vidMuted}
className="mx_CallViewButtons_button_vid"
onLabel={_t("Stop the camera")}
offLabel={_t("Start the camera")}
onClick={this.props.handlers.onVidMuteClick}
/> }
{ this.props.buttonsVisibility.screensharing && <CallViewToggleButton
state={this.props.buttonsState.screensharing}
className="mx_CallViewButtons_button_screensharing"
onLabel={_t("Stop sharing your screen")}
offLabel={_t("Start sharing your screen")}
onClick={this.props.handlers.onScreenshareClick}
/> }
{ this.props.buttonsVisibility.sidebar && <CallViewToggleButton
state={this.props.buttonsState.sidebarShown}
className="mx_CallViewButtons_button_sidebar"
onLabel={_t("Hide sidebar")}
offLabel={_t("Show sidebar")}
onClick={this.props.handlers.onToggleSidebarClick}
/> }
{ this.props.buttonsVisibility.contextMenu && <ContextMenuTooltipButton
className="mx_CallViewButtons_button mx_CallViewButtons_button_more"
onClick={this.onMoreClick}
inputRef={this.contextMenuButton}
isExpanded={this.state.showMoreMenu}
title={_t("More")}
alignment={Alignment.Top}
yOffset={TOOLTIP_Y_OFFSET}
/> }
<AccessibleTooltipButton
className="mx_CallViewButtons_button mx_CallViewButtons_button_hangup"
onClick={this.props.handlers.onHangupClick}

15
src/components/views/voip/VideoFeed.tsx
View File

@ -45,7 +45,6 @@ interface IProps {
interface IState {
audioMuted: boolean;
videoMuted: boolean;
speaking: boolean;
}
@replaceableComponent("views.voip.VideoFeed")
@ -58,7 +57,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
this.state = {
audioMuted: this.props.feed.isAudioMuted(),
videoMuted: this.props.feed.isVideoMuted(),
speaking: false,
};
}
@ -106,7 +104,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
this.props.feed.removeListener(CallFeedEvent.NewStream, this.onNewStream);
this.props.feed.removeListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged);
if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) {
this.props.feed.removeListener(CallFeedEvent.Speaking, this.onSpeaking);
this.props.feed.measureVolumeActivity(false);
}
this.stopMedia();
@ -115,7 +112,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
this.props.feed.addListener(CallFeedEvent.MuteStateChanged, this.onMuteStateChanged);
if (this.props.feed.purpose === SDPStreamMetadataPurpose.Usermedia) {
this.props.feed.addListener(CallFeedEvent.Speaking, this.onSpeaking);
this.props.feed.measureVolumeActivity(true);
}
this.playMedia();
@ -172,10 +168,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
});
};
private onSpeaking = (speaking: boolean): void => {
this.setState({ speaking });
};
private onResize = (e) => {
if (this.props.onResize && !this.props.feed.isLocal()) {
this.props.onResize(e);
@ -187,7 +179,6 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
const wrapperClasses = classnames("mx_VideoFeed", {
mx_VideoFeed_voice: this.state.videoMuted,
mx_VideoFeed_speaking: this.state.speaking,
});
const micIconClasses = classnames("mx_VideoFeed_mic", {
mx_VideoFeed_mic_muted: this.state.audioMuted,
@ -195,7 +186,11 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
});
let micIcon;
if (feed.purpose !== SDPStreamMetadataPurpose.Screenshare && !pipMode) {
if (
feed.purpose !== SDPStreamMetadataPurpose.Screenshare &&
!primary &&
!pipMode
) {
micIcon = (
<div className={micIconClasses} />
);

8
src/i18n/strings/en_EN.json
View File

@ -929,16 +929,16 @@
"%(sharerName)s is presenting": "%(sharerName)s is presenting",
"Your camera is turned off": "Your camera is turned off",
"Your camera is still enabled": "Your camera is still enabled",
"Start the camera": "Start the camera",
"Dialpad": "Dialpad",
"Mute the microphone": "Mute the microphone",
"Unmute the microphone": "Unmute the microphone",
"Stop the camera": "Stop the camera",
"Start the camera": "Start the camera",
"Stop sharing your screen": "Stop sharing your screen",
"Start sharing your screen": "Start sharing your screen",
"Hide sidebar": "Hide sidebar",
"Show sidebar": "Show sidebar",
"More": "More",
"Dialpad": "Dialpad",
"Unmute the microphone": "Unmute the microphone",
"Mute the microphone": "Mute the microphone",
"Hangup": "Hangup",
"Video Call": "Video Call",
"Voice Call": "Voice Call",