Use banner instead of modal for privacy concerns

5 files changed, 99 insertions, 17 deletions

diff --git a/client/src/app/about/about.component.html b/client/src/app/about/about.component.html
index c0be53581..3bb86208c 100644
--- a/client/src/app/about/about.component.html
+++ b/client/src/app/about/about.component.html
@@ -14,4 +14,13 @@
 
     <div [innerHTML]="termsHTML"></div>
   </div>
+
+  <div id="p2p-privacy">
+    <div class="section-title">P2P & Privacy</div>
+
+    <p>
+      PeerTube uses the BitTorrent protocol to share bandwidth between users. It implies that your public IP address is stored in the public BitTorrent tracker of the video PeerTube instance as long as you're watching the video.
+      If you want to keep your public IP address private, please use a VPN or Tor.
+    </p>
+  </div>
 </div>
diff --git a/client/src/app/about/about.component.scss b/client/src/app/about/about.component.scss
index dba4df729..09e9c68cb 100644
--- a/client/src/app/about/about.component.scss
+++ b/client/src/app/about/about.component.scss
@@ -7,6 +7,6 @@
   margin-bottom: 5px;
 }
 
-.description {
+.description, .terms {
   margin-bottom: 30px;
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 11b9fb8d0..82f148e9b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -177,6 +177,19 @@
       </div>
     </div>
   </div>
+
+
+  <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
+    <strong>Friendly Reminder:</strong>
+    <div class="privacy-concerns-text">
+      The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be accessed publicly.
+      <a title="Get more information" target="_blank" href="/about#p2p-privacy">More information</a>
+    </div>
+
+    <div class="privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
+      OK
+    </div>
+  </div>
 </div>
 
 <ng-template [ngIf]="video !== null">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 11518633c..9fd89508a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -254,6 +254,59 @@
   }
 }
 
+// If the view is not expanded, take into account the menu
+.privacy-concerns {
+  width: calc(100% - #{$menu-width});
+}
+
+:host-context(.expanded) {
+  .privacy-concerns {
+    width: 100%;
+  }
+}
+
+.privacy-concerns {
+  position: fixed;
+  bottom: 0;
+
+  padding: 5px 15px;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: rgba(0, 0, 0, 0.9);
+  color: #fff;
+
+  .privacy-concerns-text {
+    margin: 0 5px;
+  }
+
+  a {
+    @include disable-default-a-behaviour;
+
+    color: $orange-color;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .privacy-concerns-okay {
+    background-color: $orange-color;
+    padding: 5px 8px 5px 7px;
+    margin-left: auto;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    font-weight: $font-semibold;
+
+    &:hover {
+      background-color: #000;
+    }
+  }
+}
+
 
 @media screen and (max-width: 1600px) {
   .video-bottom {
@@ -294,6 +347,15 @@
   .other-videos {
     display: none;
   }
+
+  .privacy-concerns {
+    font-size: 12px;
+    padding: 2px 5px;
+
+    .privacy-concerns-text {
+      margin: 0;
+    }
+  }
 }
 
 @media screen and (max-width: 600px) {
@@ -311,6 +373,14 @@
       }
     }
   }
+
+  .privacy-concerns {
+    width: 100%;
+
+    strong {
+      display: none;
+    }
+  }
 }
 
 @media screen and (max-width: 450px) {
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 2924f1622..5750c5fca 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -50,6 +50,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   videoHTMLDescription = ''
   likesBarTooltipText = ''
 
+  private hasAlreadyAcceptedPrivacyConcern = false
   private otherVideos: Video[] = []
   private paramsSub: Subscription
 
@@ -73,6 +74,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit () {
+    if (localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true') {
+      this.hasAlreadyAcceptedPrivacyConcern = true
+    }
+
     this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
       .subscribe(
         data => {
@@ -317,18 +322,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       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.redirectService.redirectToHomepage()
-    }
-
-    this.acceptedPrivacyConcern()
-
     // Player was already loaded
     if (this.videoPlayerLoaded !== true) {
       this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
@@ -478,11 +471,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     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')
+    this.hasAlreadyAcceptedPrivacyConcern = true
   }
 }