X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2Fvideo-watch%2Fvideo-watch.component.ts;h=db3e1cdd6e9f3795c9dc128121b4b9701c9661bd;hb=2ed6a0aedc2d2f6b1ac2fd9a1ac137772831f713;hp=34dbc9a8863d7041edd853b546038f4af9ec34bc;hpb=80624154988f6270a353269c5e76f334e631b349;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 34dbc9a88..db3e1cdd6 100644 --- a/client/src/app/videos/video-watch/video-watch.component.ts +++ b/client/src/app/videos/video-watch/video-watch.component.ts @@ -4,7 +4,9 @@ import { Observable } from 'rxjs/Observable' import { Subscription } from 'rxjs/Subscription' import videojs from 'video.js' -import { MetaService } from '@nglibs/meta' +import '../../../assets/player/peertube-videojs-plugin' + +import { MetaService } from '@ngx-meta/core' import { NotificationsService } from 'angular2-notifications' import { AuthService, ConfirmService } from '../../core' @@ -13,7 +15,7 @@ import { VideoShareComponent } from './video-share.component' import { VideoReportComponent } from './video-report.component' import { Video, VideoService } from '../shared' import { WebTorrentService } from './webtorrent.service' -import { UserVideoRateType, VideoRateType, UserVideoRate } from '../../../../../shared' +import { UserVideoRateType, VideoRateType } from '../../../../../shared' @Component({ selector: 'my-video-watch', @@ -21,8 +23,6 @@ import { UserVideoRateType, VideoRateType, UserVideoRate } from '../../../../../ styleUrls: [ './video-watch.component.scss' ] }) export class VideoWatchComponent implements OnInit, OnDestroy { - private static LOADTIME_TOO_LONG = 20000 - @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent @ViewChild('videoReportModal') videoReportModal: VideoReportComponent @@ -32,35 +32,29 @@ export class VideoWatchComponent implements OnInit, OnDestroy { loading = false numPeers: number player: videojs.Player - playerElement: Element + playerElement: HTMLMediaElement uploadSpeed: number userRating: UserVideoRateType = null video: Video = null videoNotFound = false - private errorTimer: number private paramsSub: Subscription - private errorsSub: Subscription - private warningsSub: Subscription - private torrentInfosInterval: number constructor ( private elementRef: ElementRef, - private ngZone: NgZone, private route: ActivatedRoute, private router: Router, private videoService: VideoService, private confirmService: ConfirmService, private metaService: MetaService, - private webTorrentService: WebTorrentService, private authService: AuthService, private notificationsService: NotificationsService ) {} ngOnInit () { this.paramsSub = this.route.params.subscribe(routeParams => { - let id = routeParams['id'] - this.videoService.getVideo(id).subscribe( + let uuid = routeParams['uuid'] + this.videoService.getVideo(uuid).subscribe( video => this.onVideoFetched(video), error => { @@ -69,73 +63,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } ) }) - - this.playerElement = this.elementRef.nativeElement.querySelector('#video-container') - - const videojsOptions = { - controls: true, - autoplay: false - } - - const self = this - videojs(this.playerElement, videojsOptions, function () { - self.player = this - }) - - this.errorsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.error('Error', err.message)) - this.warningsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.alert('Warning', err.message)) } ngOnDestroy () { - // Remove WebTorrent stuff - console.log('Removing video from webtorrent.') - window.clearInterval(this.torrentInfosInterval) - window.clearTimeout(this.errorTimer) - - if (this.video !== null && this.webTorrentService.has(this.video.magnetUri)) { - this.webTorrentService.remove(this.video.magnetUri) + // Remove player if it exists + if (this.videoNotFound === false) { + videojs(this.playerElement).dispose() } - // Remove player - videojs(this.playerElement).dispose() - // Unsubscribe subscriptions this.paramsSub.unsubscribe() - this.errorsSub.unsubscribe() - this.warningsSub.unsubscribe() - } - - loadVideo () { - // Reset the error - this.error = false - // We are loading the video - this.loading = true - - console.log('Adding ' + this.video.magnetUri + '.') - - // The callback might never return if there are network issues - // So we create a timer to inform the user the load is abnormally long - this.errorTimer = window.setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG) - - this.webTorrentService.add(this.video.magnetUri, (torrent) => { - // Clear the error timer - window.clearTimeout(this.errorTimer) - // Maybe the error was fired by the timer, so reset it - this.error = false - - // We are not loading the video anymore - this.loading = false - - console.log('Added ' + this.video.magnetUri + '.') - torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => { - if (err) { - this.notificationsService.error('Error', 'Cannot append the file in the video element.') - console.error(err) - } - }) - - this.runInProgress(torrent) - }) } setLike () { @@ -151,7 +88,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.userRating = 'like' }, - err => this.notificationsService.error('Error', err.text) + err => this.notificationsService.error('Error', err.message) ) } @@ -168,7 +105,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.userRating = 'dislike' }, - err => this.notificationsService.error('Error', err.text) + err => this.notificationsService.error('Error', err.message) ) } @@ -243,6 +180,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.isBlackistableBy(this.authService.getUser()) } + private handleError (err: any) { + const errorMessage: string = typeof err === 'string' ? err : err.message + let message = '' + + if (errorMessage.indexOf('http error') !== -1) { + message = 'Cannot fetch video from server, maybe down.' + } else { + message = errorMessage + } + + this.notificationsService.error('Error', message) + } + private checkUserRating () { // Unlogged users do not have ratings if (this.isUserLoggedIn() === false) return @@ -255,7 +205,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } }, - err => this.notificationsService.error('Error', err.text) + err => this.notificationsService.error('Error', err.message) ) } @@ -275,8 +225,36 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.router.navigate([ '/videos/list' ]) } + this.playerElement = this.elementRef.nativeElement.querySelector('#video-container') + + const videojsOptions = { + controls: true, + autoplay: true, + plugins: { + peertube: { + videoFiles: this.video.files, + playerElement: this.playerElement, + autoplay: true, + peerTubeLink: false + } + } + } + + const self = this + videojs(this.playerElement, videojsOptions, function () { + self.player = this + this.on('customError', (event, data) => { + self.handleError(data.err) + }) + + this.on('torrentInfo', (event, data) => { + self.downloadSpeed = data.downloadSpeed + self.numPeers = data.numPeers + self.uploadSpeed = data.uploadSpeed + }) + }) + this.setOpenGraphTags() - this.loadVideo() this.checkUserRating() } ) @@ -298,11 +276,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.video.dislikes += dislikesToIncrement } - private loadTooLong () { - this.error = true - console.error('The video load seems to be abnormally long.') - } - private setOpenGraphTags () { this.metaService.setTitle(this.video.name) @@ -314,7 +287,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.metaService.setTag('og:description', this.video.description) this.metaService.setTag('description', this.video.description) - this.metaService.setTag('og:image', this.video.thumbnailPath) + this.metaService.setTag('og:image', this.video.previewPath) this.metaService.setTag('og:duration', this.video.duration.toString()) @@ -323,15 +296,4 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.metaService.setTag('og:url', window.location.href) this.metaService.setTag('url', window.location.href) } - - private runInProgress (torrent: any) { - // Refresh each second - this.torrentInfosInterval = window.setInterval(() => { - this.ngZone.run(() => { - this.downloadSpeed = torrent.downloadSpeed - this.numPeers = torrent.numPeers - this.uploadSpeed = torrent.uploadSpeed - }) - }, 1000) - } }