replace NcAvatar with AvatarWrapper in call components

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

4 files changed, 48 insertions, 155 deletions

diff --git a/src/assets/avatar.scss b/src/assets/avatar.scss
deleted file mode 100644
index 54645ee12..000000000
--- a/src/assets/avatar.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
- *
- * @author Joas Schilling <coding@schilljs.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-@use 'sass:math';
-
-@import 'variables';
-
-
-@mixin avatar-mixin($size: 32px) {
-	.avatar-#{$size} {
-		position: sticky;
-		top: 0;
-		width: $size;
-		height: $size;
-		line-height: $size;
-		font-size: math.div($size, 2);
-		border-radius: 50%;
-
-		&.icon {
-			border-radius: 50%;
-			height: $size;
-			width: $size;
-			background-color: var(--color-background-darker);
-		}
-
-		&.bot {
-			padding-left: 5px;
-			line-height: $size;
-			border-radius: 50%;
-			background-color: var(--color-background-darker);
-		}
-
-		&.guest {
-			line-height: $size;
-			font-size: math.div($size, 2);
-			color: $color-guests-avatar;
-			background-color: $color-background-guests-avatar;
-			padding: 0;
-			display: block;
-			text-align: center;
-			margin-left: auto;
-			margin-right: auto;
-		}
-	}
-}
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index f88b4e8af..d0c058ccf 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -3,7 +3,7 @@
   -
   - @author Grigorii Shartsev <me@shgk.me>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -42,19 +42,13 @@
 			<VideoBackground v-if="isGrid || isStripe"
 				:display-name="displayName"
 				:user="userId" />
-			<NcAvatar v-if="userId"
+			<AvatarWrapper :id="userId"
+				:name="displayName"
+				:source="actorType"
 				:size="avatarSize"
-				:disable-menu="true"
-				:disable-tooltip="true"
-				:show-user-status="false"
-				:user="userId"
-				:display-name="displayName"
+				disable-menu
+				disable-tooltip
 				:class="avatarClass" />
-			<div v-if="!userId"
-				:class="guestAvatarClass"
-				class="avatar guest">
-				{{ firstLetterOfGuestName }}
-			</div>
 		</div>
 
 		<div v-if="mouseover && isSelectable" class="hover-shadow" />
