Skip to content

Commit

Permalink
Merge pull request #4991 from nextcloud/backport/4958/stable20.1-enab…
Browse files Browse the repository at this point in the history 
…le-pagination-for-main-grid-view

[stable20.1] Enable pagination for main grid view
  • Loading branch information
@nickvergessen
nickvergessen authored Jan 22, 2021
2 parents 0fdce02 + 936f030 commit 47f1030
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 156 deletions.
162 changes: 64 additions & 98 deletions src/components/CallView/Grid/Grid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@

<template>
<div class="wrapper" :style="wrapperStyle">
<div :class="{'pagination-wrapper': isStripe, 'wrapper': !isStripe}">
<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
<div :class="{'stripe-wrapper': isStripe, 'wrapper': !isStripe}">
<button v-if="hasPreviousPage && gridWidth > 0 && showVideoOverlay"
class="grid-navigation grid-navigation__previous"
@click="handleClickPrevious">
<ChevronLeft decorative
Expand Down Expand Up @@ -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>
Expand All @@ -76,9 +65,20 @@
<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"
<button v-if="hasNextPage && gridWidth > 0 && showVideoOverlay"
class="grid-navigation grid-navigation__next"
@click="handleClickNext">
<ChevronRight decorative
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -227,15 +226,10 @@ 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
rows: 0,
// Grid pages at any given moment
numberOfPages: 0,
// The current page
currentPage: 0,
// Videos controls and name
Expand All @@ -257,25 +251,37 @@ export default {
}
},

// Number of video components (includes localvideo if not in dev mode)
// Number of video components (it does not include the local video)
videosCount() {
if (this.devMode || 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
},
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])
Expand All @@ -302,8 +308,15 @@ 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
},

// Grid pages at any given moment
numberOfPages() {
return Math.ceil(this.videosCount / this.slots)
},

// Hides or displays the `grid-navigation next` button
Expand Down Expand Up @@ -365,10 +378,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() {
Expand All @@ -380,12 +389,6 @@ export default {
// If the video array size changes, rebuild the grid
'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
}
},
// TODO: rebuild the grid to have optimal for last page
// Exception for when navigating in and away from the last page of the
Expand All @@ -408,30 +411,28 @@ 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) {
this.setNumberOfPages()
// Set the current page to 0
// TODO: add support for keeping position in the videos array when resizing
this.currentPage = 0
}

// 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
setTimeout(this.handleResize, 500)
},

numberOfPages() {
if (this.currentPage >= this.numberOfPages) {
this.currentPage = this.numberOfPages - 1
}
},
},

// bind event handlers to the `handleResize` method
mounted() {
window.addEventListener('resize', this.handleResize)
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
}
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
Expand All @@ -447,12 +448,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) {
this.setNumberOfPages()
// 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
Expand All @@ -464,7 +459,6 @@ export default {
if (this.videos.length === 0) {
this.columns = 0
this.rows = 0
this.displayedVideos = []
return
}

Expand All @@ -491,24 +485,6 @@ export default {
} else {
this.shrinkGrid(this.videosCount)
}
// Once the grid is done, populate it with video components
if (this.devMode || 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)
}
// 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)
}
}

},

// Fine tune the number of rows and columns of the grid
Expand All @@ -524,7 +500,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.
Expand Down Expand Up @@ -557,7 +533,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) {
Expand All @@ -570,7 +546,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) {
Expand All @@ -589,11 +565,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
Expand All @@ -605,23 +576,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() {
Expand Down Expand Up @@ -679,9 +640,9 @@ export default {
width: 300px;
}

.pagination-wrapper {
.stripe-wrapper {
width: calc(100% - 300px);
position:relative
position: relative;
}

.dev-mode-video {
Expand Down Expand Up @@ -734,7 +695,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;
Expand All @@ -754,6 +716,10 @@ export default {
}
}

.stripe-wrapper .grid-navigation {
top: 12px;
}

.pages-indicator {
position: absolute;
right: 50%;
Expand Down
Loading

0 comments on commit 47f1030

Please sign in to comment.