aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/shared
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-10-30 20:26:06 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-10-30 20:26:06 +0100
commit2de96f4d6b800076743ed2073f9529816cfd5c8a (patch)
tree8c2dbd29fe5560e0b24edaa58038581bddd49778 /client/src/app/videos/shared
parent8bf89b095a711d5ac5e6ef55575b166257d0d526 (diff)
downloadPeerTube-2de96f4d6b800076743ed2073f9529816cfd5c8a.tar.gz
PeerTube-2de96f4d6b800076743ed2073f9529816cfd5c8a.tar.zst
PeerTube-2de96f4d6b800076743ed2073f9529816cfd5c8a.zip
Lazy description and previews to video form
Diffstat (limited to 'client/src/app/videos/shared')
-rw-r--r--client/src/app/videos/shared/index.ts1
-rw-r--r--client/src/app/videos/shared/video-description.component.html9
-rw-r--r--client/src/app/videos/shared/video-description.component.scss15
-rw-r--r--client/src/app/videos/shared/video-description.component.ts68
-rw-r--r--client/src/app/videos/shared/video-details.model.ts2
-rw-r--r--client/src/app/videos/shared/video.service.ts14
6 files changed, 100 insertions, 9 deletions
diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts
index 09d961dd3..3f1458088 100644
--- a/client/src/app/videos/shared/index.ts
+++ b/client/src/app/videos/shared/index.ts
@@ -4,4 +4,5 @@ export * from './video.model'
4export * from './video-details.model' 4export * from './video-details.model'
5export * from './video-edit.model' 5export * from './video-edit.model'
6export * from './video.service' 6export * from './video.service'
7export * from './video-description.component'
7export * from './video-pagination.model' 8export * from './video-pagination.model'
diff --git a/client/src/app/videos/shared/video-description.component.html b/client/src/app/videos/shared/video-description.component.html
new file mode 100644
index 000000000..7a228857c
--- /dev/null
+++ b/client/src/app/videos/shared/video-description.component.html
@@ -0,0 +1,9 @@
1<textarea
2 [(ngModel)]="description" (ngModelChange)="onModelChange()"
3 id="description" class="form-control" placeholder="My super video">
4</textarea>
5
6<tabset #staticTabs class="previews">
7 <tab heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
8 <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
9</tabset>
diff --git a/client/src/app/videos/shared/video-description.component.scss b/client/src/app/videos/shared/video-description.component.scss
new file mode 100644
index 000000000..d8d73e846
--- /dev/null
+++ b/client/src/app/videos/shared/video-description.component.scss
@@ -0,0 +1,15 @@
1textarea {
2 height: 150px;
3}
4
5.previews /deep/ {
6 .nav {
7 margin-top: 10px;
8 font-size: 0.9em;
9 }
10
11 .tab-content {
12 min-height: 75px;
13 padding: 5px;
14 }
15}
diff --git a/client/src/app/videos/shared/video-description.component.ts b/client/src/app/videos/shared/video-description.component.ts
new file mode 100644
index 000000000..d9ffb7800
--- /dev/null
+++ b/client/src/app/videos/shared/video-description.component.ts
@@ -0,0 +1,68 @@
1import { Component, forwardRef, Input, OnInit } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3import { Subject } from 'rxjs/Subject'
4import 'rxjs/add/operator/debounceTime'
5import 'rxjs/add/operator/distinctUntilChanged'
6
7import { truncate } from 'lodash'
8
9import { MarkdownService } from './markdown.service'
10
11@Component({
12 selector: 'my-video-description',
13 templateUrl: './video-description.component.html',
14 styleUrls: [ './video-description.component.scss' ],
15 providers: [
16 {
17 provide: NG_VALUE_ACCESSOR,
18 useExisting: forwardRef(() => VideoDescriptionComponent),
19 multi: true
20 }
21 ]
22})
23
24export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
25 @Input() description = ''
26 truncatedDescriptionHTML = ''
27 descriptionHTML = ''
28
29 private descriptionChanged = new Subject<string>()
30
31 constructor (private markdownService: MarkdownService) {}
32
33 ngOnInit () {
34 this.descriptionChanged
35 .debounceTime(150)
36 .distinctUntilChanged()
37 .subscribe(() => this.updateDescriptionPreviews())
38
39 this.descriptionChanged.next(this.description)
40 }
41
42 propagateChange = (_: any) => { /* empty */ }
43
44 writeValue (description: string) {
45 this.description = description
46
47 this.descriptionChanged.next(this.description)
48 }
49
50 registerOnChange (fn: (_: any) => void) {
51 this.propagateChange = fn
52 }
53
54 registerOnTouched () {
55 // Unused
56 }
57
58 onModelChange () {
59 this.propagateChange(this.description)
60
61 this.descriptionChanged.next(this.description)
62 }
63
64 private updateDescriptionPreviews () {
65 this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
66 this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
67 }
68}
diff --git a/client/src/app/videos/shared/video-details.model.ts b/client/src/app/videos/shared/video-details.model.ts
index 3a6ecc480..68ded5210 100644
--- a/client/src/app/videos/shared/video-details.model.ts
+++ b/client/src/app/videos/shared/video-details.model.ts
@@ -38,12 +38,14 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
38 likes: number 38 likes: number
39 dislikes: number 39 dislikes: number
40 nsfw: boolean 40 nsfw: boolean
41 descriptionPath: string
41 files: VideoFile[] 42 files: VideoFile[]
42 channel: VideoChannel 43 channel: VideoChannel
43 44
44 constructor (hash: VideoDetailsServerModel) { 45 constructor (hash: VideoDetailsServerModel) {
45 super(hash) 46 super(hash)
46 47
48 this.descriptionPath = hash.descriptionPath
47 this.files = hash.files 49 this.files = hash.files
48 this.channel = hash.channel 50 this.channel = hash.channel
49 } 51 }
diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/videos/shared/video.service.ts
index 8fdc1f213..7d5372334 100644
--- a/client/src/app/videos/shared/video.service.ts
+++ b/client/src/app/videos/shared/video.service.ts
@@ -99,15 +99,11 @@ export class VideoService {
99 .catch((res) => this.restExtractor.handleError(res)) 99 .catch((res) => this.restExtractor.handleError(res))
100 } 100 }
101 101
102 reportVideo (id: number, reason: string) { 102 loadCompleteDescription (descriptionPath: string) {
103 const url = VideoService.BASE_VIDEO_URL + id + '/abuse' 103 return this.authHttp
104 const body: VideoAbuseCreate = { 104 .get(API_URL + descriptionPath)
105 reason 105 .map(res => res['description'])
106 } 106 .catch((res) => this.restExtractor.handleError(res))
107
108 return this.authHttp.post(url, body)
109 .map(this.restExtractor.extractDataBool)
110 .catch(res => this.restExtractor.handleError(res))
111 } 107 }
112 108
113 setVideoLike (id: number) { 109 setVideoLike (id: number) {