diff options
author | Wicklow <wicklow@framasoft.org> | 2023-02-16 12:31:45 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2023-02-20 13:52:22 +0100 |
commit | 35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe (patch) | |
tree | 9417b7a5854cc0084c557929c64dd4cfb21e2904 /client | |
parent | 27f84cc3371aaf519c1bb5c0cca9e728a9dd3967 (diff) | |
download | PeerTube-35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe.tar.gz PeerTube-35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe.tar.zst PeerTube-35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe.zip |
Refactoring style for about component
Diffstat (limited to 'client')
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 | |||
10 | a { | 4 | a { |
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 | } | ||