+<!-- Loader -->
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+ <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
+
<div class="embed-responsive embed-responsive-19by9">
</div>
+
<div id="torrent-info">
<div>Download: {{ downloadSpeed | bytes }}/s</div>
<div>Upload: {{ uploadSpeed | bytes }}/s</div>
.embed-responsive {
height: 100%;
}
+
+#video-loading {
+ margin-top: 150px;
+}
+
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+ -animation: spin .7s infinite linear;
+ -ms-animation: spin .7s infinite linear;
+ -webkit-animation: spinw .7s infinite linear;
+ -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+ from { transform: scale(1) rotate(0deg);}
+ to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+ from { -webkit-transform: rotate(0deg);}
+ to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+ from { -moz-transform: rotate(0deg);}
+ to { -moz-transform: rotate(360deg);}
+}
downloadSpeed: number;
uploadSpeed: number;
numPeers: number;
+ loading: boolean = false;
private _interval: number;
private client: any;
}
loadVideo(video: Video) {
+ this.loading = true;
this.video = video;
console.log('Adding ' + this.video.magnetUri + '.');
this.client.add(this.video.magnetUri, (torrent) => {
+ this.loading = false;
console.log('Added ' + this.video.magnetUri + '.');
torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
if (err) {
"build": "concurrently \"npm run client:sass\" \"npm run client:tsc\"",
"client:clean": "concurrently \"npm run client:tsc:clean\" \"npm run client:sass:clean\"",
"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",
- "client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
+ "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/**/**",
"client:sass:index:clean": "cd client && rm -f stylesheets/index.css",
"client:sass:angular": "cd client && node-sass angular/ --output angular/",
"client:sass:angular:watch": "cd client && node-sass -w angular/ --output angular/",