X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=9563394dcd49e91731be8f8c629055818d73b05d;hb=b891f9bc612217b5b6f08a886c7d12eca260b9c8;hp=662380d961e8215f60dc5ad9acdba882c17ebf14;hpb=22b59e8099947605085cf65a440f07f37fce6b65;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 662380d96..9563394dc 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 { Observable } from 'rxjs/Observable' 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', @@ -49,9 +52,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy { shortVideoDescription: string videoHTMLDescription = '' likesBarTooltipText = '' + hasAlreadyAcceptedPrivacyConcern = false private otherVideos: Video[] = [] private paramsSub: Subscription + private videojsInstance: videojs.Player constructor ( private elementRef: ElementRef, @@ -64,7 +69,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private authService: AuthService, private notificationsService: NotificationsService, private markdownService: MarkdownService, - private zone: NgZone + private zone: NgZone, + private redirectService: RedirectService ) {} get user () { @@ -72,6 +78,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } ngOnInit () { + if ( + WebTorrent.WEBRTC_SUPPORT === false || + peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' + ) { + this.hasAlreadyAcceptedPrivacyConcern = true + } + this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') .subscribe( data => { @@ -142,7 +155,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { .subscribe( status => { this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`) - this.router.navigate(['/videos/list']) + this.redirectService.redirectToHomepage() }, error => this.notificationsService.error('Error', error.message) @@ -247,13 +260,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) // Go back to the video-list. - this.router.navigate([ '/videos/list' ]) + this.redirectService.redirectToHomepage() }, error => this.notificationsService.error('Error', error.message) ) } + acceptedPrivacyConcern () { + peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') + this.hasAlreadyAcceptedPrivacyConcern = true + } + private updateVideoDescription (description: string) { this.video.description = description this.setVideoDescriptionHTML() @@ -313,60 +331,42 @@ export class VideoWatchComponent implements OnInit, OnDestroy { 'This video contains mature or explicit content. Are you sure you want to watch it?', 'Mature or explicit content' ) - if (res === false) return this.router.navigate([ '/videos/list' ]) + if (res === false) return this.redirectService.redirectToHomepage() } - if (!this.hasAlreadyAcceptedPrivacyConcern()) { - const res = await this.confirmService.confirm( - 'PeerTube uses P2P, other may know you are watching that video through your public IP address. ' + - 'Are you okay with that?', - 'Privacy concern', - 'I accept!' - ) - if (res === false) return this.router.navigate([ '/videos/list' ]) + // Player was already loaded, remove old videojs + if (this.videojsInstance) { + this.videojsInstance.dispose() + this.videojsInstance = undefined } - this.acceptedPrivacyConcern() - - // 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(), - plugins: { - peertube: { - videoFiles: this.video.files, - playerElement: this.playerElement, - peerTubeLink: false, - videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), - videoDuration: this.video.duration - }, - hotkeys: { - enableVolumeScroll: false - } - } - } + // 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: 4000, + 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 + }) - this.videoPlayerLoaded = true + this.videoPlayerLoaded = true - 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(() => { + self.videojsInstance = 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() @@ -453,12 +453,4 @@ export class VideoWatchComponent implements OnInit, OnDestroy { // Be sure the autoPlay is set to false return this.user.autoPlayVideo !== false } - - private hasAlreadyAcceptedPrivacyConcern () { - return localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' - } - - private acceptedPrivacyConcern () { - localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') - } }