aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-03-07 17:35:30 +0100
committerChocobozzz <me@florianbigard.com>2018-03-07 17:35:30 +0100
commit2b3b76abb0c363d85ff5c831afd541a9c6982e76 (patch)
tree863d1b0d3a9da8061f43ceee9df07395956b7142 /client/src/app
parentea65a47623a545ed8023347d752cdd5fe5700e5d (diff)
downloadPeerTube-2b3b76abb0c363d85ff5c831afd541a9c6982e76.tar.gz
PeerTube-2b3b76abb0c363d85ff5c831afd541a9c6982e76.tar.zst
PeerTube-2b3b76abb0c363d85ff5c831afd541a9c6982e76.zip
Use banner instead of modal for privacy concerns
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/about/about.component.html9
-rw-r--r--client/src/app/about/about.component.scss2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html13
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss70
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts22
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 @@
14 14
15 <div [innerHTML]="termsHTML"></div> 15 <div [innerHTML]="termsHTML"></div>
16 </div> 16 </div>
17
18 <div id="p2p-privacy">
19 <div class="section-title">P2P & Privacy</div>
20
21 <p>
22 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.
23 If you want to keep your public IP address private, please use a VPN or Tor.
24 </p>
25 </div>
17</div> 26</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 @@
7 margin-bottom: 5px; 7 margin-bottom: 5px;
8} 8}
9 9
10.description { 10.description, .terms {
11 margin-bottom: 30px; 11 margin-bottom: 30px;
12} 12}
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 @@
177 </div> 177 </div>
178 </div> 178 </div>
179 </div> 179 </div>
180
181
182 <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
183 <strong>Friendly Reminder:</strong>
184 <div class="privacy-concerns-text">
185 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.
186 <a title="Get more information" target="_blank" href="/about#p2p-privacy">More information</a>
187 </div>
188
189 <div class="privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
190 OK
191 </div>
192 </div>
180</div> 193</div>
181 194
182<ng-template [ngIf]="video !== null"> 195<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 @@
254 } 254 }
255} 255}
256 256
257// If the view is not expanded, take into account the menu
258.privacy-concerns {
259 width: calc(100% - #{$menu-width});
260}
261
262:host-context(.expanded) {
263 .privacy-concerns {
264 width: 100%;
265 }
266}
267
268.privacy-concerns {
269 position: fixed;
270 bottom: 0;
271
272 padding: 5px 15px;
273
274 display: flex;
275 align-items: center;
276 justify-content: flex-start;
277 background-color: rgba(0, 0, 0, 0.9);
278 color: #fff;
279
280 .privacy-concerns-text {
281 margin: 0 5px;
282 }
283
284 a {
285 @include disable-default-a-behaviour;
286
287 color: $orange-color;
288 transition: color 0.3s;
289
290 &:hover {
291 color: #fff;
292 }
293 }
294
295 .privacy-concerns-okay {
296 background-color: $orange-color;
297 padding: 5px 8px 5px 7px;
298 margin-left: auto;
299 border-radius: 3px;
300 cursor: pointer;
301 transition: background-color 0.3s;
302 font-weight: $font-semibold;
303
304 &:hover {
305 background-color: #000;
306 }
307 }
308}
309
257 310
258@media screen and (max-width: 1600px) { 311@media screen and (max-width: 1600px) {
259 .video-bottom { 312 .video-bottom {
@@ -294,6 +347,15 @@
294 .other-videos { 347 .other-videos {
295 display: none; 348 display: none;
296 } 349 }
350
351 .privacy-concerns {
352 font-size: 12px;
353 padding: 2px 5px;
354
355 .privacy-concerns-text {
356 margin: 0;
357 }
358 }
297} 359}
298 360
299@media screen and (max-width: 600px) { 361@media screen and (max-width: 600px) {
@@ -311,6 +373,14 @@
311 } 373 }
312 } 374 }
313 } 375 }
376
377 .privacy-concerns {
378 width: 100%;
379
380 strong {
381 display: none;
382 }
383 }
314} 384}
315 385
316@media screen and (max-width: 450px) { 386@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 {
50 videoHTMLDescription = '' 50 videoHTMLDescription = ''
51 likesBarTooltipText = '' 51 likesBarTooltipText = ''
52 52
53 private hasAlreadyAcceptedPrivacyConcern = false
53 private otherVideos: Video[] = [] 54 private otherVideos: Video[] = []
54 private paramsSub: Subscription 55 private paramsSub: Subscription
55 56
@@ -73,6 +74,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
73 } 74 }
74 75
75 ngOnInit () { 76 ngOnInit () {
77 if (localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true') {
78 this.hasAlreadyAcceptedPrivacyConcern = true
79 }
80
76 this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') 81 this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
77 .subscribe( 82 .subscribe(
78 data => { 83 data => {
@@ -317,18 +322,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
317 if (res === false) return this.redirectService.redirectToHomepage() 322 if (res === false) return this.redirectService.redirectToHomepage()
318 } 323 }
319 324
320 if (!this.hasAlreadyAcceptedPrivacyConcern()) {
321 const res = await this.confirmService.confirm(
322 'PeerTube uses P2P, other may know you are watching that video through your public IP address. ' +
323 'Are you okay with that?',
324 'Privacy concern',
325 'I accept!'
326 )
327 if (res === false) return this.redirectService.redirectToHomepage()
328 }
329
330 this.acceptedPrivacyConcern()
331
332 // Player was already loaded 325 // Player was already loaded
333 if (this.videoPlayerLoaded !== true) { 326 if (this.videoPlayerLoaded !== true) {
334 this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') 327 this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
@@ -478,11 +471,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
478 return this.user.autoPlayVideo !== false 471 return this.user.autoPlayVideo !== false
479 } 472 }
480 473
481 private hasAlreadyAcceptedPrivacyConcern () {
482 return localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
483 }
484
485 private acceptedPrivacyConcern () { 474 private acceptedPrivacyConcern () {
486 localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') 475 localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
476 this.hasAlreadyAcceptedPrivacyConcern = true
487 } 477 }
488} 478}