aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-29 17:25:19 +0200
committerChocobozzz <me@florianbigard.com>2021-06-29 17:36:28 +0200
commit6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6 (patch)
treefa4800c702a614a19a6548e8561f14857c366661 /client/src/app
parent911186dae411d78788ccede093c251303187589a (diff)
downloadPeerTube-6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6.tar.gz
PeerTube-6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6.tar.zst
PeerTube-6ebdd12f8806edd7076e89c8ea3bcfaf5658b2b6.zip
Move privacy concerns in a dedicated component
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+videos/+video-watch/shared/index.ts1
-rw-r--r--client/src/app/+videos/+video-watch/shared/information/index.ts1
-rw-r--r--client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html15
-rw-r--r--client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss80
-rw-r--r--client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts45
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts1
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html16
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss86
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts44
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.module.ts4
10 files changed, 150 insertions, 143 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/index.ts b/client/src/app/+videos/+video-watch/shared/index.ts
index a6c2d75ad..6c5ff7e9b 100644
--- a/client/src/app/+videos/+video-watch/shared/index.ts
+++ b/client/src/app/+videos/+video-watch/shared/index.ts
@@ -1,4 +1,5 @@
1export * from './comment' 1export * from './comment'
2export * from './information'
2export * from './metadata' 3export * from './metadata'
3export * from './playlist' 4export * from './playlist'
4export * from './recommendations' 5export * from './recommendations'
diff --git a/client/src/app/+videos/+video-watch/shared/information/index.ts b/client/src/app/+videos/+video-watch/shared/information/index.ts
new file mode 100644
index 000000000..4c9920765
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/index.ts
@@ -0,0 +1 @@
export * from './privacy-concerns.component'
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
new file mode 100644
index 000000000..efad5a2b8
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -0,0 +1,15 @@
1<div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
2 <div class="privacy-concerns-text">
3 <span class="mr-2">
4 <strong i18n>Friendly Reminder: </strong>
5 <ng-container i18n>
6 the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
7 </ng-container>
8 </span>
9 <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
10 </div>
11
12 <div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
13 OK
14 </div>
15</div>
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
new file mode 100644
index 000000000..b42be318f
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.scss
@@ -0,0 +1,80 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4.privacy-concerns {
5 position: fixed;
6 bottom: 0;
7
8 width: calc(100% - #{$menu-width});
9 z-index: z(privacymsg);
10
11 padding: 5px 15px;
12
13 display: flex;
14 flex-wrap: nowrap;
15 align-items: center;
16 justify-content: space-between;
17 background-color: rgba(0, 0, 0, 0.9);
18 color: #fff;
19}
20
21// If the view is expanded
22:host-context(.expanded) {
23 .privacy-concerns {
24 width: 100%;
25 }
26}
27
28// Or if we are in the small view
29@media screen and (max-width: $small-view) {
30 .privacy-concerns {
31 width: 100%;
32 }
33}
34
35.privacy-concerns-text {
36 margin: 0 5px;
37}
38
39a {
40 @include disable-default-a-behaviour;
41
42 color: pvar(--mainColor);
43 transition: color 0.3s;
44
45 &:hover {
46 color: #fff;
47 }
48}
49
50.privacy-concerns-button {
51 @include margin-left(auto);
52
53 padding: 5px 8px 5px 7px;
54 border-radius: 3px;
55 white-space: nowrap;
56 cursor: pointer;
57 transition: background-color 0.3s;
58 font-weight: $font-semibold;
59
60 &:hover {
61 background-color: #000;
62 }
63}
64
65.privacy-concerns-okay {
66 @include margin-left(10px);
67
68 background-color: pvar(--mainColor);
69}
70
71@media screen and (max-width: 1300px) {
72 .privacy-concerns {
73 font-size: 12px;
74 padding: 2px 5px;
75 }
76
77 .privacy-concerns-text {
78 margin: 0;
79 }
80}
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts
new file mode 100644
index 000000000..ef5c8ed87
--- /dev/null
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.ts
@@ -0,0 +1,45 @@
1import { Component, OnInit } from '@angular/core'
2import { ServerService } from '@app/core'
3import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
4import { HTMLServerConfig } from '@shared/models'
5import { getStoredP2PEnabled } from '../../../../../assets/player/peertube-player-local-storage'
6import { isWebRTCDisabled } from '../../../../../assets/player/utils'
7
8@Component({
9 selector: 'my-privacy-concerns',
10 templateUrl: './privacy-concerns.component.html',
11 styleUrls: [ './privacy-concerns.component.scss' ]
12})
13export class PrivacyConcernsComponent implements OnInit {
14 private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
15
16 hasAlreadyAcceptedPrivacyConcern = false
17
18 private serverConfig: HTMLServerConfig
19
20 constructor (
21 private serverService: ServerService
22 ) { }
23
24 async ngOnInit () {
25 this.serverConfig = this.serverService.getHTMLConfig()
26 if (
27 isWebRTCDisabled() ||
28 this.serverConfig.tracker.enabled === false ||
29 getStoredP2PEnabled() === false ||
30 peertubeLocalStorage.getItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
31 ) {
32 this.hasAlreadyAcceptedPrivacyConcern = true
33 }
34 }
35
36 declinedPrivacyConcern () {
37 peertubeLocalStorage.setItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false')
38 this.hasAlreadyAcceptedPrivacyConcern = false
39 }
40
41 acceptedPrivacyConcern () {
42 peertubeLocalStorage.setItem(PrivacyConcernsComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
43 this.hasAlreadyAcceptedPrivacyConcern = true
44 }
45}
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
index 2ea3b206f..b554567d9 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output }
2import { MarkdownService, Notifier } from '@app/core' 2import { MarkdownService, Notifier } from '@app/core'
3import { VideoDetails, VideoService } from '@app/shared/shared-main' 3import { VideoDetails, VideoService } from '@app/shared/shared-main'
4 4
5
6@Component({ 5@Component({
7 selector: 'my-video-description', 6 selector: 'my-video-description',
8 templateUrl: './video-description.component.html', 7 templateUrl: './video-description.component.html',
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 40efa7b35..2380d5a98 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -261,21 +261,7 @@
261 ></my-recommended-videos> 261 ></my-recommended-videos>
262 </div> 262 </div>
263 263
264 <div class="row privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false"> 264 <my-privacy-concerns></my-privacy-concerns>
265 <div class="privacy-concerns-text">
266 <span class="mr-2">
267 <strong i18n>Friendly Reminder: </strong>
268 <ng-container i18n>
269 the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
270 </ng-container>
271 </span>
272 <a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube#privacy">More information</a>
273 </div>
274
275 <div i18n class="privacy-concerns-button privacy-concerns-okay" (click)="acceptedPrivacyConcern()">
276 OK
277 </div>
278 </div>
279</div> 265</div>
280 266
281<ng-container *ngIf="video !== null"> 267<ng-container *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 f25f3bf31..e075fc57e 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -364,94 +364,12 @@ my-video-comments {
364 margin-bottom: 20px; 364 margin-bottom: 20px;
365} 365}
366 366
367// If the view is not expanded, take into account the menu
368.privacy-concerns {
369 z-index: z(dropdown) + 1;
370 width: calc(100% - #{$menu-width});
371}
372
373@media screen and (max-width: $small-view) {
374 .privacy-concerns {
375 @include margin-left($menu-width - 15px); // Menu is absolute
376 }
377}
378
379:host-context(.expanded) {
380 .privacy-concerns {
381 @include margin-left(-15px);
382
383 width: 100%;
384 }
385}
386
387.privacy-concerns {
388 position: fixed;
389 bottom: 0;
390 z-index: z(privacymsg);
391
392 padding: 5px 15px;
393
394 display: flex;
395 flex-wrap: nowrap;
396 align-items: center;
397 justify-content: space-between;
398 background-color: rgba(0, 0, 0, 0.9);
399 color: #fff;
400
401 .privacy-concerns-text {
402 margin: 0 5px;
403 }
404
405 a {
406 @include disable-default-a-behaviour;
407
408 color: pvar(--mainColor);
409 transition: color 0.3s;
410
411 &:hover {
412 color: #fff;
413 }
414 }
415
416 .privacy-concerns-button {
417 @include margin-left(auto);
418
419 padding: 5px 8px 5px 7px;
420 border-radius: 3px;
421 white-space: nowrap;
422 cursor: pointer;
423 transition: background-color 0.3s;
424 font-weight: $font-semibold;
425
426 &:hover {
427 background-color: #000;
428 }
429 }
430
431 .privacy-concerns-okay {
432 @include margin-left(10px);
433
434 background-color: pvar(--mainColor);
435 }
436}
437
438@media screen and (max-width: 1600px) { 367@media screen and (max-width: 1600px) {
439 .video-bottom .video-info .video-attributes .video-attribute { 368 .video-bottom .video-info .video-attributes .video-attribute {
440 margin-bottom: 5px; 369 margin-bottom: 5px;
441 } 370 }
442} 371}
443 372
444@media screen and (max-width: 1300px) {
445 .privacy-concerns {
446 font-size: 12px;
447 padding: 2px 5px;
448
449 .privacy-concerns-text {
450 margin: 0;
451 }
452 }
453}
454
455// Use the same breakpoint than in the typescript component to display the other video miniatures as row 373// Use the same breakpoint than in the typescript component to display the other video miniatures as row
456@media screen and (max-width: 1100px) { 374@media screen and (max-width: 1100px) {
457 #video-wrapper { 375 #video-wrapper {
@@ -489,10 +407,6 @@ my-video-comments {
489 } 407 }
490 } 408 }
491 } 409 }
492
493 .privacy-concerns {
494 width: 100%;
495 }
496} 410}
497 411
498@media screen and (max-width: 450px) { 412@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 9bc82d667..5a0109e64 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -26,7 +26,6 @@ import { SupportModalComponent } from '@app/shared/shared-support-modal'
26import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' 26import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
27import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature' 27import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
28import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' 28import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
29import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
30import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' 29import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
31import { 30import {
32 HTMLServerConfig, 31 HTMLServerConfig,
@@ -37,12 +36,7 @@ import {
37 VideoPrivacy, 36 VideoPrivacy,
38 VideoState 37 VideoState
39} from '@shared/models' 38} from '@shared/models'
40import { 39import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage'
41 cleanupVideoWatch,
42 getStoredP2PEnabled,
43 getStoredTheater,
44 getStoredVideoWatchHistory
45} from '../../../assets/player/peertube-player-local-storage'
46import { 40import {
47 CustomizationOptions, 41 CustomizationOptions,
48 P2PMediaLoaderOptions, 42 P2PMediaLoaderOptions,
@@ -51,7 +45,7 @@ import {
51 PlayerMode, 45 PlayerMode,
52 videojs 46 videojs
53} from '../../../assets/player/peertube-player-manager' 47} from '../../../assets/player/peertube-player-manager'
54import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils' 48import { timeToInt } from '../../../assets/player/utils'
55import { environment } from '../../../environments/environment' 49import { environment } from '../../../environments/environment'
56import { VideoWatchPlaylistComponent } from './shared' 50import { VideoWatchPlaylistComponent } from './shared'
57 51
@@ -63,8 +57,6 @@ type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
63 styleUrls: [ './video-watch.component.scss' ] 57 styleUrls: [ './video-watch.component.scss' ]
64}) 58})
65export class VideoWatchComponent implements OnInit, OnDestroy { 59export class VideoWatchComponent implements OnInit, OnDestroy {
66 private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
67
68 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent 60 @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
69 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent 61 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
70 @ViewChild('supportModal') supportModal: SupportModalComponent 62 @ViewChild('supportModal') supportModal: SupportModalComponent
@@ -84,15 +76,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
84 playlistPosition: number 76 playlistPosition: number
85 playlist: VideoPlaylist = null 77 playlist: VideoPlaylist = null
86 78
87 descriptionLoading = false
88 completeDescriptionShown = false
89 completeVideoDescription: string
90 shortVideoDescription: string
91 videoHTMLDescription = ''
92
93 likesBarTooltipText = '' 79 likesBarTooltipText = ''
94 80
95 hasAlreadyAcceptedPrivacyConcern = false
96 remoteServerDown = false 81 remoteServerDown = false
97 82
98 tooltipSupport = '' 83 tooltipSupport = ''
@@ -159,6 +144,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
159 } 144 }
160 145
161 async ngOnInit () { 146 async ngOnInit () {
147 this.serverConfig = this.serverService.getHTMLConfig()
148
162 // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover 149 // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
163 if (this.user || !this.screenService.isInMobileView()) { 150 if (this.user || !this.screenService.isInMobileView()) {
164 this.tooltipSupport = $localize`Support options for this video` 151 this.tooltipSupport = $localize`Support options for this video`
@@ -167,16 +154,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
167 154
168 PeertubePlayerManager.initState() 155 PeertubePlayerManager.initState()
169 156
170 this.serverConfig = this.serverService.getHTMLConfig()
171 if (
172 isWebRTCDisabled() ||
173 this.serverConfig.tracker.enabled === false ||
174 getStoredP2PEnabled() === false ||
175 peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
176 ) {
177 this.hasAlreadyAcceptedPrivacyConcern = true
178 }
179
180 this.paramsSub = this.route.params.subscribe(routeParams => { 157 this.paramsSub = this.route.params.subscribe(routeParams => {
181 const videoId = routeParams[ 'videoId' ] 158 const videoId = routeParams[ 'videoId' ]
182 if (videoId) this.loadVideo(videoId) 159 if (videoId) this.loadVideo(videoId)
@@ -272,16 +249,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
272 this.redirectService.redirectToHomepage() 249 this.redirectService.redirectToHomepage()
273 } 250 }
274 251
275 declinedPrivacyConcern () {
276 peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'false')
277 this.hasAlreadyAcceptedPrivacyConcern = false
278 }
279
280 acceptedPrivacyConcern () {
281 peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
282 this.hasAlreadyAcceptedPrivacyConcern = true
283 }
284
285 isVideoToTranscode () { 252 isVideoToTranscode () {
286 return this.video && this.video.state.id === VideoState.TO_TRANSCODE 253 return this.video && this.video.state.id === VideoState.TO_TRANSCODE
287 } 254 }
@@ -486,9 +453,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
486 453
487 // Re init attributes 454 // Re init attributes
488 this.playerPlaceholderImgSrc = undefined 455 this.playerPlaceholderImgSrc = undefined
489 this.descriptionLoading = false
490 this.completeDescriptionShown = false
491 this.completeVideoDescription = undefined
492 this.remoteServerDown = false 456 this.remoteServerDown = false
493 this.currentTime = undefined 457 this.currentTime = undefined
494 458
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index f4484f1fe..c1f40d785 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -18,7 +18,8 @@ import {
18 VideoAvatarChannelComponent, 18 VideoAvatarChannelComponent,
19 VideoDescriptionComponent, 19 VideoDescriptionComponent,
20 VideoRateComponent, 20 VideoRateComponent,
21 VideoWatchPlaylistComponent 21 VideoWatchPlaylistComponent,
22 PrivacyConcernsComponent
22} from './shared' 23} from './shared'
23import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component' 24import { VideoCommentAddComponent } from './shared/comment/video-comment-add.component'
24import { VideoCommentComponent } from './shared/comment/video-comment.component' 25import { VideoCommentComponent } from './shared/comment/video-comment.component'
@@ -51,6 +52,7 @@ import { VideoWatchComponent } from './video-watch.component'
51 VideoWatchPlaylistComponent, 52 VideoWatchPlaylistComponent,
52 VideoRateComponent, 53 VideoRateComponent,
53 VideoDescriptionComponent, 54 VideoDescriptionComponent,
55 PrivacyConcernsComponent,
54 56
55 VideoCommentsComponent, 57 VideoCommentsComponent,
56 VideoCommentAddComponent, 58 VideoCommentAddComponent,