From 14b4630ff7905e41057649f20afa0331d5cb07b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 20:03:14 +0100
Subject: [PATCH 01/14] Include local video when grid is in development mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This ensures that the grid view in development mode will behave like the
grid view in normal mode.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 28 +++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 1cccb80ddc4..2dda7d927fb 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -54,17 +54,6 @@
 							: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>
@@ -76,6 +65,17 @@
 					<h1 class="dev-mode__title">
 						Dev mode on ;-)
 					</h1>
+					<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>
 			</div>
 			<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
@@ -257,9 +257,9 @@ export default {
 			}
 		},
 
-		// Number of video components (includes localvideo if not in dev mode)
+		// Number of video components (includes localvideo if not stripe)
 		videosCount() {
-			if (this.devMode || this.isStripe) {
+			if (this.isStripe) {
 				return this.videos.length
 			} else {
 				// Count the emptycontent as a grid element
@@ -492,7 +492,7 @@ export default {
 				this.shrinkGrid(this.videosCount)
 			}
 			// Once the grid is done, populate it with video components
-			if (this.devMode || this.isStripe) {
+			if (this.isStripe) {
 				this.displayedVideos = this.videos.slice(0, this.rows * this.columns)
 			} else {
 				// `- 1` because we a ccount for the localVideo component (see template)

From 6c7a009a002658cda48903042ced9eefe621c715 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:37:02 +0100
Subject: [PATCH 02/14] Remove unused property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 2dda7d927fb..a9b5833eee9 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -365,10 +365,6 @@ export default {
 				return 'height: 100%'
 			}
 		},
-		// Determines when to show the stripe navigation buttons
-		showNavigation() {
-			return this.gridWidth > 0 && this.isStripe && this.videosCount > 0 && this.showVideoOverlay
-		},
 
 		// Blur radius for each background in the grid
 		videoBackgroundBlur() {

From 9184b681d62e6775857d99529d0419f43ad3113c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 20:25:13 +0100
Subject: [PATCH 03/14] Account for the local video in the "slots" property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This will be needed for proper calculations once pagination is enabled
in the full grid view, as the local video will be shown in all pages and
thus its slot will not be available.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index a9b5833eee9..8b4d5db53e1 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -257,18 +257,14 @@ export default {
 			}
 		},
 
-		// Number of video components (includes localvideo if not stripe)
+		// Number of video components (it does not include the local video)
 		videosCount() {
-			if (this.isStripe) {
-				return this.videos.length
-			} else {
+			if (!this.isStripe && this.videos.length === 0) {
 				// Count the emptycontent as a grid element
-				if (this.videos.length === 0) {
-					return 2
-				}
-				// Add the local video to the count
-				return this.videos.length + 1
+				return 1
 			}
+
+			return this.videos.length
 		},
 		videoWidth() {
 			return this.gridWidth / this.columns
@@ -302,8 +298,10 @@ export default {
 		},
 
 		// Number of grid slots at any given moment
+		// The local video always takes one slot if the grid view is not shown
+		// as a stripe.
 		slots() {
-			return this.rows * this.columns
+			return this.isStripe ? this.rows * this.columns : this.rows * this.columns - 1
 		},
 
 		// Hides or displays the `grid-navigation next` button
@@ -520,7 +518,7 @@ export default {
 
 			let currentColumns = this.columns
 			let currentRows = this.rows
-			let currentSlots = currentColumns * currentRows
+			let currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
 
 			// Run this code only if we don't have an 'overflow' of videos. If the
 			// videos are populating the grid, there's no point in shrinking it.
@@ -553,7 +551,7 @@ export default {
 						currentColumns--
 					}
 
-					currentSlots = currentColumns * currentRows
+					currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
 
 					// Check that there are still enough slots available
 					if (numberOfVideos > currentSlots) {
@@ -566,7 +564,7 @@ export default {
 						currentRows--
 					}
 
-					currentSlots = currentColumns * currentRows
+					currentSlots = this.isStripe ? currentColumns * currentRows : currentColumns * currentRows - 1
 
 					// Check that there are still enough slots available
 					if (numberOfVideos > currentSlots) {

From 464013b73beb96eaf8664897d161516700ba322e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 20:33:00 +0100
Subject: [PATCH 04/14] Simplify calculation by using "slots" property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 8b4d5db53e1..abd0a09ed9b 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -486,12 +486,7 @@ export default {
 				this.shrinkGrid(this.videosCount)
 			}
 			// Once the grid is done, populate it with video components
-			if (this.isStripe) {
-				this.displayedVideos = this.videos.slice(0, this.rows * this.columns)
-			} else {
-				// `- 1` because we a ccount for the localVideo component (see template)
-				this.displayedVideos = this.videos.slice(0, this.rows * this.columns - 1)
-			}
+			this.displayedVideos = this.videos.slice(0, this.slots)
 			// Send event to display hint in the topbar component if there's an
 			// overflow of videos (only if in full-grid mode, not stripe)
 			if (this.hasVideoOverflow) {

From ded3ce2ee43bf73620e7cd278b2fa79d056f3305 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 20:43:08 +0100
Subject: [PATCH 05/14] Move "displayedVideos" to a computed property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Besides being cleaner this will make possible to fix the grid jumping
back to the first page when the  number of videos change.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 32 +++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index abd0a09ed9b..f3559b59787 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -227,9 +227,6 @@ export default {
 		return {
 			gridWidth: 0,
 			gridHeight: 0,
-			// Array of videos that are being displayed in the grid at any
-			// given moment
-			displayedVideos: [],
 			// Columns of the grid at any given moment
 			columns: 0,
 			// Rows of the grid at any given moment
@@ -272,6 +269,22 @@ export default {
 		videoHeight() {
 			return this.gridHeight / this.rows
 		},
+
+		// Array of videos that are being displayed in the grid at any given
+		// moment
+		displayedVideos() {
+			if (!this.slots) {
+				return []
+			}
+
+			// Slice the `videos` array to display the current page of videos
+			if (((this.currentPage + 1) * this.slots) >= this.videos.length) {
+				return this.videos.slice(this.currentPage * this.slots)
+			}
+
+			return this.videos.slice(this.currentPage * this.slots, (this.currentPage + 1) * this.slots)
+		},
+
 		// The aspect ratio of the grid (in terms of px)
 		gridAspectRatio() {
 			return (this.gridWidth / this.gridHeight).toPrecision([2])
@@ -458,7 +471,6 @@ export default {
 			if (this.videos.length === 0) {
 				this.columns = 0
 				this.rows = 0
-				this.displayedVideos = []
 				return
 			}
 
@@ -485,8 +497,6 @@ export default {
 			} else {
 				this.shrinkGrid(this.videosCount)
 			}
-			// Once the grid is done, populate it with video components
-			this.displayedVideos = this.videos.slice(0, this.slots)
 			// Send event to display hint in the topbar component if there's an
 			// overflow of videos (only if in full-grid mode, not stripe)
 			if (this.hasVideoOverflow) {
@@ -594,23 +604,13 @@ export default {
 		// this.shrinkGrid(this.displayedVideos.length)
 		// },
 
-		// Slice the `videos` array to display the next set of videos
 		handleClickNext() {
 			this.currentPage++
 			console.debug('handleclicknext, ', 'currentPage ', this.currentPage, 'slots ', this.slot, 'videos.length ', this.videos.length)
-			if (((this.currentPage + 1) * this.slots) >= this.videos.length) {
-				this.displayedVideos = this.videos.slice(this.currentPage * this.slots)
-			} else {
-				this.displayedVideos = this.videos.slice(this.currentPage * this.slots, (this.currentPage + 1) * this.slots)
-			}
-			console.debug('slicevalues', (this.currentPage) * this.slots, this.currentPage * this.slots)
 		},
-		// Slice the `videos` array to display the previous set of videos
 		handleClickPrevious() {
 			this.currentPage--
 			console.debug('handleclickprevious, ', 'currentPage ', this.currentPage, 'slots ', this.slots, 'videos.length ', this.videos.length)
-			this.displayedVideos = this.videos.slice((this.currentPage) * this.slots, (this.currentPage + 1) * this.slots)
-			console.debug('slicevalues', (this.currentPage) * this.slots, (this.currentPage + 1) * this.slots)
 		},
 
 		handleMovement() {

From d8651c7e52407c007815fbf5bb8196d802f227a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:01:47 +0100
Subject: [PATCH 06/14] Move "numberOfPages" to a computed property
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index f3559b59787..919890f3374 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -231,8 +231,6 @@ export default {
 			columns: 0,
 			// Rows of the grid at any given moment
 			rows: 0,
-			// Grid pages at any given moment
-			numberOfPages: 0,
 			// The current page
 			currentPage: 0,
 			// Videos controls and name
@@ -317,6 +315,11 @@ export default {
 			return this.isStripe ? this.rows * this.columns : this.rows * this.columns - 1
 		},
 
+		// Grid pages at any given moment
+		numberOfPages() {
+			return Math.ceil(this.videosCount / this.slots)
+		},
+
 		// Hides or displays the `grid-navigation next` button
 		hasNextPage() {
 			if (this.displayedVideos.length !== 0 && this.hasPagination) {
@@ -388,7 +391,6 @@ export default {
 		'videos.length': function() {
 			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
@@ -416,7 +418,6 @@ export default {
 			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
@@ -434,7 +435,6 @@ export default {
 		subscribe('navigation-toggled', this.handleResize)
 		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
@@ -455,7 +455,6 @@ export default {
 			// in the grid goes back to be first video)
 			debounce(this.makeGrid(), 200)
 			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
@@ -588,11 +587,6 @@ export default {
 			this.rows = currentRows
 		},
 
-		// Set the current number of pages
-		setNumberOfPages() {
-			this.numberOfPages = Math.ceil(this.videosCount / this.slots)
-		},
-
 		// The last grid page is very likely not to have the same number of
 		// elements as the previous pages so the grid needs to be tweaked
 		// accordingly

From 0e468e97341b6dbd4a924d8961f1db219cb202ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:04:24 +0100
Subject: [PATCH 07/14] Fix grid view jumping back to first page in some
 updates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the number of participants changed or the window was resized the
current page was reset to the first one. However, now that
"displayedVideos" is a computed property and no longer reset directly in
"makeGrid()" it is no longer necessary to go back to the first page.

Moreover, as "numberOfPages" is also a computed property it can be
watched to restrict the current page to be always in range.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 919890f3374..866bc36cefd 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -390,11 +390,6 @@ export default {
 		// If the video array size changes, rebuild the grid
 		'videos.length': function() {
 			this.makeGrid()
-			if (this.hasPagination) {
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
 		},
 		// TODO: rebuild the grid to have optimal for last page
 		// Exception for when navigating in and away from the last page of the
@@ -417,16 +412,17 @@ export default {
 			console.debug('previousGridWidth: ', this.gridWidth, 'previousGridHeight: ', this.gridHeight)
 			console.debug('newGridWidth: ', this.gridWidth, 'newGridHeight: ', this.gridHeight)
 			this.$nextTick(this.makeGrid)
-			if (this.hasPagination) {
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
 		},
 		sidebarStatus() {
 			// Handle the resize after the sidebar animation has completed
 			setTimeout(this.handleResize, 500)
 		},
+
+		numberOfPages() {
+			if (this.currentPage >= this.numberOfPages) {
+				this.currentPage = this.numberOfPages - 1
+			}
+		},
 	},
 
 	// bind event handlers to the `handleResize` method
@@ -434,11 +430,6 @@ export default {
 		window.addEventListener('resize', this.handleResize)
 		subscribe('navigation-toggled', this.handleResize)
 		this.makeGrid()
-		if (this.hasPagination) {
-			// Set the current page to 0
-			// TODO: add support for keeping position in the videos array when resizing
-			this.currentPage = 0
-		}
 	},
 	beforeDestroy() {
 		window.removeEventListener('resize', this.handleResize)
@@ -454,11 +445,6 @@ export default {
 			// current position in the videos array is lost (first element
 			// in the grid goes back to be first video)
 			debounce(this.makeGrid(), 200)
-			if (this.hasPagination) {
-				// Set the current page to 0
-				// TODO: add support for keeping position in the videos array when resizing
-				this.currentPage = 0
-			}
 		},
 
 		// Find the right size if the grid in rows and columns (we already know

From 2ea3dff45793032ad99ced5c6a26df0a600cdc05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:15:27 +0100
Subject: [PATCH 08/14] Fix layout hint not removed in some cases
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When there was no longer an overflow the layout hint event was not
triggered with a false value, so even if the window was resized to
accomodate the larger number of participants the hint was not
automatically removed. Now the hint is removed whenever there is no
longer an overflow or the grid is shown as a stripe.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 866bc36cefd..ee9aa61dec6 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -484,15 +484,11 @@ export default {
 			}
 			// Send event to display hint in the topbar component if there's an
 			// overflow of videos (only if in full-grid mode, not stripe)
-			if (this.hasVideoOverflow) {
-				if (!this.isStripe) {
-					EventBus.$emit('toggleLayoutHint', true)
-				} else {
-				// Remove the hint if user resizes
-					EventBus.$emit('toggleLayoutHint', false)
-				}
+			if (!this.hasVideoOverflow || this.isStripe) {
+				EventBus.$emit('toggleLayoutHint', false)
+			} else {
+				EventBus.$emit('toggleLayoutHint', true)
 			}
-
 		},
 
 		// Fine tune the number of rows and columns of the grid

From 6b136b7066953161737244f368548174c4f3eee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:15:27 +0100
Subject: [PATCH 09/14] Move layout hint event to a watcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of being explicitly emitted in "makeGrid" the layout hint is now
automatically emitted based on the value of the computed properties that
it depends on.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 29 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index ee9aa61dec6..116b2a39ac2 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -384,6 +384,21 @@ export default {
 		videoBackgroundBlur() {
 			return this.$store.getters.getBlurRadius(this.videoWidth, this.videoHeight)
 		},
+
+		// Special boolean property to watch and emit the "toggleLayoutHint"
+		// event to display hint in the topbar component if there is an overflow
+		// of videos (only if in full-grid mode, not stripe)
+		toggleLayoutHint() {
+			if (!this.hasVideoOverflow) {
+				return false
+			}
+
+			if (this.isStripe) {
+				return false
+			}
+
+			return true
+		},
 	},
 
 	watch: {
@@ -423,6 +438,13 @@ export default {
 				this.currentPage = this.numberOfPages - 1
 			}
 		},
+
+		toggleLayoutHint: {
+			immediate: true,
+			handler() {
+				EventBus.$emit('toggleLayoutHint', this.toggleLayoutHint)
+			},
+		},
 	},
 
 	// bind event handlers to the `handleResize` method
@@ -482,13 +504,6 @@ export default {
 			} else {
 				this.shrinkGrid(this.videosCount)
 			}
-			// Send event to display hint in the topbar component if there's an
-			// overflow of videos (only if in full-grid mode, not stripe)
-			if (!this.hasVideoOverflow || this.isStripe) {
-				EventBus.$emit('toggleLayoutHint', false)
-			} else {
-				EventBus.$emit('toggleLayoutHint', true)
-			}
 		},
 
 		// Fine tune the number of rows and columns of the grid

From 532dcf9bed3dca7d2bac0c53e437a8c66bf62682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:42:05 +0100
Subject: [PATCH 10/14] Use a more accurate name for the CSS class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 116b2a39ac2..04f1edc8027 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<div class="wrapper" :style="wrapperStyle">
-		<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
+		<div :class="{'stripe-wrapper': isStripe, 'wrapper': !isStripe}">
 			<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
 				class="grid-navigation grid-navigation__previous"
 				@click="handleClickPrevious">
@@ -659,7 +659,7 @@ export default {
 	width: 300px;
 }
 
-.pagination-wrapper {
+.stripe-wrapper {
 	width: calc(100% - 300px);
 	position:relative
 }

From 79097710386b2d2e636bcfd5b611a2d4193bee14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:43:30 +0100
Subject: [PATCH 11/14] Fix CSS syntax typo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 04f1edc8027..6b1d5b34014 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -661,7 +661,7 @@ export default {
 
 .stripe-wrapper {
 	width: calc(100% - 300px);
-	position:relative
+	position: relative;
 }
 
 .dev-mode-video {

From 2bdd7f9b4ab8f33c8ebd700bd116b888e70ea474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:44:15 +0100
Subject: [PATCH 12/14] Enable pagination for main grid view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 6b1d5b34014..64db2d27814 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -22,7 +22,7 @@
 <template>
 	<div class="wrapper" :style="wrapperStyle">
 		<div :class="{'stripe-wrapper': isStripe, 'wrapper': !isStripe}">
-			<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
+			<button v-if="hasPreviousPage && gridWidth > 0 && showVideoOverlay"
 				class="grid-navigation grid-navigation__previous"
 				@click="handleClickPrevious">
 				<ChevronLeft decorative
@@ -78,7 +78,7 @@
 						@click-video="handleClickLocalVideo" />
 				</template>
 			</div>
-			<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
+			<button v-if="hasNextPage && gridWidth > 0 && showVideoOverlay"
 				class="grid-navigation grid-navigation__next"
 				@click="handleClickNext">
 				<ChevronRight decorative
@@ -714,7 +714,8 @@ export default {
 	height: 44px;
 	background-color: white;
 	opacity: 0.6 !important;
-	top: 12px;
+	/* Center icons vertically in the grid view */
+	top: calc(50% - 22px);
 	z-index: 2;
 	box-shadow: 0 0 4px var(--color-box-shadow);
 	padding: 0;
@@ -734,6 +735,10 @@ export default {
 	}
 }
 
+.stripe-wrapper .grid-navigation {
+	top: 12px;
+}
+
 .pages-indicator {
 	position: absolute;
 	right: 50%;

From 29de647e1479a8adc454163b4d704a42c4ce9def Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Jan 2021 21:47:46 +0100
Subject: [PATCH 13/14] Remove layout hint notification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As it is now possible to paginate in the main grid view the layout hint
to change to speaker mode is no longer needed.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 23 ----------
 src/components/TopBar/TopBar.vue      | 65 +++------------------------
 2 files changed, 7 insertions(+), 81 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 64db2d27814..bb238ea2868 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -125,7 +125,6 @@
 import debounce from 'debounce'
 import Video from '../shared/Video'
 import LocalVideo from '../shared/LocalVideo'
-import { EventBus } from '../../../services/EventBus'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import EmptyCallView from '../shared/EmptyCallView'
 import ChevronRight from 'vue-material-design-icons/ChevronRight'
@@ -384,21 +383,6 @@ export default {
 		videoBackgroundBlur() {
 			return this.$store.getters.getBlurRadius(this.videoWidth, this.videoHeight)
 		},
-
-		// Special boolean property to watch and emit the "toggleLayoutHint"
-		// event to display hint in the topbar component if there is an overflow
-		// of videos (only if in full-grid mode, not stripe)
-		toggleLayoutHint() {
-			if (!this.hasVideoOverflow) {
-				return false
-			}
-
-			if (this.isStripe) {
-				return false
-			}
-
-			return true
-		},
 	},
 
 	watch: {
@@ -438,13 +422,6 @@ export default {
 				this.currentPage = this.numberOfPages - 1
 			}
 		},
-
-		toggleLayoutHint: {
-			immediate: true,
-			handler() {
-				EventBus.$emit('toggleLayoutHint', this.toggleLayoutHint)
-			},
-		},
 	},
 
 	// bind event handlers to the `handleResize` method
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 4765a79ae9f..a8c4332b59d 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -23,34 +23,13 @@
 	<div class="top-bar">
 		<CallButton class="top-bar__button" />
 		<!-- Call layout switcher -->
-		<Popover v-if="isInCall"
-			class="top-bar__button"
-			trigger="manual"
-			:open="showLayoutHint && !hintDismissed"
-			@auto-hide="showLayoutHint=false">
-			<Actions slot="trigger">
-				<ActionButton v-if="isInCall"
-					:icon="changeViewIconClass"
-					@click="changeView">
-					{{ changeViewText }}
-				</actionbutton>
-			</Actions>
-			<div class="hint">
-				{{ layoutHintText }}
-				<div class="hint__actions">
-					<button
-						class="hint__button"
-						@click="showLayoutHint=false, hintDismissed=true">
-						{{ t('spreed', 'Dismiss') }}
-					</button>
-					<button
-						class="hint__button primary"
-						@click="changeView">
-						{{ t('spreed', 'Use speaker view') }}
-					</button>
-				</div>
-			</div>
-		</Popover>
+		<Actions slot="trigger">
+			<ActionButton v-if="isInCall"
+				:icon="changeViewIconClass"
+				@click="changeView">
+				{{ changeViewText }}
+			</actionbutton>
+		</Actions>
 		<!-- sidebar toggle -->
 		<Actions
 			v-shortkey="['f']"
@@ -164,10 +143,8 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import CallButton from './CallButton'
-import { EventBus } from '../../services/EventBus'
 import BrowserStorage from '../../services/BrowserStorage'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
@@ -190,7 +167,6 @@ export default {
 		ActionInput,
 		ActionLink,
 		CallButton,
-		Popover,
 		ActionSeparator,
 	},
 
@@ -203,8 +179,6 @@ export default {
 
 	data() {
 		return {
-			showLayoutHint: false,
-			hintDismissed: false,
 			// The conversation's password
 			password: '',
 			// Switch for the password-editing operation
@@ -258,9 +232,6 @@ export default {
 			}
 		},
 
-		layoutHintText() {
-			return t('Spreed', 'Too many videos to fit in the window. Maximize the window or switch to "speaker view" for a better experience.')
-		},
 		isFileConversation() {
 			return this.conversation.objectType === 'file' && this.conversation.objectId
 		},
@@ -372,8 +343,6 @@ export default {
 		document.addEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.addEventListener('MSFullscreenChange', this.fullScreenChanged, false)
 		document.addEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
-		// Add call layout hint listener
-		EventBus.$on('toggleLayoutHint', this.handleToggleLayoutHint)
 	},
 
 	beforeDestroy() {
@@ -381,8 +350,6 @@ export default {
 		document.removeEventListener('mozfullscreenchange', this.fullScreenChanged, false)
 		document.removeEventListener('MSFullscreenChange', this.fullScreenChanged, false)
 		document.removeEventListener('webkitfullscreenchange', this.fullScreenChanged, false)
-		// Remove call layout hint listener
-		EventBus.$off('toggleLayoutHint', this.handleToggleLayoutHint)
 	},
 
 	methods: {
@@ -437,7 +404,6 @@ export default {
 		changeView() {
 			this.$store.dispatch('isGrid', !this.isGrid)
 			this.$store.dispatch('selectedVideoPeerId', null)
-			this.showLayoutHint = false
 		},
 		async toggleGuests() {
 			await this.$store.dispatch('toggleGuests', {
@@ -512,9 +478,6 @@ export default {
 			this.$store.dispatch('isRenamingConversation', true)
 			this.$store.dispatch('showSidebar')
 		},
-		handleToggleLayoutHint(display) {
-			this.showLayoutHint = display
-		},
 		forceMuteOthers() {
 			callParticipantCollection.callParticipantModels.forEach(callParticipantModel => {
 				callParticipantModel.forceMute()
@@ -551,18 +514,4 @@ export default {
 	}
 
 }
-
-.hint {
-	padding: 12px;
-	max-width: 300px;
-	text-align: left;
-	&__button {
-		height: $clickable-area;
-	}
-	&__actions{
-		display: flex;
-		justify-content: space-between;
-		padding-top:4px;
-	}
-}
 </style>

From 936f03088050f70d2083cd5ad525cc007536a333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Fri, 15 Jan 2021 12:54:25 +0100
Subject: [PATCH 14/14] Reset current page when switching between stripe and
 full grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 src/components/CallView/Grid/Grid.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index bb238ea2868..46327a4d6d3 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -411,6 +411,10 @@ export default {
 			console.debug('previousGridWidth: ', this.gridWidth, 'previousGridHeight: ', this.gridHeight)
 			console.debug('newGridWidth: ', this.gridWidth, 'newGridHeight: ', this.gridHeight)
 			this.$nextTick(this.makeGrid)
+
+			// Reset current page when switching between stripe and full grid,
+			// as the previous page is meaningless in the new mode.
+			this.currentPage = 0
 		},
 		sidebarStatus() {
 			// Handle the resize after the sidebar animation has completed