X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=7a98cab3b09f5f1b03e17355b6b702df7c365f94;hb=db8b2f56c014a3fa207501f74e0bb5088ea41719;hp=33de901c02f9a24c4d42368e706d63ecf33fce35;hpb=f2eb23cd87cf32b8fe545178143b5f49e06a58da;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 33de901c0..7a98cab3b 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' @@ -25,6 +26,7 @@ import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/sha 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 { @@ -39,7 +41,6 @@ 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' -import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' type URLOptions = CustomizationOptions & { playerMode: PlayerMode } @@ -59,9 +60,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { player: any playerElement: HTMLVideoElement + theaterEnabled = false + userRating: UserVideoRateType = null - descriptionLoading = false + + playerPlaceholderImgSrc: string video: VideoDetails = null videoCaptions: VideoCaption[] = [] @@ -69,13 +73,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 = '' @@ -126,14 +134,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() @@ -144,6 +148,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() @@ -358,7 +370,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() } @@ -402,7 +416,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 @@ -414,9 +428,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { $localize`Redirection` ).then(res => { if (res === false) { - return this.restExtractor.redirectTo404IfNotFound(err, [ + return this.restExtractor.redirectTo404IfNotFound(err, 'video', [ HttpStatusCode.BAD_REQUEST_400, - HttpStatusCode.UNAUTHORIZED_401, HttpStatusCode.FORBIDDEN_403, HttpStatusCode.NOT_FOUND_404 ]) @@ -426,9 +439,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }) } - return this.restExtractor.redirectTo404IfNotFound(err, [ + return this.restExtractor.redirectTo404IfNotFound(err, 'video', [ HttpStatusCode.BAD_REQUEST_400, - HttpStatusCode.UNAUTHORIZED_401, HttpStatusCode.FORBIDDEN_403, HttpStatusCode.NOT_FOUND_404 ]) @@ -462,10 +474,9 @@ 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, [ + // 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.UNAUTHORIZED_401, HttpStatusCode.FORBIDDEN_403, HttpStatusCode.NOT_FOUND_404 ])) @@ -535,8 +546,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 @@ -548,12 +561,28 @@ 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() + this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs }) + } + + 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') @@ -563,7 +592,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const params = { video: this.video, - videoCaptions, + videoCaptions: this.videoCaptions, urlOptions, user: this.user } @@ -637,14 +666,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 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 () { @@ -866,21 +887,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) { if (!this.liveVideosSub) { - this.liveVideosSub = this.peertubeSocket.getLiveVideosObservable() - .subscribe(({ payload }) => { - if (payload.state !== VideoState.PUBLISHED) return - - const videoState = this.video.state.id - if (videoState !== VideoState.WAITING_FOR_LIVE && videoState !== VideoState.LIVE_ENDED) return - - console.log('Loading video after live update.') - - const videoUUID = this.video.uuid - - // Reset to refetch the video - this.video = undefined - this.loadVideo(videoUUID) - }) + this.liveVideosSub = this.buildLiveEventsSubscription() } if (oldVideo && oldVideo.id !== newVideo.id) { @@ -892,6 +899,40 @@ export class VideoWatchComponent implements OnInit, OnDestroy { await this.peertubeSocket.subscribeToLiveVideosSocket(newVideo.id) } + 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 handleLiveStateChange (newState: VideoState) { + if (newState !== VideoState.PUBLISHED) return + + const videoState = this.video.state.id + if (videoState !== VideoState.WAITING_FOR_LIVE && videoState !== VideoState.LIVE_ENDED) return + + console.log('Loading video after live update.') + + const videoUUID = this.video.uuid + + // Reset to refetch the video + this.video = undefined + this.loadVideo(videoUUID) + } + + private handleLiveViewsChange (newViews: number) { + if (!this.video) { + console.error('Cannot update video live views because video is no defined.') + return + } + + console.log('Updating live views.') + + this.video.views = newViews + } + private initHotkeys () { this.hotkeys = [ // These hotkeys are managed by the player