X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=1f24c898e31965054dfd54e2322ecbbb5d5a49b4;hb=33d21a9b47b983ee7a5c5ba6d8a416c35fe66cf9;hp=11b63297e62187e3bfa80eeda9c4286e90d1035a;hpb=0a6817f0ba29865576bb16e87fbf62679de885d7;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 11b63297e..1f24c898e 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -21,6 +21,7 @@ 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' @@ -28,7 +29,12 @@ 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, @@ -39,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 } @@ -54,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[] = [] @@ -70,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 = '' @@ -188,6 +200,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 () { @@ -270,23 +284,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) } @@ -294,6 +295,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 [] @@ -309,10 +317,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - onModalOpened () { - this.pausePlayer() - } - onVideoRemoved () { this.redirectService.redirectToHomepage() } @@ -389,6 +393,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 @@ -539,6 +548,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.videoCaptions = videoCaptions // Re init attributes + this.playerPlaceholderImgSrc = undefined this.descriptionLoading = false this.completeDescriptionShown = false this.completeVideoDescription = undefined @@ -562,16 +572,24 @@ 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) { - const videoState = this.video.state.id - if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) return - // 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') @@ -757,9 +775,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 } @@ -779,6 +799,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { common: { autoplay: this.isAutoplay(), nextVideo: () => this.zone.run(() => this.autoplayNext()), + previousVideo: () => this.zone.run(() => { + // FIXME: Only show if this is a playlist + if (this.playlist) this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo()) + }), playerElement: this.playerElement, onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element, @@ -804,6 +828,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ? this.videoService.getVideoViewUrl(video.uuid) : null, embedUrl: video.embedUrl, + embedTitle: video.name, isLive: video.isLive, @@ -816,7 +841,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy { serverUrl: environment.apiUrl, - videoCaptions: playerCaptions + videoCaptions: playerCaptions, + + videoUUID: video.uuid }, webtorrent: { @@ -856,24 +883,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()