Replace mute icon with material design icon

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

5 files changed, 50 insertions, 18 deletions

diff --git a/css/icons.scss b/css/icons.scss
index cea8444f2..771550777 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -64,12 +64,6 @@
 		&.icon-grid-view {
 			background-image: url(icon-color-path('toggle-pictures', 'actions', 'fff', 1, true));
 		}
-		&.icon-audio {
-			background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
-		}
-		&.icon-audio-off {
-			background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
-		}
 		&.icon-video {
 			background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
 		}
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: {