diff options
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.ts')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.ts | 106 |
1 files changed, 7 insertions, 99 deletions
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 bce652210..0532e7de7 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -8,7 +8,7 @@ import { MetaService } from '@ngx-meta/core' | |||
8 | import { Notifier, ServerService } from '@app/core' | 8 | import { Notifier, ServerService } from '@app/core' |
9 | import { forkJoin, Subscription } from 'rxjs' | 9 | import { forkJoin, Subscription } from 'rxjs' |
10 | import { Hotkey, HotkeysService } from 'angular2-hotkeys' | 10 | import { Hotkey, HotkeysService } from 'angular2-hotkeys' |
11 | import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared' | 11 | import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' |
12 | import { AuthService, ConfirmService } from '../../core' | 12 | import { AuthService, ConfirmService } from '../../core' |
13 | import { RestExtractor, VideoBlacklistService } from '../../shared' | 13 | import { RestExtractor, VideoBlacklistService } from '../../shared' |
14 | import { VideoDetails } from '../../shared/video/video-details.model' | 14 | import { VideoDetails } from '../../shared/video/video-details.model' |
@@ -27,9 +27,9 @@ import { | |||
27 | } from '../../../assets/player/peertube-player-manager' | 27 | } from '../../../assets/player/peertube-player-manager' |
28 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | 28 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' |
29 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | 29 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' |
30 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | ||
31 | import { Video } from '@app/shared/video/video.model' | 30 | import { Video } from '@app/shared/video/video.model' |
32 | import { isWebRTCDisabled } from '../../../assets/player/utils' | 31 | import { isWebRTCDisabled } from '../../../assets/player/utils' |
32 | import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component' | ||
33 | 33 | ||
34 | @Component({ | 34 | @Component({ |
35 | selector: 'my-video-watch', | 35 | selector: 'my-video-watch', |
@@ -39,6 +39,7 @@ import { isWebRTCDisabled } from '../../../assets/player/utils' | |||
39 | export class VideoWatchComponent implements OnInit, OnDestroy { | 39 | export class VideoWatchComponent implements OnInit, OnDestroy { |
40 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' | 40 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' |
41 | 41 | ||
42 | @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent | ||
42 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent | 43 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent |
43 | @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent | 44 | @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent |
44 | @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent | 45 | @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent |
@@ -51,14 +52,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
51 | descriptionLoading = false | 52 | descriptionLoading = false |
52 | 53 | ||
53 | playlist: VideoPlaylist = null | 54 | playlist: VideoPlaylist = null |
54 | playlistVideos: Video[] = [] | ||
55 | playlistPagination: ComponentPagination = { | ||
56 | currentPage: 1, | ||
57 | itemsPerPage: 30, | ||
58 | totalItems: null | ||
59 | } | ||
60 | noPlaylistVideos = false | ||
61 | currentPlaylistPosition = 1 | ||
62 | 55 | ||
63 | completeDescriptionShown = false | 56 | completeDescriptionShown = false |
64 | completeVideoDescription: string | 57 | completeVideoDescription: string |
@@ -230,10 +223,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
230 | return this.video.tags | 223 | return this.video.tags |
231 | } | 224 | } |
232 | 225 | ||
233 | isVideoRemovable () { | ||
234 | return this.video.isRemovableBy(this.authService.getUser()) | ||
235 | } | ||
236 | |||
237 | onVideoRemoved () { | 226 | onVideoRemoved () { |
238 | this.redirectService.redirectToHomepage() | 227 | this.redirectService.redirectToHomepage() |
239 | } | 228 | } |
@@ -247,10 +236,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
247 | return this.video && this.video.state.id === VideoState.TO_TRANSCODE | 236 | return this.video && this.video.state.id === VideoState.TO_TRANSCODE |
248 | } | 237 | } |
249 | 238 | ||
250 | isVideoDownloadable () { | ||
251 | return this.video && this.video.downloadEnabled | ||
252 | } | ||
253 | |||
254 | isVideoToImport () { | 239 | isVideoToImport () { |
255 | return this.video && this.video.state.id === VideoState.TO_IMPORT | 240 | return this.video && this.video.state.id === VideoState.TO_IMPORT |
256 | } | 241 | } |
@@ -263,36 +248,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
263 | return video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) | 248 | return video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) |
264 | } | 249 | } |
265 | 250 | ||
266 | isPlaylistOwned () { | ||
267 | return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.username | ||
268 | } | ||
269 | |||
270 | isUnlistedPlaylist () { | ||
271 | return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED | ||
272 | } | ||
273 | |||
274 | isPrivatePlaylist () { | ||
275 | return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE | ||
276 | } | ||
277 | |||
278 | isPublicPlaylist () { | ||
279 | return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC | ||
280 | } | ||
281 | |||
282 | onPlaylistVideosNearOfBottom () { | ||
283 | // Last page | ||
284 | if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return | ||
285 | |||
286 | this.playlistPagination.currentPage += 1 | ||
287 | this.loadPlaylistElements(false) | ||
288 | } | ||
289 | |||
290 | onElementRemoved (video: Video) { | ||
291 | this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id) | ||
292 | |||
293 | this.playlistPagination.totalItems-- | ||
294 | } | ||
295 | |||
296 | private loadVideo (videoId: string) { | 251 | private loadVideo (videoId: string) { |
297 | // Video did not change | 252 | // Video did not change |
298 | if (this.video && this.video.uuid === videoId) return | 253 | if (this.video && this.video.uuid === videoId) return |
@@ -333,33 +288,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
333 | this.playlist = playlist | 288 | this.playlist = playlist |
334 | 289 | ||
335 | const videoId = this.route.snapshot.queryParams['videoId'] | 290 | const videoId = this.route.snapshot.queryParams['videoId'] |
336 | this.loadPlaylistElements(!videoId) | 291 | this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId) |
337 | }) | 292 | }) |
338 | } | 293 | } |
339 | 294 | ||
340 | private loadPlaylistElements (redirectToFirst = false) { | ||
341 | this.videoService.getPlaylistVideos(this.playlist.uuid, this.playlistPagination) | ||
342 | .subscribe(({ totalVideos, videos }) => { | ||
343 | this.playlistVideos = this.playlistVideos.concat(videos) | ||
344 | this.playlistPagination.totalItems = totalVideos | ||
345 | |||
346 | if (totalVideos === 0) { | ||
347 | this.noPlaylistVideos = true | ||
348 | return | ||
349 | } | ||
350 | |||
351 | this.updatePlaylistIndex() | ||
352 | |||
353 | if (redirectToFirst) { | ||
354 | const extras = { | ||
355 | queryParams: { videoId: this.playlistVideos[ 0 ].uuid }, | ||
356 | replaceUrl: true | ||
357 | } | ||
358 | this.router.navigate([], extras) | ||
359 | } | ||
360 | }) | ||
361 | } | ||
362 | |||
363 | private updateVideoDescription (description: string) { | 295 | private updateVideoDescription (description: string) { |
364 | this.video.description = description | 296 | this.video.description = description |
365 | this.setVideoDescriptionHTML() | 297 | this.setVideoDescriptionHTML() |
@@ -421,7 +353,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
421 | this.remoteServerDown = false | 353 | this.remoteServerDown = false |
422 | this.currentTime = undefined | 354 | this.currentTime = undefined |
423 | 355 | ||
424 | this.updatePlaylistIndex() | 356 | this.videoWatchPlaylist.updatePlaylistIndex(video) |
425 | 357 | ||
426 | let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0) | 358 | let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0) |
427 | // If we are at the end of the video, reset the timer | 359 | // If we are at the end of the video, reset the timer |
@@ -519,13 +451,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
519 | 451 | ||
520 | this.player.one('ended', () => { | 452 | this.player.one('ended', () => { |
521 | if (this.playlist) { | 453 | if (this.playlist) { |
522 | this.zone.run(() => this.navigateToNextPlaylistVideo()) | 454 | this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) |
523 | } | 455 | } |
524 | }) | 456 | }) |
525 | 457 | ||
526 | this.player.one('stopped', () => { | 458 | this.player.one('stopped', () => { |
527 | if (this.playlist) { | 459 | if (this.playlist) { |
528 | this.zone.run(() => this.navigateToNextPlaylistVideo()) | 460 | this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) |
529 | } | 461 | } |
530 | }) | 462 | }) |
531 | 463 | ||
@@ -586,20 +518,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
586 | this.setVideoLikesBarTooltipText() | 518 | this.setVideoLikesBarTooltipText() |
587 | } | 519 | } |
588 | 520 | ||
589 | private updatePlaylistIndex () { | ||
590 | if (this.playlistVideos.length === 0 || !this.video) return | ||
591 | |||
592 | for (const video of this.playlistVideos) { | ||
593 | if (video.id === this.video.id) { | ||
594 | this.currentPlaylistPosition = video.playlistElement.position | ||
595 | return | ||
596 | } | ||
597 | } | ||
598 | |||
599 | // Load more videos to find our video | ||
600 | this.onPlaylistVideosNearOfBottom() | ||
601 | } | ||
602 | |||
603 | private setOpenGraphTags () { | 521 | private setOpenGraphTags () { |
604 | this.metaService.setTitle(this.video.name) | 522 | this.metaService.setTitle(this.video.name) |
605 | 523 | ||
@@ -639,14 +557,4 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
639 | this.player = undefined | 557 | this.player = undefined |
640 | } | 558 | } |
641 | } | 559 | } |
642 | |||
643 | private navigateToNextPlaylistVideo () { | ||
644 | if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { | ||
645 | const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1) | ||
646 | |||
647 | const start = next.playlistElement.startTimestamp | ||
648 | const stop = next.playlistElement.stopTimestamp | ||
649 | this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } }) | ||
650 | } | ||
651 | } | ||
652 | } | 560 | } |