diff options
Diffstat (limited to 'client/src/app/videos/+video-watch')
3 files changed, 21 insertions, 7 deletions
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 fd3ce2b84..f528d73c3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -130,14 +130,15 @@ | |||
130 | 130 | ||
131 | <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div> | 131 | <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div> |
132 | 132 | ||
133 | <div *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()" class="video-details-description-more"> | 133 | <div class="video-details-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()"> |
134 | Show more | 134 | Show more |
135 | <span class="glyphicon glyphicon-menu-down"></span> | 135 | <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> |
136 | <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader> | ||
136 | </div> | 137 | </div> |
137 | 138 | ||
138 | <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more"> | 139 | <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more"> |
139 | Show less | 140 | Show less |
140 | <span class="glyphicon glyphicon-menu-up"></span> | 141 | <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span> |
141 | </div> | 142 | </div> |
142 | </div> | 143 | </div> |
143 | 144 | ||
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 fcad7f7b0..cad21dd18 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -166,6 +166,10 @@ | |||
166 | .video-details-date-description { | 166 | .video-details-date-description { |
167 | padding-left: $video-watch-info-padding-left; | 167 | padding-left: $video-watch-info-padding-left; |
168 | 168 | ||
169 | .description-loading { | ||
170 | display: inline-block; | ||
171 | } | ||
172 | |||
169 | .video-details-date { | 173 | .video-details-date { |
170 | font-weight: bold; | 174 | font-weight: bold; |
171 | margin-bottom: 30px; | 175 | margin-bottom: 30px; |
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 5e2486b9c..2a7290cbd 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -16,6 +16,7 @@ import { VideoReportComponent } from './video-report.component' | |||
16 | import { VideoDetails, VideoService, MarkdownService } from '../shared' | 16 | import { VideoDetails, VideoService, MarkdownService } from '../shared' |
17 | import { VideoBlacklistService } from '../../shared' | 17 | import { VideoBlacklistService } from '../../shared' |
18 | import { UserVideoRateType, VideoRateType } from '../../../../../shared' | 18 | import { UserVideoRateType, VideoRateType } from '../../../../../shared' |
19 | import { BehaviorSubject } from 'rxjs/BehaviorSubject' | ||
19 | 20 | ||
20 | @Component({ | 21 | @Component({ |
21 | selector: 'my-video-watch', | 22 | selector: 'my-video-watch', |
@@ -38,6 +39,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
38 | video: VideoDetails = null | 39 | video: VideoDetails = null |
39 | videoPlayerLoaded = false | 40 | videoPlayerLoaded = false |
40 | videoNotFound = false | 41 | videoNotFound = false |
42 | descriptionLoading = false | ||
41 | 43 | ||
42 | completeDescriptionShown = false | 44 | completeDescriptionShown = false |
43 | completeVideoDescription: string | 45 | completeVideoDescription: string |
@@ -159,32 +161,39 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
159 | } | 161 | } |
160 | 162 | ||
161 | showMoreDescription () { | 163 | showMoreDescription () { |
162 | this.completeDescriptionShown = true | ||
163 | |||
164 | if (this.completeVideoDescription === undefined) { | 164 | if (this.completeVideoDescription === undefined) { |
165 | return this.loadCompleteDescription() | 165 | return this.loadCompleteDescription() |
166 | } | 166 | } |
167 | 167 | ||
168 | this.updateVideoDescription(this.completeVideoDescription) | 168 | this.updateVideoDescription(this.completeVideoDescription) |
169 | this.completeDescriptionShown = true | ||
169 | } | 170 | } |
170 | 171 | ||
171 | showLessDescription () { | 172 | showLessDescription () { |
172 | this.completeDescriptionShown = false | ||
173 | 173 | ||
174 | this.updateVideoDescription(this.shortVideoDescription) | 174 | this.updateVideoDescription(this.shortVideoDescription) |
175 | this.completeDescriptionShown = false | ||
175 | } | 176 | } |
176 | 177 | ||
177 | loadCompleteDescription () { | 178 | loadCompleteDescription () { |
179 | this.descriptionLoading = true | ||
180 | |||
178 | this.videoService.loadCompleteDescription(this.video.descriptionPath) | 181 | this.videoService.loadCompleteDescription(this.video.descriptionPath) |
179 | .subscribe( | 182 | .subscribe( |
180 | description => { | 183 | description => { |
184 | this.completeDescriptionShown = true | ||
185 | this.descriptionLoading = false | ||
186 | |||
181 | this.shortVideoDescription = this.video.description | 187 | this.shortVideoDescription = this.video.description |
182 | this.completeVideoDescription = description | 188 | this.completeVideoDescription = description |
183 | 189 | ||
184 | this.updateVideoDescription(this.completeVideoDescription) | 190 | this.updateVideoDescription(this.completeVideoDescription) |
185 | }, | 191 | }, |
186 | 192 | ||
187 | error => this.notificationsService.error('Error', error.text) | 193 | error => { |
194 | this.descriptionLoading = false | ||
195 | this.notificationsService.error('Error', error.text) | ||
196 | } | ||
188 | ) | 197 | ) |
189 | } | 198 | } |
190 | 199 | ||