aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html14
-rw-r--r--client/src/app/+about/about-peertube/about-peertube-contributors.component.html13
-rw-r--r--client/src/app/+about/about-peertube/about-peertube-contributors.component.scss15
-rw-r--r--client/src/app/+about/about-peertube/about-peertube-contributors.component.ts19
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.html163
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.scss43
-rw-r--r--client/src/app/+about/about.module.ts3
-rw-r--r--client/src/app/shared/renderer/markdown.service.ts19
-rw-r--r--client/src/assets/images/framasoft.pngbin0 -> 5232 bytes
9 files changed, 195 insertions, 94 deletions
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 9499bbe4e..25d416740 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -4,7 +4,7 @@
4 <div class="about-instance-title"> 4 <div class="about-instance-title">
5 <div i18n class="title">About {{ instanceName }} instance</div> 5 <div i18n class="title">About {{ instanceName }} instance</div>
6 6
7 <div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div> 7 <div i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" role="button" class="contact-admin">Contact administrator</div>
8 </div> 8 </div>
9 9
10 <div class="block instance-badges"> 10 <div class="block instance-badges">
@@ -16,10 +16,10 @@
16 <div class="short-description"> 16 <div class="short-description">
17 <div class="block short-description">{{ shortDescription }}</div> 17 <div class="block short-description">{{ shortDescription }}</div>
18 18
19 <div *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> 19 <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
20 </div> 20 </div>
21 21
22 <div class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel"> 22 <div i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
23 Administrators & sustainability 23 Administrators & sustainability
24 </div> 24 </div>
25 25
@@ -47,7 +47,7 @@
47 <p>{{ businessModel }}</p> 47 <p>{{ businessModel }}</p>
48 </div> 48 </div>
49 49
50 <div class="middle-title" *ngIf="html.description"> 50 <div i18n class="middle-title" *ngIf="html.description">
51 Information 51 Information
52 </div> 52 </div>
53 53
@@ -57,7 +57,7 @@
57 <div [innerHTML]="html.description"></div> 57 <div [innerHTML]="html.description"></div>
58 </div> 58 </div>
59 59
60 <div class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms"> 60 <div i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
61 Moderation 61 Moderation
62 </div> 62 </div>
63 63
@@ -79,7 +79,7 @@
79 <div [innerHTML]="html.terms"></div> 79 <div [innerHTML]="html.terms"></div>
80 </div> 80 </div>
81 81
82 <div class="middle-title" *ngIf="html.hardwareInformation"> 82 <div i18n class="middle-title" *ngIf="html.hardwareInformation">
83 Other information 83 Other information
84 </div> 84 </div>
85 85
@@ -91,7 +91,7 @@
91 </div> 91 </div>
92 92
93 <div class="col-md-12 col-xl-6"> 93 <div class="col-md-12 col-xl-6">
94 <label>Features found on this instance</label> 94 <label i18n>Features found on this instance</label>
95 <my-instance-features-table></my-instance-features-table> 95 <my-instance-features-table></my-instance-features-table>
96 </div> 96 </div>
97</div> 97</div>
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.html b/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
new file mode 100644
index 000000000..997a6a3e1
--- /dev/null
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.html
@@ -0,0 +1,13 @@
1<h3 i18n class="section-title">Who made this software?</h3>
2
3<p align="center">
4 <strong>Developed with &#10084; by <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft</a></strong>
5</p>
6
7<p align="center">
8 <a target="_blank" rel="noopener noreferrer" href="https://framasoft.org">
9 <img width="150px" src="/client/assets/images/framasoft.png" alt="Framasoft logo"/>
10 </a>
11</p>
12
13<div [innerHTML]="creditsHtml"></div>
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
new file mode 100644
index 000000000..9c3b0a46b
--- /dev/null
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
@@ -0,0 +1,15 @@
1@import '_variables';
2@import '_mixins';
3
4/deep/ h1 {
5 font-size: 1rem;
6}
7
8/deep/ ul {
9 padding: 0;
10
11 li {
12 display: inline-block;
13 margin-right: 10px;
14 }
15}
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts b/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts
new file mode 100644
index 000000000..fa2c0daa0
--- /dev/null
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.ts
@@ -0,0 +1,19 @@
1import { Component, OnInit } from '@angular/core'
2import { MarkdownService } from '@app/shared/renderer'
3
4@Component({
5 selector: 'my-about-peertube-contributors',
6 templateUrl: './about-peertube-contributors.component.html',
7 styleUrls: [ './about-peertube-contributors.component.scss' ]
8})
9export class AboutPeertubeContributorsComponent implements OnInit {
10 creditsHtml: string
11
12 private markdown = require('raw-loader!../../../../../CREDITS.md')
13
14 constructor (private markdownService: MarkdownService) { }
15
16 async ngOnInit () {
17 this.creditsHtml = await this.markdownService.completeMarkdownToHTML(this.markdown)
18 }
19}
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 d3fc9a828..423f7bce7 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -14,84 +14,89 @@
14 </p> 14 </p>
15</div> 15</div>
16 16
17<div id="p2p-privacy"> 17<div class="privacy-contributors">
18 <h3 i18n class="section-title">P2P & Privacy</h3> 18 <my-about-peertube-contributors></my-about-peertube-contributors>
19
20 <div class="p2p-privacy">
21 <h3 i18n class="section-title">P2P & Privacy</h3>
22
23 <p i18n>
24 PeerTube uses the BitTorrent protocol to share bandwidth between users.
25 This implies that your IP address is stored in the instance's BitTorrent tracker as long as you download or watch the video.
26 </p>
27
28 <h6 i18n class="p2p-privacy-title">What are the consequences?</h6>
29
30 <p i18n>
31 In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
32 In practice, this is much more difficult because:
33 </p>
34
35 <ul>
36 <li i18n>
37 An HTTP request has to be sent on each tracker for each video to spy.
38 If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
39 </li>
40
41 <li i18n>
42 For each request sent, the tracker returns random peers at a limited number.
43 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 peers in the swarm
44 </li>
45
46 <li i18n>
47 Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
48 </li>
49
50 <li i18n>
51 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
52 </li>
53
54 <li i18n>
55 The IP address is a vague information : usually, it regularly changes and can represent many persons or entities
56 </li>
57
58 <li i18n>
59 Web peers are not publicly accessible: because we use WebRTC inside the web browser (<a href="https://webtorrent.io/">with the WebTorrent library</a>), the protocol is different from classic BitTorrent.
60 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.
61 See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
62 </li>
63 </ul>
64
65 <p i18n>
66 The worst-case scenario of an average person spying on their friends is quite unlikely.
67 There are much more effective ways to get that kind of information.
68 </p>
69
70 <h6 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h6>
71
72 <p i18n>
73 The threats to privacy in YouTube are different from PeerTube's.
74 In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
75 Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
76 </p>
77
78 <h6 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h6>
79
80 <p i18n>
81 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.
82 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.
83 Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
84 </p>
85
86 <h6 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h6>
87
88 <p i18n>
89 PeerTube is in its early stages, and want to deliver the best countermeasures possible by the time the stable is released.
90 In the meantime, we want to test different ideas related to this issue:
91 </p>
92
93 <ul>
94 <li i18n>Set a limit to the number of peers sent by the tracker</li>
95 <li i18n>Set a limit on the request frequency received by the tracker (being tested)</li>
96 <li i18n>Ring a bell if there are unusual requests (being tested)</li>
97 <li i18n>Disable P2P from the administration interface</li>
98 <li i18n>An automatic video redundancy program: we wouldn't know if the IP downloaded the video on purpose or if it was the automatized program</li>
99 </ul>
100 </div>
19 101
20 <p i18n>
21 PeerTube uses the BitTorrent protocol to share bandwidth between users.
22 This implies that your IP address is stored in the instance's BitTorrent tracker as long as you download or watch the video.
23 </p>
24
25 <h6 i18n class="p2p-privacy-title">What are the consequences?</h6>
26
27 <p i18n>
28 In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
29 In practice, this is much more difficult because:
30 </p>
31
32 <ul>
33 <li i18n>
34 An HTTP request has to be sent on each tracker for each video to spy.
35 If we want to spy all PeerTube's videos, we have to send as many requests as there are videos (so potentially a lot)
36 </li>
37
38 <li i18n>
39 For each request sent, the tracker returns random peers at a limited number.
40 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 peers in the swarm
41 </li>
42
43 <li i18n>
44 Those requests have to be sent regularly to know who starts/stops watching a video. It is easy to detect that kind of behaviour
45 </li>
46
47 <li i18n>
48 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
49 </li>
50
51 <li i18n>
52 The IP address is a vague information : usually, it regularly changes and can represent many persons or entities
53 </li>
54
55 <li i18n>
56 Web peers are not publicly accessible: because we use WebRTC inside the web browser (<a href="https://webtorrent.io/">with the WebTorrent library</a>), the protocol is different from classic BitTorrent.
57 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.
58 See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
59 </li>
60 </ul>
61
62 <p i18n>
63 The worst-case scenario of an average person spying on their friends is quite unlikely.
64 There are much more effective ways to get that kind of information.
65 </p>
66
67 <h6 i18n class="p2p-privacy-title">How does PeerTube compare with YouTube?</h6>
68
69 <p i18n>
70 The threats to privacy in YouTube are different from PeerTube's.
71 In YouTube's case, the platform gathers a huge amount of your personal information (not only your IP) to analyze them and track you.
72 Moreover, YouTube is owned by Google/Alphabet, a company that tracks you across many websites (via AdSense or Google Analytics).
73 </p>
74
75 <h6 i18n class="p2p-privacy-title">What can I do to limit the exposure of my IP address?</h6>
76
77 <p i18n>
78 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.
79 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.
80 Thinking that removing P2P from PeerTube will give you back anonymity doesn't make sense.
81 </p>
82
83 <h6 i18n class="p2p-privacy-title">What will be done to mitigate this problem?</h6>
84
85 <p i18n>
86 PeerTube is in its early stages, and want to deliver the best countermeasures possible by the time the stable is released.
87 In the meantime, we want to test different ideas related to this issue:
88 </p>
89
90 <ul>
91 <li i18n>Set a limit to the number of peers sent by the tracker</li>
92 <li i18n>Set a limit on the request frequency received by the tracker (being tested)</li>
93 <li i18n>Ring a bell if there are unusual requests (being tested)</li>
94 <li i18n>Disable P2P from the administration interface</li>
95 <li i18n>An automatic video redundancy program: we wouldn't know if the IP downloaded the video on purpose or if it was the automatized program</li>
96 </ul>
97</div> 102</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 0d2e2bb68..8fca53e90 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -2,12 +2,12 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.about-peertube-title { 4.about-peertube-title {
5 font-size: 25px; 5 font-size: 20px;
6 font-weight: bold; 6 font-weight: $font-semibold;
7 margin-bottom: 15px; 7 margin-bottom: 15px;
8} 8}
9 9
10.section-title { 10/deep/ .section-title {
11 font-weight: $font-semibold; 11 font-weight: $font-semibold;
12 font-size: 20px; 12 font-size: 20px;
13 margin-bottom: 5px; 13 margin-bottom: 5px;
@@ -17,6 +17,41 @@
17 margin-bottom: 30px; 17 margin-bottom: 30px;
18} 18}
19 19
20.description,
21.p2p-privacy,
22my-about-peertube-contributors {
23 /deep/ {
24 p, li {
25 font-size: 15px;
26 }
27 }
28}
29
20.p2p-privacy-title { 30.p2p-privacy-title {
21 margin-top: 15px; 31 margin-top: 15px;
22} \ No newline at end of file 32}
33
34.privacy-contributors {
35 display: flex;
36 flex-direction: row;
37
38 > div,
39 > my-about-peertube-contributors {
40 flex-basis: 100%;
41 display: block;
42 }
43
44 .p2p-privacy {
45 h6 {
46 font-size: 20px;
47 }
48 }
49
50 my-about-peertube-contributors {
51 margin: 0 40px 40px 0;
52 }
53
54 @media screen and (max-width: $small-view) {
55 flex-direction: column;
56 }
57}
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 49a7a52f8..14bf76e55 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -1,5 +1,4 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2
3import { AboutRoutingModule } from './about-routing.module' 2import { AboutRoutingModule } from './about-routing.module'
4import { AboutComponent } from './about.component' 3import { AboutComponent } from './about.component'
5import { SharedModule } from '../shared' 4import { SharedModule } from '../shared'
@@ -7,6 +6,7 @@ import { AboutInstanceComponent } from '@app/+about/about-instance/about-instanc
7import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' 6import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
8import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' 7import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
9import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component' 8import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
9import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
10 10
11@NgModule({ 11@NgModule({
12 imports: [ 12 imports: [
@@ -19,6 +19,7 @@ import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.c
19 AboutInstanceComponent, 19 AboutInstanceComponent,
20 AboutPeertubeComponent, 20 AboutPeertubeComponent,
21 AboutFollowsComponent, 21 AboutFollowsComponent,
22 AboutPeertubeContributorsComponent,
22 ContactAdminModalComponent 23 ContactAdminModalComponent
23 ], 24 ],
24 25
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 9a9066351..0e24f3085 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -13,9 +13,11 @@ export class MarkdownService {
13 'list' 13 'list'
14 ] 14 ]
15 static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ]) 15 static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
16 static COMPLETE_RULES = MarkdownService.ENHANCED_RULES.concat([ 'block', 'inline', 'heading', 'html_inline', 'html_block', 'paragraph' ])
16 17
17 private textMarkdownIt: MarkdownIt 18 private textMarkdownIt: MarkdownIt
18 private enhancedMarkdownIt: MarkdownIt 19 private enhancedMarkdownIt: MarkdownIt
20 private completeMarkdownIt: MarkdownIt
19 21
20 async textMarkdownToHTML (markdown: string) { 22 async textMarkdownToHTML (markdown: string) {
21 if (!markdown) return '' 23 if (!markdown) return ''
@@ -39,11 +41,22 @@ export class MarkdownService {
39 return this.avoidTruncatedTags(html) 41 return this.avoidTruncatedTags(html)
40 } 42 }
41 43
42 private async createMarkdownIt (rules: string[]) { 44 async completeMarkdownToHTML (markdown: string) {
43 // FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function 45 if (!markdown) return ''
46
47 if (!this.completeMarkdownIt) {
48 this.completeMarkdownIt = await this.createMarkdownIt(MarkdownService.COMPLETE_RULES, true)
49 }
50
51 const html = this.completeMarkdownIt.render(markdown)
52 return this.avoidTruncatedTags(html)
53 }
54
55 private async createMarkdownIt (rules: string[], html = false) {
56 // FIXME: import('...') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
44 const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default 57 const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
45 58
46 const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true }) 59 const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html })
47 60
48 for (const rule of rules) { 61 for (const rule of rules) {
49 markdownIt.enable(rule) 62 markdownIt.enable(rule)
diff --git a/client/src/assets/images/framasoft.png b/client/src/assets/images/framasoft.png
new file mode 100644
index 000000000..57be8c219
--- /dev/null
+++ b/client/src/assets/images/framasoft.png
Binary files differ
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 05:24:25 +0000