Client: add views information and sort

7 files changed, 40 insertions, 15 deletions

diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/videos/shared/video.model.ts
index fae001d78..8e676708b 100644
--- a/client/src/app/videos/shared/video.model.ts
+++ b/client/src/app/videos/shared/video.model.ts
@@ -11,6 +11,7 @@ export class Video {
   podHost: string;
   tags: string[];
   thumbnailPath: string;
+  views: number;
 
   private static createByString(author: string, podHost: string) {
     return author + '@' + podHost;
@@ -36,7 +37,8 @@ export class Video {
     name: string,
     podHost: string,
     tags: string[],
-    thumbnailPath: string
+    thumbnailPath: string,
+    views: number
   }) {
     this.author  = hash.author;
     this.createdAt = new Date(hash.createdAt);
@@ -49,6 +51,7 @@ export class Video {
     this.podHost = hash.podHost;
     this.tags = hash.tags;
     this.thumbnailPath = hash.thumbnailPath;
+    this.views = hash.views;
 
     this.by = Video.createByString(hash.author, hash.podHost);
   }
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() {
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 8cee9959d..24d741ff9 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -57,17 +57,20 @@
         <span class="glyphicon glyphicon-share"></span> Share
       </button>
 
-      <button title="Get magnet URI" id="magnet-uri" class="btn btn-default" (click)="showMagnetUriModal()">
-        <span class="glyphicon glyphicon-magnet"></span> Magnet
-      </button>
-
-      <div *ngIf="isUserLoggedIn()" class="btn-group" dropdown>
+      <div class="btn-group" dropdown>
         <button id="single-button" type="button" id="more" class="btn btn-default" dropdownToggle>
           <span class="glyphicon glyphicon-option-horizontal"></span> More
         </button>
+
         <ul dropdownMenu id="more-menu" role="menu" aria-labelledby="single-button">
           <li role="menuitem">
-            <a class="dropdown-item" href="#" (click)="showReportModal($event)">
+            <a class="dropdown-item" title="Get magnet URI" href="#" (click)="showMagnetUriModal($event)">
+               <span class="glyphicon glyphicon-magnet"></span> Magnet
+            </a>
+          </li>
+
+          <li *ngIf="isUserLoggedIn()" role="menuitem">
+            <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
               <span class="glyphicon glyphicon-alert"></span> Report
             </a>
           </li>
@@ -76,12 +79,16 @@
     </div>
   </div>
 
-  <div id="video-tags" class="row">
-    <div class="col-md-12">
+  <div id="video-tags-views" class="row">
+    <div class="col-md-8">
       <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
         {{ tag }}
       </a>
     </div>
+
+    <div id="video-views" class="col-md-4 text-right">
+      {{ video.views }} views
+    </div>
   </div>
 
   <div id="video-description" class="row">
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 794412707..0b8af52ce 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -47,7 +47,7 @@
       top: 2px;
     }
 
-    #magnet-uri, #share, #more {
+    #share, #more {
       font-weight: bold;
       opacity: 0.85;
     }
@@ -71,12 +71,16 @@
     }
   }
 
-  #video-tags {
+  #video-tags-views {
     margin-top: 10px;
 
     a {
       margin-right: 5px;
     }
+
+    #video-views {
+      font-weight: bold;
+    }
   }
 
   #video-description {
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 9ac9342b7..d1abc81bc 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -145,7 +145,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoShareModal.show();
   }
 
-  showMagnetUriModal() {
+  showMagnetUriModal(event: Event) {
+    event.preventDefault();
     this.videoMagnetModal.show();
   }