mirror of https://github.com/Chocobozzz/PeerTube
Refactoring style for about component
Wicklow
Chocobozzz
parent
27f84cc337
commit
35fe58c2f8
|
|
@ -2,7 +2,7 @@
|
||||||
<h1 class="visually-hidden" i18n>Follows</h1>
|
<h1 class="visually-hidden" i18n>Follows</h1>
|
||||||
|
|
||||||
<div class="col-xl-6 col-md-12">
|
<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>
|
<div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
|
||||||
|
|
||||||
|
|
@ -10,11 +10,11 @@
|
||||||
{{ follower }}
|
{{ follower }}
|
||||||
</a>
|
</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>
|
||||||
|
|
||||||
<div class="col-xl-6 col-md-12">
|
<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>
|
<div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
|
||||||
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
{{ following }}
|
{{ following }}
|
||||||
</a>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
@use '_variables' as *;
|
@use '_variables' as *;
|
||||||
@use '_mixins' as *;
|
@use '_mixins' as *;
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -17,10 +11,3 @@ a {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: 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="row">
|
||||||
<div class="col-md-12 col-xl-6">
|
<div class="col-md-12 col-xl-6">
|
||||||
|
|
||||||
<div class="about-instance-title">
|
<div class="d-flex justify-content-between">
|
||||||
<h1 i18n class="title">About {{ instanceName }}</h1>
|
<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>
|
||||||
|
|
||||||
<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 category of categories" class="pt-badge badge-primary">{{ category }}</span>
|
||||||
|
|
||||||
<span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
|
<span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="short-description">
|
<div class="mt-2">
|
||||||
<div class="block short-description">{{ shortDescription }}</div>
|
<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>
|
||||||
|
|
||||||
<div class="anchor" id="administrators-and-sustainability"></div>
|
<div class="anchor" id="administrators-and-sustainability"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,8 @@
|
||||||
@use '_variables' as *;
|
@use '_variables' as *;
|
||||||
@use '_mixins' as *;
|
@use '_mixins' as *;
|
||||||
|
|
||||||
.about-instance-title {
|
.pt-badge {
|
||||||
display: flex;
|
@include margin-right(5px);
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
|
|
@ -36,22 +15,13 @@
|
||||||
|
|
||||||
.middle-title {
|
.middle-title {
|
||||||
@include in-content-small-title;
|
@include in-content-small-title;
|
||||||
|
@include margin-bottom(1.5rem);
|
||||||
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
margin-bottom: 75px;
|
@include margin-bottom(4.5rem);
|
||||||
}
|
|
||||||
|
|
||||||
.short-description {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.short-description .dedicated-to-nsfw {
|
|
||||||
margin-top: 20px;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.anchor-link {
|
.anchor-link {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<div class="root">
|
<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
|
This website is powered by PeerTube
|
||||||
</h1>
|
</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>
|
<p i18n>
|
||||||
PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.
|
PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="documentation">
|
<div class="d-flex flex-wrap justify-content-center my-5">
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
@ -59,104 +59,101 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="privacy-contributors">
|
<div class="d-flex flex-column">
|
||||||
<div class="p2p-privacy">
|
<h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
|
||||||
<h2 class="section-title">
|
<div class="anchor" id="privacy"></div> <!-- privacy anchor -->
|
||||||
<div class="anchor" id="privacy"></div> <!-- privacy anchor -->
|
<ng-container i18n>P2P & Privacy</ng-container>
|
||||||
<ng-container i18n>P2P & Privacy</ng-container>
|
</h2>
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p i18n>
|
<p i18n>
|
||||||
PeerTube uses the BitTorrent protocol to share bandwidth between users by default to help lower the load on the server,
|
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
|
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.
|
follows applies only if you want to keep using the P2P mode of PeerTube.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p i18n>
|
<p i18n>
|
||||||
The main threat to your privacy induced by BitTorrent lies in your IP address being stored in the instance's BitTorrent
|
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.
|
tracker as long as you download or watch the video.
|
||||||
</p>
|
</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>
|
<p i18n>
|
||||||
In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
|
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:
|
In practice, this is much more difficult because:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li i18n>
|
<li i18n>
|
||||||
An HTTP request has to be sent on each tracker for each video to spy.
|
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)
|
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>
|
||||||
|
|
||||||
<li i18n>
|
<li i18n>
|
||||||
For each request sent, the tracker returns random peers at a limited number.
|
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
|
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
|
requests sent to know every peer in the swarm
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li i18n>
|
<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
|
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>
|
||||||
|
|
||||||
<li i18n>
|
<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
|
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
|
video
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li i18n>
|
<li i18n>
|
||||||
The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
|
The IP address is a vague information: usually, it regularly changes and can represent many persons or entities
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li i18n>
|
<li i18n>
|
||||||
Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
|
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
|
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.
|
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
|
See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p i18n>
|
<p i18n>
|
||||||
The worst-case scenario of an average person spying on their friends is quite unlikely.
|
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.
|
There are much more effective ways to get that kind of information.
|
||||||
</p>
|
</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>
|
<p i18n>
|
||||||
The threats to privacy with YouTube are different from PeerTube's.
|
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.
|
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).
|
Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
|
||||||
</p>
|
</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>
|
<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 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.
|
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.
|
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.
|
Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
|
||||||
</p>
|
</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>
|
<p i18n>
|
||||||
PeerTube wants to deliver the best countermeasures possible, to give you more choice
|
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:
|
and render attacks less likely. Here is what we put in place so far:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li i18n>We set a limit to the number of peers sent by the tracker</li>
|
<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>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>
|
<li i18n>Allow instance admins to disable P2P from the administration interface</li>
|
||||||
</ul>
|
</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>
|
|
||||||
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,55 +6,10 @@
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-peertube-title {
|
.card {
|
||||||
font-size: 25px;
|
@include rfs(2rem, margin);
|
||||||
text-align: center;
|
|
||||||
font-weight: $font-semibold;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mascot {
|
flex-basis: 300px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
|
|
@ -62,7 +17,3 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p2p-privacy-title {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue