X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=0007331f8651d53a792b862ae7dc1cd68717439f;hb=f56ebb3616606e678b25d8064696c75655dcd2ed;hp=adb728abae9db7f57519ecae890573afef3ece1d;hpb=bce47964f6241ae56f61089d144b29eb9b5da6d3;p=github%2FChocobozzz%2FPeerTube.git 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 adb728aba..0007331f8 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -6,23 +6,22 @@ import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage' import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component' import { MetaService } from '@ngx-meta/core' import { Notifier, ServerService } from '@app/core' -import { forkJoin, Subscription } from 'rxjs' +import { forkJoin, Observable, Subscription } from 'rxjs' import { Hotkey, HotkeysService } from 'angular2-hotkeys' -import { UserVideoRateType, VideoCaption, VideoPlaylistPrivacy, VideoPrivacy, VideoState } from '../../../../../shared' +import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared' import { AuthService, ConfirmService } from '../../core' import { RestExtractor, VideoBlacklistService } from '../../shared' import { VideoDetails } from '../../shared/video/video-details.model' import { VideoService } from '../../shared/video/video.service' -import { VideoDownloadComponent } from './modal/video-download.component' -import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' -import { VideoBlacklistComponent } from './modal/video-blacklist.component' import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component' import { I18n } from '@ngx-translate/i18n-polyfill' import { environment } from '../../../environments/environment' import { VideoCaptionService } from '@app/shared/video-caption' import { MarkdownService } from '@app/shared/renderer' import { + videojs, + CustomizationOptions, P2PMediaLoaderOptions, PeertubePlayerManager, PeertubePlayerManagerOptions, @@ -30,8 +29,14 @@ import { } from '../../../assets/player/peertube-player-manager' import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' -import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { Video } from '@app/shared/video/video.model' +import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' +import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component' +import { getStoredTheater } from '../../../assets/player/peertube-player-local-storage' +import { PluginService } from '@app/core/plugins/plugin.service' +import { HooksService } from '@app/core/plugins/hooks.service' +import { PlatformLocation } from '@angular/common' +import { randomInt } from '@shared/core-utils/miscs/miscs' @Component({ selector: 'my-video-watch', @@ -41,28 +46,21 @@ import { Video } from '@app/shared/video/video.model' export class VideoWatchComponent implements OnInit, OnDestroy { private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' - @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent - @ViewChild('videoShareModal') videoShareModal: VideoShareComponent - @ViewChild('videoReportModal') videoReportModal: VideoReportComponent - @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent - @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent - @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent + @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent + @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent + @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent + @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent player: any playerElement: HTMLVideoElement + theaterEnabled = false userRating: UserVideoRateType = null - video: VideoDetails = null descriptionLoading = false + video: VideoDetails = null + videoCaptions: VideoCaption[] = [] + playlist: VideoPlaylist = null - playlistVideos: Video[] = [] - playlistPagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: 30, - totalItems: null - } - noPlaylistVideos = false - currentPlaylistPosition = 1 completeDescriptionShown = false completeVideoDescription: string @@ -73,9 +71,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { remoteServerDown = false hotkeys: Hotkey[] + private nextVideoUuid = '' private currentTime: number private paramsSub: Subscription private queryParamsSub: Subscription + private configSub: Subscription constructor ( private elementRef: ElementRef, @@ -91,12 +91,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private serverService: ServerService, private restExtractor: RestExtractor, private notifier: Notifier, + private pluginService: PluginService, private markdownService: MarkdownService, private zone: NgZone, private redirectService: RedirectService, private videoCaptionService: VideoCaptionService, private i18n: I18n, private hotkeysService: HotkeysService, + private hooks: HooksService, + private location: PlatformLocation, @Inject(LOCALE_ID) private localeId: string ) {} @@ -104,13 +107,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.authService.getUser() } - ngOnInit () { - if ( - !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false || - peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' - ) { - this.hasAlreadyAcceptedPrivacyConcern = true - } + async ngOnInit () { + this.configSub = this.serverService.configLoaded + .subscribe(() => { + if ( + isWebRTCDisabled() || + this.serverService.getConfig().tracker.enabled === false || + peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' + ) { + this.hasAlreadyAcceptedPrivacyConcern = true + } + }) this.paramsSub = this.route.params.subscribe(routeParams => { const videoId = routeParams[ 'videoId' ] @@ -125,23 +132,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (videoId) this.loadVideo(videoId) }) - this.hotkeys = [ - new Hotkey('shift+l', (event: KeyboardEvent): boolean => { - this.setLike() - return false - }, undefined, this.i18n('Like the video')), - new Hotkey('shift+d', (event: KeyboardEvent): boolean => { - this.setDislike() - return false - }, undefined, this.i18n('Dislike the video')), - new Hotkey('shift+s', (event: KeyboardEvent): boolean => { - this.subscribeButton.subscribed ? - this.subscribeButton.unsubscribe() : - this.subscribeButton.subscribe() - return false - }, undefined, this.i18n('Subscribe to the account')) - ] - if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys) + this.initHotkeys() + + this.theaterEnabled = getStoredTheater() + + this.hooks.runAction('action:video-watch.init', 'video-watch') } ngOnDestroy () { @@ -157,22 +152,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { setLike () { if (this.isUserLoggedIn() === false) return - if (this.userRating === 'like') { - // Already liked this video - this.setRating('none') - } else { - this.setRating('like') - } + + // Already liked this video + if (this.userRating === 'like') this.setRating('none') + else this.setRating('like') } setDislike () { if (this.isUserLoggedIn() === false) return - if (this.userRating === 'dislike') { - // Already disliked this video - this.setRating('none') - } else { - this.setRating('dislike') - } + + // Already disliked this video + if (this.userRating === 'dislike') this.setRating('none') + else this.setRating('dislike') } showMoreDescription () { @@ -211,94 +202,41 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - showReportModal (event: Event) { - event.preventDefault() - this.videoReportModal.show() - } - showSupportModal () { + this.pausePlayer() + this.videoSupportModal.show() } showShareModal () { - this.videoShareModal.show(this.currentTime) - } - - showDownloadModal (event: Event) { - event.preventDefault() - this.videoDownloadModal.show() - } + this.pausePlayer() - showBlacklistModal (event: Event) { - event.preventDefault() - this.videoBlacklistModal.show() - } - - async unblacklistVideo (event: Event) { - event.preventDefault() - - const confirmMessage = this.i18n( - 'Do you really want to remove this video from the blacklist? It will be available again in the videos list.' - ) - - const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist')) - if (res === false) return - - this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe( - () => { - this.notifier.success(this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })) - - this.video.blacklisted = false - this.video.blacklistedReason = null - }, - - err => this.notifier.error(err.message) - ) + this.videoShareModal.show(this.currentTime) } isUserLoggedIn () { return this.authService.isLoggedIn() } - isVideoUpdatable () { - return this.video.isUpdatableBy(this.authService.getUser()) - } - - isVideoBlacklistable () { - return this.video.isBlackistableBy(this.user) - } - - isVideoUnblacklistable () { - return this.video.isUnblacklistableBy(this.user) - } - getVideoTags () { if (!this.video || Array.isArray(this.video.tags) === false) return [] return this.video.tags } - isVideoRemovable () { - return this.video.isRemovableBy(this.authService.getUser()) + onRecommendations (videos: Video[]) { + if (videos.length > 0) { + // Pick a random video until the recommendations are improved + this.nextVideoUuid = videos[randomInt(0,videos.length - 1)].uuid + } } - async removeVideo (event: Event) { - event.preventDefault() - - const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete')) - if (res === false) return - - this.videoService.removeVideo(this.video.id) - .subscribe( - () => { - this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })) - - // Go back to the video-list. - this.redirectService.redirectToHomepage() - }, + onModalOpened () { + this.pausePlayer() + } - error => this.notifier.error(error.message) - ) + onVideoRemoved () { + this.redirectService.redirectToHomepage() } acceptedPrivacyConcern () { @@ -310,10 +248,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video.state.id === VideoState.TO_TRANSCODE } - isVideoDownloadable () { - return this.video && this.video.downloadEnabled - } - isVideoToImport () { return this.video && this.video.state.id === VideoState.TO_IMPORT } @@ -326,59 +260,45 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return video.isVideoNSFWForUser(this.user, this.serverService.getConfig()) } - isPlaylistOwned () { - return this.playlist.isLocal === true && this.playlist.ownerAccount.name === this.user.username - } - - isUnlistedPlaylist () { - return this.playlist.privacy.id === VideoPlaylistPrivacy.UNLISTED - } - - isPrivatePlaylist () { - return this.playlist.privacy.id === VideoPlaylistPrivacy.PRIVATE - } - - isPublicPlaylist () { - return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC - } - - onPlaylistVideosNearOfBottom () { - // Last page - if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return - - this.playlistPagination.currentPage += 1 - this.loadPlaylistElements(false) - } - - onElementRemoved (video: Video) { - this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id) - - this.playlistPagination.totalItems-- - } - private loadVideo (videoId: string) { // Video did not change if (this.video && this.video.uuid === videoId) return if (this.player) this.player.pause() + const videoObs = this.hooks.wrapObsFun( + this.videoService.getVideo.bind(this.videoService), + { videoId }, + 'video-watch', + 'filter:api.video-watch.video.get.params', + 'filter:api.video-watch.video.get.result' + ) + // Video did change - forkJoin( - this.videoService.getVideo(videoId), + forkJoin([ + videoObs, this.videoCaptionService.listCaptions(videoId) - ) + ]) .pipe( // If 401, the video is private or blacklisted so redirect to 404 catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ])) ) .subscribe(([ video, captionsResult ]) => { const queryParams = this.route.snapshot.queryParams - const startTime = queryParams.start - const stopTime = queryParams.stop - const subtitle = queryParams.subtitle - const playerMode = queryParams.mode - this.onVideoFetched(video, captionsResult.data, { startTime, stopTime, subtitle, playerMode }) + const urlOptions = { + startTime: queryParams.start, + stopTime: queryParams.stop, + + muted: queryParams.muted, + loop: queryParams.loop, + subtitle: queryParams.subtitle, + + playerMode: queryParams.mode, + peertubeLink: false + } + + this.onVideoFetched(video, captionsResult.data, urlOptions) .catch(err => this.handleError(err)) }) } @@ -396,36 +316,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.playlist = playlist const videoId = this.route.snapshot.queryParams['videoId'] - this.loadPlaylistElements(!videoId) + this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId) }) } - private loadPlaylistElements (redirectToFirst = false) { - this.videoService.getPlaylistVideos(this.playlist.uuid, this.playlistPagination) - .subscribe(({ totalVideos, videos }) => { - this.playlistVideos = this.playlistVideos.concat(videos) - this.playlistPagination.totalItems = totalVideos - - if (totalVideos === 0) { - this.noPlaylistVideos = true - return - } - - this.updatePlaylistIndex() - - if (redirectToFirst) { - const extras = { - queryParams: { videoId: this.playlistVideos[ 0 ].uuid }, - replaceUrl: true - } - this.router.navigate([], extras) - } - }) - } - private updateVideoDescription (description: string) { this.video.description = description this.setVideoDescriptionHTML() + .catch(err => console.error(err)) } private async setVideoDescriptionHTML () { @@ -474,9 +372,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private async onVideoFetched ( video: VideoDetails, videoCaptions: VideoCaption[], - urlOptions: { startTime?: number, stopTime?: number, subtitle?: string, playerMode?: string } + urlOptions: CustomizationOptions & { playerMode: PlayerMode } ) { this.video = video + this.videoCaptions = videoCaptions // Re init attributes this.descriptionLoading = false @@ -484,9 +383,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.remoteServerDown = false this.currentTime = undefined - this.updatePlaylistIndex() + this.videoWatchPlaylist.updatePlaylistIndex(video) - let startTime = urlOptions.startTime || (this.video.userHistory ? this.video.userHistory.currentTime : 0) + let startTime = timeToInt(urlOptions.startTime) || (this.video.userHistory ? this.video.userHistory.currentTime : 0) // If we are at the end of the video, reset the timer if (this.video.duration - startTime <= 1) startTime = 0 @@ -495,13 +394,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'), this.i18n('Mature or explicit content') ) - if (res === false) return this.redirectService.redirectToHomepage() + if (res === false) return this.location.back() } // Flush old player if needed this.flushPlayer() - // Build video element, because videojs remove it on dispose + // Build video element, because videojs removes it on dispose const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper') this.playerElement = document.createElement('video') this.playerElement.className = 'video-js vjs-peertube-skin' @@ -525,20 +424,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy { enableHotkeys: true, inactivityTimeout: 2500, poster: this.video.previewUrl, + startTime, stopTime: urlOptions.stopTime, + controls: urlOptions.controls, + muted: urlOptions.muted, + loop: urlOptions.loop, + subtitle: urlOptions.subtitle, + + peertubeLink: urlOptions.peertubeLink, theaterMode: true, captions: videoCaptions.length !== 0, - peertubeLink: false, - videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null, + videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE + ? this.videoService.getVideoViewUrl(this.video.uuid) + : null, embedUrl: this.video.embedUrl, language: this.localeId, - subtitle: urlOptions.subtitle, - userWatching: this.user && this.user.videosHistoryEnabled === true ? { url: this.videoService.getUserWatchingVideoUrl(this.video.uuid), authorizationHeader: this.authService.getRequestHeaderValue() @@ -554,7 +459,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - const mode: PlayerMode = urlOptions.playerMode === 'p2p-media-loader' ? 'p2p-media-loader' : 'webtorrent' + let mode: PlayerMode + + if (urlOptions.playerMode) { + if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader' + else mode = 'webtorrent' + } else { + if (this.video.hasHlsPlaylist()) mode = 'p2p-media-loader' + else mode = 'webtorrent' + } if (mode === 'p2p-media-loader') { const hlsPlaylist = this.video.getHlsPlaylist() @@ -564,14 +477,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy { segmentsSha256Url: hlsPlaylist.segmentsSha256Url, redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl), trackerAnnounce: this.video.trackerUrls, - videoFiles: this.video.files + videoFiles: hlsPlaylist.files } as P2PMediaLoaderOptions Object.assign(options, { p2pMediaLoader }) } this.zone.runOutsideAngular(async () => { - this.player = await PeertubePlayerManager.initialize(mode, options) + this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player) + this.player.focus() + this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) this.player.on('timeupdate', () => { @@ -580,15 +495,23 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.player.one('ended', () => { if (this.playlist) { - this.zone.run(() => this.navigateToNextPlaylistVideo()) + this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) + } else if (this.user && this.user.autoPlayNextVideo) { + this.zone.run(() => this.autoplayNext()) } }) this.player.one('stopped', () => { if (this.playlist) { - this.zone.run(() => this.navigateToNextPlaylistVideo()) + this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } }) + + this.player.on('theaterChange', (_: any, enabled: boolean) => { + this.zone.run(() => this.theaterEnabled = enabled) + }) + + this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player }) }) this.setVideoDescriptionHTML() @@ -596,23 +519,24 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setOpenGraphTags() this.checkUserRating() + + this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs }) + } + + private autoplayNext () { + if (this.nextVideoUuid) { + this.router.navigate([ '/videos/watch', this.nextVideoUuid ]) + } } private setRating (nextRating: UserVideoRateType) { - let method - switch (nextRating) { - case 'like': - method = this.videoService.setVideoLike - break - case 'dislike': - method = this.videoService.setVideoDislike - break - case 'none': - method = this.videoService.unsetVideoLike - break + const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable } = { + like: this.videoService.setVideoLike, + dislike: this.videoService.setVideoDislike, + none: this.videoService.unsetVideoLike } - method.call(this.videoService, this.video.id) + ratingMethods[nextRating].call(this.videoService, this.video.id) .subscribe( () => { // Update the video like attribute @@ -643,20 +567,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setVideoLikesBarTooltipText() } - private updatePlaylistIndex () { - if (this.playlistVideos.length === 0 || !this.video) return - - for (const video of this.playlistVideos) { - if (video.id === this.video.id) { - this.currentPlaylistPosition = video.playlistElement.position - return - } - } - - // Load more videos to find our video - this.onPlaylistVideosNearOfBottom() - } - private setOpenGraphTags () { this.metaService.setTitle(this.video.name) @@ -692,18 +602,38 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private flushPlayer () { // Remove player if it exists if (this.player) { - this.player.dispose() - this.player = undefined + try { + this.player.dispose() + this.player = undefined + } catch (err) { + console.error('Cannot dispose player.', err) + } } } - private navigateToNextPlaylistVideo () { - if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { - const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1) + private initHotkeys () { + this.hotkeys = [ + new Hotkey('shift+l', () => { + this.setLike() + return false + }, undefined, this.i18n('Like the video')), - const start = next.playlistElement.startTimestamp - const stop = next.playlistElement.stopTimestamp - this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } }) - } + new Hotkey('shift+d', () => { + this.setDislike() + return false + }, undefined, this.i18n('Dislike the video')), + + new Hotkey('shift+s', () => { + this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe() + return false + }, undefined, this.i18n('Subscribe to the account')) + ] + if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys) + } + + private pausePlayer () { + if (!this.player) return + + this.player.pause() } }