feat(call): list participants grid/stripe with a mouse wheel

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/CallView/Grid/Grid.vue

@@ -37,6 +37,7 @@
 						:class="{stripe: isStripe}"
 						:style="gridStyle"
 						@mousemove="handleMovement"
+						@wheel="debounceHandleWheelEvent"
 						@keydown="handleMovement">
 						<template v-if="!devMode && (!isLessThanTwoVideos || !isStripe)">
 							<EmptyCallView v-if="videos.length === 0 && !isStripe" class="video" :is-grid="true" />
@@ -263,6 +264,7 @@ export default {
 			// Timer for the videos bottom bar
 			showVideoOverlayTimer: null,
 			debounceMakeGrid: () => {},
+			debounceHandleWheelEvent: () => {},
 			tempPromotedModels: [],
 			unpromoteSpeakerTimer: {},
 			promotedHistoryMask: [],
@@ -608,6 +610,7 @@ export default {
 	// bind event handlers to the `handleResize` method
 	mounted() {
 		this.debounceMakeGrid = debounce(this.makeGrid, 200)
+		this.debounceHandleWheelEvent = debounce(this.handleWheelEvent, 50)
 		window.addEventListener('resize', this.handleResize)
 		subscribe('navigation-toggled', this.handleResize)
 		this.makeGrid()
@@ -616,6 +619,7 @@ export default {
 	},
 	beforeDestroy() {
 		this.debounceMakeGrid.clear?.()
+		this.debounceHandleWheelEvent.clear?.()
 		window.OCA.Talk.gridDebugInformation = () => console.debug('Not in a call')
 
 		window.removeEventListener('resize', this.handleResize)
@@ -868,6 +872,18 @@ export default {
 		// this.shrinkGrid(this.displayedVideos.length)
 		// },
 
+		handleWheelEvent(event) {
+			if (this.gridWidth <= 0) {
+				return
+			}
+
+			if (event.deltaY < 0 && this.hasPreviousPage) {
+				this.handleClickPrevious()
+			} else if (event.deltaY > 0 && this.hasNextPage) {
+				this.handleClickNext()
+			}
+		},
+
 		handleClickNext() {
 			this.currentPage++
 			console.debug('handleclicknext, ', 'currentPage ', this.currentPage, 'slots ', this.slot, 'videos.length ', this.videos.length)