From 2b3b76abb0c363d85ff5c831afd541a9c6982e76 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 7 Mar 2018 17:35:30 +0100 Subject: [PATCH] Use banner instead of modal for privacy concerns --- client/src/app/about/about.component.html | 9 +++ client/src/app/about/about.component.scss | 2 +- .../+video-watch/video-watch.component.html | 13 ++++ .../+video-watch/video-watch.component.scss | 70 +++++++++++++++++++ .../+video-watch/video-watch.component.ts | 22 ++---- 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 @@
+ +
+
P2P & Privacy
+ +

+ 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. +

+
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 @@ + + +
+ Friendly Reminder: +
+ 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. + More information +
+ +
+ OK +
+
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 } }