Refactoring style for about component
This commit is contained in:
Wicklow
Chocobozzz
parent
27f84cc337
commit
35fe58c2f8
|
|
@ -2,7 +2,7 @@
|
|||
<h1 class="visually-hidden" i18n>Follows</h1>
|
||||
|
||||
<div class="col-xl-6 col-md-12">
|
||||
<h2 i18n class="subtitle">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
|
||||
<h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
|
||||
|
||||
<div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
|
||||
|
||||
|
|
@ -10,11 +10,11 @@
|
|||
{{ follower }}
|
||||
</a>
|
||||
|
||||
<button i18n class="show-more" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
|
||||
<button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-md-12">
|
||||
<h2 i18n class="subtitle">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
|
||||
<h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
|
||||
|
||||
<div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{{ following }}
|
||||
</a>
|
||||
|
||||
<button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
|
||||
<button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-xl-6">
|
||||
|
||||
<div class="about-instance-title">
|
||||
<h1 i18n class="title">About {{ instanceName }}</h1>
|
||||
<div class="d-flex justify-content-between">
|
||||
<h1 i18n class="fw-semibold pt-fs-5">About {{ instanceName }}</h1>
|
||||
|
||||
<a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact us</a>
|
||||
<a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
|
||||
</div>
|
||||
|
||||
<div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
|
||||
<div class="mb-4" *ngIf="categories.length !== 0 || languages.length !== 0">
|
||||
<span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
|
||||
|
||||
<span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
|
||||
</div>
|
||||
|
||||
<div class="short-description">
|
||||
<div class="block short-description">{{ shortDescription }}</div>
|
||||
<div class="mt-2">
|
||||
<div class="block">{{ shortDescription }}</div>
|
||||
|
||||
<div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
|
||||
<div i18n *ngIf="isNSFW" class="block mt-4 fw-semibold">This instance is dedicated to sensitive/NSFW content.</div>
|
||||
</div>
|
||||
|
||||
<div class="anchor" id="administrators-and-sustainability"></div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="root">
|
||||
<h1 i18n class="about-peertube-title">
|
||||
<h1 i18n class="pt-fs-3 text-center fw-semibold mb-3">
|
||||
This website is powered by PeerTube
|
||||
</h1>
|
||||
|
||||
<img class="mascot" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
|
||||
<img class="d-block my-4 mx-auto" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
|
||||
|
||||
<div class="description">
|
||||
<div class="text-center">
|
||||
<p i18n>
|
||||
PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.
|
||||
</p>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="documentation">
|
||||
<div class="d-flex flex-wrap justify-content-center my-5">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
|
@ -59,104 +59,101 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="privacy-contributors">
|
||||
<div class="p2p-privacy">
|
||||
<h2 class="section-title">
|
||||
<div class="anchor" id="privacy"></div> <!-- privacy anchor -->
|
||||
<ng-container i18n>P2P & Privacy</ng-container>
|
||||
</h2>
|
||||
<div class="d-flex flex-column">
|
||||
<h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
|
||||
<div class="anchor" id="privacy"></div> <!-- privacy anchor -->
|
||||
<ng-container i18n>P2P & Privacy</ng-container>
|
||||
</h2>
|
||||
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h3 i18n class="p2p-privacy-title">What are the consequences?</h3>
|
||||
<h3 i18n class="pt-fs-5">What are the consequences?</h3>
|
||||
|
||||
<p i18n>
|
||||
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:
|
||||
</p>
|
||||
<p i18n>
|
||||
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:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li i18n>
|
||||
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)
|
||||
</li>
|
||||
<ul>
|
||||
<li i18n>
|
||||
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)
|
||||
</li>
|
||||
|
||||
<li i18n>
|
||||
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
|
||||
</li>
|
||||
<li i18n>
|
||||
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
|
||||
</li>
|
||||
|
||||
<li i18n>
|
||||
Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
|
||||
</li>
|
||||
<li i18n>
|
||||
Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
|
||||
</li>
|
||||
|
||||
<li i18n>
|
||||
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
|
||||
</li>
|
||||
<li i18n>
|
||||
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
|
||||
</li>
|
||||
|
||||
<li i18n>
|
||||
The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
|
||||
</li>
|
||||
<li i18n>
|
||||
The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
|
||||
</li>
|
||||
|
||||
<li i18n>
|
||||
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 <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
|
||||
</li>
|
||||
</ul>
|
||||
<li i18n>
|
||||
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 <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
|
||||
<h3 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h3>
|
||||
|
||||
<p i18n>
|
||||
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).
|
||||
</p>
|
||||
<p i18n>
|
||||
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).
|
||||
</p>
|
||||
|
||||
<h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
|
||||
<h3 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h3>
|
||||
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
<p i18n>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
|
||||
<h3 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h3>
|
||||
|
||||
<p i18n>
|
||||
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:
|
||||
</p>
|
||||
<p i18n>
|
||||
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:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li i18n>We set a limit to the number of peers sent by the tracker</li>
|
||||
<li i18n>We set a limit on the request frequency received by the tracker</li>
|
||||
<li i18n>Allow instance admins to disable P2P from the administration interface</li>
|
||||
</ul>
|
||||
|
||||
<p i18n>
|
||||
Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling
|
||||
WebRTC in your browser.
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li i18n>We set a limit to the number of peers sent by the tracker</li>
|
||||
<li i18n>We set a limit on the request frequency received by the tracker</li>
|
||||
<li i18n>Allow instance admins to disable P2P from the administration interface</li>
|
||||
</ul>
|
||||
|
||||
<p i18n>
|
||||
Ultimately, remember you can always disable P2P by toggling it in the video player, or just by disabling
|
||||
WebRTC in your browser.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue