</div>
<div class="videos-miniatures">
- <div *ngIf="videos.length === 0">There is no video.</div>
+ <my-loader [loading]="loading"></my-loader>
+
+ <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div>
<my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
</my-video-miniature>
-.videos-miniatures {
- min-height: 600px;
-}
-
-my-videos-miniature {
- display: inline-block;
-}
-
-pagination {
- display: block;
- text-align: center;
-}
-
.videos-info {
padding-bottom: 20px;
padding-left: 0;
}
}
+
+.videos-miniatures {
+ min-height: 600px;
+
+ my-videos-miniature {
+ display: inline-block;
+ }
+
+ .no-video {
+ margin-top: 50px;
+ text-align: center;
+ }
+}
+
+pagination {
+ display: block;
+ text-align: center;
+}
import { Search, SearchField } from '../../../app/search';
import { VideoSortComponent } from './video-sort.component';
import { SortField } from './sort';
+import { LoaderComponent } from '../../loader.component';
@Component({
selector: 'my-videos-list',
styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
- directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
+ directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
})
export class VideosListComponent implements OnInit {
total: 0
};
sort: SortField;
+ loading: boolean = false;
private search: Search;
}
getVideos() {
+ this.loading = true;
+ this.videos = [];
+
let observable = null;
if (this.search.value !== null) {
({ videos, totalVideos }) => {
this.videos = videos;
this.pagination.total = totalVideos;
+ this.loading = false;
},
error => alert(error)
);
-<!-- Loader -->
-<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
- <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
+<my-loader [loading]="loading"></my-loader>
<div class="embed-responsive embed-responsive-19by9">
</div>
height: 500px;
}
-#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);}
-}
-
#torrent-info {
font-size: 10px;
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
+import { LoaderComponent } from '../../loader.component';
+
// TODO import it with systemjs
declare var WebTorrent: any;
selector: 'my-video-watch',
templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
+ directives: [ LoaderComponent ],
pipes: [ BytesPipe ]
})
--- /dev/null
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+ <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
--- /dev/null
+div {
+ 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);}
+}
--- /dev/null
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'my-loader',
+ styleUrls: [ 'app/angular/videos/loader.component.css' ],
+ templateUrl: 'app/angular/videos/loader.component.html'
+})
+
+export class LoaderComponent {
+ @Input() loading: boolean;
+}
"angular/videos/components/list/video-sort.component.ts",
"angular/videos/components/list/videos-list.component.ts",
"angular/videos/components/watch/videos-watch.component.ts",
+ "angular/videos/loader.component.ts",
"angular/videos/pagination.ts",
"angular/videos/video.ts",
"angular/videos/videos.service.ts",