aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-05-26 20:40:03 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-05-26 20:40:03 +0200
commit157cb9c9713e08ff70078660a32dd77ecb87eabc (patch)
tree4a9066f820be014fcbddf582fd6b92bdb006dccf
parenta99593ed9f3244e75f7db793ba6716754d664573 (diff)
downloadPeerTube-157cb9c9713e08ff70078660a32dd77ecb87eabc.tar.gz
PeerTube-157cb9c9713e08ff70078660a32dd77ecb87eabc.tar.zst
PeerTube-157cb9c9713e08ff70078660a32dd77ecb87eabc.zip
Add a loader animation when loading the videos list
-rw-r--r--client/angular/videos/components/list/videos-list.component.html4
-rw-r--r--client/angular/videos/components/list/videos-list.component.scss31
-rw-r--r--client/angular/videos/components/list/videos-list.component.ts8
-rw-r--r--client/angular/videos/components/watch/videos-watch.component.html5
-rw-r--r--client/angular/videos/components/watch/videos-watch.component.scss27
-rw-r--r--client/angular/videos/components/watch/videos-watch.component.ts3
-rw-r--r--client/angular/videos/loader.component.html3
-rw-r--r--client/angular/videos/loader.component.scss26
-rw-r--r--client/angular/videos/loader.component.ts11
-rw-r--r--client/tsconfig.json1
10 files changed, 73 insertions, 46 deletions
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
index 3e30b39b0..edbbaf3ae 100644
--- a/client/angular/videos/components/list/videos-list.component.html
+++ b/client/angular/videos/components/list/videos-list.component.html
@@ -4,7 +4,9 @@
4</div> 4</div>
5 5
6<div class="videos-miniatures"> 6<div class="videos-miniatures">
7 <div *ngIf="videos.length === 0">There is no video.</div> 7 <my-loader [loading]="loading"></my-loader>
8
9 <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div>
8 10
9 <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)"> 11 <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
10 </my-video-miniature> 12 </my-video-miniature>
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
index 2abc47b1b..9441d80c3 100644
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ b/client/angular/videos/components/list/videos-list.component.scss
@@ -1,16 +1,3 @@
1.videos-miniatures {
2 min-height: 600px;
3}
4
5my-videos-miniature {
6 display: inline-block;
7}
8
9pagination {
10 display: block;
11 text-align: center;
12}
13
14.videos-info { 1.videos-info {
15 2
16 padding-bottom: 20px; 3 padding-bottom: 20px;
@@ -30,3 +17,21 @@ pagination {
30 padding-left: 0; 17 padding-left: 0;
31 } 18 }
32} 19}
20
21.videos-miniatures {
22 min-height: 600px;
23
24 my-videos-miniature {
25 display: inline-block;
26 }
27
28 .no-video {
29 margin-top: 50px;
30 text-align: center;
31 }
32}
33
34pagination {
35 display: block;
36 text-align: center;
37}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
index 94b064e16..56230e331 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -12,12 +12,13 @@ import { VideoMiniatureComponent } from './video-miniature.component';
12import { Search, SearchField } from '../../../app/search'; 12import { Search, SearchField } from '../../../app/search';
13import { VideoSortComponent } from './video-sort.component'; 13import { VideoSortComponent } from './video-sort.component';
14import { SortField } from './sort'; 14import { SortField } from './sort';
15import { LoaderComponent } from '../../loader.component';
15 16
16@Component({ 17@Component({
17 selector: 'my-videos-list', 18 selector: 'my-videos-list',
18 styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ], 19 styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
19 templateUrl: 'app/angular/videos/components/list/videos-list.component.html', 20 templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
20 directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ] 21 directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
21}) 22})
22 23
23export class VideosListComponent implements OnInit { 24export class VideosListComponent implements OnInit {
@@ -29,6 +30,7 @@ export class VideosListComponent implements OnInit {
29 total: 0 30 total: 0
30 }; 31 };
31 sort: SortField; 32 sort: SortField;
33 loading: boolean = false;
32 34
33 private search: Search; 35 private search: Search;
34 36
@@ -55,6 +57,9 @@ export class VideosListComponent implements OnInit {
55 } 57 }
56 58
57 getVideos() { 59 getVideos() {
60 this.loading = true;
61 this.videos = [];
62
58 let observable = null; 63 let observable = null;
59 64
60 if (this.search.value !== null) { 65 if (this.search.value !== null) {
@@ -67,6 +72,7 @@ export class VideosListComponent implements OnInit {
67 ({ videos, totalVideos }) => { 72 ({ videos, totalVideos }) => {
68 this.videos = videos; 73 this.videos = videos;
69 this.pagination.total = totalVideos; 74 this.pagination.total = totalVideos;
75 this.loading = false;
70 }, 76 },
71 error => alert(error) 77 error => alert(error)
72 ); 78 );
diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index 9e8f50908..6c36b27e2 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -1,7 +1,4 @@
1<!-- Loader --> 1<my-loader [loading]="loading"></my-loader>
2<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
3 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
4</div>
5 2
6<div class="embed-responsive embed-responsive-19by9"> 3<div class="embed-responsive embed-responsive-19by9">
7</div> 4</div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
index 62ae8a126..1228d42f4 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/client/angular/videos/components/watch/videos-watch.component.scss
@@ -2,33 +2,6 @@
2 height: 500px; 2 height: 500px;
3} 3}
4 4
5#video-loading {
6 margin-top: 150px;
7}
8
9// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
10.glyphicon-refresh-animate {
11 -animation: spin .7s infinite linear;
12 -ms-animation: spin .7s infinite linear;
13 -webkit-animation: spinw .7s infinite linear;
14 -moz-animation: spinm .7s infinite linear;
15}
16
17@keyframes spin {
18 from { transform: scale(1) rotate(0deg);}
19 to { transform: scale(1) rotate(360deg);}
20}
21
22@-webkit-keyframes spinw {
23 from { -webkit-transform: rotate(0deg);}
24 to { -webkit-transform: rotate(360deg);}
25}
26
27@-moz-keyframes spinm {
28 from { -moz-transform: rotate(0deg);}
29 to { -moz-transform: rotate(360deg);}
30}
31
32#torrent-info { 5#torrent-info {
33 font-size: 10px; 6 font-size: 10px;
34 7
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index 6e212e8bc..e551e1f9a 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -3,6 +3,8 @@ import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/route
3 3
4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
5 5
6import { LoaderComponent } from '../../loader.component';
7
6// TODO import it with systemjs 8// TODO import it with systemjs
7declare var WebTorrent: any; 9declare var WebTorrent: any;
8 10
@@ -13,6 +15,7 @@ import { VideosService } from '../../videos.service';
13 selector: 'my-video-watch', 15 selector: 'my-video-watch',
14 templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html', 16 templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
15 styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ], 17 styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
18 directives: [ LoaderComponent ],
16 pipes: [ BytesPipe ] 19 pipes: [ BytesPipe ]
17}) 20})
18 21
diff --git a/client/angular/videos/loader.component.html b/client/angular/videos/loader.component.html
new file mode 100644
index 000000000..d02296a2d
--- /dev/null
+++ b/client/angular/videos/loader.component.html
@@ -0,0 +1,3 @@
1<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
2 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
3</div>
diff --git a/client/angular/videos/loader.component.scss b/client/angular/videos/loader.component.scss
new file mode 100644
index 000000000..454195811
--- /dev/null
+++ b/client/angular/videos/loader.component.scss
@@ -0,0 +1,26 @@
1div {
2 margin-top: 150px;
3}
4
5// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
6.glyphicon-refresh-animate {
7 -animation: spin .7s infinite linear;
8 -ms-animation: spin .7s infinite linear;
9 -webkit-animation: spinw .7s infinite linear;
10 -moz-animation: spinm .7s infinite linear;
11}
12
13@keyframes spin {
14 from { transform: scale(1) rotate(0deg);}
15 to { transform: scale(1) rotate(360deg);}
16}
17
18@-webkit-keyframes spinw {
19 from { -webkit-transform: rotate(0deg);}
20 to { -webkit-transform: rotate(360deg);}
21}
22
23@-moz-keyframes spinm {
24 from { -moz-transform: rotate(0deg);}
25 to { -moz-transform: rotate(360deg);}
26}
diff --git a/client/angular/videos/loader.component.ts b/client/angular/videos/loader.component.ts
new file mode 100644
index 000000000..24329432e
--- /dev/null
+++ b/client/angular/videos/loader.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core';
2
3@Component({
4 selector: 'my-loader',
5 styleUrls: [ 'app/angular/videos/loader.component.css' ],
6 templateUrl: 'app/angular/videos/loader.component.html'
7})
8
9export class LoaderComponent {
10 @Input() loading: boolean;
11}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 270524e5f..8e786ca28 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -36,6 +36,7 @@
36 "angular/videos/components/list/video-sort.component.ts", 36 "angular/videos/components/list/video-sort.component.ts",
37 "angular/videos/components/list/videos-list.component.ts", 37 "angular/videos/components/list/videos-list.component.ts",
38 "angular/videos/components/watch/videos-watch.component.ts", 38 "angular/videos/components/watch/videos-watch.component.ts",
39 "angular/videos/loader.component.ts",
39 "angular/videos/pagination.ts", 40 "angular/videos/pagination.ts",
40 "angular/videos/video.ts", 41 "angular/videos/video.ts",
41 "angular/videos/videos.service.ts", 42 "angular/videos/videos.service.ts",