feat(PresenterOverlay): make the overlay draggable.

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/CallView/CallView.vue

@@ -75,17 +75,21 @@
 							:shared-data="sharedDatas[shownRemoteScreenPeerId]"
 							is-big />
 						<!-- presenter overlay -->
-						<TransitionWrapper v-if="shouldShowPresenterOverlay"
-							name="slide-down">
+						<VueDraggableResizable v-if="shouldShowPresenterOverlay"
+							parent
+							:resizable="false"
+							:height="150"
+							:width="150"
+							:y="500">
 							<VideoVue class="presenter-overlay__video"
 								:token="token"
 								:model="shownRemoteScreenCallParticipantModel"
 								:shared-data="sharedDatas[shownRemoteScreenPeerId]"
 								is-presenter-overlay
 								un-selectable
 								hide-bottom-bar
-								@click-video="toggleShowPresenterOverlay" />
-						</TransitionWrapper>
+								@click-presenter="toggleShowPresenterOverlay" />
+						</VueDraggableResizable>
 						<!-- presenter button when presenter overlay is collapsed -->
 						<NcButton v-else-if="isPresenterCollapsed"
 							:aria-label="t('spreed', 'Show presenter')"
@@ -153,6 +157,7 @@
 
 <script>
 import debounce from 'debounce'
+import VueDraggableResizable from 'vue-draggable-resizable'
 
 import AccountBox from 'vue-material-design-icons/AccountBoxOutline.vue'
 
@@ -169,7 +174,6 @@ import ReactionToaster from './shared/ReactionToaster.vue'
 import Screen from './shared/Screen.vue'
 import VideoVue from './shared/VideoVue.vue'
 import ViewerOverlayCallView from './shared/ViewerOverlayCallView.vue'
-import TransitionWrapper from '../TransitionWrapper.vue'
 
 import { SIMULCAST } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -187,13 +191,13 @@ export default {
 		AccountBox,
 		EmptyCallView,
 		ViewerOverlayCallView,
+		VueDraggableResizable,
 		Grid,
 		LocalVideo,
 		NcButton,
 		ReactionToaster,
 		Screen,
 		VideoVue,
-		TransitionWrapper,
 	},
 
 	props: {
@@ -236,6 +240,8 @@ export default {
 			isBackgroundBlurred: true,
 			showPresenterOverlay: true,
 			debounceFetchPeers: () => {},
+			width: window.innerWidth,
+			height: window.innerWidth,
 		}
 	},
 	computed: {

src/components/CallView/shared/VideoVue.vue

@@ -37,6 +37,10 @@
 					:class="fitVideo ? 'video--fit' : 'video--fill'"
 					class="video"
 					@playing="updateVideoAspectRatio" />
+				<AccountOff v-if="isPresenterOverlay && mouseover"
+					class="presenter-icon__hide"
+					:size="30"
+					@click="$emit('click-presenter')" />
 			</div>
 		</TransitionWrapper>
 		<TransitionWrapper name="fade">
@@ -77,7 +81,6 @@
 				:has-shadow="hasVideo"
 				:participant-name="participantName" />
 		</slot>
-		<AccountOff v-if="isPresenterOverlay && mouseover" class="presenter-icon__hide" :size="30" />
 	</div>
 </template>
 
@@ -190,7 +193,7 @@ export default {
 		},
 	},
 
-	emits: ['click-video'],
+	emits: ['click-video', 'click-presenter'],
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
@@ -303,12 +306,14 @@ export default {
 				'video-container-grid': this.isGrid,
 				'video-container-big': this.isBig,
 				'one-to-one': this.isOneToOne,
+				'presenter-overlay': this.isPresenterOverlay
 			}
 		},
 
 		videoWrapperClass() {
 			return {
 				'icon-loading': this.isLoading,
+				'presenter-overlay': this.isPresenterOverlay
 			}
 		},
 
@@ -659,6 +664,10 @@ export default {
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
+.videoWrapper.presenter-overlay > video {
+	border-radius: 50%;
+}
+
 .videoWrapper.icon-loading:after {
 	height: 60px;
 	width: 60px;
@@ -702,6 +711,10 @@ export default {
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
+.video-container.presenter-overlay::after {
+	border-radius: 50%;
+}
+
 .video-container.speaking::after {
 	content: '';
 	box-shadow: inset 0 0 0 2px white;
@@ -715,17 +728,16 @@ export default {
 
 .presenter-icon__hide {
 	position: absolute;
-	height: 100%;
-	width: 100%;
-	top: 0;
-	left: 0;
+	top: 65%;
+	left: 40%;
 	color: white;
-}
-
-.video-container.presenter::after {
-	content: '';
 	background-color: rgba(0, 0, 0, 0.5);
-	cursor: pointer;
+	border-radius: 50%;
+
+	&:hover {
+		cursor: pointer;
+	}
+
 }
 
 </style>