diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 5b98e8d9616..13ea3e380d1 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -101,3 +101,28 @@ $chat-line-height: 1.6em;
 		transition: all 150ms ease-in-out;
 	}
 }
+
+.slide-down {
+	&-enter {
+		transform: translateY(50%);
+		opacity: 0;
+	}
+	&-enter-to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	&-leave {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	&-leave-to {
+		transform: translateY(50%);
+		opacity: 0;
+	}
+	&-enter-active,
+	&-leave-active {
+		transition: all 150ms ease-in-out;
+		/* force top container to resize during animation */
+		position: absolute !important;
+	}
+}
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index e656d794789..da7c8f7c8b6 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -23,8 +23,18 @@
 	<div id="call-container">
 		<EmptyCallView v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid" />
 		<div id="videos">
+			<LocalMediaControls
+				v-if="!isGrid"
+				class="local-media-controls"
+				:model="localMediaModel"
+				:local-call-participant-model="localCallParticipantModel"
+				:screen-sharing-button-hidden="isSidebar"
+				@switch-screen-to-id="$emit('switchScreenToId', $event)" />
 			<!-- Promoted "autopilot" mode -->
-			<div v-if="showPromoted" ref="videoContainer" class="video__promoted autopilot">
+			<div v-if="showPromoted"
+				ref="videoContainer"
+				class="video__promoted autopilot"
+				:class="{'full-page': isOneToOne}">
 				<template v-for="callParticipantModel in reversedCallParticipantModels">
 					<Video
 						v-if="sharedDatas[callParticipantModel.attributes.peerId].promoted"
@@ -41,7 +51,10 @@
 				</template>
 			</div>
 			<!-- Selected override mode -->
-			<div v-if="showSelected" ref="videoContainer" class="video__promoted override">
+			<div v-if="showSelected"
+				ref="videoContainer"
+				class="video__promoted autopilot"
+				:class="{'full-page': isOneToOne}">
 				<template v-for="callParticipantModel in reversedCallParticipantModels">
 					<Video
 						v-if="callParticipantModel.attributes.peerId === selectedVideoPeerId"
@@ -57,7 +70,10 @@
 				</template>
 			</div>
 			<!-- Local Video Override mode -->
-			<div v-if="showLocalVideo" ref="videoContainer" class="video__promoted override">
+			<div v-if="showLocalVideo"
+				ref="videoContainer"
+				class="video__promoted autopilot"
+				:class="{'full-page': isOneToOne}">
 				<LocalVideo
 					ref="localVideo"
 					:fit-video="true"
@@ -90,7 +106,7 @@
 			</div>
 			<!-- Stripe or fullscreen grid depending on `isGrid` -->
 			<Grid
-				v-if="showGrid"
+				v-if="!isSidebar"
 				v-bind="$attrs"
 				:is-stripe="!isGrid"
 				:token="token"
@@ -103,12 +119,13 @@
 				:shared-datas="sharedDatas"
 				@select-video="handleSelectVideo"
 				@click-local-video="handleClickLocalVideo" />
-			<!-- Local video if the conversation is 1to1 or if sidebar -->
+			<!-- Local video if sidebar -->
 			<LocalVideo
-				v-if="isOneToOneView && !showLocalVideo"
+				v-if="isSidebar && !showLocalVideo"
 				ref="localVideo"
 				class="local-video"
 				:class="{ 'local-video--sidebar': isSidebar }"
+				:show-controls="false"
 				:fit-video="true"
 				:is-stripe="true"
 				:local-media-model="localMediaModel"
@@ -124,6 +141,7 @@
 <script>
 import Grid from './Grid/Grid'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index'
+import LocalMediaControls from './shared/LocalMediaControls'
 import EmptyCallView from './shared/EmptyCallView'
 import Video from './shared/Video'
 import LocalVideo from './shared/LocalVideo'
@@ -137,6 +155,7 @@ export default {
 		EmptyCallView,
 		Video,
 		LocalVideo,
+		LocalMediaControls,
 		Screen,
 	},
 
@@ -206,20 +225,11 @@ export default {
 			return this.$store.getters.isGrid
 		},
 
-		showGrid() {
-			return !this.isSidebar
-				&& (
-					!this.isOneToOneView
-					|| this.showLocalScreen
-					|| (this.showRemoteScreen && this.hasRemoteVideo)
-				)
-		},
-
 		gridTargetAspectRatio() {
-			if (this.isStripe) {
-				return 1
-			} else {
+			if (this.isGrid) {
 				return 1.5
+			} else {
+				return 1
 			}
 		},
 
@@ -234,11 +244,6 @@ export default {
 		isOneToOne() {
 			return this.callParticipantModels.length === 1
 		},
-
-		isOneToOneView() {
-			return (this.isOneToOne && !this.isGrid) || this.isSidebar
-		},
-
 		hasLocalVideo() {
 			return this.localMediaModel.attributes.videoEnabled
 		},
@@ -545,6 +550,7 @@ export default {
 	width: 100%;
 	height: 100%;
 	top: 0;
+	overflow: hidden;
 	display: -webkit-box;
 	display: -moz-box;
 	display: -ms-flexbox;
@@ -564,6 +570,11 @@ export default {
 	display: block;
 }
 
+.video__promoted.full-page {
+	/* make the promoted video cover the whole call view */
+	position: static;
+}
+
 .local-video {
 	position: absolute;
 	right: 0;
@@ -703,4 +714,14 @@ export default {
 		opacity: 1;
 	}
 }
+
+.local-media-controls {
+	position: absolute;
+	width: 300px; /* same as .video-container-stripe */
+	text-align: center;
+	right: 0;
+	bottom: 4px;
+	z-index: 10;
+}
+
 </style>
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 03c10a0cca5..d0bc2b7f711 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -20,104 +20,123 @@
 -->
 
 <template>
-	<div class="wrapper" :style="wrapperStyle">
-		<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
-			<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
-				class="grid-navigation grid-navigation__previous"
-				@click="handleClickPrevious">
-				<ChevronLeft decorative
-					:size="24" />
-			</button>
-			<div
-				ref="grid"
-				class="grid"
-				:style="gridStyle"
-				@mousemove="handleMovement"
-				@keydown="handleMovement">
-				<template v-if="!devMode">
-					<EmptyCallView v-if="videos.length === 0 &&!isStripe" class="video" :is-grid="true" />
-					<template v-for="callParticipantModel in displayedVideos">
-						<Video
-							:key="callParticipantModel.attributes.peerId"
-							:class="{'video': !isStripe}"
-							:show-video-overlay="showVideoOverlay"
-							:token="token"
-							:model="callParticipantModel"
-							:is-grid="true"
-							:show-talking-highlight="!isStripe"
-							:is-stripe="isStripe"
-							:is-promoted="sharedDatas[callParticipantModel.attributes.peerId].promoted"
-							:is-selected="isSelected(callParticipantModel)"
-							:fit-video="false"
-							:video-container-aspect-ratio="videoContainerAspectRatio"
-							:video-background-blur="videoBackgroundBlur"
-							:shared-data="sharedDatas[callParticipantModel.attributes.peerId]"
-							@click-video="handleClickVideo($event, callParticipantModel.attributes.peerId)" />
-					</template>
-					<LocalVideo
-						v-if="!isStripe"
-						ref="localVideo"
-						class="video"
-						:is-grid="true"
-						:fit-video="isStripe"
-						:local-media-model="localMediaModel"
-						:video-container-aspect-ratio="videoContainerAspectRatio"
-						:local-call-participant-model="localCallParticipantModel"
-						@switchScreenToId="1"
-						@click-video="handleClickLocalVideo" />
-				</template>
-				<!-- Grid developer mode -->
-				<template v-else>
+	<div class="grid-main-wrapper" :class="{'is-grid': !isStripe, 'transparent': isLessThanTwo}">
+		<button v-if="isStripe"
+			class="stripe--collapse"
+			@click="stripeOpen = !stripeOpen">
+			<ChevronDown
+				v-if="stripeOpen"
+				fill-color="#ffffff"
+				decorative
+				:size="24" />
+			<ChevronUp
+				v-else
+				fill-color="#ffffff"
+				decorative
+				:size="24" />
+		</button>
+		<transition :name="isStripe ? 'slide-down' : ''">
+			<div v-if="!isStripe || stripeOpen" class="wrapper" :style="wrapperStyle">
+				<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
+					<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
+						class="grid-navigation grid-navigation__previous"
+						@click="handleClickPrevious">
+						<ChevronLeft decorative
+							:size="24" />
+					</button>
 					<div
-						v-for="video in displayedVideos"
-						:key="video"
-						class="dev-mode-video video"
-						v-text="video" />
-					<h1 class="dev-mode__title">
-						Dev mode on ;-)
-					</h1>
-				</template>
+						ref="grid"
+						class="grid"
+						:style="gridStyle"
+						@mousemove="handleMovement"
+						@keydown="handleMovement">
+						<template v-if="!devMode && (!isLessThanTwo || !isStripe)">
+							<EmptyCallView v-if="videos.length === 0 &&!isStripe" class="video" :is-grid="true" />
+							<template v-for="callParticipantModel in displayedVideos">
+								<Video
+									:key="callParticipantModel.attributes.peerId"
+									:class="{'video': !isStripe}"
+									:show-video-overlay="showVideoOverlay"
+									:token="token"
+									:model="callParticipantModel"
+									:is-grid="true"
+									:show-talking-highlight="!isStripe"
+									:is-stripe="isStripe"
+									:is-promoted="sharedDatas[callParticipantModel.attributes.peerId].promoted"
+									:is-selected="isSelected(callParticipantModel)"
+									:fit-video="false"
+									:video-container-aspect-ratio="videoContainerAspectRatio"
+									:video-background-blur="videoBackgroundBlur"
+									:shared-data="sharedDatas[callParticipantModel.attributes.peerId]"
+									@click-video="handleClickVideo($event, callParticipantModel.attributes.peerId)" />
+							</template>
+							<LocalVideo
+								v-if="!isStripe"
+								ref="localVideo"
+								class="video"
+								:is-grid="true"
+								:fit-video="isStripe"
+								:local-media-model="localMediaModel"
+								:video-container-aspect-ratio="videoContainerAspectRatio"
+								:local-call-participant-model="localCallParticipantModel"
+								@switchScreenToId="1"
+								@click-video="handleClickLocalVideo" />
+						</template>
+						<!-- Grid developer mode -->
+						<template v-if="devMode">
+							<div
+								v-for="video in displayedVideos"
+								:key="video"
+								class="dev-mode-video video"
+								v-text="video" />
+							<h1 class="dev-mode__title">
+								Dev mode on ;-)
+							</h1>
+						</template>
+					</div>
+					<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
+						class="grid-navigation grid-navigation__next"
+						@click="handleClickNext">
+						<ChevronRight decorative
+							:size="24" />
+					</button>
+				</div>
+				<LocalVideo
+					v-if="isStripe"
+					ref="localVideo"
+					class="video"
+					:fit-video="true"
+					:is-stripe="true"
+					:show-controls="false"
+					:local-media-model="localMediaModel"
+					:video-container-aspect-ratio="videoContainerAspectRatio"
+					:local-call-participant-model="localCallParticipantModel"
+					@switchScreenToId="1"
+					@click-video="handleClickLocalVideo" />
+				<!-- page indicator (disabled) -->
+				<div
+					v-if="numberOfPages !== 0 && hasPagination && false"
+					class="pages-indicator">
+					<div v-for="(page, index) in numberOfPages"
+						:key="index"
+						class="pages-indicator__dot"
+						:class="{'pages-indicator__dot--active': index === currentPage }" />
+				</div>
+				<div v-if="devMode" class="dev-mode__data">
+					<p>GRID INFO</p>
+					<p>Videos (total): {{ videosCount }}</p>
+					<p>Displayed videos n: {{ displayedVideos.length }}</p>
+					<p>Max per page: ~{{ videosCap }}</p>
+					<p>Grid width: {{ gridWidth }}</p>
+					<p>Grid height: {{ gridHeight }}</p>
+					<p>Min video width: {{ minWidth }} </p>
+					<p>Min video Height: {{ minHeight }} </p>
+					<p>Grid aspect ratio: {{ gridAspectRatio }}</p>
+					<p>Number of pages: {{ numberOfPages }}</p>
+					<p>Current page: {{ currentPage }}</p>
+				</div>
 			</div>
-			<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
-				class="grid-navigation grid-navigation__next"
-				@click="handleClickNext">
-				<ChevronRight decorative
-					:size="24" />
-			</button>
-		</div>
-		<LocalVideo
-			v-if="isStripe"
-			ref="localVideo"
-			class="video"
-			:fit-video="true"
-			:is-stripe="true"
-			:local-media-model="localMediaModel"
-			:video-container-aspect-ratio="videoContainerAspectRatio"
-			:local-call-participant-model="localCallParticipantModel"
-			@switchScreenToId="1"
-			@click-video="handleClickLocalVideo" />
-		<!-- page indicator (disabled) -->
-		<div
-			v-if="numberOfPages !== 0 && hasPagination && false"
-			class="pages-indicator">
-			<div v-for="(page, index) in numberOfPages"
-				:key="index"
-				class="pages-indicator__dot"
-				:class="{'pages-indicator__dot--active': index === currentPage }" />
-		</div>
-		<div v-if="devMode" class="dev-mode__data">
-			<p>GRID INFO</p>
-			<p>Videos (total): {{ videosCount }}</p>
-			<p>Displayed videos n: {{ displayedVideos.length }}</p>
-			<p>Max per page: ~{{ videosCap }}</p>
-			<p>Grid width: {{ gridWidth }}</p>
-			<p>Grid height: {{ gridHeight }}</p>
-			<p>Min video width: {{ minWidth }} </p>
-			<p>Min video Height: {{ minHeight }} </p>
-			<p>Grid aspect ratio: {{ gridAspectRatio }}</p>
-			<p>Number of pages: {{ numberOfPages }}</p>
-			<p>Current page: {{ currentPage }}</p>
-		</div>
+		</transition>
 	</div>
 </template>
 
@@ -130,6 +149,8 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import EmptyCallView from '../shared/EmptyCallView'
 import ChevronRight from 'vue-material-design-icons/ChevronRight'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
+import ChevronUp from 'vue-material-design-icons/ChevronUp'
+import ChevronDown from 'vue-material-design-icons/ChevronDown'
 
 export default {
 	name: 'Grid',
@@ -140,6 +161,8 @@ export default {
 		EmptyCallView,
 		ChevronRight,
 		ChevronLeft,
+		ChevronUp,
+		ChevronDown,
 	},
 
 	props: {
@@ -197,6 +220,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isSidebar: {
+			type: Boolean,
+			default: false,
+		},
 		callParticipantModels: {
 			type: Array,
 			required: true,
@@ -242,6 +269,8 @@ export default {
 			showVideoOverlay: true,
 			// Timer for the videos bottom bar
 			showVideoOverlayTimer: null,
+			// Whether the stripe is open (true) or collapsed (false)
+			stripeOpen: true,
 		}
 	},
 
@@ -276,6 +305,11 @@ export default {
 		videoHeight() {
 			return this.gridHeight / this.rows
 		},
+
+		isLessThanTwo() {
+			return this.callParticipantModels.length <= 1
+		},
+
 		// The aspect ratio of the grid (in terms of px)
 		gridAspectRatio() {
 			return (this.gridWidth / this.gridHeight).toPrecision([2])
@@ -404,16 +438,10 @@ export default {
 		 },
 		 */
 		isStripe() {
-			console.debug('isStripe: ', this.isStripe)
-			console.debug('previousGridWidth: ', this.gridWidth, 'previousGridHeight: ', this.gridHeight)
-			console.debug('newGridWidth: ', this.gridWidth, 'newGridHeight: ', this.gridHeight)
-			this.$nextTick(this.makeGrid)
-			if (this.hasPagination) {
-				this.setNumberOfPages()
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
+			this.rebuildGrid()
+		},
+		stripeOpen() {
+			this.rebuildGrid()
 		},
 		sidebarStatus() {
 			// Handle the resize after the sidebar animation has completed
@@ -439,6 +467,21 @@ export default {
 	},
 
 	methods: {
+		rebuildGrid() {
+			console.debug('isStripe: ', this.isStripe)
+			console.debug('stripeOpen: ', this.stripeOpen)
+			console.debug('previousGridWidth: ', this.gridWidth, 'previousGridHeight: ', this.gridHeight)
+			console.debug('newGridWidth: ', this.gridWidth, 'newGridHeight: ', this.gridHeight)
+			if (!this.isStripe || this.stripeOpen) {
+				this.$nextTick(this.makeGrid)
+				if (this.hasPagination) {
+					this.setNumberOfPages()
+					// Set the current page to 0
+					// TODO: add support for keeping position in the videos array when resizing or collapsing
+					this.currentPage = 0
+				}
+			}
+		},
 
 		// whenever the document is resized, re-set the 'clientWidth' variable
 		handleResize(event) {
@@ -655,6 +698,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../assets/variables.scss';
+
+.grid-main-wrapper {
+	position: relative;
+	width: 100%;
+	background-color: var(--color-text-maxcontrast);
+}
+
+.grid-main-wrapper.transparent {
+	background: transparent;
+}
+
+.grid-main-wrapper.is-grid {
+	height: 100%;
+}
 
 .wrapper {
 	width: 100%;
@@ -774,4 +832,27 @@ export default {
 	}
 }
 
+/** FIXME: replace with nextcloud-vue button */
+button.stripe--collapse {
+	position: absolute;
+	top: -50px;
+	right: 0;
+	width: 44px;
+	height: 44px;
+	z-index: 10;
+	border: 0;
+	background: none;
+	opacity: .7;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+
+	&:active {
+		/* needed again to override default active button style */
+		background: none;
+	}
+}
+
 </style>
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index b0bf4fdfd86..a014ece5dbc 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -21,7 +21,7 @@
 <template>
 	<div v-shortkey.push="['space']"
 		@shortkey="toggleAudio">
-		<div v-if="!isBig" class="nameIndicator">
+		<div class="buttons-bar">
 			<div id="muteWrapper">
 				<button
 					id="mute"
@@ -83,14 +83,6 @@
 				</ul>
 			</div>
 		</div>
-		<div class="bottom-bar">
-			<button
-				v-if="isBig"
-				class="bottom-bar__button"
-				@click="handleStopFollowing">
-				{{ stopFollowingLabel }}
-			</button>
-		</div>
 		<div class="network-connection-state">
 			<Popover
 				v-if="qualityWarningTooltip"
@@ -136,6 +128,8 @@ import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner'
 import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert'
+import { callAnalyzer } from '../../../utils/webrtc/index'
+import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer'
 
 export default {
 
@@ -163,18 +157,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		qualityWarningAriaLabel: {
-			type: String,
-			default: '',
-		},
-		qualityWarningTooltip: {
-			type: Object,
-			default: null,
-		},
-		isBig: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	data() {
@@ -186,6 +168,8 @@ export default {
 			boundaryElement: document.querySelector('.main-view'),
 			isQualityWarningTooltipDismissed: false,
 			mouseover: false,
+			callAnalyzer: callAnalyzer,
+			qualityWarningInGracePeriodTimeout: null,
 		}
 	},
 
@@ -208,7 +192,7 @@ export default {
 				}
 			}
 
-			if (this.speakingWhileMutedNotification) {
+			if (this.speakingWhileMutedNotification && !this.screenSharingMenuOpen) {
 				return {
 					content: this.speakingWhileMutedNotification,
 					show: true,
@@ -319,12 +303,112 @@ export default {
 			return this.qualityWarningTooltip && (!this.isQualityWarningTooltipDismissed || this.mouseover)
 		},
 
-		stopFollowingLabel() {
-			return t('spreed', 'Back')
+		showQualityWarning() {
+			return this.senderConnectionQualityIsBad || this.qualityWarningInGracePeriodTimeout
+		},
+
+		senderConnectionQualityIsBad() {
+			return this.senderConnectionQualityAudioIsBad
+				|| this.senderConnectionQualityVideoIsBad
+				|| this.senderConnectionQualityScreenIsBad
+		},
+
+		senderConnectionQualityAudioIsBad() {
+			return callAnalyzer
+				&& (callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.VERY_BAD
+				 || callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+		},
+
+		senderConnectionQualityVideoIsBad() {
+			return callAnalyzer
+				&& (callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.VERY_BAD
+				 || callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+		},
+
+		senderConnectionQualityScreenIsBad() {
+			return callAnalyzer
+				&& (callAnalyzer.attributes.senderConnectionQualityScreen === CONNECTION_QUALITY.VERY_BAD
+				 || callAnalyzer.attributes.senderConnectionQualityScreen === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
+		},
+
+		qualityWarningAriaLabel() {
+			let label = ''
+			if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
+				label = t('spreed', 'Bad sent video and screen quality.')
+			} else if (!this.model.attributes.audioEnabled && this.model.attributes.localScreen) {
+				label = t('spreed', 'Bad sent screen quality.')
+			} else if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled) {
+				label = t('spreed', 'Bad sent video quality.')
+			} else if (this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
+				label = t('spreed', 'Bad sent audio, video and screen quality.')
+			} else if (this.model.attributes.localScreen) {
+				label = t('spreed', 'Bad sent audio and screen quality.')
+			} else if (this.model.attributes.videoEnabled) {
+				label = t('spreed', 'Bad sent audio and video quality.')
+			} else {
+				label = t('spreed', 'Bad sent audio quality.')
+			}
+
+			return label
+		},
+
+		qualityWarningTooltip() {
+			if (!this.showQualityWarning) {
+				return null
+			}
+
+			const tooltip = {}
+			if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you. To improve the situation try to disable your video while doing a screenshare.')
+				tooltip.actionLabel = t('spreed', 'Disable video')
+				tooltip.action = 'disableVideo'
+			} else if (!this.model.attributes.audioEnabled && this.model.attributes.localScreen) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
+				tooltip.actionLabel = ''
+				tooltip.action = ''
+			} else if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
+				tooltip.actionLabel = ''
+				tooltip.action = ''
+			} else if (this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.')
+				tooltip.actionLabel = t('spreed', 'Disable video')
+				tooltip.action = 'disableVideo'
+			} else if (this.model.attributes.localScreen) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see your screen. To improve the situation try to disable your screenshare.')
+				tooltip.actionLabel = t('spreed', 'Disable screenshare')
+				tooltip.action = 'disableScreenShare'
+			} else if (this.model.attributes.videoEnabled) {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.')
+				tooltip.actionLabel = t('spreed', 'Disable video')
+				tooltip.action = 'disableVideo'
+			} else {
+				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.')
+				tooltip.actionLabel = ''
+				tooltip.action = ''
+			}
+
+			return tooltip
 		},
 
 	},
 
+	watch: {
+		senderConnectionQualityIsBad: function(senderConnectionQualityIsBad) {
+			if (!senderConnectionQualityIsBad) {
+				return
+			}
+
+			if (this.qualityWarningInGracePeriodTimeout) {
+				window.clearTimeout(this.qualityWarningInGracePeriodTimeout)
+			}
+
+			this.qualityWarningInGracePeriodTimeout = window.setTimeout(() => {
+				this.qualityWarningInGracePeriodTimeout = null
+			}, 10000)
+		},
+	},
+
 	created() {
 		// The standard "getDisplayMedia" does not support pre-filtering the
 		// type of display sources, so the unified menu is used in that case
@@ -476,10 +560,6 @@ export default {
 				this.isQualityWarningTooltipDismissed = true
 			}
 		},
-
-		handleStopFollowing() {
-			this.$store.dispatch('selectedVideoPeerId', null)
-		},
 	},
 }
 </script>
@@ -507,14 +587,7 @@ export default {
 	border-bottom-color: transparent;
 }
 
-.nameIndicator {
-	position: absolute;
-	right: 20px;
-	bottom: 12px;
-	z-index: 1;
-}
-
-.nameIndicator button {
+.buttons-bar button, .buttons-bar button:active {
 	background-color: transparent;
 	border: none;
 	margin: 0;
@@ -523,34 +596,34 @@ export default {
 	background-size: 24px;
 }
 
-.nameIndicator #screensharing-menu button {
+.buttons-bar #screensharing-menu button {
 	width: 100%;
 	height: auto;
 }
 
-.nameIndicator button.audio-disabled,
-.nameIndicator button.video-disabled,
-.nameIndicator button.screensharing-disabled {
+.buttons-bar button.audio-disabled,
+.buttons-bar button.video-disabled,
+.buttons-bar button.screensharing-disabled {
 	opacity: .7;
 }
 
-.nameIndicator button.audio-disabled:not(.no-audio-available),
-.nameIndicator button.video-disabled:not(.no-video-available),
-.nameIndicator button.screensharing-disabled {
+.buttons-bar button.audio-disabled:not(.no-audio-available),
+.buttons-bar button.video-disabled:not(.no-video-available),
+.buttons-bar button.screensharing-disabled {
 	&:hover,
 	&:focus {
 		opacity: 1;
 	}
 }
 
-.nameIndicator button.no-audio-available,
-.nameIndicator button.no-video-available {
+.buttons-bar button.no-audio-available,
+.buttons-bar button.no-video-available {
 	opacity: .7;
 	cursor: not-allowed;
 }
 
-.nameIndicator button.no-audio-available:active,
-.nameIndicator button.no-video-available:active {
+.buttons-bar button.no-audio-available:active,
+.buttons-bar button.no-video-available:active {
 	background-color: transparent;
 }
 
@@ -585,11 +658,10 @@ export default {
 
 .network-connection-state {
 	position: absolute;
-	bottom: 0;
-	right: 16px;
+	bottom: 3px;
+	right: 45px;
 	width: 32px;
 	height: 32px;
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 }
 
 .hint {
@@ -606,29 +678,4 @@ export default {
 		height: $clickable-area;
 	}
 }
-
-.bottom-bar {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	padding: 0 20px 12px 24px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 40px;
-	&--big {
-		justify-content: center;
-		height: 48px;
-	}
-	&__button {
-		opacity: 0.8;
-		margin-left: 4px;
-		border: none;
-		&:hover,
-		&:focus {
-			opacity: 1;
-			border: none;
-		}
-	}
-}
 </style>
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 8adab864e65..8a045b0ffbe 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -50,16 +50,22 @@
 		</div>
 		<transition name="fade">
 			<LocalMediaControls
-				ref="localMediaControls"
-				:is-big="isBig"
+				v-if="showControls"
+				class="local-media-controls"
 				:model="localMediaModel"
 				:local-call-participant-model="localCallParticipantModel"
 				:screen-sharing-button-hidden="isSidebar"
-				:quality-warning-aria-label="qualityWarningAriaLabel"
-				:quality-warning-tooltip="qualityWarningTooltip"
-				@switchScreenToId="$emit('switchScreenToId', $event)" />
+				@switch-screen-to-id="$emit('switchScreenToId', $event)" />
 		</transition>
 		<div v-if="mouseover && isSelectable" class="hover-shadow" />
+		<div class="bottom-bar">
+			<button
+				v-if="isBig"
+				class="bottom-bar__button"
+				@click="handleStopFollowing">
+				{{ stopFollowingLabel }}
+			</button>
+		</div>
 	</div>
 </template>
 
@@ -76,8 +82,6 @@ import {
 } from '@nextcloud/dialogs'
 import video from '../../../mixins/video.js'
 import VideoBackground from './VideoBackground'
-import { callAnalyzer } from '../../../utils/webrtc/index'
-import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer'
 
 export default {
 
@@ -112,13 +116,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-	},
-
-	data() {
-		return {
-			callAnalyzer: callAnalyzer,
-			qualityWarningInGracePeriodTimeout: null,
-		}
+		showControls: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	computed: {
@@ -168,94 +169,6 @@ export default {
 			return this.localMediaModel.attributes.localStream && this.localMediaModel.attributes.localStreamRequestVideoError
 		},
 
-		showQualityWarning() {
-			return this.senderConnectionQualityIsBad || this.qualityWarningInGracePeriodTimeout
-		},
-
-		senderConnectionQualityIsBad() {
-			return this.senderConnectionQualityAudioIsBad
-				|| this.senderConnectionQualityVideoIsBad
-				|| this.senderConnectionQualityScreenIsBad
-		},
-
-		senderConnectionQualityAudioIsBad() {
-			return callAnalyzer
-				&& (callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.VERY_BAD
-				 || callAnalyzer.attributes.senderConnectionQualityAudio === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
-		},
-
-		senderConnectionQualityVideoIsBad() {
-			return callAnalyzer
-				&& (callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.VERY_BAD
-				 || callAnalyzer.attributes.senderConnectionQualityVideo === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
-		},
-
-		senderConnectionQualityScreenIsBad() {
-			return callAnalyzer
-				&& (callAnalyzer.attributes.senderConnectionQualityScreen === CONNECTION_QUALITY.VERY_BAD
-				 || callAnalyzer.attributes.senderConnectionQualityScreen === CONNECTION_QUALITY.NO_TRANSMITTED_DATA)
-		},
-
-		qualityWarningAriaLabel() {
-			let label = ''
-			if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
-				label = t('spreed', 'Bad sent video and screen quality.')
-			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.localScreen) {
-				label = t('spreed', 'Bad sent screen quality.')
-			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled) {
-				label = t('spreed', 'Bad sent video quality.')
-			} else if (this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
-				label = t('spreed', 'Bad sent audio, video and screen quality.')
-			} else if (this.localMediaModel.attributes.localScreen) {
-				label = t('spreed', 'Bad sent audio and screen quality.')
-			} else if (this.localMediaModel.attributes.videoEnabled) {
-				label = t('spreed', 'Bad sent audio and video quality.')
-			} else {
-				label = t('spreed', 'Bad sent audio quality.')
-			}
-
-			return label
-		},
-
-		qualityWarningTooltip() {
-			if (!this.showQualityWarning) {
-				return null
-			}
-
-			const tooltip = {}
-			if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you. To improve the situation try to disable your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
-			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
-			} else if (!this.localMediaModel.attributes.audioEnabled && this.localMediaModel.attributes.videoEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
-			} else if (this.localMediaModel.attributes.videoEnabled && this.localMediaModel.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
-			} else if (this.localMediaModel.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see your screen. To improve the situation try to disable your screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable screenshare')
-				tooltip.action = 'disableScreenShare'
-			} else if (this.localMediaModel.attributes.videoEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
-			} else {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
-			}
-
-			return tooltip
-		},
-
 		hasLocalVideo() {
 			return this.localMediaModel.attributes.videoEnabled
 		},
@@ -301,20 +214,6 @@ export default {
 			},
 		},
 
-		senderConnectionQualityIsBad: function(senderConnectionQualityIsBad) {
-			if (!senderConnectionQualityIsBad) {
-				return
-			}
-
-			if (this.qualityWarningInGracePeriodTimeout) {
-				window.clearTimeout(this.qualityWarningInGracePeriodTimeout)
-			}
-
-			this.qualityWarningInGracePeriodTimeout = window.setTimeout(() => {
-				this.qualityWarningInGracePeriodTimeout = null
-			}, 10000)
-		},
-
 	},
 
 	mounted() {
@@ -354,6 +253,9 @@ export default {
 			attachMediaStream(localStream, this.$refs.video, options)
 		},
 
+		handleStopFollowing() {
+			this.$store.dispatch('selectedVideoPeerId', null)
+		},
 	},
 
 }
@@ -417,4 +319,39 @@ export default {
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
 }
+
+.bottom-bar {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	padding: 0 20px 12px 24px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 40px;
+	&--big {
+		justify-content: center;
+		height: 48px;
+	}
+	&__button {
+		opacity: 0.8;
+		margin-left: 4px;
+		border: none;
+		&:hover,
+		&:focus {
+			opacity: 1;
+			border: none;
+		}
+	}
+}
+
+.local-media-controls {
+	position: absolute;
+	text-align: center;
+	right: 0;
+	bottom: 4px;
+	z-index: 10;
+	width: 100%;
+}
+
 </style>