aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-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
3 files changed, 89 insertions, 16 deletions
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}