New: Allow documents to be viewed in presentation mode (#396)

* New: Allow documents to be viewed in presentation mode * Chore: Moving document extensions to extensions.js
box · Sep 19, 2017 · d8956a7 · d8956a7
1 parent b7eb6dc
commit d8956a7
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 120 deletions.
diff --git a/src/lib/viewers/text/extensions.js → src/lib/extensions.js b/src/lib/viewers/text/extensions.js → src/lib/extensions.js
@@ -23,7 +23,6 @@ export const CODE_EXTENSIONS = [
     'java',
     'js',
     'less',
-    'ly',
     'm',
     'make',
     'ml',
@@ -48,6 +47,27 @@ export const CODE_EXTENSIONS = [
     'yaml'
 ];
 
+export const DOCUMENT_EXTENSIONS = CODE_EXTENSIONS.concat(NON_CODE_EXTENSIONS)
+    .concat(HTML_EXTENSIONS)
+    .concat([
+        'doc',
+        'docx',
+        'gdoc',
+        'gsheet',
+        'msg',
+        'odp',
+        'ods',
+        'odt',
+        'pdf',
+        'ppt',
+        'pptx',
+        'rtf',
+        'wpd',
+        'xls',
+        'xlsm',
+        'xlsx'
+    ]);
+
 export const TXT_EXTENSIONS = CODE_EXTENSIONS.concat(NON_CODE_EXTENSIONS);
 
 export const HIGHLIGHTTABLE_EXTENSIONS = CODE_EXTENSIONS.concat(HTML_EXTENSIONS);
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -21,7 +21,14 @@ import {
 } from '../../constants';
 import { checkPermission, getRepresentation } from '../../file';
 import { get, createAssetUrlCreator } from '../../util';
-import { ICON_PRINT_CHECKMARK, ICON_FILE_DOCUMENT } from '../../icons/icons';
+import {
+    ICON_FILE_DOCUMENT,
+    ICON_FILE_PDF,
+    ICON_FILE_PRESENTATION,
+    ICON_FILE_SPREADSHEET,
+    ICON_FILE_WORD,
+    ICON_PRINT_CHECKMARK
+} from '../../icons/icons';
 import { JS, CSS } from './docAssets';
 
 const CURRENT_PAGE_MAP_KEY = 'doc-current-page-map';
@@ -40,6 +47,21 @@ const RANGE_REQUEST_CHUNK_SIZE_NON_US = 524288; // 512KB
 const MINIMUM_RANGE_REQUEST_FILE_SIZE_NON_US = 26214400; // 25MB
 const MOBILE_MAX_CANVAS_SIZE = 2949120; // ~3MP 1920x1536
 
+const LOADING_ICON_MAP = {
+    csv: ICON_FILE_SPREADSHEET,
+    doc: ICON_FILE_WORD,
+    docx: ICON_FILE_WORD,
+    gdoc: ICON_FILE_WORD,
+    gsheet: ICON_FILE_SPREADSHEET,
+    odp: ICON_FILE_PRESENTATION,
+    pdf: ICON_FILE_PDF,
+    ppt: ICON_FILE_PRESENTATION,
+    pptx: ICON_FILE_PRESENTATION,
+    xls: ICON_FILE_SPREADSHEET,
+    xlsm: ICON_FILE_SPREADSHEET,
+    xlsx: ICON_FILE_SPREADSHEET
+};
+
 @autobind
 class DocBaseViewer extends BaseViewer {
     //--------------------------------------------------------------------------
@@ -50,7 +72,8 @@ class DocBaseViewer extends BaseViewer {
      * @inheritdoc
      */
     setup() {
-        this.fileLoadingIcon = this.fileLoadingIcon || ICON_FILE_DOCUMENT;
+        const fileExt = this.options.file.extension;
+        this.fileLoadingIcon = LOADING_ICON_MAP[fileExt] || ICON_FILE_DOCUMENT;
 
         // Call super() to set up common layout
         super.setup();

diff --git a/src/lib/viewers/doc/DocLoader.js b/src/lib/viewers/doc/DocLoader.js
@@ -4,10 +4,11 @@ import DocumentViewer from './DocumentViewer';
 import PresentationViewer from './PresentationViewer';
 import RepStatus from '../../RepStatus';
 import { ORIGINAL_REP_NAME, STATUS_SUCCESS } from '../../constants';
+import { DOCUMENT_EXTENSIONS } from '../../extensions';
 
-// Order of the viewers matters. Prefer original before others. Go from specific to general.
-// For example, a pdf file can be previewed both natively (majority use case) using the original
-// representation but can fallback to using the pdf representation (for watermarked versions).
+// Order of the viewers matters. For example, a PDF file can be previewed by using the preferred optimized 'pdf' rep
+// or the original as a fallback. Additionally, we include multiple entries for the presentation viewer so that it can be
+// used by other docoument types if the document viewer is disabled.
 const VIEWERS = [
     {
         NAME: 'Presentation',
@@ -19,83 +20,28 @@ const VIEWERS = [
         NAME: 'Document',
         CONSTRUCTOR: DocumentViewer,
         REP: 'pdf',
-        EXT: [
-            'as',
-            'as3',
-            'asm',
-            'bat',
-            'c',
-            'cc',
-            'cmake',
-            'cpp',
-            'cs',
-            'css',
-            'csv',
-            'cxx',
-            'diff',
-            'doc',
-            'docx',
-            'erb',
-            'gdoc',
-            'groovy',
-            'gsheet',
-            'h',
-            'haml',
-            'hh',
-            'htm',
-            'html',
-            'java',
-            'js',
-            'less',
-            'log',
-            'm',
-            'make',
-            'md',
-            'ml',
-            'mm',
-            'msg',
-            'odp',
-            'ods',
-            'odt',
-            'pdf',
-            'php',
-            'pl',
-            'plist',
-            'ppt',
-            'pptx',
-            'properties',
-            'py',
-            'rb',
-            'rst',
-            'rtf',
-            'sass',
-            'scala',
-            'scm',
-            'script',
-            'sh',
-            'sml',
-            'sql',
-            'tsv',
-            'txt',
-            'vi',
-            'vim',
-            'webdoc',
-            'wpd',
-            'xhtml',
-            'xls',
-            'xlsm',
-            'xlsx',
-            'xml',
-            'xsd',
-            'xsl',
-            'yaml'
-        ]
+        EXT: DOCUMENT_EXTENSIONS
+    },
+    // Allows other document types to use the presentation viewer when the document viewer is disabled.
+    {
+        NAME: 'Presentation',
+        CONSTRUCTOR: PresentationViewer,
+        REP: 'pdf',
+        EXT: DOCUMENT_EXTENSIONS
     },
     {
         NAME: 'Document',
         CONSTRUCTOR: DocumentViewer,
         REP: ORIGINAL_REP_NAME,
         EXT: ['pdf', 'lcdpdf']
+    },
+    //  Allows PDFs and lcpdf files that only have an original rep
+    // to use the presentation viewer when the document viewer is disabled.
+    {
+        NAME: 'Presentation',
+        CONSTRUCTOR: PresentationViewer,
+        REP: ORIGINAL_REP_NAME,
+        EXT: ['pdf', 'lcdpdf']
     }
 ];
 

diff --git a/src/lib/viewers/doc/DocumentViewer.js b/src/lib/viewers/doc/DocumentViewer.js
@@ -2,30 +2,9 @@ import autobind from 'autobind-decorator';
 import DocBaseViewer from './DocBaseViewer';
 import DocPreloader from './DocPreloader';
 import fullscreen from '../../Fullscreen';
-import {
-    ICON_FILE_DOCUMENT,
-    ICON_FILE_PDF,
-    ICON_FILE_SPREADSHEET,
-    ICON_FILE_WORD,
-    ICON_FULLSCREEN_IN,
-    ICON_FULLSCREEN_OUT,
-    ICON_ZOOM_IN,
-    ICON_ZOOM_OUT
-} from '../../icons/icons';
+import { ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_ZOOM_IN, ICON_ZOOM_OUT } from '../../icons/icons';
 import './Document.scss';
 
-const LOADING_ICON_MAP = {
-    csv: ICON_FILE_SPREADSHEET,
-    doc: ICON_FILE_WORD,
-    docx: ICON_FILE_WORD,
-    gdoc: ICON_FILE_WORD,
-    gsheet: ICON_FILE_SPREADSHEET,
-    pdf: ICON_FILE_PDF,
-    xls: ICON_FILE_SPREADSHEET,
-    xlsm: ICON_FILE_SPREADSHEET,
-    xlsx: ICON_FILE_SPREADSHEET
-};
-
 @autobind
 class DocumentViewer extends DocBaseViewer {
     //--------------------------------------------------------------------------
@@ -36,9 +15,6 @@ class DocumentViewer extends DocBaseViewer {
      * @inheritdoc
      */
     setup() {
-        const fileExt = this.options.file.extension;
-        this.fileLoadingIcon = LOADING_ICON_MAP[fileExt] || ICON_FILE_DOCUMENT;
-
         // Call super() to set up common layout
         super.setup();
         this.docEl.classList.add('bp-doc-document');

diff --git a/src/lib/viewers/doc/PresentationViewer.js b/src/lib/viewers/doc/PresentationViewer.js
@@ -3,13 +3,7 @@ import throttle from 'lodash.throttle';
 import DocBaseViewer from './DocBaseViewer';
 import PresentationPreloader from './PresentationPreloader';
 import { CLASS_INVISIBLE } from '../../constants';
-import {
-    ICON_FILE_PRESENTATION,
-    ICON_FULLSCREEN_IN,
-    ICON_FULLSCREEN_OUT,
-    ICON_ZOOM_IN,
-    ICON_ZOOM_OUT
-} from '../../icons/icons';
+import { ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_ZOOM_IN, ICON_ZOOM_OUT } from '../../icons/icons';
 import './Presentation.scss';
 
 const WHEEL_THROTTLE = 200;
@@ -26,8 +20,6 @@ class PresentationViewer extends DocBaseViewer {
      * @inheritdoc
      */
     setup() {
-        this.fileLoadingIcon = ICON_FILE_PRESENTATION;
-
         // Call super() to set up common layout
         super.setup();
         this.docEl.classList.add('bp-doc-presentation');
@@ -246,6 +238,9 @@ class PresentationViewer extends DocBaseViewer {
         });
 
         super.pagesinitHandler();
+
+        // Initially scale the page to fit. This will change to auto on resize events.
+        this.pdfViewer.currentScaleValue = 'page-fit';
     }
 
     /**

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -17,7 +17,7 @@ import {
     STATUS_SUCCESS,
 } from '../../../constants';
 
-import { ICON_PRINT_CHECKMARK } from '../../../icons/icons';
+import { ICON_PRINT_CHECKMARK, ICON_FILE_PRESENTATION } from '../../../icons/icons';
 
 const LOAD_TIMEOUT_MS = 180000; // 3 min timeout
 const PRINT_TIMEOUT_MS = 1000; // Wait 1s before trying to print
@@ -58,7 +58,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                 }
             },
             file: {
-                id: '0'
+                id: '0',
+                extension: 'ppt'
             }
         });
         Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
@@ -91,6 +92,10 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
 
             expect(docBase.loadTimeout).to.equal(LOAD_TIMEOUT_MS);
         });
+
+        it('should correctly set the file icon based on file extension', () => {
+            expect(docBase.fileLoadingIcon).to.equal(ICON_FILE_PRESENTATION);
+        });
     });
 
     describe('destroy()', () => {

diff --git a/src/lib/viewers/doc/__tests__/PresentationViewer-test.js b/src/lib/viewers/doc/__tests__/PresentationViewer-test.js
@@ -38,7 +38,10 @@ describe('lib/viewers/doc/PresentationViewer', () => {
                 get: () => {},
                 unset: () => {}
             },
-            container: containerEl
+            container: containerEl,
+            file: {
+                extension: 'ppt'
+            }
         });
 
         Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.mock() });
@@ -54,10 +57,6 @@ describe('lib/viewers/doc/PresentationViewer', () => {
         presentation.controls = {
             add: sandbox.stub()
         };
-
-        presentation.options = {
-            file: 'file'
-        };
     });
 
     afterEach(() => {
@@ -431,6 +430,12 @@ describe('lib/viewers/doc/PresentationViewer', () => {
             expect(stubs.page2).to.have.class(CLASS_INVISIBLE);
             expect(stubs.page3).to.have.class(CLASS_INVISIBLE);
         });
+
+        it('should set the pdf viewer scale to page-fit', () => {
+            presentation.pagesinitHandler();
+
+            expect(presentation.pdfViewer.currentScaleValue).to.equal('page-fit');
+        });
     });
 
     describe('wheelHandler()', () => {

diff --git a/src/lib/viewers/text/PlainTextViewer.js b/src/lib/viewers/text/PlainTextViewer.js
@@ -4,7 +4,7 @@ import Browser from '../../Browser';
 import Popup from '../../Popup';
 import { CLASS_HIDDEN, TEXT_STATIC_ASSETS_VERSION } from '../../constants';
 import { ICON_PRINT_CHECKMARK } from '../../icons/icons';
-import { HIGHLIGHTTABLE_EXTENSIONS } from './extensions';
+import { HIGHLIGHTTABLE_EXTENSIONS } from '../../extensions';
 import { get, openContentInsideIframe, createAssetUrlCreator, createStylesheet } from '../../util';
 
 // Inline web worker JS

diff --git a/src/lib/viewers/text/TextLoader.js b/src/lib/viewers/text/TextLoader.js
@@ -4,7 +4,7 @@ import MarkdownViewer from './MarkdownViewer';
 import CSVViewer from './CSVViewer';
 import { isVeraProtectedFile } from '../../util';
 import { ORIGINAL_REP_NAME } from '../../constants';
-import { HTML_EXTENSIONS, TXT_EXTENSIONS } from './extensions';
+import { HTML_EXTENSIONS, TXT_EXTENSIONS } from '../../extensions';
 
 // Order of the viewers matters. Prefer original before others. Go from specific to general.
 const VIEWERS = [