progress bar setup, api utils, and cancel button logic

app/controllers/reader/documents_controller.rb

@@ -56,6 +56,7 @@ def documents
       document.to_hash.tap do |object|
         object[:opened_by_current_user] = read_documents_hash[document.id] || false
         object[:tags] = tags_by_doc_id[document.id].to_a
+        object[:file_size] = document.file_size
       end
     end
   end

app/models/document.rb

@@ -144,6 +144,10 @@ def serve
     default_path
   end
 
+  def file_size
+    File.size(default_path) || 0
+  end
+
   def file_name
     vbms_document_id.to_s
   end

client/app/readerprototype/DocumentViewer.jsx

@@ -131,6 +131,7 @@ const DocumentViewer = (props) => {
               setIsDocumentLoadError={setIsDocumentLoadError}
               setNumPages={setNumPages}
               zoomLevel={props.zoomLevel}
+              onrequestCancel={() => props.history.push(props.documentPathBase)}
             />
           </div>
           <ReaderFooter

client/app/readerprototype/components/PdfDocument.jsx

@@ -20,6 +20,7 @@ const PdfDocument = ({
   rotateDeg,
   setIsDocumentLoadError,
   setNumPages,
+  onrequestCancel,
   zoomLevel }) => {
   const [pdfDoc, setPdfDoc] = useState(null);
   const [pdfPages, setPdfPages] = useState([]);
@@ -28,6 +29,7 @@ const PdfDocument = ({
   const [allPagesRendered, setAllPagesRendered] = useState(false);
   const [metricsLogged, setMetricsLogged] = useState(false);
   const metricsLoggedRef = useRef(metricsLogged);
+  const requestRef = useRef(null);
 
   const containerStyle = {
     width: '100%',
@@ -97,6 +99,15 @@ const PdfDocument = ({
     setMetricsLogged(true);
   };
 
+  const handleCancelRequest = () => {
+    if (requestRef.current) {
+      // Abort the download
+      requestRef.current.abort();
+      // Redirect
+      onrequestCancel();
+    }
+  };
+
   useEffect(() => {
     const getDocData = async () => {
       pdfMetrics.current.renderedPageCount = 0;
@@ -110,10 +121,25 @@ const PdfDocument = ({
         withCredentials: true,
         timeout: true,
         responseType: 'arraybuffer',
+        onProgress: ({ loaded }) => {
+          let percentage = 0;
+
+          if (doc.file_size > 0) {
+            percentage = (loaded / doc.file_size) * 100;
+          }
+
+          console.log(`### Downloaded ${percentage.toFixed(0)}%\n`);
+
+        },
+        cancellableRequest: ({ request }) => {
+          requestRef.current = request;
+        }
       };
 
       pdfMetrics.current.getStartTime = new Date().getTime();
       const byteArr = await ApiUtil.get(doc.content_url, requestOptions).then((response) => {
+        requestRef.current = null;
+
         return response.body;
       });
 
@@ -202,12 +228,14 @@ PdfDocument.propTypes = {
     filename: PropTypes.string,
     id: PropTypes.number,
     type: PropTypes.string,
+    file_size: PropTypes.number,
   }),
   isDocumentLoadError: PropTypes.bool,
   rotateDeg: PropTypes.string,
   setIsDocumentLoadError: PropTypes.func,
   setNumPages: PropTypes.func,
   zoomLevel: PropTypes.number,
+  onrequestCancel: PropTypes.func,
 };
 
 export default PdfDocument;

client/app/util/ApiUtil.js

@@ -165,7 +165,23 @@ const httpMethods = {
       set(getHeadersObject(options.headers)).
       query(options.query).
       timeout(timeoutSettings).
-      on('error', (err) => errorHandling(url, err, 'GET', options));
+      on('error', (err) => errorHandling(url, err, 'GET', options)).
+      on('abort', () => console.log('## User Cancelled, should I log this?\n'));
+
+    if (typeof options.onProgress === 'function') {
+      promise.on('progress', (event) => {
+        const loaded = event.loaded;
+
+        options.onProgress({ loaded });
+      });
+    }
+
+    if (typeof options.cancellableRequest === 'function') {
+      const pendingRequest = promise;
+
+      options.cancellableRequest({ request: pendingRequest });
+
+    }
 
     if (options.responseType) {
       promise.responseType(options.responseType);