Fix callview in sidebars

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

6 files changed, 33 insertions, 7 deletions

diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index 6f6b2c570..790455beb 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -25,6 +25,7 @@
 		<CallView
 			v-show="isInCall"
 			:token="token"
+			:is-sidebar="true"
 			:use-constrained-layout="true" />
 		<PreventUnload :when="isInCall" />
 	</div>
diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
index 9dda5cfcd..fd7e5ebba 100644
--- a/src/PublicShareAuthSidebar.vue
+++ b/src/PublicShareAuthSidebar.vue
@@ -28,7 +28,7 @@
 				<h2>{{ t('spreed', 'This conversation has ended') }}</h2>
 			</div>
 			<template v-else>
-				<CallView :token="token" />
+				<CallView :token="token" :is-sidebar="true" />
 				<ChatView :token="token" />
 			</template>
 		</aside>
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 381e23827..36fa6d124 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -32,7 +32,10 @@
 				</button>
 			</div>
 			<template v-else>
-				<CallView v-if="isInCall" :token="token" :use-constrained-layout="true" />
+				<CallView v-if="isInCall"
+					:token="token"
+					:is-sidebar="true"
+					:use-constrained-layout="true" />
 				<PreventUnload :when="isInCall" />
 				<CallButton class="call-button" />
 				<ChatView :token="token" />
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 709af3ef1..842483944 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -36,6 +36,7 @@
 						:is-grid="true"
 						:fit-video="true"
 						:is-big="true"
+						:is-sidebar="isSidebar"
 						@switchScreenToId="_switchScreenToId" />
 				</template>
 			</div>
@@ -73,14 +74,16 @@
 				v-if="isOneToOneView"
 				ref="localVideo"
 				class="local-video"
+				:class="{ 'local-video--sidebar': isSidebar }"
 				:fit-video="true"
 				:is-stripe="true"
 				:local-media-model="localMediaModel"
 				:video-container-aspect-ratio="videoContainerAspectRatio"
 				:local-call-participant-model="localCallParticipantModel"
 				:use-constrained-layout="false"
+				:is-sidebar="isSidebar"
 				@switchScreenToId="1" />
-			<div id="screens">
+			<div v-if="!isSidebar" id="screens">
 				<Screen v-if="localMediaModel.attributes.localScreen"
 					:local-media-model="localMediaModel"
 					:shared-data="localSharedData" />
@@ -117,6 +120,11 @@ export default {
 			type: String,
 			required: true,
 		},
+		// Determines wether this component is used in the sidebar
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -186,7 +194,7 @@ export default {
 			return this.isOneToOne && !this.isGrid
 		},
 		showGrid() {
-			return !this.isOneToOneView
+			return !this.isOneToOneView && !this.isSidebar
 		},
 	},
 	watch: {
@@ -420,6 +428,10 @@ export default {
 	bottom: 0;
 	width: 300px;
 	height: 250px;
+	&--sidebar {
+		width: 150px;
+		height: 100px;
+	}
 }
 
 #videos.hidden {
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index e15ad3b10..1beb21d90 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -27,7 +27,7 @@
 			ref="video"
 			:class="videoClass"
 			class="video" />
-		<div v-if="!localMediaModel.attributes.videoEnabled" class="avatar-container">
+		<div v-if="!localMediaModel.attributes.videoEnabled && !isSidebar" class="avatar-container">
 			<VideoBackground v-if="isGrid || isStripe" :display-name="displayName" :user="userId" />
 			<Avatar v-if="userId"
 				:size="avatarSize"
@@ -46,7 +46,7 @@
 				ref="localMediaControls"
 				:model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
-				:screen-sharing-button-hidden="useConstrainedLayout"
+				:screen-sharing-button-hidden="isSidebar"
 				@switchScreenToId="$emit('switchScreenToId', $event)" />
 		</transition>
 	</div>
@@ -91,6 +91,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index 23590252c..4d0f3bad2 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -57,7 +57,8 @@
 			</div>
 		</transition>
 
-		<div class="bottom-bar"
+		<div v-if="!isSidebar"
+			class="bottom-bar"
 			:class="{'bottom-bar--video-on' : hasVideoStream, 'bottom-bar--big': isBig }">
 			<transition name="fade">
 				<div v-show="!model.attributes.videoAvailable || !sharedData.videoEnabled || showVideoOverlay || isSelected || isSpeaking"
@@ -173,6 +174,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		// True when this component is used as main video in the sidebar
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {