From 22b59e8099947605085cf65a440f07f37fce6b65 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Feb 2018 15:33:45 +0100 Subject: [PATCH] Add messages about privacy concerns (P2P) --- .../video-abuse-list.component.html | 2 +- .../app/core/confirm/confirm.component.html | 2 +- .../src/app/core/confirm/confirm.component.ts | 5 +- .../src/app/core/confirm/confirm.service.ts | 18 ++- .../+video-watch/video-watch.component.ts | 115 ++++++++++-------- client/src/sass/video-js-custom.scss | 30 ++++- client/src/standalone/videos/embed.ts | 3 +- 7 files changed, 112 insertions(+), 63 deletions(-) diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html index 2779db5bc..88a1641cf 100644 --- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html @@ -18,7 +18,7 @@ {{ videoAbuse.reason }} - {{ videoAbuse.reporterServerHost + '@' + videoAbuse.reporterUsername }} + {{ videoAbuse.reporterUsername + '@' + videoAbuse.reporterServerHost }} {{ videoAbuse.createdAt }} {{ videoAbuse.videoName }} diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html index 90274b248..01a4e0ac4 100644 --- a/client/src/app/core/confirm/confirm.component.html +++ b/client/src/app/core/confirm/confirm.component.html @@ -21,7 +21,7 @@ diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts index 8f81b7a98..147bc9d65 100644 --- a/client/src/app/core/confirm/confirm.component.ts +++ b/client/src/app/core/confirm/confirm.component.ts @@ -18,6 +18,7 @@ export class ConfirmComponent implements OnInit { inputLabel = '' inputValue = '' + confirmButtonText = '' constructor (private confirmService: ConfirmService) { // Empty @@ -30,13 +31,15 @@ export class ConfirmComponent implements OnInit { } this.confirmService.showConfirm.subscribe( - ({ title, message, expectedInputValue, inputLabel }) => { + ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => { this.title = title this.message = message this.inputLabel = inputLabel this.expectedInputValue = expectedInputValue + this.confirmButtonText = confirmButtonText || 'Confirm' + this.showModal() } ) diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts index f30feb9d0..d99226f05 100644 --- a/client/src/app/core/confirm/confirm.service.ts +++ b/client/src/app/core/confirm/confirm.service.ts @@ -3,19 +3,27 @@ import { Subject } from 'rxjs/Subject' import 'rxjs/add/operator/first' import 'rxjs/add/operator/toPromise' +type ConfirmOptions = { + title: string + message: string + inputLabel?: string + expectedInputValue?: string + confirmButtonText?: string +} + @Injectable() export class ConfirmService { - showConfirm = new Subject<{ title: string, message: string, inputLabel?: string, expectedInputValue?: string }>() + showConfirm = new Subject() confirmResponse = new Subject() - confirm (message: string, title = '') { - this.showConfirm.next({ title, message }) + confirm (message: string, title = '', confirmButtonText?: string) { + this.showConfirm.next({ title, message, confirmButtonText }) return this.confirmResponse.asObservable().first().toPromise() } - confirmWithInput (message: string, inputLabel: string, expectedInputValue: string, title = '') { - this.showConfirm.next({ title, message, inputLabel, expectedInputValue }) + confirmWithInput (message: string, inputLabel: string, expectedInputValue: string, title = '', confirmButtonText?: string) { + this.showConfirm.next({ title, message, inputLabel, expectedInputValue, confirmButtonText }) return this.confirmResponse.asObservable().first().toPromise() } 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 3965bade8..662380d96 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -26,6 +26,8 @@ import { VideoShareComponent } from './modal/video-share.component' styleUrls: [ './video-watch.component.scss' ] }) export class VideoWatchComponent implements OnInit, OnDestroy { + private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' + @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent @ViewChild('videoShareModal') videoShareModal: VideoShareComponent @ViewChild('videoReportModal') videoReportModal: VideoReportComponent @@ -301,75 +303,76 @@ export class VideoWatchComponent implements OnInit, OnDestroy { ) } - private onVideoFetched (video: VideoDetails) { + private async onVideoFetched (video: VideoDetails) { this.video = video this.updateOtherVideosDisplayed() - let observable if (this.video.isVideoNSFWForUser(this.user)) { - observable = this.confirmService.confirm( + const res = await this.confirmService.confirm( 'This video contains mature or explicit content. Are you sure you want to watch it?', 'Mature or explicit content' ) - } else { - observable = Observable.of(true) + if (res === false) return this.router.navigate([ '/videos/list' ]) } - observable.subscribe( - res => { - if (res === false) { + 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' ]) + } - return this.router.navigate([ '/videos/list' ]) - } + this.acceptedPrivacyConcern() - // Player was already loaded - if (this.videoPlayerLoaded !== true) { - this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') + // 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 - } + // 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 - } - } + 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 } - - 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)) - }) - }) - } else { - const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) - this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) } + } - this.setVideoDescriptionHTML() - this.setVideoLikesBarTooltipText() + this.videoPlayerLoaded = true - this.setOpenGraphTags() - this.checkUserRating() - } - ) + 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() + + this.setOpenGraphTags() + this.checkUserRating() } private setRating (nextRating) { @@ -411,8 +414,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.video.likes += likesToIncrement this.video.dislikes += dislikesToIncrement - this.video.buildLikeAndDislikePercents() + this.video.buildLikeAndDislikePercents() this.setVideoLikesBarTooltipText() } @@ -450,4 +453,12 @@ 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') + } } diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 8b6d54b22..75630dd63 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss @@ -1,4 +1,4 @@ -// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin +@charset "utf-8";// Thanks: https://github.com/zanechua/videojs-sublime-inspired-skin $primary-foreground-color: #fff; $primary-background-color: #000; $font-size: 13px; @@ -8,6 +8,28 @@ $control-bar-height: 34px; font-size: $font-size; color: $primary-foreground-color; + .vjs-dock-text { + padding-right: 10px; + } + + .vjs-dock-description { + font-size: 11px; + + &:before, &:after { + display: inline-block; + content: '\1F308'; + } + + &:before { + margin-right: 4px; + } + + &:after { + margin-left: 4px; + transform: scale(-1, 1); + } + } + .vjs-button > .vjs-icon-placeholder::before { line-height: $control-bar-height; } @@ -354,7 +376,11 @@ $control-bar-height: 34px; @media screen and (max-width: 300px) { .vjs-dock-text { - font-size: 1em; + font-size: 13px; + } + + .vjs-dock-description { + font-size: 9px; } .vjs-big-play-button { diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 925367bb9..bb6baf7f0 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -44,7 +44,8 @@ loadVideoInfo(videoId) const player = this player.dock({ - title: videoInfo.name + title: videoInfo.name, + description: 'Use P2P, other may know you are watching that video.' }) }) }) -- 2.41.0