Client: add views information and sort

3 files changed, 13 insertions, 3 deletions

diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index f2f4a53a9..b2bf35435 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -23,6 +23,9 @@
     </span>
 
     <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
-    <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
+    <span class="video-miniature-views-created-at">
+      <span class="video-miniature-views">{{ video.views }} views</span>
+      <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
+    </span>
   </div>
 </div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index d70b1b50d..0d309062a 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -79,12 +79,17 @@
       }
     }
 
-    .video-miniature-author, .video-miniature-created-at {
+    .video-miniature-author, .video-miniature-views-created-at {
       display: block;
       margin-left: 1px;
       font-size: 12px;
       color: #337ab7;
       opacity: 0.9;
+
+      .video-miniature-created-at::before {
+        content: '\002022';
+        margin: 0 2px 0 1px;
+      }
     }
 
     .video-miniature-author {
diff --git a/client/src/app/videos/video-list/video-sort.component.ts b/client/src/app/videos/video-list/video-sort.component.ts
index 53951deb4..c950fa8aa 100644
--- a/client/src/app/videos/video-list/video-sort.component.ts
+++ b/client/src/app/videos/video-list/video-sort.component.ts
@@ -18,7 +18,9 @@ export class VideoSortComponent {
     'duration': 'Duration - Asc',
     '-duration': 'Duration - Desc',
     'createdAt': 'Created Date - Asc',
-    '-createdAt': 'Created Date - Desc'
+    '-createdAt': 'Created Date - Desc',
+    'views': 'Views - Asc',
+    '-views': 'Views - Desc'
   };
 
   get choiceKeys() {