Move LocalMediaControls to CallView, fix sidebar mode

Moved LocalMediaControls to the CallView to make sure they are available
in any mode, including the sidebar one.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

2 files changed, 17 insertions, 18 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index d772d0223..61d2da5c6 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -23,6 +23,12 @@
 	<div id="call-container">
 		<EmptyCallView v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid" />
 		<div id="videos">
+			<LocalMediaControls
+				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">
 				<template v-for="callParticipantModel in reversedCallParticipantModels">
@@ -92,7 +98,6 @@
 			<Grid
 				v-if="showGrid"
 				v-bind="$attrs"
-				:is-sidebar="isSidebar"
 				:is-stripe="!isGrid"
 				:token="token"
 				:fit-video="true"
@@ -125,6 +130,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'
@@ -138,6 +144,7 @@ export default {
 		EmptyCallView,
 		Video,
 		LocalVideo,
+		LocalMediaControls,
 		Screen,
 	},
 
@@ -705,4 +712,13 @@ 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 53b2e5c05..65ba6e477 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -35,12 +35,6 @@
 				decorative
 				:size="24" />
 		</button>
-		<LocalMediaControls
-			class="local-media-controls"
-			:model="localMediaModel"
-			:local-call-participant-model="localCallParticipantModel"
-			:screen-sharing-button-hidden="isSidebar"
-			@switch-screen-to-id="$emit('switchScreenToId', $event)" />
 		<transition name="slide-down">
 			<div v-if="!isStripe || stripeOpen" class="wrapper" :style="wrapperStyle">
 				<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
@@ -149,7 +143,6 @@
 import debounce from 'debounce'
 import Video from '../shared/Video'
 import LocalVideo from '../shared/LocalVideo'
-import LocalMediaControls from '../shared/LocalMediaControls'
 import { EventBus } from '../../../services/EventBus'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import EmptyCallView from '../shared/EmptyCallView'
@@ -164,7 +157,6 @@ export default {
 	components: {
 		Video,
 		LocalVideo,
-		LocalMediaControls,
 		EmptyCallView,
 		ChevronRight,
 		ChevronLeft,
@@ -827,13 +819,4 @@ export default {
 	background: none;
 }
 
-.local-media-controls {
-	position: absolute;
-	width: 300px; /* same as .video-container-stripe */
-	text-align: center;
-	right: 0;
-	bottom: 4px;
-	z-index: 1;
-}
-
 </style>