Add messages about privacy concerns (P2P)

1 files changed, 63 insertions, 52 deletions

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')
+  }
 }