Open different mimetypes differently in filemanager

src/filemanager.html

@@ -48,12 +48,16 @@
     <!-- moment -->
     <script type="text/javascript" src="/3rdparty/js/moment.min.js"></script>
 
-    <!-- monaco-editor -->
+    <!-- https://github.com/data-uri/mimer -->
-    <script type="text/javascript" src="/3rdparty/vs/loader.js"></script>
+    <script type="text/javascript" src="/3rdparty/js/mimer.min.js"></script>
 
     <!-- ui.bootstrap.contextMenu -->
     <script type="text/javascript" src="/3rdparty/js/contextMenu.js"></script>
 
+    <!-- WARNING this adds an AMD loader! Make sure script tag includes like mimer are above -->
+    <!-- monaco-editor -->
+    <script type="text/javascript" src="/3rdparty/vs/loader.js"></script>
+
     <!-- Main Application -->
     <script type="text/javascript" src="/js/filemanager.js"></script>
 
@@ -81,6 +85,16 @@
     </div>
   </div>
 
+  <!-- Modal image/video viewer -->
+  <div class="modal fade" id="mediaViewerModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" style="width: calc(100% - 60px); max-width: 1280px; height: 800px; max-height: calc(100% - 60px);">
+      <div class="modal-content" style="height: 100%; height: 100%; display: flex; background-color: #000; background-clip: border-box;">
+        <img ng-show="mediaViewer.type === 'image'" ng-src="{{ mediaViewer.src }}" style="display: block; margin: auto;" />
+        <video ng-show="mediaViewer.type === 'video'" controls preload="auto" autoplay ng-src="{{ mediaViewer.src | trustUrl}}"></video>
+      </div>
+    </div>
+  </div>
+
   <!-- Modal remove entry -->
   <div class="modal fade" id="entryRemoveModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">

src/js/client.js

@@ -2414,9 +2414,16 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
     };
 
     // FileManager API
-    Client.prototype.filesGet = function (appId, path, download, callback) {
+    // mode can be 'download', 'open', 'link' or 'data'
-        if (download) {
+    Client.prototype.filesGet = function (appId, path, mode, callback) {
+        if (mode === 'download') {
             window.open(client.apiOrigin + '/api/v1/apps/' + appId + '/files/' + path + '?download=true&access_token=' + token);
+            callback(null);
+        } else if (mode === 'open') {
+            window.open(client.apiOrigin + '/api/v1/apps/' + appId + '/files/' + path + '?download=false&access_token=' + token);
+            callback(null);
+        } else if (mode === 'link') {
+            callback(null, client.apiOrigin + '/api/v1/apps/' + appId + '/files/' + path + '?download=false&access_token=' + token);
         } else {
             function responseHandler(data, headers, status) {
                 if (headers()['content-type'] && headers()['content-type'].indexOf('application/json') !== -1) return JSON.parse(data);

src/js/filemanager.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* global angular, $, async, monaco */
+/* global angular, $, async, monaco, Mimer */
 
 require.config({ paths: { 'vs': '3rdparty/vs' }});
 
@@ -23,6 +23,12 @@ app.config(function ($sceProvider) {
     $sceProvider.enabled(false);
 });
 
+app.filter("trustUrl", ['$sce', function ($sce) {
+    return function (recordingUrl) {
+        return $sce.trustAsResourceUrl(recordingUrl);
+    };
+}]);
+
 // https://stackoverflow.com/questions/25621321/angularjs-ng-drag
 var ngDragEventDirectives = {};
 angular.forEach(
@@ -118,7 +124,7 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
 
         if (entry.isDirectory) return;
 
-        Client.filesGet($scope.appId, filePath, true, function (error) {
+        Client.filesGet($scope.appId, filePath, 'download', function (error) {
             if (error) return Client.error(error);
         });
     };
@@ -200,7 +206,7 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
     $scope.refresh = function () {
         $scope.busy = true;
 
-        Client.filesGet($scope.appId, $scope.cwd, false, function (error, result) {
+        Client.filesGet($scope.appId, $scope.cwd, 'data', function (error, result) {
             $scope.busy = false;
             if (error) return Client.error(error);
 
@@ -216,10 +222,19 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
         if (entry.isDirectory) {
             $scope.changeDirectory(filePath);
         } else if (entry.isFile) {
+            var mimeType = Mimer().get(entry.fileName);
+            var mimeGroup = mimeType.split('/')[0];
+
+            if (mimeGroup === 'video' || mimeGroup === 'image') {
+                $scope.mediaViewer.show(entry);
+            } else if (mimeType === 'application/pdf') {
+                Client.filesGet($scope.appId, filePath, 'open', function (error) { if (error) return Client.error(error); });
+            } else if (mimeGroup === 'text' || mimeGroup === 'application') {
                 $scope.textEditor.show(entry);
             } else {
-
+                Client.filesGet($scope.appId, filePath, 'open', function (error) { if (error) return Client.error(error); });
             }
+        } else {}
     };
 
     $scope.goDirectoryUp = function () {
@@ -376,6 +391,26 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
         }
     };
 
+    $scope.mediaViewer = {
+        type: '',
+        src: '',
+        entry: null,
+
+        show: function (entry) {
+            var filePath = sanitize($scope.cwd + '/' + entry.fileName);
+
+            Client.filesGet($scope.appId, filePath, 'link', function (error, result) {
+                if (error) return Client.error(error);
+
+                $scope.mediaViewer.entry = entry;
+                $scope.mediaViewer.type = Mimer().get(entry.fileName).split('/')[0];
+                $scope.mediaViewer.src = result;
+
+                $('#mediaViewerModal').modal('show');
+            });
+        }
+    };
+
     $scope.textEditor = {
         busy: false,
         entry: null,
@@ -393,7 +428,7 @@ app.controller('FileManagerController', ['$scope', '$timeout', 'Client', functio
             var filePath = sanitize($scope.cwd + '/' + entry.fileName);
             var language = getLanguage(entry.fileName);
 
-            Client.filesGet($scope.appId, filePath, false, function (error, result) {
+            Client.filesGet($scope.appId, filePath, 'data', function (error, result) {
                 if (error) return Client.error(error);
 
                 if (!$scope.textEditor.editor) {