@@ -76,9 +70,9 @@ import SHA1 from 'crypto-js/sha1.js'
 
 import { showError, showInfo, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from './VideoBackground.vue'
 
 import video from '../../../mixins/video.js'
@@ -90,7 +84,7 @@ export default {
 	name: 'LocalVideo',
 
 	components: {
-		NcAvatar,
+		AvatarWrapper,
 		NcButton,
 		VideoBackground,
 	},
@@ -187,13 +181,12 @@ export default {
 			return this.$store.getters.getUserId()
 		},
 
-		displayName() {
-			return this.$store.getters.getDisplayName()
+		actorType() {
+			return this.$store.getters.getActorType()
 		},
 
-		firstLetterOfGuestName() {
-			const customName = this.guestName !== t('spreed', 'Guest') ? this.guestName : '?'
-			return customName.charAt(0)
+		displayName() {
+			return this.$store.getters.getDisplayName()
 		},
 
 		sessionHash() {
@@ -223,12 +216,6 @@ export default {
 			}
 		},
 
-		guestAvatarClass() {
-			return Object.assign(this.avatarClass, {
-				['avatar-' + this.avatarSize + 'px']: true,
-			})
-		},
-
 		localStreamVideoError() {
 			return this.localMediaModel.attributes.localStream && this.localMediaModel.attributes.localStreamRequestVideoError
 		},
@@ -364,11 +351,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
-@import '../../../assets/avatar';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
-
 .not-connected {
 	video,
 	.avatar-container {
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index 234242807..e8bedf6fd 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -1,7 +1,7 @@
 <!--
   - @copyright Copyright (c) 2019, Daniel Calviño Sánchez (danxuliu@gmail.com)
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -50,24 +50,14 @@
 			<div v-if="showBackgroundAndAvatar"
 				:key="'backgroundAvatar'"
 				class="avatar-container">
-				<template v-if="participantUserId">
-					<VideoBackground :display-name="participantName"
-						:user="participantUserId" />
-					<NcAvatar :size="avatarSize"
-						:disable-menu="true"
-						:disable-tooltip="true"
-						:user="participantUserId"
-						:display-name="participantName"
-						:show-user-status="false"
-						:class="avatarClass" />
-				</template>
-				<template v-else>
-					<VideoBackground :display-name="participantName" />
-					<div :class="guestAvatarClass"
-						class="avatar guest">
-						{{ firstLetterOfGuestName }}
-					</div>
-				</template>
+				<VideoBackground :display-name="participantName" :user="participantUserId" />
+				<AvatarWrapper :id="participantUserId"
+					:name="participantName"
+					:source="participantActorType"
+					:size="avatarSize"
+					disable-menu
+					disable-tooltip
+					:class="avatarClass" />
 			</div>
 		</TransitionWrapper>
 		<TransitionWrapper name="fade">
@@ -101,8 +91,7 @@ import SHA1 from 'crypto-js/sha1.js'
 
 import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
 
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-
+import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import TransitionWrapper from '../../TransitionWrapper.vue'
 import Screen from './Screen.vue'
 import VideoBackground from './VideoBackground.vue'
@@ -119,7 +108,7 @@ export default {
 	name: 'VideoVue',
 
 	components: {
-		NcAvatar,
+		AvatarWrapper,
 		TransitionWrapper,
 		VideoBackground,
 		AccountCircle,
@@ -317,23 +306,12 @@ export default {
 			}
 		},
 
-		guestAvatarClass() {
-			return Object.assign(this.avatarClass, {
-				['avatar-' + this.avatarSize + 'px']: true,
-			})
-		},
-
 		connectionMessageClass() {
 			return {
 				'below-avatar': this.showBackgroundAndAvatar,
 			}
 		},
 
-		firstLetterOfGuestName() {
-			const customName = this.participantName && this.participantName !== t('spreed', 'Guest') ? this.participantName : '?'
-			return customName.charAt(0)
-		},
-
 		sessionHash() {
 			return Hex.stringify(SHA1(this.peerId))
 		},
@@ -361,6 +339,18 @@ export default {
 			}) || {}
 		},
 
+		participantActorType() {
+			if (this.participant?.actorType) {
+				return this.participant.actorType
+			} else if (this.peerData?.actorType) {
+				return this.peerData.actorType
+			} else {
+				return this.participantUserId
+					? ATTENDEE.ACTOR_TYPE.USERS
+					: ATTENDEE.ACTOR_TYPE.GUESTS
+			}
+		},
+
 		participantUserId() {
 			if (this.model.attributes.userId) {
 				return this.model.attributes.userId
@@ -588,11 +578,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/avatar';
-@import '../../../assets/variables';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
-
 .forced-white {
 	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 157b2ab72..d59ede4d2 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <marcoambrosini@icloud.com>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -40,17 +40,12 @@
 					class="preview__novideo">
 					<VideoBackground :display-name="displayName"
 						:user="userId" />
-					<NcAvatar v-if="userId"
+					<AvatarWrapper :id="userId"
+						:name="displayName"
+						:source="actorType"
 						:size="128"
-						:disable-menu="true"
-						:disable-tooltip="true"
-						:show-user-status="false"
-						:user="userId"
-						:display-name="displayName" />
-					<div v-if="!userId"
-						class="avatar avatar-128px guest">
-						{{ firstLetterOfGuestName }}
-					</div>
+						disable-menu
+						disable-tooltip />
 				</div>
 			</div>
 
@@ -190,13 +185,13 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
+import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
 import MediaDevicesSelector from '../MediaDevicesSelector.vue'
 import CallButton from '../TopBar/CallButton.vue'
@@ -219,6 +214,7 @@ export default {
 	},
 
 	components: {
+		AvatarWrapper,
 		Bell,
 		BellOff,
 		CallButton,
@@ -226,7 +222,6 @@ export default {
 		Creation,
 		NcActionButton,
 		NcActions,
-		NcAvatar,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcModal,
@@ -279,15 +274,14 @@ export default {
 			)
 		},
 
-		firstLetterOfGuestName() {
-			const customName = this.guestName !== t('spreed', 'Guest') ? this.guestName : '?'
-			return customName.charAt(0)
-		},
-
 		userId() {
 			return this.$store.getters.getUserId()
 		},
 
+		actorType() {
+			return this.$store.getters.getActorType()
+		},
+
 		token() {
 			return this.$store.getters.getToken()
 		},
@@ -557,11 +551,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/variables';
-@import '../../assets/avatar';
-@include avatar-mixin(64px);
-@include avatar-mixin(128px);
-
 .media-settings {
 	padding: calc(var(--default-grid-baseline)*4);
 	background-color: var(--color-main-background);
@@ -608,7 +597,7 @@ export default {
 	}
 
 	&__call-preferences {
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		display: flex;
 		justify-content: center;
 		align-items: center;