increase avatar sizes in call components

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

3 files changed, 28 insertions, 11 deletions

diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index d0c058ccf..ec53600b8 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -75,6 +75,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import VideoBackground from './VideoBackground.vue'
 
+import { AVATAR } from '../../../constants.js'
 import video from '../../../mixins/video.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
@@ -104,7 +105,7 @@ export default {
 			type: Object,
 			required: true,
 		},
-		useConstrainedLayout: {
+		isGrid: {
 			type: Boolean,
 			default: false,
 		},
@@ -169,7 +170,7 @@ export default {
 		},
 
 		videoWrapperStyle() {
-			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig) {
+			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig || this.isGrid) {
 				return
 			}
 			return (this.containerAspectRatio > this.videoAspectRatio)
@@ -207,7 +208,13 @@ export default {
 		},
 
 		avatarSize() {
-			return this.useConstrainedLayout ? 64 : 128
+			if (this.isStripe || (!this.isBig && !this.isGrid)) {
+				return AVATAR.SIZE.LARGE
+			} else if (!this.containerAspectRatio) {
+				return AVATAR.SIZE.FULL
+			} else {
+				return Math.min(AVATAR.SIZE.FULL, this.$refs.videoContainer.clientHeight / 2, this.$refs.videoContainer.clientWidth / 2)
+			}
 		},
 
 		avatarClass() {
@@ -281,7 +288,7 @@ export default {
 		// Set initial state
 		this._setLocalStream(this.localMediaModel.attributes.localStream)
 
-		if (this.isBig) {
+		if (this.isBig || this.isGrid) {
 			this.resizeObserver = new ResizeObserver(this.updateContainerAspectRatio)
 			this.resizeObserver.observe(this.$refs.videoContainer)
 		}
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index e8bedf6fd..25d17fd96 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -97,7 +97,7 @@ import Screen from './Screen.vue'
 import VideoBackground from './VideoBackground.vue'
 import VideoBottomBar from './VideoBottomBar.vue'
 
-import { ATTENDEE } from '../../../constants.js'
+import { ATTENDEE, AVATAR } from '../../../constants.js'
 import video from '../../../mixins/video.js'
 import { EventBus } from '../../../services/EventBus.js'
 import { useGuestNameStore } from '../../../stores/guestName.js'
@@ -139,6 +139,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		isGrid: {
+			type: Boolean,
+			default: false,
+		},
 		// True if this video component is used in the promoted view's video stripe
 		isStripe: {
 			type: Boolean,
@@ -193,7 +197,7 @@ export default {
 	computed: {
 
 		videoWrapperStyle() {
-			if (!this.containerAspectRatio || !this.videoAspectRatio) {
+			if (!this.containerAspectRatio || !this.videoAspectRatio || !this.isBig || this.isGrid) {
 				return
 			}
 
@@ -297,7 +301,13 @@ export default {
 		},
 
 		avatarSize() {
-			return this.isBig ? 128 : 128
+			if (this.isStripe || (!this.isBig && !this.isGrid)) {
+				return AVATAR.SIZE.LARGE
+			} else if (!this.containerAspectRatio) {
+				return AVATAR.SIZE.FULL
+			} else {
+				return Math.min(AVATAR.SIZE.FULL, this.$refs.videoContainer.clientHeight / 2, this.$refs.videoContainer.clientWidth / 2)
+			}
 		},
 
 		avatarClass() {
@@ -513,7 +523,7 @@ export default {
 		// Set initial state
 		this._setStream(this.model.attributes.stream)
 
-		if (this.isBig) {
+		if (this.isBig || this.isGrid) {
 			this.resizeObserver = new ResizeObserver(this.updateContainerAspectRatio)
 			this.resizeObserver.observe(this.$refs.videoContainer)
 		}
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index d59ede4d2..480ad43e2 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -43,7 +43,7 @@
 					<AvatarWrapper :id="userId"
 						:name="displayName"
 						:source="actorType"
-						:size="128"
+						:size="AVATAR.SIZE.EXTRA_LARGE"
 						disable-menu
 						disable-tooltip />
 				</div>
@@ -199,7 +199,7 @@ import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
 import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
-import { CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
+import { AVATAR, CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
 import { devices } from '../../mixins/devices.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -239,7 +239,7 @@ export default {
 	setup() {
 		const isInCall = useIsInCall()
 		const guestNameStore = useGuestNameStore()
-		return { isInCall, guestNameStore }
+		return { AVATAR, isInCall, guestNameStore }
 	},
 
 	data() {