Replace icon-error with AlertCircle in calls

Replaced the icon in the media selection dialog.
Replaced the error icon for peer connection errors.

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

2 files changed, 24 insertions, 18 deletions

diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index b691154ce..4447c0cc4 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -95,9 +95,15 @@
 							decorative />
 					</button>
 					<button v-show="connectionStateFailedNoRestart"
-						class="iceFailedIndicator forced-white icon-error"
+						class="iceFailedIndicator"
 						:class="{ 'not-failed': !connectionStateFailedNoRestart }"
-						disabled="true" />
+						disabled="true">
+						<AlertCircle
+							:size="24"
+							title=""
+							fill-color="#ffffff"
+							decorative />
+					</button>
 				</div>
 			</transition>
 			<button v-if="hasSelectedVideo && isBig"
@@ -112,6 +118,7 @@
 <script>
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import AlertCircle from 'vue-material-design-icons/AlertCircle'
 import Microphone from 'vue-material-design-icons/Microphone'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import Monitor from 'vue-material-design-icons/Monitor'
@@ -124,6 +131,7 @@ export default {
 	name: 'VideoBottomBar',
 
 	components: {
+		AlertCircle,
 		Hand,
 		Microphone,
 		MicrophoneOff,
@@ -329,7 +337,8 @@ export default {
 .handIndicator,
 .muteIndicator,
 .hideRemoteVideo,
-.screensharingIndicator {
+.screensharingIndicator,
+.iceFailedIndicator {
 	position: relative;
 	display: inline-block;
 	background-color: transparent !important;
@@ -338,18 +347,7 @@ export default {
 }
 
 .iceFailedIndicator {
-	position: relative;
-	display: inline-block;
-	background-color: transparent !important;
-	border: none;
-	width: 32px;
-	height: 32px;
-	background-size: 22px;
 	opacity: .8 !important;
-
-	&.hidden {
-		display: none;
-	}
 }
 
 .screensharingIndicator.screen-off,
diff --git a/src/components/MediaDevicesPreview.vue b/src/components/MediaDevicesPreview.vue
index 32baa9c97..75cb93acc 100644
--- a/src/components/MediaDevicesPreview.vue
+++ b/src/components/MediaDevicesPreview.vue
@@ -28,8 +28,11 @@
 		<div class="preview preview-audio">
 			<div v-if="!audioPreviewAvailable"
 				class="preview-not-available">
-				<div v-if="audioStreamError"
-					class="icon icon-error" />
+				<AlertCircle
+					v-if="audioStreamError"
+					:size="64"
+					title=""
+					fill-color="#999" />
 				<MicrophoneOff
 					v-else-if="!audioInputId"
 					:size="64"
@@ -67,8 +70,11 @@
 		<div class="preview preview-video">
 			<div v-if="!videoPreviewAvailable"
 				class="preview-not-available">
-				<div v-if="videoStreamError"
-					class="icon icon-error" />
+				<AlertCircle
+					v-if="videoStreamError"
+					:size="64"
+					title=""
+					fill-color="#999" />
 				<VideoOff
 					v-else-if="!videoInputId"
 					:size="64"
@@ -98,6 +104,7 @@
 <script>
 import attachMediaStream from 'attachmediastream'
 import hark from 'hark'
+import AlertCircle from 'vue-material-design-icons/AlertCircle'
 import Microphone from 'vue-material-design-icons/Microphone'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import Video from 'vue-material-design-icons/Video'
@@ -110,6 +117,7 @@ export default {
 	name: 'MediaDevicesPreview',
 
 	components: {
+		AlertCircle,
 		MediaDevicesSelector,
 		Microphone,
 		MicrophoneOff,