diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-10-30 20:26:06 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-10-30 20:26:06 +0100 |
commit | 2de96f4d6b800076743ed2073f9529816cfd5c8a (patch) | |
tree | 8c2dbd29fe5560e0b24edaa58038581bddd49778 /client/src/app/videos/+video-watch | |
parent | 8bf89b095a711d5ac5e6ef55575b166257d0d526 (diff) | |
download | PeerTube-2de96f4d6b800076743ed2073f9529816cfd5c8a.tar.gz PeerTube-2de96f4d6b800076743ed2073f9529816cfd5c8a.tar.zst PeerTube-2de96f4d6b800076743ed2073f9529816cfd5c8a.zip |
Lazy description and previews to video form
Diffstat (limited to 'client/src/app/videos/+video-watch')
4 files changed, 67 insertions, 2 deletions
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html index 741080ead..ceb7cf50a 100644 --- a/client/src/app/videos/+video-watch/video-report.component.html +++ b/client/src/app/videos/+video-watch/video-report.component.html | |||
@@ -13,7 +13,7 @@ | |||
13 | 13 | ||
14 | <form novalidate [formGroup]="form"> | 14 | <form novalidate [formGroup]="form"> |
15 | <div class="form-group"> | 15 | <div class="form-group"> |
16 | <label for="description">Reason</label> | 16 | <label for="reason">Reason</label> |
17 | <textarea | 17 | <textarea |
18 | id="reason" class="form-control" placeholder="Reason..." | 18 | id="reason" class="form-control" placeholder="Reason..." |
19 | formControlName="reason" | 19 | formControlName="reason" |
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 4b594e7ed..71f986ccd 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -129,6 +129,16 @@ | |||
129 | </div> | 129 | </div> |
130 | 130 | ||
131 | <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div> | 131 | <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div> |
132 | |||
133 | <div *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()" class="video-details-description-more"> | ||
134 | Show more | ||
135 | <span class="glyphicon glyphicon-menu-down"></span> | ||
136 | </div> | ||
137 | |||
138 | <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more"> | ||
139 | Show less | ||
140 | <span class="glyphicon glyphicon-menu-up"></span> | ||
141 | </div> | ||
132 | </div> | 142 | </div> |
133 | 143 | ||
134 | <div class="video-details-attributes col-xs-4 col-md-3"> | 144 | <div class="video-details-attributes col-xs-4 col-md-3"> |
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 01ceab3c5..ab0539fa3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -170,6 +170,18 @@ | |||
170 | font-weight: bold; | 170 | font-weight: bold; |
171 | margin-bottom: 30px; | 171 | margin-bottom: 30px; |
172 | } | 172 | } |
173 | |||
174 | .video-details-description-more { | ||
175 | cursor: pointer; | ||
176 | margin-top: 15px; | ||
177 | font-weight: bold; | ||
178 | color: #acaeb7; | ||
179 | |||
180 | .glyphicon { | ||
181 | position: relative; | ||
182 | top: 2px; | ||
183 | } | ||
184 | } | ||
173 | } | 185 | } |
174 | 186 | ||
175 | .video-details-attributes { | 187 | .video-details-attributes { |
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 199666bdc..5e2486b9c 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -38,6 +38,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
38 | video: VideoDetails = null | 38 | video: VideoDetails = null |
39 | videoPlayerLoaded = false | 39 | videoPlayerLoaded = false |
40 | videoNotFound = false | 40 | videoNotFound = false |
41 | |||
42 | completeDescriptionShown = false | ||
43 | completeVideoDescription: string | ||
44 | shortVideoDescription: string | ||
41 | videoHTMLDescription = '' | 45 | videoHTMLDescription = '' |
42 | 46 | ||
43 | private paramsSub: Subscription | 47 | private paramsSub: Subscription |
@@ -154,6 +158,36 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
154 | ) | 158 | ) |
155 | } | 159 | } |
156 | 160 | ||
161 | showMoreDescription () { | ||
162 | this.completeDescriptionShown = true | ||
163 | |||
164 | if (this.completeVideoDescription === undefined) { | ||
165 | return this.loadCompleteDescription() | ||
166 | } | ||
167 | |||
168 | this.updateVideoDescription(this.completeVideoDescription) | ||
169 | } | ||
170 | |||
171 | showLessDescription () { | ||
172 | this.completeDescriptionShown = false | ||
173 | |||
174 | this.updateVideoDescription(this.shortVideoDescription) | ||
175 | } | ||
176 | |||
177 | loadCompleteDescription () { | ||
178 | this.videoService.loadCompleteDescription(this.video.descriptionPath) | ||
179 | .subscribe( | ||
180 | description => { | ||
181 | this.shortVideoDescription = this.video.description | ||
182 | this.completeVideoDescription = description | ||
183 | |||
184 | this.updateVideoDescription(this.completeVideoDescription) | ||
185 | }, | ||
186 | |||
187 | error => this.notificationsService.error('Error', error.text) | ||
188 | ) | ||
189 | } | ||
190 | |||
157 | showReportModal (event: Event) { | 191 | showReportModal (event: Event) { |
158 | event.preventDefault() | 192 | event.preventDefault() |
159 | this.videoReportModal.show() | 193 | this.videoReportModal.show() |
@@ -184,6 +218,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
184 | return this.video.isBlackistableBy(this.authService.getUser()) | 218 | return this.video.isBlackistableBy(this.authService.getUser()) |
185 | } | 219 | } |
186 | 220 | ||
221 | private updateVideoDescription (description: string) { | ||
222 | this.video.description = description | ||
223 | this.setVideoDescriptionHTML() | ||
224 | } | ||
225 | |||
226 | private setVideoDescriptionHTML () { | ||
227 | this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) | ||
228 | } | ||
229 | |||
187 | private handleError (err: any) { | 230 | private handleError (err: any) { |
188 | const errorMessage: string = typeof err === 'string' ? err : err.message | 231 | const errorMessage: string = typeof err === 'string' ? err : err.message |
189 | let message = '' | 232 | let message = '' |
@@ -264,7 +307,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
264 | }) | 307 | }) |
265 | }) | 308 | }) |
266 | 309 | ||
267 | this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) | 310 | this.setVideoDescriptionHTML() |
268 | 311 | ||
269 | this.setOpenGraphTags() | 312 | this.setOpenGraphTags() |
270 | this.checkUserRating() | 313 | this.checkUserRating() |