Client: display video tags

2 files changed, 24 insertions, 1 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 059465d65..124a3ba8b 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -157,6 +157,19 @@
           {{ video.languageLabel }}
         </span>
       </div>
+
+      <div class="video-details-attribute">
+        <span class="video-details-attribute-label">
+          Tags:
+        </span>
+
+        <div class="video-details-tags">
+          <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
+            {{ tag }}
+          </a>
+        </div>
+      </div>
+
     </div>
   </div>
 </div>
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 a8c7fdbac..8d8454cfd 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -80,7 +80,7 @@
       .option .glyphicon {
         font-size: 22px;
         color: inherit;
-        opacity: 0.9;
+        opacity: 0.6;
         margin-bottom: 10px;
       }
 
@@ -170,5 +170,15 @@
         margin-right: 5px;
       }
     }
+
+    .video-details-tags {
+      display: inline-block;
+
+      a {
+        display: inline-block;
+        margin-right: 3px;
+        font-size: 11px;
+      }
+    }
   }
 }