aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/angular/videos/components/watch
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 /client/angular/videos/components/watch
parenta99593ed9f3244e75f7db793ba6716754d664573 (diff)
downloadPeerTube-157cb9c9713e08ff70078660a32dd77ecb87eabc.tar.gz
PeerTube-157cb9c9713e08ff70078660a32dd77ecb87eabc.tar.zst
PeerTube-157cb9c9713e08ff70078660a32dd77ecb87eabc.zip
Add a loader animation when loading the videos list
Diffstat (limited to 'client/angular/videos/components/watch')
-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
3 files changed, 4 insertions, 31 deletions
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