aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-11-28 15:40:53 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-11-28 17:13:51 +0100
commit80958c78fdc733c02077a9d2200be0c3f5ee623e (patch)
treea5f024c8127f98e9f08c3db369a9d219cf8c30c7 /client/src/app/videos
parent83c663ef0e94242762ed5f6d2875fc55f4a5603e (diff)
downloadPeerTube-80958c78fdc733c02077a9d2200be0c3f5ee623e.tar.gz
PeerTube-80958c78fdc733c02077a9d2200be0c3f5ee623e.tar.zst
PeerTube-80958c78fdc733c02077a9d2200be0c3f5ee623e.zip
Add loader when expanding long video description
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss (renamed from client/src/app/videos/+video-edit/video-edit.component.scss)0
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts (renamed from client/src/app/videos/+video-edit/video-edit.module.ts)4
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts2
-rw-r--r--client/src/app/videos/+video-edit/video-add.module.ts5
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts2
-rw-r--r--client/src/app/videos/+video-edit/video-update.module.ts5
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html7
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss4
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts17
-rw-r--r--client/src/app/videos/video-list/shared/index.ts1
-rw-r--r--client/src/app/videos/video-list/shared/loader.component.html3
-rw-r--r--client/src/app/videos/video-list/shared/loader.component.ts11
-rw-r--r--client/src/app/videos/videos.module.ts17
13 files changed, 33 insertions, 45 deletions
diff --git a/client/src/app/videos/+video-edit/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 9ee0c520c..9ee0c520c 100644
--- a/client/src/app/videos/+video-edit/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
diff --git a/client/src/app/videos/+video-edit/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 33f654960..c64cea920 100644
--- a/client/src/app/videos/+video-edit/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'
3import { TagInputModule } from 'ngx-chips' 3import { TagInputModule } from 'ngx-chips'
4import { TabsModule } from 'ngx-bootstrap/tabs' 4import { TabsModule } from 'ngx-bootstrap/tabs'
5 5
6import { VideoService, MarkdownService, VideoDescriptionComponent } from '../shared' 6import { VideoService, MarkdownService, VideoDescriptionComponent } from '../../shared'
7import { SharedModule } from '../../shared' 7import { SharedModule } from '../../../shared'
8 8
9@NgModule({ 9@NgModule({
10 imports: [ 10 imports: [
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index c8094f792..1704cf486 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -23,7 +23,7 @@ import { HttpEventType, HttpResponse } from '@angular/common/http'
23 23
24@Component({ 24@Component({
25 selector: 'my-videos-add', 25 selector: 'my-videos-add',
26 styleUrls: [ './video-edit.component.scss' ], 26 styleUrls: [ './shared/video-edit.component.scss' ],
27 templateUrl: './video-add.component.html' 27 templateUrl: './video-add.component.html'
28}) 28})
29 29
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
index 3d937b008..f58d12dac 100644
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -1,9 +1,8 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2 2import { SharedModule } from '../../shared'
3import { VideoEditModule } from './shared/video-edit.module'
3import { VideoAddRoutingModule } from './video-add-routing.module' 4import { VideoAddRoutingModule } from './video-add-routing.module'
4import { VideoAddComponent } from './video-add.component' 5import { VideoAddComponent } from './video-add.component'
5import { VideoEditModule } from './video-edit.module'
6import { SharedModule } from '../../shared'
7 6
8@NgModule({ 7@NgModule({
9 imports: [ 8 imports: [
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index be663575f..0e966cb50 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -21,7 +21,7 @@ import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.
21 21
22@Component({ 22@Component({
23 selector: 'my-videos-update', 23 selector: 'my-videos-update',
24 styleUrls: [ './video-edit.component.scss' ], 24 styleUrls: [ './shared/video-edit.component.scss' ],
25 templateUrl: './video-update.component.html' 25 templateUrl: './video-update.component.html'
26}) 26})
27 27
diff --git a/client/src/app/videos/+video-edit/video-update.module.ts b/client/src/app/videos/+video-edit/video-update.module.ts
index f7bd77c75..3b45c72a5 100644
--- a/client/src/app/videos/+video-edit/video-update.module.ts
+++ b/client/src/app/videos/+video-edit/video-update.module.ts
@@ -1,9 +1,8 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2 2import { SharedModule } from '../../shared'
3import { VideoEditModule } from './shared/video-edit.module'
3import { VideoUpdateRoutingModule } from './video-update-routing.module' 4import { VideoUpdateRoutingModule } from './video-update-routing.module'
4import { VideoUpdateComponent } from './video-update.component' 5import { VideoUpdateComponent } from './video-update.component'
5import { VideoEditModule } from './video-edit.module'
6import { SharedModule } from '../../shared'
7 6
8@NgModule({ 7@NgModule({
9 imports: [ 8 imports: [
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'
16import { VideoDetails, VideoService, MarkdownService } from '../shared' 16import { VideoDetails, VideoService, MarkdownService } from '../shared'
17import { VideoBlacklistService } from '../../shared' 17import { VideoBlacklistService } from '../../shared'
18import { UserVideoRateType, VideoRateType } from '../../../../../shared' 18import { UserVideoRateType, VideoRateType } from '../../../../../shared'
19import { 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
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
index 2c9804e6d..d8f73bcda 100644
--- a/client/src/app/videos/video-list/shared/index.ts
+++ b/client/src/app/videos/video-list/shared/index.ts
@@ -1,4 +1,3 @@
1export * from './abstract-video-list' 1export * from './abstract-video-list'
2export * from './loader.component'
3export * from './video-miniature.component' 2export * from './video-miniature.component'
4export * from './video-sort.component' 3export * from './video-sort.component'
diff --git a/client/src/app/videos/video-list/shared/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html
deleted file mode 100644
index 38d06950e..000000000
--- a/client/src/app/videos/video-list/shared/loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
1<div id="video-loading" *ngIf="loading">
2 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
3</div>
diff --git a/client/src/app/videos/video-list/shared/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts
deleted file mode 100644
index f37d70c85..000000000
--- a/client/src/app/videos/video-list/shared/loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-loader',
5 styleUrls: [ ],
6 templateUrl: './loader.component.html'
7})
8
9export class LoaderComponent {
10 @Input() loading: boolean
11}
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index ecc351b65..4f3054c3a 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,16 +1,9 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2 2import { SharedModule } from '../shared'
3import { VideoService } from './shared'
4import { MyVideosComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list'
3import { VideosRoutingModule } from './videos-routing.module' 5import { VideosRoutingModule } from './videos-routing.module'
4import { VideosComponent } from './videos.component' 6import { VideosComponent } from './videos.component'
5import {
6 LoaderComponent,
7 VideoListComponent,
8 MyVideosComponent,
9 VideoMiniatureComponent,
10 VideoSortComponent
11} from './video-list'
12import { VideoService } from './shared'
13import { SharedModule } from '../shared'
14 7
15@NgModule({ 8@NgModule({
16 imports: [ 9 imports: [
@@ -24,9 +17,7 @@ import { SharedModule } from '../shared'
24 VideoListComponent, 17 VideoListComponent,
25 MyVideosComponent, 18 MyVideosComponent,
26 VideoMiniatureComponent, 19 VideoMiniatureComponent,
27 VideoSortComponent, 20 VideoSortComponent
28
29 LoaderComponent
30 ], 21 ],
31 22
32 exports: [ 23 exports: [