X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=a444dc51f8feea704e5b1b11423e7bf163ab5c4f;hb=72f611ca1549d711f8cbf5dd08a3f1562a32fabb;hp=7a98cab3b09f5f1b03e17355b6b702df7c365f94;hpb=c15d61f5fee4e7a1b5de4c6359ecbf28598a55ef;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 7a98cab3b..a444dc51f 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -9,8 +9,10 @@ import { AuthUser, ConfirmService, MarkdownService, + MetaService, Notifier, PeerTubeSocket, + PluginService, RestExtractor, ScreenService, ServerService, @@ -21,14 +23,27 @@ 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 { 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 { + HTMLServerConfig, + PeerTubeProblemDocument, + ServerErrorCode, + UserVideoRateType, + VideoCaption, + VideoPrivacy, + VideoState +} from '@shared/models' +import { + cleanupVideoWatch, + getStoredP2PEnabled, + getStoredTheater, + getStoredVideoWatchHistory +} from '../../../assets/player/peertube-player-local-storage' import { CustomizationOptions, P2PMediaLoaderOptions, @@ -39,7 +54,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 } @@ -54,7 +68,7 @@ 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 @@ -111,7 +125,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private configSub: Subscription private liveVideosSub: Subscription - private serverConfig: ServerConfig + private serverConfig: HTMLServerConfig constructor ( private elementRef: ElementRef, @@ -133,6 +147,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private videoCaptionService: VideoCaptionService, private hotkeysService: HotkeysService, private hooks: HooksService, + private pluginService: PluginService, private peertubeSocket: PeerTubeSocket, private screenService: ScreenService, private location: PlatformLocation, @@ -158,21 +173,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { PeertubePlayerManager.initState() - this.serverConfig = this.serverService.getTmpConfig() - - this.configSub = this.serverService.getConfig() - .subscribe(config => { - this.serverConfig = config - - if ( - isWebRTCDisabled() || - this.serverConfig.tracker.enabled === false || - getStoredP2PEnabled() === false || - peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' - ) { - this.hasAlreadyAcceptedPrivacyConcern = true - } - }) + this.serverConfig = this.serverService.getHTMLConfig() + if ( + isWebRTCDisabled() || + this.serverConfig.tracker.enabled === false || + getStoredP2PEnabled() === false || + peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' + ) { + this.hasAlreadyAcceptedPrivacyConcern = true + } this.paramsSub = this.route.params.subscribe(routeParams => { const videoId = routeParams[ 'videoId' ] @@ -183,7 +192,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' ] @@ -195,6 +215,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 () { @@ -277,23 +299,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) } @@ -301,6 +310,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 [] @@ -316,10 +332,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - onModalOpened () { - this.pausePlayer() - } - onVideoRemoved () { this.redirectService.redirectToHomepage() } @@ -396,6 +408,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 @@ -418,9 +435,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { .pipe( // 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 errorBody = err.body as PeerTubeProblemDocument + + if (errorBody.code === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && errorBody.originUrl) { const search = window.location.search - let originUrl = err.body.originUrl + let originUrl = errorBody.originUrl if (search) originUrl += search this.confirmService.confirm( @@ -496,7 +515,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private async setVideoDescriptionHTML () { const html = await this.markdownService.textMarkdownToHTML(this.video.description) - this.videoHTMLDescription = await this.markdownService.processVideoTimestamps(html) + this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html) } private setVideoLikesBarTooltipText () { @@ -570,7 +589,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.setOpenGraphTags() this.checkUserRating() - this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs }) + 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) { @@ -656,7 +680,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.player.one('ended', () => { if (this.video.isLive) { - this.video.state.id = VideoState.LIVE_ENDED + this.zone.run(() => this.video.state.id = VideoState.LIVE_ENDED) } }) @@ -672,7 +696,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (this.playlist) { this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo()) } else if (this.nextVideoUuid) { - this.router.navigate([ '/videos/watch', this.nextVideoUuid ]) + this.router.navigate([ '/w', this.nextVideoUuid ]) } } @@ -768,9 +792,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 } @@ -815,6 +841,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ? this.videoService.getVideoViewUrl(video.uuid) : null, embedUrl: video.embedUrl, + embedTitle: video.name, isLive: video.isLive, @@ -827,11 +854,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, - videoCaptions: playerCaptions + videoCaptions: playerCaptions, + + videoUUID: video.uuid }, webtorrent: { videoFiles: video.files + }, + + pluginsManager: this.pluginService.getPluginsManager() + } + + // Only set this if we're in a playlist + if (this.playlist) { + options.common.previousVideo = () => { + this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo()) } } @@ -867,24 +905,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return { playerMode: mode, playerOptions: options } } - private pausePlayer () { - if (!this.player) return - - this.player.pause() - } - - private resumePlayer () { - if (!this.player) return - - this.player.play() - } - - private isPlaying () { - if (!this.player) return - - return !this.player.paused() - } - private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) { if (!this.liveVideosSub) { this.liveVideosSub = this.buildLiveEventsSubscription()