fix(icons): rename icon components in MediaSettings

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/MediaSettings/MediaDevicesSelector.vue

@@ -23,15 +23,15 @@
 			:title="t('spreed', 'Refresh devices list')"
 			:aria-lebel="t('spreed', 'Refresh devices list')"
 			@click="$emit('refresh')">
-			<RefreshIcon :size="20" />
+			<IconRefresh :size="20" />
 		</NcButton>
 	</div>
 </template>
 
 <script>
-import Microphone from 'vue-material-design-icons/Microphone.vue'
-import RefreshIcon from 'vue-material-design-icons/Refresh.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
+import IconMicrophone from 'vue-material-design-icons/Microphone.vue'
+import IconRefresh from 'vue-material-design-icons/Refresh.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -45,9 +45,9 @@ export default {
 	components: {
 		NcButton,
 		NcSelect,
-		Microphone,
-		RefreshIcon,
-		VideoIcon,
+		IconMicrophone,
+		IconRefresh,
+		IconVideo,
 	},
 
 	props: {
@@ -86,8 +86,8 @@ export default {
 
 		deviceIcon() {
 			switch (this.kind) {
-			case 'audioinput': return Microphone
-			case 'videoinput': return VideoIcon
+			case 'audioinput': return IconMicrophone
+			case 'videoinput': return IconVideo
 			default: return null
 			}
 		},

src/components/MediaSettings/MediaDevicesSpeakerTest.vue

@@ -5,7 +5,7 @@
 
 <template>
 	<div class="media-devices-checker">
-		<VolumeHighIcon class="media-devices-checker__icon" :size="16" />
+		<IconVolumeHigh class="media-devices-checker__icon" :size="16" />
 		<NcButton type="secondary" @click="playTestSound">
 			{{ buttonLabel }}
 		</NcButton>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
+import IconVolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -32,8 +32,8 @@ export default {
 	name: 'MediaDevicesSpeakerTest',
 
 	components: {
+		IconVolumeHigh,
 		NcButton,
-		VolumeHighIcon,
 	},
 
 	setup() {

src/components/MediaSettings/MediaSettings.vue

@@ -25,7 +25,7 @@
 					:aria-label="mirrorToggleLabel"
 					@click="isMirrored = !isMirrored">
 					<template #icon>
-						<ReflectHorizontal :size="20" />
+						<IconReflectHorizontal :size="20" />
 					</template>
 				</NcButton>
 				<div v-show="!showVideo"
@@ -65,10 +65,8 @@
 						:disabled="!videoPreviewAvailable"
 						@click="toggleVideo">
 						<template #icon>
-							<VideoIcon v-if="videoOn"
-								:size="20" />
-							<VideoOff v-else
-								:size="20" />
+							<IconVideo v-if="videoOn" :size="20" />
+							<IconVideoOff v-else :size="20" />
 						</template>
 					</NcButton>
 				</div>
@@ -144,15 +142,15 @@
 						@click="setSilentCall(true)">
 						{{ t('spreed', 'The conversation participants will not be notified about this call') }}
 						<template #icon>
-							<BellOff :size="16" />
+							<IconBellOff :size="16" />
 						</template>
 					</NcActionButton>
 					<NcActionButton v-else
 						:name="t('spreed', 'Normal call')"
 						close-after-click
 						@click="setSilentCall(false)">
 						<template #icon>
-							<Bell :size="16" />
+							<IconBell :size="16" />
 						</template>
 						{{ t('spreed', 'The conversation participants will be notified about this call') }}
 					</NcActionButton>
@@ -177,13 +175,13 @@
 <script>
 import { computed, markRaw, ref } from 'vue'
 
-import Bell from 'vue-material-design-icons/Bell.vue'
-import BellOff from 'vue-material-design-icons/BellOff.vue'
-import Cog from 'vue-material-design-icons/Cog.vue'
-import Creation from 'vue-material-design-icons/Creation.vue'
-import ReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
-import VideoIcon from 'vue-material-design-icons/Video.vue'
-import VideoOff from 'vue-material-design-icons/VideoOff.vue'
+import IconBell from 'vue-material-design-icons/Bell.vue'
+import IconBellOff from 'vue-material-design-icons/BellOff.vue'
+import IconCog from 'vue-material-design-icons/Cog.vue'
+import IconCreation from 'vue-material-design-icons/Creation.vue'
+import IconReflectHorizontal from 'vue-material-design-icons/ReflectHorizontal.vue'
+import IconVideo from 'vue-material-design-icons/Video.vue'
+import IconVideoOff from 'vue-material-design-icons/VideoOff.vue'
 
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -219,24 +217,25 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		Bell,
-		BellOff,
 		CallButton,
+		MediaDevicesSelector,
+		MediaDevicesSpeakerTest,
+		MediaSettingsTabs,
 		NcActionButton,
 		NcActions,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcModal,
 		NcNoteCard,
-		MediaDevicesSelector,
-		MediaDevicesSpeakerTest,
-		MediaSettingsTabs,
-		ReflectHorizontal,
 		VideoBackground,
-		VideoIcon,
-		VideoOff,
-		VolumeIndicator,
 		VideoBackgroundEditor,
+		VolumeIndicator,
+		// Icons
+		IconBell,
+		IconBellOff,
+		IconReflectHorizontal,
+		IconVideo,
+		IconVideoOff,
 	},
 
 	props: {
@@ -275,12 +274,12 @@ export default {
 		const devicesTab = {
 			id: 'devices',
 			label: t('spreed', 'Devices'),
-			icon: markRaw(Cog),
+			icon: markRaw(IconCog),
 		}
 		const backgroundsTab = {
 			id: 'backgrounds',
 			label: t('spreed', 'Backgrounds'),
-			icon: markRaw(Creation),
+			icon: markRaw(IconCreation),
 		}
 		const tabs = computed(() => isVirtualBackgroundAvailable.value ? [devicesTab, backgroundsTab] : [devicesTab])
 

src/components/MediaSettings/VideoBackgroundEditor.vue

@@ -9,7 +9,7 @@
 			class="background-editor__element"
 			:class="{'background-editor__element--selected': selectedBackground === 'none'}"
 			@click="handleSelectBackground('none')">
-			<Cancel :size="20" />
+			<IconCancel :size="20" />
 			{{
 				// TRANSLATORS: "None" refers to "No background effect applied" in videos, for context, other options are "blur" or "image"
 				t('spreed', 'None')
@@ -19,20 +19,20 @@
 			class="background-editor__element"
 			:class="{'background-editor__element--selected': selectedBackground === 'blur'}"
 			@click="handleSelectBackground('blur')">
-			<Blur :size="20" />
+			<IconBlur :size="20" />
 			{{ t('spreed', 'Blur') }}
 		</button>
 		<template v-if="predefinedBackgrounds?.length">
 			<template v-if="canUploadBackgrounds">
 				<button class="background-editor__element"
 					@click="clickImportInput">
-					<Upload :size="20" />
+					<IconUpload :size="20" />
 					{{ t('spreed', 'Upload') }}
 				</button>
 				<button class="background-editor__element"
 					:class="{'background-editor__element--selected': isCustomBackground }"
 					@click="showFilePicker = true">
-					<Folder :size="20" />
+					<IconFolder :size="20" />
 					{{ t('spreed', 'Files') }}
 				</button>
 			</template>
@@ -46,7 +46,7 @@
 					'background-image': 'url(' + path + ')'
 				}"
 				@click="handleSelectBackground(path)">
-				<CheckBold v-if="selectedBackground === path"
+				<IconCheckBold v-if="selectedBackground === path"
 					:size="40"
 					fill-color="#fff" />
 			</button>
@@ -72,11 +72,11 @@
 </template>
 
 <script>
-import Blur from 'vue-material-design-icons/Blur.vue'
-import Cancel from 'vue-material-design-icons/Cancel.vue'
-import CheckBold from 'vue-material-design-icons/CheckBold.vue'
-import Folder from 'vue-material-design-icons/Folder.vue'
-import Upload from 'vue-material-design-icons/Upload.vue'
+import IconBlur from 'vue-material-design-icons/Blur.vue'
+import IconCancel from 'vue-material-design-icons/Cancel.vue'
+import IconCheckBold from 'vue-material-design-icons/CheckBold.vue'
+import IconFolder from 'vue-material-design-icons/Folder.vue'
+import IconUpload from 'vue-material-design-icons/Upload.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
@@ -105,12 +105,12 @@ export default {
 	name: 'VideoBackgroundEditor',
 
 	components: {
-		Blur,
-		Cancel,
-		CheckBold,
 		FilePickerVue,
-		Folder,
-		Upload,
+		IconBlur,
+		IconCancel,
+		IconCheckBold,
+		IconFolder,
+		IconUpload,
 	},
 
 	props: {