aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-19 17:16:34 +0100
committerChocobozzz <me@florianbigard.com>2018-03-19 17:16:53 +0100
commitcaae7a0671df4cd513043ccf9c0b8a8d4b58845c (patch)
tree2fc61c8ff8961fb36ed75ae3dcb7b6adaee57bbf
parent6194c1b41902e1d4907d192df80d454ae580884b (diff)
downloadPeerTube-caae7a0671df4cd513043ccf9c0b8a8d4b58845c.tar.gz
PeerTube-caae7a0671df4cd513043ccf9c0b8a8d4b58845c.tar.zst
PeerTube-caae7a0671df4cd513043ccf9c0b8a8d4b58845c.zip
Better handling video resizing
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts23
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts3
2 files changed, 16 insertions, 10 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 7235b3425..570aaae9d 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router'
3import { isInMobileView } from '@app/shared/misc/utils' 3import { isInMobileView } from '@app/shared/misc/utils'
4import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' 4import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
5import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
6import 'rxjs/add/operator/debounceTime'
6import { Observable } from 'rxjs/Observable' 7import { Observable } from 'rxjs/Observable'
7import { fromEvent } from 'rxjs/observable/fromEvent' 8import { fromEvent } from 'rxjs/observable/fromEvent'
8import { AuthService } from '../../core/auth' 9import { AuthService } from '../../core/auth'
@@ -25,9 +26,9 @@ export abstract class AbstractVideoList implements OnInit {
25 defaultSort: SortField = '-createdAt' 26 defaultSort: SortField = '-createdAt'
26 loadOnInit = true 27 loadOnInit = true
27 pageHeight: number 28 pageHeight: number
28 videoWidth = 215 29 videoWidth: number
29 videoHeight = 230 30 videoHeight: number
30 videoPages: Video[][] 31 videoPages: Video[][] = []
31 32
32 protected abstract notificationsService: NotificationsService 33 protected abstract notificationsService: NotificationsService
33 protected abstract authService: AuthService 34 protected abstract authService: AuthService
@@ -174,23 +175,27 @@ export abstract class AbstractVideoList implements OnInit {
174 this.videoWidth = -1 175 this.videoWidth = -1
175 this.pageHeight = this.pagination.itemsPerPage * this.videoHeight 176 this.pageHeight = this.pagination.itemsPerPage * this.videoHeight
176 } else { 177 } else {
178 this.videoWidth = 215
179 this.videoHeight = 230
180
177 const videosWidth = this.videosElement.nativeElement.offsetWidth 181 const videosWidth = this.videosElement.nativeElement.offsetWidth
178 this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE 182 this.pagination.itemsPerPage = Math.floor(videosWidth / this.videoWidth) * AbstractVideoList.LINES_PER_PAGE
179 this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE 183 this.pageHeight = this.videoHeight * AbstractVideoList.LINES_PER_PAGE
180 } 184 }
181 185
182 // Rebuild pages because maybe we modified the number of items per page 186 // Rebuild pages because maybe we modified the number of items per page
183 let videos: Video[] = [] 187 const videos = [].concat(...this.videoPages)
184 Object.values(this.loadedPages)
185 .forEach(videosPage => videos = videos.concat(videosPage))
186 this.loadedPages = {} 188 this.loadedPages = {}
187 189
188 for (let i = 1; (i * this.pagination.itemsPerPage) <= videos.length; i++) { 190 let i = 1
189 this.loadedPages[i] = videos.slice((i - 1) * this.pagination.itemsPerPage, this.pagination.itemsPerPage * i) 191 // Don't include the last page if it not complete
192 while (videos.length >= this.pagination.itemsPerPage && i < 10000) { // 10000 -> Hard limit in case of infinite loop
193 this.loadedPages[i] = videos.splice(0, this.pagination.itemsPerPage)
194 i++
190 } 195 }
191 196
192 this.buildVideoPages() 197 this.buildVideoPages()
193 198
194 console.log('Re calculated pages after a resize!') 199 console.log('Rebuilt pages with %s elements per page.', this.pagination.itemsPerPage)
195 } 200 }
196} 201}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 7951e3927..b60e58fb0 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -7,6 +7,7 @@ import { NotificationsService } from 'angular2-notifications'
7import { Subscription } from 'rxjs/Subscription' 7import { Subscription } from 'rxjs/Subscription'
8import * as videojs from 'video.js' 8import * as videojs from 'video.js'
9import 'videojs-hotkeys' 9import 'videojs-hotkeys'
10import * as WebTorrent from 'webtorrent'
10import { UserVideoRateType, VideoRateType } from '../../../../../shared' 11import { UserVideoRateType, VideoRateType } from '../../../../../shared'
11import '../../../assets/player/peertube-videojs-plugin' 12import '../../../assets/player/peertube-videojs-plugin'
12import { AuthService, ConfirmService } from '../../core' 13import { AuthService, ConfirmService } from '../../core'
@@ -74,7 +75,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
74 } 75 }
75 76
76 ngOnInit () { 77 ngOnInit () {
77 if (localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true') { 78 if (WebTorrent.WEBRTC_SUPPORT === false || localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true') {
78 this.hasAlreadyAcceptedPrivacyConcern = true 79 this.hasAlreadyAcceptedPrivacyConcern = true
79 } 80 }
80 81