Use banner instead of modal for privacy concerns

diff --git a/client/src/app/about/about.component.html b/client/src/app/about/about.component.html
index c0be53581b7b92923395cb03d080424760eaf412..3bb86208c51e03aa77ab186a50abb374bb3b7ff8 100644 (file)
--- 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 dba4df729758285293c5dd6e611a3dbe4137703f..09e9c68cbf134bee378f7b17462f4eeed66f7a03 100644 (file)
--- 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 11b9fb8d0e6fac26a463adfc0938bb828cbd14db..82f148e9b19222d6ef185cb7877669846907b636 100644 (file)
--- 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 11518633c075074de04126a736b6ea9dba84625f..9fd89508a2d12e03a325a34efdec1e6b4652bb64 100644 (file)
--- 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 2924f16229670da4671037fd333f359f48019891..5750c5fca2996c3509bee02e77dc2ef88058b438 100644 (file)
--- 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
   }
 }