Closes #140: video file support

docs-web/src/main/webapp/src/partial/docs/file.view.html

@@ -20,12 +20,17 @@
   </div>
 </div>
 
-
-<div class="text-center" ng-if="$stateParams.fileId">
+<div class="text-center" style="position: relative;" ng-if="$stateParams.fileId">
   <img ng-src="../api/file/{{ $stateParams.fileId }}/data?size=web"
        ng-init="error = false"
        img-error="error = true"
        ng-show="!error" />
+  <a href class="video-overlay" ng-if="file.mimetype.substring(0, 6) == 'video/'"
+     ng-init="videoPlayer = false" ng-click="videoPlayer = true">
+    <span class="glyphicon glyphicon-play-circle" ng-if="!videoPlayer"></span>
+    <video ng-if="videoPlayer" autoplay="autoplay" loop="loop"
+           controls="controls" ng-src="../api/file/{{ $stateParams.fileId }}/data"></video>
+  </a>
   <p class="well-lg" ng-show="error">
     <span class="glyphicon glyphicon-warning-sign"></span>
     {{ 'file.view.not_found' | translate }}

docs-web/src/main/webapp/src/style/main.less

@@ -392,6 +392,33 @@ input[readonly].share-link {
   }
 }
 
+// Video player
+.video-overlay {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 500%;
+  color: #242424;
+
+  .glyphicon {
+    text-shadow: 0 0 20px #fff;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:hover {
+    color: #444;
+  }
+
+  video {
+    cursor: default;
+    width: 100%;
+  }
+}
+
 // Vertical alignment
 .vertical-center {
   min-height: 100vh;