Updates related to file streaming

gok/gok.controller.js

@@ -101,28 +101,53 @@ let getFileData = (req, res) => {
         message : undefined
     }
 
-    let filePath = req.query.path;
+    const filePath = req.query.path;
+    const range = req.headers.range;
 
     filesdk.getInfo(filePath)
-        .then((stats) => {
-            if(!stats.isDirectory()) {
-                try {
-                    let extension = path.extname(filePath);
-
-                    res.writeHead(200, {
-                        'Content-Type': mapContentType[extension] || 'text/plain',
-                        'Content-Disposition': 'inline; filename=\"' + path.basename(filePath) + '\"'
-                    });
+        .then(stats => {
+            if(stats.isDirectory()) {
+                throw filePath + ' is a directory.';
+            } else {
+                const basename = path.basename(filePath);
+                const extension = path.extname(filePath);
+                const fileSize = stats.size;
+
+                if(range) {
+                    const parts = range.replace(/bytes=/, '').split('-');
+
+                    const start = parseInt(parts[0], 10);
+                    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
+                    const chunkSize = (end - start) + 1;
+
+                    const file = fs.createReadStream(filePath, {start, end});
+
+                    const head = {
+                        'Content-Type' : mapContentType[extension] || 'text/plain',
+                        'Content-Range' : `bytes ${start}-${end}/${fileSize}`,
+                        'Accept-Ranges' : 'bytes',
+                        'Content-Disposition' : `inline; filename=${path.basename(filePath)}"`,
+                        'Content-Length' : chunkSize
+                    };
+
+                    res.writeHead(206, head);
+                    file.pipe(res);
+
+                } else {
+                    const head = {
+                        'Content-Type' : mapContentType[extension] || 'text/plain',
+                        'Content-Disposition' : `inline; filename=${basename}"`,
+                        'Content-Length' : fileSize
+                    };
+
+                    res.writeHead(200, head);
                     fs.createReadStream(filePath).pipe(res);
                 }
-                catch(error) {
-                    throw error;
-                }
-            } else {
-                throw filePath + ' is a directory.'
             }
         })
         .catch((error) => {
+            console.log(error);
+
             response = { ...response, message : error };
             res.status(200).json(response);
         });

ui/src/components/ContentArea.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Icon, Card, Divider, Header, Modal } from 'semantic-ui-react';
 
-import { Player } from 'video-react';
 import PDFViewer from 'mgr-pdf-viewer-react';
 
 import _ from 'lodash';
@@ -34,6 +33,16 @@ const mapIcon = {
     'dir'   : ['folder outline', 'yellow']
 }
 
+const VideoPlayer = (props) => {
+    return (
+        <video
+            controls
+            autoPlay
+            src={props.src}
+        />
+    )
+}
+
 class ContentArea extends Component {
 
     constructor(props) {
@@ -75,11 +84,7 @@ class ContentArea extends Component {
             case '.wav':
             case '.mp4':
                 fileViewer = (
-                    <Player
-                        autoPlay
-                        playsInline
-                        src={url}
-                    />
+                    <VideoPlayer src={url} />
                 );
                 break;
             case '.pdf':
@@ -114,7 +119,7 @@ class ContentArea extends Component {
                 closeOnEscape={true}
                 closeIcon
             >
-                <Modal.Content>
+                <Modal.Content style={{ textAlign : 'center' }}>
                     { this.getFileViewer() }
                 </Modal.Content>
             </Modal>