From 35fe58c2f8f4a1ac0ede16b1a7d8763c25b8febe Mon Sep 17 00:00:00 2001 From: Wicklow Date: Thu, 16 Feb 2023 12:31:45 +0100 Subject: [PATCH] Refactoring style for about component --- .../about-follows.component.html | 8 +- .../about-follows.component.scss | 15 +- .../about-instance.component.html | 14 +- .../about-instance.component.scss | 40 +--- .../about-peertube.component.html | 201 +++++++++--------- .../about-peertube.component.scss | 57 +---- 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 @@

Follows

-

Followers of {{ instanceName }} ({{ followersPagination.totalItems }})

+

Followers of {{ instanceName }} ({{ followersPagination.totalItems }})

{{ instanceName }} does not have followers.
@@ -10,11 +10,11 @@ {{ follower }} - +
-

Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})

+

Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})

{{ instanceName }} does not have subscriptions.
@@ -22,7 +22,7 @@ {{ following }} - +
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 @@ @use '_variables' as *; @use '_mixins' as *; -.subtitle { - font-size: 18px; - font-weight: $font-semibold; - margin-bottom: 20px; -} - a { display: block; width: fit-content; @@ -16,11 +10,4 @@ a { .no-results { justify-content: flex-start; align-items: flex-start; -} - -.show-more { - @include peertube-button-link; - @include grey-button; - - margin-top: 1%; -} +} \ No newline at end of file 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 @@
-
-

About {{ instanceName }}

+
+

About {{ instanceName }}

- Contact us + Contact us
-
+
{{ category }} {{ language }}
-
-
{{ shortDescription }}
+
+
{{ shortDescription }}
-
This instance is dedicated to sensitive/NSFW content.
+
This instance is dedicated to sensitive/NSFW content.
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 @@ @use '_variables' as *; @use '_mixins' as *; -.about-instance-title { - display: flex; - justify-content: space-between; - - .title { - font-size: 20px; - font-weight: $font-semibold; - } - - .contact-admin { - @include peertube-button-link; - @include orange-button; - - height: fit-content; - } -} - -.instance-badges { - margin-bottom: 20px; - - .pt-badge { - @include margin-right(5px); - } +.pt-badge { + @include margin-right(5px); } .section-title { @@ -36,22 +15,13 @@ .middle-title { @include in-content-small-title; + @include margin-bottom(1.5rem); margin-top: 0; - margin-bottom: 25px; } .block { - margin-bottom: 75px; -} - -.short-description { - margin-top: 10px; -} - -.short-description .dedicated-to-nsfw { - margin-top: 20px; - font-weight: $font-semibold; + @include margin-bottom(4.5rem); } .anchor-link { @@ -77,4 +47,4 @@ .section-title { color: var(--mainForegroundColor); } -} +} \ 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 @@
-

+

This website is powered by PeerTube

- mascot + mascot -
+

PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.

@@ -20,7 +20,7 @@

-
+
@@ -59,104 +59,101 @@
-
-
-

-
- P2P & Privacy -

- -

- PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server, - but ultimately leaves you the choice to switch back to regular streaming exclusively from the server of the video. What - follows applies only if you want to keep using the P2P mode of PeerTube. -

- -

- The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent - tracker as long as you download or watch the video. -

- -

What are the consequences?

- -

- In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video. - In practice, this is much more difficult because: -

- -
    -
  • - An HTTP request has to be sent on each tracker for each video to spy. - If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot) -
    • - -
  • - For each request sent, the tracker returns random peers at a limited number. - 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 - requests sent to know every peer in the swarm -
    • - -
  • - Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour -
    • - -
  • - 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 - video -
    • - -
  • - The IP address is a vague information: usually, it regularly changes and can represent many persons or entities -
    • - -
  • - Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker. - When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers - to forward the information to. - See this document for more information -
    • -
- -

- The worst-case scenario of an average person spying on their friends is quite unlikely. - There are much more effective ways to get that kind of information. -

- -

How does PeerTube compare with YouTube?

- -

- The threats to privacy with YouTube are different from PeerTube's. - In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you. - Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics). -

- -

What can I do to limit the exposure of my IP address?

- -

- 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 - your IP in their connection logs: ISP/routers/trackers/CDN and more. - 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. - Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense. -

- -

What will be done to mitigate this problem?

- -

- PeerTube wants to deliver the best countermeasures possible, to give you more choice - and render attacks less likely. Here is what we put in place so far: -

- -
    -
  • We set a limit to the number of peers sent by the tracker
    • -
  • We set a limit on the request frequency received by the tracker
    • -
  • Allow instance admins to disable P2P from the administration interface
    • -
- -

- Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling - WebRTC in your browser. -

-
+
+

+
+ P2P & Privacy +

+ +

+ PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server, + but ultimately leaves you the choice to switch back to regular streaming exclusively from the server of the video. What + follows applies only if you want to keep using the P2P mode of PeerTube. +

+ +

+ The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent + tracker as long as you download or watch the video. +

+ +

What are the consequences?

+ +

+ In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video. + In practice, this is much more difficult because: +

+ +
    +
  • + An HTTP request has to be sent on each tracker for each video to spy. + If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot) +
    • + +
  • + For each request sent, the tracker returns random peers at a limited number. + 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 + requests sent to know every peer in the swarm +
    • + +
  • + Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour +
    • + +
  • + 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 + video +
    • + +
  • + The IP address is a vague information: usually, it regularly changes and can represent many persons or entities +
    • + +
  • + Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker. + When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers + to forward the information to. + See this document for more information +
    • +
+ +

+ The worst-case scenario of an average person spying on their friends is quite unlikely. + There are much more effective ways to get that kind of information. +

+

How does PeerTube compare with YouTube?

+ +

+ The threats to privacy with YouTube are different from PeerTube's. + In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you. + Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics). +

+ +

What can I do to limit the exposure of my IP address?

+ +

+ 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 + your IP in their connection logs: ISP/routers/trackers/CDN and more. + 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. + Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense. +

+ +

What will be done to mitigate this problem?

+ +

+ PeerTube wants to deliver the best countermeasures possible, to give you more choice + and render attacks less likely. Here is what we put in place so far: +

+ +
    +
  • We set a limit to the number of peers sent by the tracker
    • +
  • We set a limit on the request frequency received by the tracker
    • +
  • Allow instance admins to disable P2P from the administration interface
    • +
+ +

+ Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling + WebRTC in your browser. +

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 @@ margin: auto; } -.about-peertube-title { - font-size: 25px; - text-align: center; - font-weight: $font-semibold; - margin-bottom: 15px; -} +.card { + @include rfs(2rem, margin); -.mascot { - display: block; - margin: 20px auto; -} - -::ng-deep .section-title { - font-weight: $font-semibold; - font-size: 20px; - margin-bottom: 5px; -} - -.description { - text-align: center; -} - -.documentation { - display: flex; - flex-wrap: wrap; - margin: 50px 0; - justify-content: center; - - .card { - margin: 30px; - flex-basis: 300px; - } -} - -.privacy-contributors { - display: flex; - flex-direction: column; - - .p2p-privacy { - .section-title { - margin: 50px 0 20px; - text-align: center; - } - - h6 { - font-size: 20px; - margin-top: 15px; - } - } + flex-basis: 300px; } .card-title { font-size: 1.1rem; text-align: center; margin-bottom: 1rem; -} - -.p2p-privacy-title { - font-size: 20px; -} +} \ No newline at end of file -- 2.41.0