cddca95ad1
Allow listenonly users to change output devices Fixed dynamic audio device change for firefox Fixed shortcuts for audio join/leave Show (with a bold font) the current selected device [performance] Prevent calling mediaDevices.enumerateDevices every time we render the selector. This adds a delay (~200ms, on my chrome setup) to render this component [performance] Do not call enumerateDevices to search for new devices, instead we listen on mediaDevices.deviceChange event Small refactoring and fixed a few errors that were being throw in browser's console Fixed device selection when this is done in audio-settings modal Fallback to default device when current device is removed Truncate device name length Renamed "Input","Output" labels to "Microphone","Speakers", respectively Update eslint rule for accessKey
89 lines
1.5 KiB
SCSS
Executable File
89 lines
1.5 KiB
SCSS
Executable File
@import "/imports/ui/stylesheets/variables/breakpoints";
|
|
@import "/imports/ui/components/actions-bar/styles.scss";
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-flow: row;
|
|
|
|
.muteToggle {
|
|
margin-right: var(--sm-padding-x);
|
|
margin-left: 0;
|
|
|
|
@include mq($small-only) {
|
|
margin-right: var(--sm-padding-y);
|
|
}
|
|
|
|
[dir="rtl"] & {
|
|
margin-left: var(--sm-padding-x);
|
|
margin-right: 0;
|
|
|
|
@include mq($small-only) {
|
|
margin-left: var(--sm-padding-y);
|
|
}
|
|
}
|
|
}
|
|
|
|
> :last-child {
|
|
margin-left: var(--sm-padding-x);
|
|
margin-right: 0;
|
|
|
|
@include mq($small-only) {
|
|
margin-left: var(--sm-padding-y);
|
|
}
|
|
|
|
[dir="rtl"] & {
|
|
margin-left: 0;
|
|
margin-right: var(--sm-padding-x);
|
|
|
|
@include mq($small-only) {
|
|
margin-right: var(--sm-padding-y);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.glow {
|
|
border-radius: 50%;
|
|
|
|
:global(.animationsEnabled) & {
|
|
animation: pulse 1s infinite ease-in;
|
|
}
|
|
|
|
:global(.animationsDisabled) & span {
|
|
content: '';
|
|
outline: none !important;
|
|
background-clip: padding-box;
|
|
box-shadow: 0 0 0 4px rgba(255,255,255,.5);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 white;
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 0.5625rem transparent;
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
}
|
|
|
|
.dropdownListContainer {
|
|
min-width: 10rem;
|
|
}
|
|
|
|
.stopButton {
|
|
& > span {
|
|
color: var(--color-danger);
|
|
}
|
|
}
|
|
|
|
.disableDeviceSelection {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.selectedDevice {
|
|
font-weight: bold;
|
|
}
|