fix: improve indication of mic/camera/raised hand in call

- revert some outline icons

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/CallView/BottomBar.vue

@@ -11,6 +11,7 @@ import { useStore } from 'vuex'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import IconFullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication
 import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
 import IconViewGalleryOutline from 'vue-material-design-icons/ViewGalleryOutline.vue'
 import IconViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
@@ -204,7 +205,8 @@ useHotKey('r', toggleHandRaised)
 				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
 				<template #icon>
-					<IconHandBackLeftOutline :size="16" />
+					<IconHandBackLeft v-if="isHandRaised" :size="16" />
+					<IconHandBackLeftOutline v-else :size="16" />
 				</template>
 			</NcButton>
 		</div>

src/components/CallView/shared/LocalVideoControlButton.vue

@@ -15,7 +15,7 @@
 			:disabled="!isVideoAllowed"
 			@click.stop="toggleVideo">
 			<template #icon>
-				<IconVideoOutline v-if="showVideoOn" :size="20" />
+				<IconVideo v-if="showVideoOn" :size="20" />
 				<IconVideoOffOutline v-else :size="20" />
 			</template>
 		</NcButton>
@@ -50,8 +50,8 @@ import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import IconChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import { useDevices } from '../../../composables/useDevices.js'
 import { PARTICIPANT } from '../../../constants.ts'
 import BrowserStorage from '../../../services/BrowserStorage.js'
@@ -65,7 +65,7 @@ export default {
 		NcActionCaption,
 		NcButton,
 		IconChevronUp,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 	},
 

src/components/CallView/shared/VideoBottomBar.vue

@@ -10,7 +10,7 @@
 		@mouseleave.stop="mouseover = false">
 		<TransitionWrapper name="fade">
 			<div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator">
-				<IconHandBackLeftOutline :size="18" fill-color="#ffffff" />
+				<IconHandBackLeft :size="18" fill-color="#ffffff" />
 			</div>
 		</TransitionWrapper>
 
@@ -39,7 +39,7 @@
 					:disabled="isAudioButtonDisabled"
 					@click.stop="forceMute">
 					<template #icon>
-						<IconMicrophoneOutline v-if="model.attributes.audioAvailable" :size="20" />
+						<IconMicrophone v-if="model.attributes.audioAvailable" :size="20" />
 						<NcIconSvgWrapper v-else :svg="IconMicrophoneOffOutline" :size="20" />
 					</template>
 				</NcButton>
@@ -51,7 +51,7 @@
 					variant="tertiary-no-background"
 					@click.stop="toggleVideo">
 					<template #icon>
-						<IconVideoOutline v-if="isRemoteVideoEnabled" :size="20" />
+						<IconVideo v-if="isRemoteVideoEnabled" :size="20" />
 						<IconVideoOffOutline v-else :size="20" />
 					</template>
 				</NcButton>
@@ -90,11 +90,11 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
-import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
-import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled for better indication
 import IconMonitor from 'vue-material-design-icons/Monitor.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 import IconMicrophoneOffOutline from '../../../../img/material-icons/microphone-off-outline.svg?raw'
 import { PARTICIPANT } from '../../../constants.ts'
@@ -107,10 +107,10 @@ export default {
 
 	components: {
 		IconAlertCircleOutline,
-		IconHandBackLeftOutline,
-		IconMicrophoneOutline,
+		IconHandBackLeft,
+		IconMicrophone,
 		IconMonitor,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 		NcButton,
 		NcIconSvgWrapper,

src/components/MediaSettings/MediaSettings.vue

@@ -112,7 +112,7 @@
 							:disabled="!videoPreviewAvailable"
 							@click="toggleVideo">
 							<template #icon>
-								<IconVideoOutline v-if="videoOn" :size="20" />
+								<IconVideo v-if="videoOn" :size="20" />
 								<IconVideoOffOutline v-else :size="20" />
 							</template>
 						</NcButton>
@@ -224,8 +224,8 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue' // Filled for better indication
 import IconVideoOffOutline from 'vue-material-design-icons/VideoOffOutline.vue'
-import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
 import SetGuestUsername from '../SetGuestUsername.vue'
@@ -275,7 +275,7 @@ export default {
 		SetGuestUsername,
 		// Icons
 		IconReflectHorizontal,
-		IconVideoOutline,
+		IconVideo,
 		IconVideoOffOutline,
 	},
 

src/components/RightSidebar/Participants/Participant.vue

@@ -328,7 +328,7 @@ import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import IconCrownOutline from 'vue-material-design-icons/CrownOutline.vue'
 import IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
 import IconEmailOutline from 'vue-material-design-icons/EmailOutline.vue'
-import IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'
+import IconHandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' // Filled for better indication
 import IconLockOpenVariantOutline from 'vue-material-design-icons/LockOpenVariantOutline.vue'
 import IconLockOutline from 'vue-material-design-icons/LockOutline.vue'
 import IconLockReset from 'vue-material-design-icons/LockReset.vue'
@@ -387,7 +387,7 @@ export default {
 		IconCrownOutline,
 		IconDeleteOutline,
 		IconEmailOutline,
-		IconHandBackLeftOutline,
+		IconHandBackLeft,
 		IconLockOutline,
 		IconLockOpenVariantOutline,
 		IconLockReset,
@@ -577,7 +577,7 @@ export default {
 			if (this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 				return null
 			} else if (this.isHandRaised) {
-				return { icon: IconHandBackLeftOutline, size: 18, title: t('spreed', 'Raised their hand') }
+				return { icon: IconHandBackLeft, size: 18, title: t('spreed', 'Raised their hand') }
 			} if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_VIDEO) {
 				return { icon: IconVideoOutline, size: 20, title: t('spreed', 'Joined with video') }
 			} else if (this.participant.inCall & PARTICIPANT.CALL_FLAG.WITH_PHONE) {

src/components/UIShared/VolumeIndicator.vue

@@ -9,7 +9,7 @@
 		:class="{ overload: hasOverload }">
 		<span class="volume-indicator volume-indicator-primary"
 			:style="{ height: iconPrimaryHeight + 'px' }">
-			<IconMicrophoneOutline v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
+			<IconMicrophone v-if="audioEnabled" :size="size" :fill-color="primaryColor" />
 			<NcIconSvgWrapper v-else
 				inline
 				:svg="IconMicrophoneOffOutline"
@@ -21,7 +21,7 @@
 			class="volume-indicator volume-indicator-overlay"
 			:class="{ 'volume-indicator-overlay-mute': !audioEnabled }"
 			:style="{ height: iconOverlayHeight + 'px' }">
-			<IconMicrophoneOutline v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
+			<IconMicrophone v-if="audioEnabled" :size="size" :fill-color="overlayColor" />
 			<NcIconSvgWrapper v-else
 				inline
 				:svg="IconMicrophoneOffOutline"
@@ -33,14 +33,14 @@
 
 <script>
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import IconMicrophoneOutline from 'vue-material-design-icons/MicrophoneOutline.vue'
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue' // Filled for better indication
 import IconMicrophoneOffOutline from '../../../img/material-icons/microphone-off-outline.svg?raw'
 
 export default {
 	name: 'VolumeIndicator',
 
 	components: {
-		IconMicrophoneOutline,
+		IconMicrophone,
 		NcIconSvgWrapper,
 	},