aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-08-27 10:18:49 +0200
committerChocobozzz <chocobozzz@cpy.re>2019-09-05 10:17:02 +0200
commit4402b54dce0fe652ba71326f0dc74db287963260 (patch)
tree5c93a79b132932ab91b4365326e0b0c9c7b38281
parenta00045a2184e4cb24b838e95937e7ffedcd66b2b (diff)
downloadPeerTube-4402b54dce0fe652ba71326f0dc74db287963260.tar.gz
PeerTube-4402b54dce0fe652ba71326f0dc74db287963260.tar.zst
PeerTube-4402b54dce0fe652ba71326f0dc74db287963260.zip
Add categories and languages to about page
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html26
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss1
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.ts60
3 files changed, 62 insertions, 25 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 0fd3626b7..c6247c4ae 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -8,9 +8,25 @@
8 </div> 8 </div>
9 9
10 <div class="short-description"> 10 <div class="short-description">
11 <div>{{ shortDescription }}</div> 11 <div class="block short-description">{{ shortDescription }}</div>
12 12
13 <div *ngIf="isNSFW" class="dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> 13 <div *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
14
15 <div class="block">
16 <div class="section-title" *ngIf="languages.length !== 0">Main instance languages</div>
17
18 <ul>
19 <li *ngFor="let language of languages">{{ language }}</li>
20 </ul>
21 </div>
22
23 <div class="block">
24 <div class="section-title" *ngIf="categories.length !== 0">Main instance categories</div>
25
26 <ul>
27 <li *ngFor="let category of categories">{{ category }}</li>
28 </ul>
29 </div>
14 </div> 30 </div>
15 31
16 <div class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel"> 32 <div class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
@@ -18,19 +34,19 @@
18 </div> 34 </div>
19 35
20 <div class="block administrator" *ngIf="html.administrator"> 36 <div class="block administrator" *ngIf="html.administrator">
21 <div i18n class="section-title">Instance administrators</div> 37 <div i18n class="section-title">Who are we?</div>
22 38
23 <div [innerHTML]="html.administrator"></div> 39 <div [innerHTML]="html.administrator"></div>
24 </div> 40 </div>
25 41
26 <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime"> 42 <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
27 <div i18n class="section-title">Maintenance lifetime</div> 43 <div i18n class="section-title">How long do we plan to maintain this instance?</div>
28 44
29 <p>{{ maintenanceLifetime }}</p> 45 <p>{{ maintenanceLifetime }}</p>
30 </div> 46 </div>
31 47
32 <div class="block business-model" *ngIf="businessModel"> 48 <div class="block business-model" *ngIf="businessModel">
33 <div i18n class="section-title">Business model</div> 49 <div i18n class="section-title">How will we pay this instance?</div>
34 50
35 <p>{{ businessModel }}</p> 51 <p>{{ businessModel }}</p>
36 </div> 52 </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 0585ad5f3..d71cfffc6 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -36,6 +36,7 @@
36 36
37.block { 37.block {
38 margin-bottom: 30px; 38 margin-bottom: 30px;
39 font-size: 15px;
39} 40}
40 41
41.short-description .dedicated-to-nsfw { 42.short-description .dedicated-to-nsfw {
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index b85a6be94..0af1dca9c 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -4,6 +4,9 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
4import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' 4import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
5import { InstanceService } from '@app/shared/instance/instance.service' 5import { InstanceService } from '@app/shared/instance/instance.service'
6import { MarkdownService } from '@app/shared/renderer' 6import { MarkdownService } from '@app/shared/renderer'
7import { forkJoin } from 'rxjs'
8import { first } from 'rxjs/operators'
9import { peertubeTranslate } from '@shared/models'
7 10
8@Component({ 11@Component({
9 selector: 'my-about-instance', 12 selector: 'my-about-instance',
@@ -27,7 +30,7 @@ export class AboutInstanceComponent implements OnInit {
27 businessModel = '' 30 businessModel = ''
28 31
29 languages: string[] = [] 32 languages: string[] = []
30 categories: number[] = [] 33 categories: string[] = []
31 34
32 constructor ( 35 constructor (
33 private notifier: Notifier, 36 private notifier: Notifier,
@@ -50,28 +53,45 @@ export class AboutInstanceComponent implements OnInit {
50 } 53 }
51 54
52 ngOnInit () { 55 ngOnInit () {
53 this.instanceService.getAbout() 56 forkJoin([
54 .subscribe( 57 this.instanceService.getAbout(),
55 async res => { 58 this.serverService.localeObservable.pipe(first()),
56 this.shortDescription = res.instance.shortDescription 59 this.serverService.videoLanguagesLoaded.pipe(first()),
57 60 this.serverService.videoCategoriesLoaded.pipe(first())
58 this.maintenanceLifetime = res.instance.maintenanceLifetime 61 ]).subscribe(
59 this.businessModel = res.instance.businessModel 62 async ([ res, translations ]) => {
60 63 this.shortDescription = res.instance.shortDescription
61 for (const key of [ 'description', 'terms', 'codeOfConduct', 'moderationInformation', 'administrator' ]) { 64
62 this.html[key] = await this.markdownService.textMarkdownToHTML(res.instance[key]) 65 this.maintenanceLifetime = res.instance.maintenanceLifetime
63 } 66 this.businessModel = res.instance.businessModel
64 67
65 this.languages = res.instance.languages 68 for (const key of [ 'description', 'terms', 'codeOfConduct', 'moderationInformation', 'administrator' ]) {
66 this.categories = res.instance.categories 69 this.html[ key ] = await this.markdownService.textMarkdownToHTML(res.instance[ key ])
67 }, 70 }
68 71
69 () => this.notifier.error(this.i18n('Cannot get about information from server')) 72 const languagesArray = this.serverService.getVideoLanguages()
70 ) 73 const categoriesArray = this.serverService.getVideoCategories()
74
75 this.languages = res.instance.languages
76 .map(l => {
77 const languageObj = languagesArray.find(la => la.id === l)
78
79 return peertubeTranslate(languageObj.label, translations)
80 })
81
82 this.categories = res.instance.categories
83 .map(c => {
84 const categoryObj = categoriesArray.find(ca => ca.id === c)
85
86 return peertubeTranslate(categoryObj.label, translations)
87 })
88 },
89
90 () => this.notifier.error(this.i18n('Cannot get about information from server'))
91 )
71 } 92 }
72 93
73 openContactModal () { 94 openContactModal () {
74 return this.contactAdminModal.show() 95 return this.contactAdminModal.show()
75 } 96 }
76
77} 97}