aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-04-29 14:18:14 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-04-29 14:18:14 +0200
commitda932efc8199e2d9fe5d830432fb3833865a9a42 (patch)
tree5cd67542971ec695a7f546ae3d129825c4e6c607
parente9a2578e952a361b042fee45d211c6f88d89209e (diff)
downloadPeerTube-da932efc8199e2d9fe5d830432fb3833865a9a42.tar.gz
PeerTube-da932efc8199e2d9fe5d830432fb3833865a9a42.tar.zst
PeerTube-da932efc8199e2d9fe5d830432fb3833865a9a42.zip
Add loader gif when loading the video
-rw-r--r--client/angular/videos/components/watch/videos-watch.component.html6
-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--package.json2
4 files changed, 37 insertions, 1 deletions
diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index 1ec0b1e19..f2a50eccd 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -1,5 +1,11 @@
1<!-- 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
1<div class="embed-responsive embed-responsive-19by9"> 6<div class="embed-responsive embed-responsive-19by9">
2</div> 7</div>
8
3<div id="torrent-info"> 9<div id="torrent-info">
4 <div>Download: {{ downloadSpeed | bytes }}/s</div> 10 <div>Download: {{ downloadSpeed | bytes }}/s</div>
5 <div>Upload: {{ uploadSpeed | bytes }}/s</div> 11 <div>Upload: {{ uploadSpeed | bytes }}/s</div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
index 27f34b33d..b6c2fc050 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/client/angular/videos/components/watch/videos-watch.component.scss
@@ -1,3 +1,30 @@
1.embed-responsive { 1.embed-responsive {
2 height: 100%; 2 height: 100%;
3} 3}
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}
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index d2203727e..52c31fe32 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -20,6 +20,7 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
20 downloadSpeed: number; 20 downloadSpeed: number;
21 uploadSpeed: number; 21 uploadSpeed: number;
22 numPeers: number; 22 numPeers: number;
23 loading: boolean = false;
23 24
24 private _interval: number; 25 private _interval: number;
25 private client: any; 26 private client: any;
@@ -42,9 +43,11 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
42 } 43 }
43 44
44 loadVideo(video: Video) { 45 loadVideo(video: Video) {
46 this.loading = true;
45 this.video = video; 47 this.video = video;
46 console.log('Adding ' + this.video.magnetUri + '.'); 48 console.log('Adding ' + this.video.magnetUri + '.');
47 this.client.add(this.video.magnetUri, (torrent) => { 49 this.client.add(this.video.magnetUri, (torrent) => {
50 this.loading = false;
48 console.log('Added ' + this.video.magnetUri + '.'); 51 console.log('Added ' + this.video.magnetUri + '.');
49 torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { 52 torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
50 if (err) { 53 if (err) {
diff --git a/package.json b/package.json
index 42acf1b90..a9d053f6e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
20 "build": "concurrently \"npm run client:sass\" \"npm run client:tsc\"", 20 "build": "concurrently \"npm run client:sass\" \"npm run client:tsc\"",
21 "client:clean": "concurrently \"npm run client:tsc:clean\" \"npm run client:sass:clean\"", 21 "client:clean": "concurrently \"npm run client:tsc:clean\" \"npm run client:sass:clean\"",
22 "client:sass:index": "npm run client:sass:index:clean && cd client && node-sass --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css", 22 "client:sass:index": "npm run client:sass:index:clean && cd client && node-sass --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
23 "client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css", 23 "client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css client/angular/**/ client/angular/**/**",
24 "client:sass:index:clean": "cd client && rm -f stylesheets/index.css", 24 "client:sass:index:clean": "cd client && rm -f stylesheets/index.css",
25 "client:sass:angular": "cd client && node-sass angular/ --output angular/", 25 "client:sass:angular": "cd client && node-sass angular/ --output angular/",
26 "client:sass:angular:watch": "cd client && node-sass -w angular/ --output angular/", 26 "client:sass:angular:watch": "cd client && node-sass -w angular/ --output angular/",