aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-16 12:31:45 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commit35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe (patch)
tree9417b7a5854cc0084c557929c64dd4cfb21e2904 /client
parent27f84cc3371aaf519c1bb5c0cca9e728a9dd3967 (diff)
downloadPeerTube-35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe.tar.gz
PeerTube-35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe.tar.zst
PeerTube-35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe.zip
Refactoring style for about component
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.html8
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.scss15
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html14
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss40
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.html201
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.scss57
6 files changed, 120 insertions, 215 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 6516b595d..84626809d 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -2,7 +2,7 @@
2 <h1 class="visually-hidden" i18n>Follows</h1> 2 <h1 class="visually-hidden" i18n>Follows</h1>
3 3
4 <div class="col-xl-6 col-md-12"> 4 <div class="col-xl-6 col-md-12">
5 <h2 i18n class="subtitle">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2> 5 <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
6 6
7 <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div> 7 <div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
8 8
@@ -10,11 +10,11 @@
10 {{ follower }} 10 {{ follower }}
11 </a> 11 </a>
12 12
13 <button i18n class="show-more" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button> 13 <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
14 </div> 14 </div>
15 15
16 <div class="col-xl-6 col-md-12"> 16 <div class="col-xl-6 col-md-12">
17 <h2 i18n class="subtitle">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2> 17 <h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
18 18
19 <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div> 19 <div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
20 20
@@ -22,7 +22,7 @@
22 {{ following }} 22 {{ following }}
23 </a> 23 </a>
24 24
25 <button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button> 25 <button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
26 </div> 26 </div>
27 27
28</div> 28</div>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index 057d04ced..e80e9d96e 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -1,12 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.subtitle {
5 font-size: 18px;
6 font-weight: $font-semibold;
7 margin-bottom: 20px;
8}
9
10a { 4a {
11 display: block; 5 display: block;
12 width: fit-content; 6 width: fit-content;
@@ -16,11 +10,4 @@ a {
16.no-results { 10.no-results {
17 justify-content: flex-start; 11 justify-content: flex-start;
18 align-items: flex-start; 12 align-items: flex-start;
19} 13} \ No newline at end of file
20
21.show-more {
22 @include peertube-button-link;
23 @include grey-button;
24
25 margin-top: 1%;
26}
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index f602ec1b5..5230b5c4e 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -1,22 +1,22 @@
1<div class="row"> 1<div class="row">
2 <div class="col-md-12 col-xl-6"> 2 <div class="col-md-12 col-xl-6">
3 3
4 <div class="about-instance-title"> 4 <div class="d-flex justify-content-between">
5 <h1 i18n class="title">About {{ instanceName }}</h1> 5 <h1 i18n class="fw-semibold pt-fs-5">About {{ instanceName }}</h1>
6 6
7 <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact us</a> 7 <a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
8 </div> 8 </div>
9 9
10 <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0"> 10 <div class="mb-4" *ngIf="categories.length !== 0 || languages.length !== 0">
11 <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span> 11 <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
12 12
13 <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span> 13 <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
14 </div> 14 </div>
15 15
16 <div class="short-description"> 16 <div class="mt-2">
17 <div class="block short-description">{{ shortDescription }}</div> 17 <div class="block">{{ shortDescription }}</div>
18 18
19 <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> 19 <div i18n *ngIf="isNSFW" class="block mt-4 fw-semibold">This instance is dedicated to sensitive/NSFW content.</div>
20 </div> 20 </div>
21 21
22 <div class="anchor" id="administrators-and-sustainability"></div> 22 <div class="anchor" id="administrators-and-sustainability"></div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index c01e690d1..7ff6539ca 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -1,29 +1,8 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.about-instance-title { 4.pt-badge {
5 display: flex; 5 @include margin-right(5px);
6 justify-content: space-between;
7
8 .title {
9 font-size: 20px;
10 font-weight: $font-semibold;
11 }
12
13 .contact-admin {
14 @include peertube-button-link;
15 @include orange-button;
16
17 height: fit-content;
18 }
19}
20
21.instance-badges {
22 margin-bottom: 20px;
23
24 .pt-badge {
25 @include margin-right(5px);
26 }
27} 6}
28 7
29.section-title { 8.section-title {
@@ -36,22 +15,13 @@
36 15
37.middle-title { 16.middle-title {
38 @include in-content-small-title; 17 @include in-content-small-title;
18 @include margin-bottom(1.5rem);
39 19
40 margin-top: 0; 20 margin-top: 0;
41 margin-bottom: 25px;
42} 21}
43 22
44.block { 23.block {
45 margin-bottom: 75px; 24 @include margin-bottom(4.5rem);
46}
47
48.short-description {
49 margin-top: 10px;
50}
51
52.short-description .dedicated-to-nsfw {
53 margin-top: 20px;
54 font-weight: $font-semibold;
55} 25}
56 26
57.anchor-link { 27.anchor-link {
@@ -77,4 +47,4 @@
77 .section-title { 47 .section-title {
78 color: var(--mainForegroundColor); 48 color: var(--mainForegroundColor);
79 } 49 }
80} 50} \ No newline at end of file
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index f8700d9b6..c748154e9 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -1,11 +1,11 @@
1<div class="root"> 1<div class="root">
2 <h1 i18n class="about-peertube-title"> 2 <h1 i18n class="pt-fs-3 text-center fw-semibold mb-3">
3 This website is powered by PeerTube 3 This website is powered by PeerTube
4 </h1> 4 </h1>
5 5
6 <img class="mascot" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/> 6 <img class="d-block my-4 mx-auto" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
7 7
8 <div class="description"> 8 <div class="text-center">
9 <p i18n> 9 <p i18n>
10 PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser. 10 PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.
11 </p> 11 </p>
@@ -20,7 +20,7 @@
20 </p> 20 </p>
21 </div> 21 </div>
22 22
23 <div class="documentation"> 23 <div class="d-flex flex-wrap justify-content-center my-5">
24 24
25 <div class="card"> 25 <div class="card">
26 <div class="card-body"> 26 <div class="card-body">
@@ -59,104 +59,101 @@
59 </div> 59 </div>
60 </div> 60 </div>
61 61
62 <div class="privacy-contributors"> 62 <div class="d-flex flex-column">
63 <div class="p2p-privacy"> 63 <h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
64 <h2 class="section-title"> 64 <div class="anchor" id="privacy"></div> <!-- privacy anchor -->
65 <div class="anchor" id="privacy"></div> <!-- privacy anchor --> 65 <ng-container i18n>P2P & Privacy</ng-container>
66 <ng-container i18n>P2P & Privacy</ng-container> 66 </h2>
67 </h2> 67
68 68 <p i18n>
69 <p i18n> 69 PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
70 PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server, 70 but ultimately leaves you the choice to switch back to regular streaming exclusively from the server of the video. What
71 but ultimately leaves you the choice to switch back to regular streaming exclusively from the server of the video. What 71 follows applies only if you want to keep using the P2P mode of PeerTube.
72 follows applies only if you want to keep using the P2P mode of PeerTube. 72 </p>
73 </p> 73
74 74 <p i18n>
75 <p i18n> 75 The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent
76 The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent 76 tracker as long as you download or watch the video.
77 tracker as long as you download or watch the video. 77 </p>
78 </p> 78
79 79 <h3 i18n class="pt-fs-5">What are the consequences?</h3>
80 <h3 i18n class="p2p-privacy-title">What are the consequences?</h3> 80
81 81 <p i18n>
82 <p i18n> 82 In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
83 In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video. 83 In practice, this is much more difficult because:
84 In practice, this is much more difficult because: 84 </p>
85 </p> 85
86 86 <ul>
87 <ul> 87 <li i18n>
88 <li i18n> 88 An HTTP request has to be sent on each tracker for each video to spy.
89 An HTTP request has to be sent on each tracker for each video to spy. 89 If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
90 If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot) 90 </li>
91 </li> 91
92 92 <li i18n>
93 <li i18n> 93 For each request sent, the tracker returns random peers at a limited number.
94 For each request sent, the tracker returns random peers at a limited number. 94 For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50
95 For instance, if there are 1000 peers in the swarm and the tracker sends only 20 peers for each request, there must be at least 50 95 requests sent to know every peer in the swarm
96 requests sent to know every peer in the swarm 96 </li>
97 </li> 97
98 98 <li i18n>
99 <li i18n> 99 Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
100 Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour 100 </li>
101 </li> 101
102 102 <li i18n>
103 <li i18n> 103 If an IP address is stored in the tracker, it doesn't mean that the person behind the IP (if this person exists) has watched the
104 If an IP address is stored in the tracker, it doesn't mean that the person behind the IP (if this person exists) has watched the 104 video
105 video 105 </li>
106 </li> 106
107 107 <li i18n>
108 <li i18n> 108 The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
109 The IP address is a vague information: usually, it regularly changes and can represent many persons or entities 109 </li>
110 </li> 110
111 111 <li i18n>
112 <li i18n> 112 Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
113 Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker. 113 When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers
114 When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers 114 to forward the information to.
115 to forward the information to. 115 See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
116 See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information 116 </li>
117 </li> 117 </ul>
118 </ul> 118
119 119 <p i18n>
120 <p i18n> 120 The worst-case scenario of an average person spying on their friends is quite unlikely.
121 The worst-case scenario of an average person spying on their friends is quite unlikely. 121 There are much more effective ways to get that kind of information.
122 There are much more effective ways to get that kind of information. 122 </p>
123 </p>
124
125 <h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
126
127 <p i18n>
128 The threats to privacy with YouTube are different from PeerTube's.
129 In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
130 Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
131 </p>
132
133 <h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
134
135 <p i18n>
136 Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing
137 your IP in their connection logs: ISP/routers/trackers/CDN and more.
138 PeerTube is transparent about it: we warn you that if you want to keep your IP private, you must use a VPN or Tor Browser.
139 Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
140 </p>
141
142 <h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
143
144 <p i18n>
145 PeerTube wants to deliver the best countermeasures possible, to give you more choice
146 and render attacks less likely. Here is what we put in place so far:
147 </p>
148
149 <ul>
150 <li i18n>We set a limit to the number of peers sent by the tracker</li>
151 <li i18n>We set a limit on the request frequency received by the tracker</li>
152 <li i18n>Allow instance admins to disable P2P from the administration interface</li>
153 </ul>
154
155 <p i18n>
156 Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling
157 WebRTC in your browser.
158 </p>
159 </div>
160 123
124 <h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
125
126 <p i18n>
127 The threats to privacy with YouTube are different from PeerTube's.
128 In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
129 Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
130 </p>
131
132 <h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
133
134 <p i18n>
135 Your IP address is public so every time you consult a website, there is a number of actors (in addition to the final website) seeing
136 your IP in their connection logs: ISP/routers/trackers/CDN and more.
137 PeerTube is transparent about it: we warn you that if you want to keep your IP private, you must use a VPN or Tor Browser.
138 Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
139 </p>
140
141 <h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
142
143 <p i18n>
144 PeerTube wants to deliver the best countermeasures possible, to give you more choice
145 and render attacks less likely. Here is what we put in place so far:
146 </p>
147
148 <ul>
149 <li i18n>We set a limit to the number of peers sent by the tracker</li>
150 <li i18n>We set a limit on the request frequency received by the tracker</li>
151 <li i18n>Allow instance admins to disable P2P from the administration interface</li>
152 </ul>
153
154 <p i18n>
155 Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling
156 WebRTC in your browser.
157 </p>
161 </div> 158 </div>
162</div> 159</div>
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index a0d227a28..efb8b49f5 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -6,63 +6,14 @@
6 margin: auto; 6 margin: auto;
7} 7}
8 8
9.about-peertube-title { 9.card {
10 font-size: 25px; 10 @include rfs(2rem, margin);
11 text-align: center;
12 font-weight: $font-semibold;
13 margin-bottom: 15px;
14}
15 11
16.mascot { 12 flex-basis: 300px;
17 display: block;
18 margin: 20px auto;
19}
20
21::ng-deep .section-title {
22 font-weight: $font-semibold;
23 font-size: 20px;
24 margin-bottom: 5px;
25}
26
27.description {
28 text-align: center;
29}
30
31.documentation {
32 display: flex;
33 flex-wrap: wrap;
34 margin: 50px 0;
35 justify-content: center;
36
37 .card {
38 margin: 30px;
39 flex-basis: 300px;
40 }
41}
42
43.privacy-contributors {
44 display: flex;
45 flex-direction: column;
46
47 .p2p-privacy {
48 .section-title {
49 margin: 50px 0 20px;
50 text-align: center;
51 }
52
53 h6 {
54 font-size: 20px;
55 margin-top: 15px;
56 }
57 }
58} 13}
59 14
60.card-title { 15.card-title {
61 font-size: 1.1rem; 16 font-size: 1.1rem;
62 text-align: center; 17 text-align: center;
63 margin-bottom: 1rem; 18 margin-bottom: 1rem;
64} 19} \ No newline at end of file
65
66.p2p-privacy-title {
67 font-size: 20px;
68}