Use banner instead of modal for privacy concerns

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>

client/src/app/about/about.component.scss

@@ -7,6 +7,6 @@
   margin-bottom: 5px;
 }
 
-.description {
+.description, .terms {
   margin-bottom: 30px;
 }

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">

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) {

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
   }
 }