diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/CallView/CallView.vue | 2 | ||||
-rw-r--r-- | src/components/CallView/shared/LocalMediaControls.vue | 29 | ||||
-rw-r--r-- | src/components/MediaDevicesPreview.vue | 23 | ||||
-rw-r--r-- | src/components/TopBar/TopBar.vue | 8 |
4 files changed, 50 insertions, 12 deletions
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index b53aa98d6..764d8c738 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -782,7 +782,7 @@ export default { } #videos .videoContainer.speaking:not(.videoView) ::v-deep .nameIndicator, -#videos .videoContainer.videoView.speaking ::v-deep .nameIndicator .icon-audio { +#videos .videoContainer.videoView.speaking ::v-deep .nameIndicator .microphone-icon { animation: pulse 1s; animation-iteration-count: infinite; } diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue index 5bef8676f..47d228107 100644 --- a/src/components/CallView/shared/LocalMediaControls.vue +++ b/src/components/CallView/shared/LocalMediaControls.vue @@ -28,9 +28,14 @@ v-tooltip="audioButtonTooltip" :aria-label="audioButtonAriaLabel" :class="audioButtonClass" - class="forced-white" @shortkey="toggleAudio" - @click="toggleAudio" /> + @click="toggleAudio"> + <component :is="audioButtonComponent" + :size="24" + title="" + fill-color="#ffffff" + decorative /> + </button> <span v-show="model.attributes.audioAvailable" ref="volumeIndicator" class="volume-indicator" /> @@ -161,6 +166,9 @@ import escapeHtml from 'escape-html' import { emit } from '@nextcloud/event-bus' import { showMessage } from '@nextcloud/dialogs' import Hand from 'vue-material-design-icons/Hand' +import Microphone from 'vue-material-design-icons/Microphone' +import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff' +import MicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline' import Popover from '@nextcloud/vue/dist/Components/Popover' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner' @@ -184,6 +192,9 @@ export default { ActionSeparator, ActionButton, Hand, + Microphone, + MicrophoneOff, + MicrophoneOutline, }, props: { @@ -231,13 +242,21 @@ export default { audioButtonClass() { return { - 'icon-audio': this.model.attributes.audioAvailable && this.model.attributes.audioEnabled, 'audio-disabled': this.model.attributes.audioAvailable && !this.model.attributes.audioEnabled, - 'icon-audio-off': !this.model.attributes.audioAvailable || !this.model.attributes.audioEnabled, 'no-audio-available': !this.model.attributes.audioAvailable, } }, + audioButtonComponent() { + if (this.model.attributes.audioAvailable) { + if (this.model.attributes.audioEnabled) { + return 'Microphone' + } + return 'MicrophoneOff' + } + return 'MicrophoneOutline' + }, + audioButtonTooltip() { if (!this.model.attributes.audioAvailable) { return { @@ -770,7 +789,7 @@ export default { opacity: 0.7; } -#muteWrapper .icon-audio-off + .volume-indicator { +#muteWrapper .microphone-off-icon + .volume-indicator { background: linear-gradient(0deg, gray, white 36px); } diff --git a/src/components/MediaDevicesPreview.vue b/src/components/MediaDevicesPreview.vue index ab96a9bc0..7215832d1 100644 --- a/src/components/MediaDevicesPreview.vue +++ b/src/components/MediaDevicesPreview.vue @@ -30,10 +30,16 @@ class="preview-not-available"> <div v-if="audioStreamError" class="icon icon-error" /> - <div v-else-if="!audioInputId" - class="icon icon-audio-off" /> - <div v-else-if="!enabled" - class="icon icon-audio" /> + <MicrophoneOff + v-else-if="!audioInputId" + :size="64" + title="" + fill-color="#999" /> + <Microphone + v-else-if="!enabled" + :size="64" + title="" + fill-color="#999" /> <div v-else-if="!audioStream" class="icon icon-loading" /> <p v-if="audioStreamErrorMessage"> @@ -44,7 +50,10 @@ reference is always valid once mounted. --> <div v-show="audioPreviewAvailable" class="volume-indicator-wrapper"> - <div class="icon icon-audio" /> + <Microphone + :size="64" + title="" + fill-color="#999" /> <span ref="volumeIndicator" class="volume-indicator" :style="{ 'height': currentVolumeIndicatorHeight + 'px' }" /> @@ -83,6 +92,8 @@ <script> import attachMediaStream from 'attachmediastream' import hark from 'hark' +import Microphone from 'vue-material-design-icons/Microphone' +import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff' import { mediaDevicesManager } from '../utils/webrtc/index' import MediaDevicesSelector from './MediaDevicesSelector' @@ -92,6 +103,8 @@ export default { components: { MediaDevicesSelector, + Microphone, + MicrophoneOff, }, props: { diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 5070bccfd..de404b4c7 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -72,9 +72,13 @@ v-if="showModerationOptions && canFullModerate && isInCall"> <ActionSeparator /> <ActionButton - icon="icon-audio" :close-after-click="true" @click="forceMuteOthers"> + <MicrophoneOff + slot="icon" + :size="16" + decorative + title="" /> {{ t('spreed', 'Mute others') }} </ActionButton> </template> @@ -106,6 +110,7 @@ import CallButton from './CallButton' import BrowserStorage from '../../services/BrowserStorage' import ActionLink from '@nextcloud/vue/dist/Components/ActionLink' import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator' +import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff' import { CONVERSATION, PARTICIPANT } from '../../constants' import { generateUrl } from '@nextcloud/router' import { callParticipantCollection } from '../../utils/webrtc/index' @@ -120,6 +125,7 @@ export default { ActionLink, CallButton, ActionSeparator, + MicrophoneOff, }, props: { |