aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-31 17:47:36 +0100
committerChocobozzz <me@florianbigard.com>2018-01-31 17:51:04 +0100
commit36f9424ff192b0584a433bc196bced6fcf265808 (patch)
tree35d9fa5c53b228f5e7fc27bcc82854d035e9dde8 /client/src
parent66b16cafb380012d3eca14e524d86f2450e04069 (diff)
downloadPeerTube-36f9424ff192b0584a433bc196bced6fcf265808.tar.gz
PeerTube-36f9424ff192b0584a433bc196bced6fcf265808.tar.zst
PeerTube-36f9424ff192b0584a433bc196bced6fcf265808.zip
Add about page
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/about/about-routing.module.ts23
-rw-r--r--client/src/app/about/about.component.html17
-rw-r--r--client/src/app/about/about.component.scss12
-rw-r--r--client/src/app/about/about.component.ts38
-rw-r--r--client/src/app/about/about.module.ts24
-rw-r--r--client/src/app/about/index.ts3
-rw-r--r--client/src/app/app.component.html2
-rw-r--r--client/src/app/app.component.ts4
-rw-r--r--client/src/app/app.module.ts2
-rw-r--r--client/src/app/core/server/server.service.ts33
-rw-r--r--client/src/app/menu/menu.component.html9
-rw-r--r--client/src/app/menu/menu.component.scss7
-rw-r--r--client/src/app/shared/forms/form-validators/custom-config.ts2
-rw-r--r--client/src/app/videos/shared/markdown.service.ts3
-rw-r--r--client/src/assets/images/menu/about.svg12
15 files changed, 184 insertions, 7 deletions
diff --git a/client/src/app/about/about-routing.module.ts b/client/src/app/about/about-routing.module.ts
new file mode 100644
index 000000000..11a650c80
--- /dev/null
+++ b/client/src/app/about/about-routing.module.ts
@@ -0,0 +1,23 @@
1import { NgModule } from '@angular/core'
2import { RouterModule, Routes } from '@angular/router'
3import { MetaGuard } from '@ngx-meta/core'
4import { AboutComponent } from './about.component'
5
6const aboutRoutes: Routes = [
7 {
8 path: 'about',
9 component: AboutComponent,
10 canActivate: [ MetaGuard ],
11 data: {
12 meta: {
13 title: 'About'
14 }
15 }
16 }
17]
18
19@NgModule({
20 imports: [ RouterModule.forChild(aboutRoutes) ],
21 exports: [ RouterModule ]
22})
23export class AboutRoutingModule {}
diff --git a/client/src/app/about/about.component.html b/client/src/app/about/about.component.html
new file mode 100644
index 000000000..c0be53581
--- /dev/null
+++ b/client/src/app/about/about.component.html
@@ -0,0 +1,17 @@
1<div class="margin-content">
2 <div class="title-page title-page-single">
3 Welcome to the {{ instanceName }} instance
4 </div>
5
6 <div class="description">
7 <div class="section-title">Description</div>
8
9 <div [innerHTML]="descriptionHTML"></div>
10 </div>
11
12 <div class="terms">
13 <div class="section-title">Terms</div>
14
15 <div [innerHTML]="termsHTML"></div>
16 </div>
17</div>
diff --git a/client/src/app/about/about.component.scss b/client/src/app/about/about.component.scss
new file mode 100644
index 000000000..dba4df729
--- /dev/null
+++ b/client/src/app/about/about.component.scss
@@ -0,0 +1,12 @@
1@import '_variables';
2@import '_mixins';
3
4.section-title {
5 font-weight: $font-semibold;
6 font-size: 20px;
7 margin-bottom: 5px;
8}
9
10.description {
11 margin-bottom: 30px;
12}
diff --git a/client/src/app/about/about.component.ts b/client/src/app/about/about.component.ts
new file mode 100644
index 000000000..6a2e59be1
--- /dev/null
+++ b/client/src/app/about/about.component.ts
@@ -0,0 +1,38 @@
1import { Component, OnInit } from '@angular/core'
2import { ServerService } from '@app/core'
3import { MarkdownService } from '@app/videos/shared'
4import { NotificationsService } from 'angular2-notifications'
5
6@Component({
7 selector: 'my-about',
8 templateUrl: './about.component.html',
9 styleUrls: [ './about.component.scss' ]
10})
11
12export class AboutComponent implements OnInit {
13 descriptionHTML = ''
14 termsHTML = ''
15
16 constructor (
17 private notificationsService: NotificationsService,
18 private serverService: ServerService,
19 private markdownService: MarkdownService
20 ) {}
21
22 get instanceName () {
23 return this.serverService.getConfig().instance.name
24 }
25
26 ngOnInit () {
27 this.serverService.getAbout()
28 .subscribe(
29 res => {
30 this.descriptionHTML = this.markdownService.markdownToHTML(res.instance.description)
31 this.termsHTML = this.markdownService.markdownToHTML(res.instance.terms)
32 },
33
34 err => this.notificationsService.error('Error', err)
35 )
36 }
37
38}
diff --git a/client/src/app/about/about.module.ts b/client/src/app/about/about.module.ts
new file mode 100644
index 000000000..da3163f43
--- /dev/null
+++ b/client/src/app/about/about.module.ts
@@ -0,0 +1,24 @@
1import { NgModule } from '@angular/core'
2
3import { AboutRoutingModule } from './about-routing.module'
4import { AboutComponent } from './about.component'
5import { SharedModule } from '../shared'
6
7@NgModule({
8 imports: [
9 AboutRoutingModule,
10 SharedModule
11 ],
12
13 declarations: [
14 AboutComponent
15 ],
16
17 exports: [
18 AboutComponent
19 ],
20
21 providers: [
22 ]
23})
24export class AboutModule { }
diff --git a/client/src/app/about/index.ts b/client/src/app/about/index.ts
new file mode 100644
index 000000000..218d09801
--- /dev/null
+++ b/client/src/app/about/index.ts
@@ -0,0 +1,3 @@
1export * from './about-routing.module'
2export * from './about.component'
3export * from './about.module'
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index ba7debc71..3a7aedac6 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -6,7 +6,7 @@
6 6
7 <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage"> 7 <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
8 <span class="icon icon-logo"></span> 8 <span class="icon icon-logo"></span>
9 PeerTube 9 {{ instanceName }}
10 </a> 10 </a>
11 </div> 11 </div>
12 12
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 55c7bbf99..121e60ffc 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -34,6 +34,10 @@ export class AppComponent implements OnInit {
34 return this.serverService.getConfig().serverVersion 34 return this.serverService.getConfig().serverVersion
35 } 35 }
36 36
37 get instanceName () {
38 return this.serverService.getConfig().instance.name
39 }
40
37 ngOnInit () { 41 ngOnInit () {
38 this.authService.loadClientCredentials() 42 this.authService.loadClientCredentials()
39 43
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index ddcaf3f48..1134d061b 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -1,5 +1,6 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { BrowserModule } from '@angular/platform-browser' 2import { BrowserModule } from '@angular/platform-browser'
3import { AboutModule } from '@app/about'
3import { ResetPasswordModule } from '@app/reset-password' 4import { ResetPasswordModule } from '@app/reset-password'
4 5
5import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core' 6import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
@@ -51,6 +52,7 @@ export function metaFactory (): MetaLoader {
51 SignupModule, 52 SignupModule,
52 SharedModule, 53 SharedModule,
53 VideosModule, 54 VideosModule,
55 AboutModule,
54 56
55 MetaModule.forRoot({ 57 MetaModule.forRoot({
56 provide: MetaLoader, 58 provide: MetaLoader,
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 6df449018..65714fd05 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -3,12 +3,14 @@ import { Injectable } from '@angular/core'
3import 'rxjs/add/operator/do' 3import 'rxjs/add/operator/do'
4import { ReplaySubject } from 'rxjs/ReplaySubject' 4import { ReplaySubject } from 'rxjs/ReplaySubject'
5import { ServerConfig } from '../../../../../shared' 5import { ServerConfig } from '../../../../../shared'
6import { About } from '../../../../../shared/models/config/about.model'
6import { environment } from '../../../environments/environment' 7import { environment } from '../../../environments/environment'
7 8
8@Injectable() 9@Injectable()
9export class ServerService { 10export class ServerService {
10 private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/' 11 private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/'
11 private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/' 12 private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
13 private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
12 14
13 videoPrivaciesLoaded = new ReplaySubject<boolean>(1) 15 videoPrivaciesLoaded = new ReplaySubject<boolean>(1)
14 videoCategoriesLoaded = new ReplaySubject<boolean>(1) 16 videoCategoriesLoaded = new ReplaySubject<boolean>(1)
@@ -16,6 +18,9 @@ export class ServerService {
16 videoLanguagesLoaded = new ReplaySubject<boolean>(1) 18 videoLanguagesLoaded = new ReplaySubject<boolean>(1)
17 19
18 private config: ServerConfig = { 20 private config: ServerConfig = {
21 instance: {
22 name: 'PeerTube'
23 },
19 serverVersion: 'Unknown', 24 serverVersion: 'Unknown',
20 signup: { 25 signup: {
21 allowed: false 26 allowed: false
@@ -40,11 +45,14 @@ export class ServerService {
40 private videoLanguages: Array<{ id: number, label: string }> = [] 45 private videoLanguages: Array<{ id: number, label: string }> = []
41 private videoPrivacies: Array<{ id: number, label: string }> = [] 46 private videoPrivacies: Array<{ id: number, label: string }> = []
42 47
43 constructor (private http: HttpClient) {} 48 constructor (private http: HttpClient) {
49 this.loadConfigLocally()
50 }
44 51
45 loadConfig () { 52 loadConfig () {
46 this.http.get<ServerConfig>(ServerService.BASE_CONFIG_URL) 53 this.http.get<ServerConfig>(ServerService.BASE_CONFIG_URL)
47 .subscribe(data => this.config = data) 54 .do(this.saveConfigLocally)
55 .subscribe(data => this.config = data)
48 } 56 }
49 57
50 loadVideoCategories () { 58 loadVideoCategories () {
@@ -83,6 +91,10 @@ export class ServerService {
83 return this.videoPrivacies 91 return this.videoPrivacies
84 } 92 }
85 93
94 getAbout () {
95 return this.http.get<About>(ServerService.BASE_CONFIG_URL + '/about')
96 }
97
86 private loadVideoAttributeEnum ( 98 private loadVideoAttributeEnum (
87 attributeName: 'categories' | 'licences' | 'languages' | 'privacies', 99 attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
88 hashToPopulate: { id: number, label: string }[], 100 hashToPopulate: { id: number, label: string }[],
@@ -101,4 +113,21 @@ export class ServerService {
101 notifier.next(true) 113 notifier.next(true)
102 }) 114 })
103 } 115 }
116
117 private saveConfigLocally (config: ServerConfig) {
118 localStorage.setItem(ServerService.CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config))
119 }
120
121 private loadConfigLocally () {
122 const configString = localStorage.getItem(ServerService.CONFIG_LOCAL_STORAGE_KEY)
123
124 if (configString) {
125 try {
126 const parsed = JSON.parse(configString)
127 Object.assign(this.config, parsed)
128 } catch (err) {
129 console.error('Cannot parse config saved in local storage.', err)
130 }
131 }
132 }
104} 133}
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 94f82e352..d174c76ba 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -45,12 +45,17 @@
45 </a> 45 </a>
46 </div> 46 </div>
47 47
48 <div *ngIf="userHasAdminAccess" class="panel-block"> 48 <div class="panel-block">
49 <div class="block-title">More</div> 49 <div class="block-title">More</div>
50 50
51 <a [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active"> 51 <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
52 <span class="icon icon-administration"></span> 52 <span class="icon icon-administration"></span>
53 Administration 53 Administration
54 </a> 54 </a>
55
56 <a routerLink="/about" routerLinkActive="active">
57 <span class="icon icon-about"></span>
58 About
59 </a>
55 </div> 60 </div>
56</menu> 61</menu>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 4714a9e87..1f3c889cf 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -132,6 +132,13 @@ menu {
132 132
133 background-image: url('../../assets/images/menu/administration.svg'); 133 background-image: url('../../assets/images/menu/administration.svg');
134 } 134 }
135
136 &.icon-about {
137 width: 23px;
138 height: 23px;
139
140 background-image: url('../../assets/images/menu/about.svg');
141 }
135 } 142 }
136 } 143 }
137 } 144 }
diff --git a/client/src/app/shared/forms/form-validators/custom-config.ts b/client/src/app/shared/forms/form-validators/custom-config.ts
index 9e3fa98d8..a0966a9a7 100644
--- a/client/src/app/shared/forms/form-validators/custom-config.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config.ts
@@ -3,7 +3,7 @@ import { Validators } from '@angular/forms'
3export const INSTANCE_NAME = { 3export const INSTANCE_NAME = {
4 VALIDATORS: [ Validators.required ], 4 VALIDATORS: [ Validators.required ],
5 MESSAGES: { 5 MESSAGES: {
6 'required': 'Instance name is required.', 6 'required': 'Instance name is required.'
7 } 7 }
8} 8}
9 9
diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts
index fd0330f9b..3f51a82ce 100644
--- a/client/src/app/videos/shared/markdown.service.ts
+++ b/client/src/app/videos/shared/markdown.service.ts
@@ -7,12 +7,13 @@ export class MarkdownService {
7 private markdownIt: MarkdownIt.MarkdownIt 7 private markdownIt: MarkdownIt.MarkdownIt
8 8
9 constructor () { 9 constructor () {
10 this.markdownIt = new MarkdownIt('zero', { linkify: true }) 10 this.markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
11 .enable('linkify') 11 .enable('linkify')
12 .enable('autolink') 12 .enable('autolink')
13 .enable('emphasis') 13 .enable('emphasis')
14 .enable('link') 14 .enable('link')
15 .enable('newline') 15 .enable('newline')
16 .enable('list')
16 17
17 this.setTargetToLinks() 18 this.setTargetToLinks()
18 } 19 }
diff --git a/client/src/assets/images/menu/about.svg b/client/src/assets/images/menu/about.svg
new file mode 100644
index 000000000..eac2932a9
--- /dev/null
+++ b/client/src/assets/images/menu/about.svg
@@ -0,0 +1,12 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5 <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
6 <g id="69" transform="translate(400.000000, 247.000000)">
7 <circle id="Oval-7" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle>
8 <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#808080"></path>
9 </g>
10 </g>
11 </g>
12</svg>