Client: add views information and sort

3 files changed, 23 insertions, 11 deletions

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();
   }