X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=116139d473e372fa39db69415c3914904b069904;hb=7a9e9417c17f8a45a639e7c3f49d82f14985786e;hp=e4edb42fb893391aac6a73a671faa012ed345dab;hpb=a5cf76afa378aae81af2a9b0ce548e5d2582f832;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 e4edb42fb..116139d47 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -12,6 +12,7 @@ import { Notifier, PeerTubeSocket, RestExtractor, + ScreenService, ServerService, UserService } from '@app/core' @@ -20,13 +21,20 @@ import { RedirectService } from '@app/core/routing/redirect.service' import { isXPercentInViewport, scrollToTop } from '@app/helpers' import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main' import { VideoShareComponent } from '@app/shared/shared-share-modal' +import { SupportModalComponent } from '@app/shared/shared-support-modal' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' -import { VideoDownloadComponent } from '@app/shared/shared-video-miniature' +import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' import { MetaService } from '@ngx-meta/core' import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' +import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models' -import { getStoredP2PEnabled, getStoredTheater } from '../../../assets/player/peertube-player-local-storage' +import { + cleanupVideoWatch, + getStoredP2PEnabled, + getStoredTheater, + getStoredVideoWatchHistory +} from '../../../assets/player/peertube-player-local-storage' import { CustomizationOptions, P2PMediaLoaderOptions, @@ -37,7 +45,6 @@ import { } from '../../../assets/player/peertube-player-manager' import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' import { environment } from '../../../environments/environment' -import { VideoSupportComponent } from './modal/video-support.component' import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' type URLOptions = CustomizationOptions & { playerMode: PlayerMode } @@ -52,15 +59,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent - @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent + @ViewChild('supportModal') supportModal: SupportModalComponent @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent player: any playerElement: HTMLVideoElement + theaterEnabled = false + userRating: UserVideoRateType = null - descriptionLoading = false + + playerPlaceholderImgSrc: string video: VideoDetails = null videoCaptions: VideoCaption[] = [] @@ -68,13 +78,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy { playlistPosition: number playlist: VideoPlaylist = null + descriptionLoading = false completeDescriptionShown = false completeVideoDescription: string shortVideoDescription: string videoHTMLDescription = '' + likesBarTooltipText = '' + hasAlreadyAcceptedPrivacyConcern = false remoteServerDown = false + hotkeys: Hotkey[] = [] tooltipLike = '' @@ -82,6 +96,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { tooltipSupport = '' tooltipSaveToPlaylist = '' + videoActionsOptions: VideoActionsDisplayType = { + playlist: false, + download: true, + update: true, + blacklist: true, + delete: true, + report: true, + duplicate: true, + mute: true, + liveInfo: true + } + private nextVideoUuid = '' private nextVideoTitle = '' private currentTime: number @@ -113,14 +139,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private hotkeysService: HotkeysService, private hooks: HooksService, private peertubeSocket: PeerTubeSocket, + private screenService: ScreenService, private location: PlatformLocation, @Inject(LOCALE_ID) private localeId: string - ) { - this.tooltipLike = $localize`Like this video` - this.tooltipDislike = $localize`Dislike this video` - this.tooltipSupport = $localize`Support options for this video` - this.tooltipSaveToPlaylist = $localize`Save to playlist` - } + ) { } get user () { return this.authService.getUser() @@ -131,6 +153,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } async ngOnInit () { + // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover + if (this.user || !this.screenService.isInMobileView()) { + this.tooltipLike = $localize`Like this video` + this.tooltipDislike = $localize`Dislike this video` + this.tooltipSupport = $localize`Support options for this video` + this.tooltipSaveToPlaylist = $localize`Save to playlist` + } + PeertubePlayerManager.initState() this.serverConfig = this.serverService.getTmpConfig() @@ -158,7 +188,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }) this.queryParamsSub = this.route.queryParams.subscribe(queryParams => { - this.playlistPosition = queryParams[ 'playlistPosition' ] + // Handle the ?playlistPosition + const positionParam = queryParams[ 'playlistPosition' ] ?? 1 + + this.playlistPosition = positionParam === 'last' + ? -1 // Handle the "last" index + : parseInt(positionParam + '', 10) + + if (isNaN(this.playlistPosition)) { + console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`) + this.playlistPosition = 1 + } + this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition) const start = queryParams[ 'start' ] @@ -170,6 +211,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.theaterEnabled = getStoredTheater() this.hooks.runAction('action:video-watch.init', 'video-watch') + + setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI } ngOnDestroy () { @@ -226,7 +269,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } isVideoDownloadable () { - return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled + return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled && !this.video.isLive } loadCompleteDescription () { @@ -252,23 +295,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showSupportModal () { - // Check video was playing before opening support modal - const isVideoPlaying = this.isPlaying() - - this.pausePlayer() - - const modalRef = this.videoSupportModal.show() - - modalRef.result.then(() => { - if (isVideoPlaying) { - this.resumePlayer() - } - }) + this.supportModal.show() } showShareModal () { - this.pausePlayer() - this.videoShareModal.show(this.currentTime, this.videoWatchPlaylist.currentPlaylistPosition) } @@ -276,6 +306,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.authService.isLoggedIn() } + getVideoUrl () { + if (!this.video.url) { + return this.video.originInstanceUrl + VideoDetails.buildClientUrl(this.video.uuid) + } + return this.video.url + } + getVideoTags () { if (!this.video || Array.isArray(this.video.tags) === false) return [] @@ -291,10 +328,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - onModalOpened () { - this.pausePlayer() - } - onVideoRemoved () { this.redirectService.redirectToHomepage() } @@ -345,7 +378,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } handleTimestampClicked (timestamp: number) { - if (this.player) this.player.currentTime(timestamp) + if (!this.player || this.video.isLive) return + + this.player.currentTime(timestamp) scrollToTop() } @@ -369,6 +404,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.loadVideo(videoId) } + displayOtherVideosAsRow () { + // Use the same value as in the SASS file + return this.screenService.getWindowInnerWidth() <= 1100 + } + private loadVideo (videoId: string) { // Video did not change if (this.video && this.video.uuid === videoId) return @@ -389,7 +429,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoCaptionService.listCaptions(videoId) ]) .pipe( - // If 401, the video is private or blocked so redirect to 404 + // If 400, 403 or 404, the video is private or blocked so redirect to 404 catchError(err => { if (err.body.errorCode === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && err.body.originUrl) { const search = window.location.search @@ -400,13 +440,23 @@ export class VideoWatchComponent implements OnInit, OnDestroy { $localize`This video is not available on this instance. Do you want to be redirected on the origin instance: ${originUrl}?`, $localize`Redirection` ).then(res => { - if (res === false) return this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]) + if (res === false) { + return this.restExtractor.redirectTo404IfNotFound(err, 'video', [ + HttpStatusCode.BAD_REQUEST_400, + HttpStatusCode.FORBIDDEN_403, + HttpStatusCode.NOT_FOUND_404 + ]) + } return window.location.href = originUrl }) } - return this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]) + return this.restExtractor.redirectTo404IfNotFound(err, 'video', [ + HttpStatusCode.BAD_REQUEST_400, + HttpStatusCode.FORBIDDEN_403, + HttpStatusCode.NOT_FOUND_404 + ]) }) ) .subscribe(([ video, captionsResult ]) => { @@ -437,8 +487,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.playlistService.getVideoPlaylist(playlistId) .pipe( - // If 401, the video is private or blocked so redirect to 404 - catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ])) + // If 400 or 403, the video is private or blocked so redirect to 404 + catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'video', [ + HttpStatusCode.BAD_REQUEST_400, + HttpStatusCode.FORBIDDEN_403, + HttpStatusCode.NOT_FOUND_404 + ])) ) .subscribe(playlist => { this.playlist = playlist @@ -505,8 +559,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoCaptions = videoCaptions // Re init attributes + this.playerPlaceholderImgSrc = undefined this.descriptionLoading = false this.completeDescriptionShown = false + this.completeVideoDescription = undefined this.remoteServerDown = false this.currentTime = undefined @@ -518,12 +574,33 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (res === false) return this.location.back() } - const videoState = this.video.state.id - if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) return + this.buildPlayer(urlOptions) + .catch(err => console.error('Cannot build the player', err)) + + this.setVideoDescriptionHTML() + this.setVideoLikesBarTooltipText() + + this.setOpenGraphTags() + this.checkUserRating() + + const hookOptions = { + videojs, + video: this.video, + playlist: this.playlist + } + this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions) + } + private async buildPlayer (urlOptions: URLOptions) { // Flush old player if needed this.flushPlayer() + const videoState = this.video.state.id + if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) { + this.playerPlaceholderImgSrc = this.video.previewPath + return + } + // Build video element, because videojs removes it on dispose const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper') this.playerElement = document.createElement('video') @@ -533,7 +610,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const params = { video: this.video, - videoCaptions, + videoCaptions: this.videoCaptions, urlOptions, user: this.user } @@ -595,20 +672,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } }) + this.player.one('ended', () => { + if (this.video.isLive) { + this.zone.run(() => this.video.state.id = VideoState.LIVE_ENDED) + } + }) + 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, videojs, video: this.video }) }) - - this.setVideoDescriptionHTML() - this.setVideoLikesBarTooltipText() - - this.setOpenGraphTags() - this.checkUserRating() - - this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs }) } private autoplayNext () { @@ -711,9 +786,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const getStartTime = () => { const byUrl = urlOptions.startTime !== undefined const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined) + const byLocalStorage = getStoredVideoWatchHistory(video.uuid) if (byUrl) return timeToInt(urlOptions.startTime) if (byHistory) return video.userHistory.currentTime + if (byLocalStorage) return byLocalStorage.duration return 0 } @@ -758,6 +835,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ? this.videoService.getVideoViewUrl(video.uuid) : null, embedUrl: video.embedUrl, + embedTitle: video.name, + + isLive: video.isLive, language: this.localeId, @@ -768,7 +848,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, - videoCaptions: playerCaptions + videoCaptions: playerCaptions, + + videoUUID: video.uuid }, webtorrent: { @@ -776,6 +858,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } + // Only set this if we're in a playlist + if (this.playlist) { + options.common.previousVideo = () => { + this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo()) + } + } + let mode: PlayerMode if (urlOptions.playerMode) { @@ -808,45 +897,52 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return { playerMode: mode, playerOptions: options } } - private pausePlayer () { - if (!this.player) return + private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) { + if (!this.liveVideosSub) { + this.liveVideosSub = this.buildLiveEventsSubscription() + } + + if (oldVideo && oldVideo.id !== newVideo.id) { + await this.peertubeSocket.unsubscribeLiveVideos(oldVideo.id) + } - this.player.pause() - } + if (!newVideo.isLive) return - private resumePlayer () { - if (!this.player) return + await this.peertubeSocket.subscribeToLiveVideosSocket(newVideo.id) + } - this.player.play() + private buildLiveEventsSubscription () { + return this.peertubeSocket.getLiveVideosObservable() + .subscribe(({ type, payload }) => { + if (type === 'state-change') return this.handleLiveStateChange(payload.state) + if (type === 'views-change') return this.handleLiveViewsChange(payload.views) + }) } - private isPlaying () { - if (!this.player) return + private handleLiveStateChange (newState: VideoState) { + if (newState !== VideoState.PUBLISHED) return - return !this.player.paused() - } + const videoState = this.video.state.id + if (videoState !== VideoState.WAITING_FOR_LIVE && videoState !== VideoState.LIVE_ENDED) return - private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) { - if (!this.liveVideosSub) { - this.liveVideosSub = this.peertubeSocket.getLiveVideosObservable() - .subscribe(({ payload }) => { - if (payload.state !== VideoState.PUBLISHED || this.video.state.id !== VideoState.WAITING_FOR_LIVE) return + console.log('Loading video after live update.') - const videoUUID = this.video.uuid + const videoUUID = this.video.uuid - // Reset to refetch the video - this.video = undefined - this.loadVideo(videoUUID) - }) - } + // Reset to refetch the video + this.video = undefined + this.loadVideo(videoUUID) + } - if (oldVideo && oldVideo.id !== newVideo.id) { - await this.peertubeSocket.unsubscribeLiveVideos(oldVideo.id) + private handleLiveViewsChange (newViews: number) { + if (!this.video) { + console.error('Cannot update video live views because video is no defined.') + return } - if (!newVideo.isLive) return + console.log('Updating live views.') - await this.peertubeSocket.subscribeToLiveVideosSocket(newVideo.id) + this.video.views = newViews } private initHotkeys () {