Thumbnail, author and duration support in client

7 files changed, 140 insertions, 51 deletions

diff --git a/client/angular/videos/components/list/video-miniature.component.html b/client/angular/videos/components/list/video-miniature.component.html
new file mode 100644
index 000000000..b88a19d5e
--- /dev/null
+++ b/client/angular/videos/components/list/video-miniature.component.html
@@ -0,0 +1,22 @@
+<div class="video-miniature" (mouseenter)="onHover()" (mouseleave)="onBlur()">
+  <a
+    [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description"
+    class="video-miniature-thumbnail"
+  >
+    <img [attr.src]="video.thumbnailPath" alt="video thumbnail" />
+    <span class="video-miniature-duration">{{ video.duration }}</span>
+  </a>
+  <span
+    *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)"
+    class="video-miniature-remove glyphicon glyphicon-remove"
+  ></span>
+
+  <div class="video-miniature-informations">
+    <a [routerLink]="['VideosWatch', { id: video.id }]" class="video-miniature-name">
+      <span>{{ video.name }}</span>
+    </a>
+
+    <span class="video-miniature-author">by {{ video.by }}</span>
+    <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span>
+  </div>
+</div>
diff --git a/client/angular/videos/components/list/video-miniature.component.scss b/client/angular/videos/components/list/video-miniature.component.scss
new file mode 100644
index 000000000..dbcd65820
--- /dev/null
+++ b/client/angular/videos/components/list/video-miniature.component.scss
@@ -0,0 +1,57 @@
+.video-miniature {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  margin-right: 40px;
+  position: relative;
+
+  .video-miniature-thumbnail {
+    display: block;
+    position: relative;
+
+    .video-miniature-duration {
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      display: inline-block;
+      background-color: rgba(0, 0, 0, 0.8);
+      color: rgba(255, 255, 255, 0.8);
+      padding: 2px;
+      font-size: 11px;
+    }
+  }
+
+  .video-miniature-remove {
+    display: inline-block;
+    position: absolute;
+    left: 2px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 2px;
+    cursor: pointer;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+
+  .video-miniature-informations {
+    margin-left: 3px;
+
+    .video-miniature-name {
+      display: block;
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    .video-miniature-author, .video-miniature-created-date {
+      display: block;
+      margin-left: 1px;
+      font-size: 11px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
diff --git a/client/angular/videos/components/list/video-miniature.component.ts b/client/angular/videos/components/list/video-miniature.component.ts
new file mode 100644
index 000000000..383c2c609
--- /dev/null
+++ b/client/angular/videos/components/list/video-miniature.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+
+import { Video } from '../../video';
+import { VideosService } from '../../videos.service';
+import { User } from '../../../users/models/user';
+
+@Component({
+  selector: 'my-video-miniature',
+  styleUrls: [ 'app/angular/videos/components/list/video-miniature.component.css' ],
+  templateUrl: 'app/angular/videos/components/list/video-miniature.component.html',
+  directives: [ ROUTER_DIRECTIVES ],
+  pipes: [ DatePipe ]
+})
+
+export class VideoMiniatureComponent {
+  @Output() removed = new EventEmitter<any>();
+
+  @Input() video: Video;
+  @Input() user: User;
+
+  hovering: boolean = false;
+
+  constructor(private _videosService: VideosService) {}
+
+  onHover() {
+    this.hovering = true;
+  }
+
+  onBlur() {
+    this.hovering = false;
+  }
+
+  displayRemoveIcon(): boolean {
+    return this.hovering && this.video.isRemovableBy(this.user);
+  }
+
+  removeVideo(id: string) {
+    if (confirm('Do you really want to remove this video?')) {
+      this._videosService.removeVideo(id).subscribe(
+        status => this.removed.emit(true),
+        error => alert(error)
+      );
+    }
+  }
+}
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
index 4eeacbc77..776339d10 100644
--- a/client/angular/videos/components/list/videos-list.component.html
+++ b/client/angular/videos/components/list/videos-list.component.html
@@ -1,12 +1,3 @@
 <div *ngIf="videos.length === 0">There is no video.</div>
-<div *ngFor="let video of videos" class="video">
-  <div>
-    <a [routerLink]="['VideosWatch', { id: video.id }]" class="video_name">{{ video.name }}</a>
-    <span class="video_pod_url">{{ video.podUrl }}</span>
-    <span *ngIf="video.isLocal === true && user && video.author === user.username" (click)="removeVideo(video.id)" class="video_remove glyphicon glyphicon-remove"></span>
-  </div>
-
-  <div class="video_description">
-    {{ video.description }}
-  </div>
-</div>
+<my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
+</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 82ddd80e5..ac930978c 100644
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ b/client/angular/videos/components/list/videos-list.component.scss
@@ -1,34 +1,8 @@
-.video {
-  margin-bottom: 10px;
-  transition: margin 0.5s ease;
-
-  &:hover {
-    margin-left: 5px;
-  }
-
-  a.video_name {
-    color: #333333;
-    margin-right: 5px;
-  }
-
-  .video_pod_url {
-    font-size: small;
-    color: rgba(0, 0, 0, 0.5);
-  }
-
-  .video_description {
-    font-size: small;
-    font-style: italic;
-    margin-left: 7px;
-  }
-
-  .video_remove {
-    margin: 5px;
-    cursor: pointer;
-  }
-}
-
 .loading {
   display: inline-block;
   margin-top: 100px;
 }
+
+my-videos-miniature {
+  display: inline-block;
+}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
index 6ff0b2afb..6fc0c1f04 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -3,14 +3,15 @@ import { ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
 
 import { AuthService } from '../../../users/services/auth.service';
 import { User } from '../../../users/models/user';
-import { VideosService } from '../../services/videos.service';
-import { Video } from '../../models/video';
+import { VideosService } from '../../videos.service';
+import { Video } from '../../video';
+import { VideoMiniatureComponent } from './video-miniature.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 ]
+  directives: [ ROUTER_DIRECTIVES, VideoMiniatureComponent ]
 })
 
 export class VideosListComponent implements OnInit {
@@ -50,11 +51,8 @@ export class VideosListComponent implements OnInit {
     );
   }
 
-  removeVideo(id: string) {
-    this._videosService.removeVideo(id).subscribe(
-      status => this.getVideos(),
-      error => alert(error)
-    );
+  onRemoved(video: Video): void {
+    this.videos.splice(this.videos.indexOf(video), 1);
   }
 
 }
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index 3d1829b99..3eb005d07 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -5,8 +5,8 @@ import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 // TODO import it with systemjs
 declare var WebTorrent: any;
 
-import { Video } from '../../models/video';
-import { VideosService } from '../../services/videos.service';
+import { Video } from '../../video';
+import { VideosService } from '../../videos.service';
 
 @Component({
   selector: 'my-video-watch',