X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=182703cdf4d5169537f5951adb0c7b0f8e86ea3c;hb=ea5cd0fa2cdc7655ed5ecf134dedd52400837ef2;hp=5750c5fca2996c3509bee02e77dc2ef88058b438;hpb=2b3b76abb0c363d85ff5c831afd541a9c6982e76;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 5750c5fca..182703cdf 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -1,12 +1,14 @@ import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { RedirectService } from '@app/core/routing/redirect.service' +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 { NotificationsService } from 'angular2-notifications' import { Subscription } from 'rxjs/Subscription' import * as videojs from 'video.js' import 'videojs-hotkeys' +import * as WebTorrent from 'webtorrent' import { UserVideoRateType, VideoRateType } from '../../../../../shared' import '../../../assets/player/peertube-videojs-plugin' import { AuthService, ConfirmService } from '../../core' @@ -19,6 +21,7 @@ import { MarkdownService } from '../shared' import { VideoDownloadComponent } from './modal/video-download.component' import { VideoReportComponent } from './modal/video-report.component' import { VideoShareComponent } from './modal/video-share.component' +import { getVideojsOptions } from '../../../assets/player/peertube-player' @Component({ selector: 'my-video-watch', @@ -35,12 +38,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { otherVideosDisplayed: Video[] = [] - error = false + syndicationItems = {} + player: videojs.Player playerElement: HTMLVideoElement userRating: UserVideoRateType = null video: VideoDetails = null - videoPlayerLoaded = false videoNotFound = false descriptionLoading = false @@ -49,8 +52,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { shortVideoDescription: string videoHTMLDescription = '' likesBarTooltipText = '' + hasAlreadyAcceptedPrivacyConcern = false - private hasAlreadyAcceptedPrivacyConcern = false private otherVideos: Video[] = [] private paramsSub: Subscription @@ -74,7 +77,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } ngOnInit () { - if (localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true') { + if ( + WebTorrent.WEBRTC_SUPPORT === false || + peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' + ) { this.hasAlreadyAcceptedPrivacyConcern = true } @@ -89,16 +95,21 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) this.paramsSub = this.route.params.subscribe(routeParams => { - if (this.videoPlayerLoaded) { + if (this.player) { this.player.pause() } const uuid = routeParams['uuid'] - // Video did not changed + // Video did not change if (this.video && this.video.uuid === uuid) return - + // Video did change this.videoService.getVideo(uuid).subscribe( - video => this.onVideoFetched(video), + video => { + const startTime = this.route.snapshot.queryParams.start + this.onVideoFetched(video, startTime) + .catch(err => this.handleError(err)) + this.generateSyndicationList() + }, error => { this.videoNotFound = true @@ -109,10 +120,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } ngOnDestroy () { - // Remove player if it exists - if (this.videoPlayerLoaded === true) { - videojs(this.playerElement).dispose() - } + this.flushPlayer() // Unsubscribe subscriptions this.paramsSub.unsubscribe() @@ -237,6 +245,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.tags.join(', ') } + generateSyndicationList () { + this.syndicationItems = this.videoService.getAccountFeedUrls(this.video.account.id) + } + isVideoRemovable () { return this.video.isRemovableBy(this.authService.getUser()) } @@ -260,6 +272,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } + acceptedPrivacyConcern () { + peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') + this.hasAlreadyAcceptedPrivacyConcern = true + } + private updateVideoDescription (description: string) { this.video.description = description this.setVideoDescriptionHTML() @@ -309,9 +326,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - private async onVideoFetched (video: VideoDetails) { + private async onVideoFetched (video: VideoDetails, startTime = 0) { this.video = video + // Re init attributes + this.descriptionLoading = false + this.completeDescriptionShown = false + this.updateOtherVideosDisplayed() if (this.video.isVideoNSFWForUser(this.user)) { @@ -322,68 +343,35 @@ export class VideoWatchComponent implements OnInit, OnDestroy { if (res === false) return this.redirectService.redirectToHomepage() } - // Player was already loaded - if (this.videoPlayerLoaded !== true) { - this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') - - // If autoplay is true, we don't really need a poster - if (this.isAutoplay() === false) { - this.playerElement.poster = this.video.previewUrl - } - - const videojsOptions = { - controls: true, - autoplay: this.isAutoplay(), - playbackRates: [ 0.5, 1, 1.5, 2 ], - plugins: { - peertube: { - videoFiles: this.video.files, - playerElement: this.playerElement, - videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), - videoDuration: this.video.duration - }, - hotkeys: { - enableVolumeScroll: false - } - }, - controlBar: { - children: [ - 'playToggle', - 'currentTimeDisplay', - 'timeDivider', - 'durationDisplay', - 'liveDisplay', - - 'flexibleWidthSpacer', - 'progressControl', - - 'webTorrentButton', - - 'playbackRateMenuButton', - - 'muteToggle', - 'volumeControl', - - 'resolutionMenuButton', - - 'fullscreenToggle' - ] - } - } - - this.videoPlayerLoaded = true + // Flush old player if needed + this.flushPlayer() + + // Build video element, because videojs remove it on dispose + const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper') + this.playerElement = document.createElement('video') + this.playerElement.className = 'video-js vjs-peertube-skin' + playerElementWrapper.appendChild(this.playerElement) + + const videojsOptions = getVideojsOptions({ + autoplay: this.isAutoplay(), + inactivityTimeout: 2500, + videoFiles: this.video.files, + playerElement: this.playerElement, + videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), + videoDuration: this.video.duration, + enableHotkeys: true, + peertubeLink: false, + poster: this.video.previewUrl, + startTime + }) - const self = this - this.zone.runOutsideAngular(() => { - videojs(this.playerElement, videojsOptions, function () { - self.player = this - this.on('customError', (event, data) => self.handleError(data.err)) - }) + const self = this + this.zone.runOutsideAngular(() => { + videojs(this.playerElement, videojsOptions, function () { + self.player = this + this.on('customError', (event, data) => self.handleError(data.err)) }) - } else { - const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) - this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) - } + }) this.setVideoDescriptionHTML() this.setVideoLikesBarTooltipText() @@ -471,8 +459,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.user.autoPlayVideo !== false } - private acceptedPrivacyConcern () { - localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') - this.hasAlreadyAcceptedPrivacyConcern = true + private flushPlayer () { + // Remove player if it exists + if (this.player) { + this.player.dispose() + this.player = undefined + } } }