diff --git a/src/lib/_common.scss b/src/lib/_common.scss index dcf1539de..7693e9b13 100644 --- a/src/lib/_common.scss +++ b/src/lib/_common.scss @@ -71,6 +71,12 @@ $header-height: 48px; } } +.bp-icon-file, +.bp-icon-file > svg { + height: 120px; + margin-bottom: 20px; +} + // Dark theme for header .bp-theme-dark { .bp-header { diff --git a/src/lib/constants.js b/src/lib/constants.js index 0b678178f..01e5ced8c 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -36,6 +36,7 @@ export const CLASS_DARK = 'bp-dark'; export const SELECTOR_BOX_PREVIEW_CONTAINER = `.${CLASS_BOX_PREVIEW_CONTAINER}`; export const SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`; +export const SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER = '.bp-crawler-wrapper'; export const SELECTOR_BOX_PREVIEW_HEADER_BTNS = `.${CLASS_BOX_PREVIEW_HEADER_BTNS}`; export const SELECTOR_NAVIGATION_LEFT = '.bp-navigate-left'; export const SELECTOR_NAVIGATION_RIGHT = '.bp-navigate-right'; diff --git a/src/lib/icons/file_audio.svg b/src/lib/icons/file_audio.svg new file mode 100755 index 000000000..74e823613 --- /dev/null +++ b/src/lib/icons/file_audio.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_box_note.svg b/src/lib/icons/file_box_note.svg new file mode 100755 index 000000000..5bc0618ea --- /dev/null +++ b/src/lib/icons/file_box_note.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_code.svg b/src/lib/icons/file_code.svg new file mode 100755 index 000000000..2613973b4 --- /dev/null +++ b/src/lib/icons/file_code.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_default.svg b/src/lib/icons/file_default.svg index 8c83b8f00..c02d67f5f 100644 --- a/src/lib/icons/file_default.svg +++ b/src/lib/icons/file_default.svg @@ -1,5 +1 @@ - - - - - + diff --git a/src/lib/icons/file_dicom.svg b/src/lib/icons/file_dicom.svg new file mode 100755 index 000000000..cb001f9b0 --- /dev/null +++ b/src/lib/icons/file_dicom.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_document.svg b/src/lib/icons/file_document.svg new file mode 100755 index 000000000..5d79c777a --- /dev/null +++ b/src/lib/icons/file_document.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_illustrator.svg b/src/lib/icons/file_illustrator.svg new file mode 100755 index 000000000..192acf1be --- /dev/null +++ b/src/lib/icons/file_illustrator.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_image.svg b/src/lib/icons/file_image.svg new file mode 100755 index 000000000..9dc3372c6 --- /dev/null +++ b/src/lib/icons/file_image.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_media.svg b/src/lib/icons/file_media.svg index 2c58cb0c0..17a15cce8 100644 --- a/src/lib/icons/file_media.svg +++ b/src/lib/icons/file_media.svg @@ -1,6 +1 @@ - - - - - - + diff --git a/src/lib/icons/file_obj.svg b/src/lib/icons/file_obj.svg new file mode 100755 index 000000000..e68c12aeb --- /dev/null +++ b/src/lib/icons/file_obj.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_pdf.svg b/src/lib/icons/file_pdf.svg new file mode 100755 index 000000000..5d0976221 --- /dev/null +++ b/src/lib/icons/file_pdf.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_presentation.svg b/src/lib/icons/file_presentation.svg new file mode 100644 index 000000000..c3bbe27c1 --- /dev/null +++ b/src/lib/icons/file_presentation.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_spreadsheet.svg b/src/lib/icons/file_spreadsheet.svg new file mode 100755 index 000000000..3b6be9d28 --- /dev/null +++ b/src/lib/icons/file_spreadsheet.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_word.svg b/src/lib/icons/file_word.svg new file mode 100755 index 000000000..0e11a3e87 --- /dev/null +++ b/src/lib/icons/file_word.svg @@ -0,0 +1 @@ + diff --git a/src/lib/icons/file_zip.svg b/src/lib/icons/file_zip.svg index 870403511..bd5011fa1 100644 --- a/src/lib/icons/file_zip.svg +++ b/src/lib/icons/file_zip.svg @@ -1,26 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/src/lib/icons/icons.js b/src/lib/icons/icons.js index 08ff805fa..cc88816de 100644 --- a/src/lib/icons/icons.js +++ b/src/lib/icons/icons.js @@ -14,9 +14,21 @@ import ARROW_LEFT from './arrow_left_24px.svg'; import ARROW_RIGHT from './arrow_right_24px.svg'; import CHECK_MARK from './checkmark_24px.svg'; import GEAR from './gear_24px.svg'; +import FILE_AUDIO from './file_audio.svg'; +import FILE_BOX_NOTE from './file_box_note.svg'; +import FILE_CODE from './file_code.svg'; +import FILE_DICOM from './file_dicom.svg'; import FILE_DEFAULT from './file_default.svg'; -import FILE_ZIP from './file_zip.svg'; +import FILE_DOCUMENT from './file_document.svg'; +import FILE_ILLUSTRATOR from './file_illustrator.svg'; +import FILE_IMAGE from './file_image.svg'; import FILE_MEDIA from './file_media.svg'; +import FILE_OBJ from './file_obj.svg'; +import FILE_PDF from './file_pdf.svg'; +import FILE_PRESENTATION from './file_presentation.svg'; +import FILE_SPREADSHEET from './file_spreadsheet.svg'; +import FILE_WORD from './file_word.svg'; +import FILE_ZIP from './file_zip.svg'; import ANIMATION from './animation_24px.svg'; import PAUSE from './pause_24px.svg'; import PLAY from './play_24px.svg'; @@ -45,9 +57,21 @@ export const ICON_ARROW_LEFT = ARROW_LEFT; export const ICON_ARROW_RIGHT = ARROW_RIGHT; export const ICON_CHECK_MARK = CHECK_MARK; export const ICON_GEAR = GEAR; +export const ICON_FILE_AUDIO = FILE_AUDIO; +export const ICON_FILE_BOX_NOTE = FILE_BOX_NOTE; +export const ICON_FILE_CODE = FILE_CODE; export const ICON_FILE_DEFAULT = FILE_DEFAULT; -export const ICON_FILE_ZIP = FILE_ZIP; +export const ICON_FILE_DICOM = FILE_DICOM; +export const ICON_FILE_DOCUMENT = FILE_DOCUMENT; +export const ICON_FILE_ILLUSTRATOR = FILE_ILLUSTRATOR; +export const ICON_FILE_IMAGE = FILE_IMAGE; export const ICON_FILE_MEDIA = FILE_MEDIA; +export const ICON_FILE_OBJ = FILE_OBJ; +export const ICON_FILE_PDF = FILE_PDF; +export const ICON_FILE_PRESENTATION = FILE_PRESENTATION; +export const ICON_FILE_SPREADSHEET = FILE_SPREADSHEET; +export const ICON_FILE_WORD = FILE_WORD; +export const ICON_FILE_ZIP = FILE_ZIP; export const ICON_ANIMATION = ANIMATION; export const ICON_PAUSE = PAUSE; export const ICON_PLAY = PLAY; diff --git a/src/lib/shell.html b/src/lib/shell.html index b558c05c1..6d468d9d4 100644 --- a/src/lib/shell.html +++ b/src/lib/shell.html @@ -29,7 +29,7 @@
-
+
diff --git a/src/lib/ui.js b/src/lib/ui.js index 546093e02..d51aae490 100644 --- a/src/lib/ui.js +++ b/src/lib/ui.js @@ -12,7 +12,6 @@ import { SELECTOR_BOX_PREVIEW_BTN_PRINT, SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD, SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD, - SELECTOR_BOX_PREVIEW_ICON, SELECTOR_BOX_PREVIEW_LOADING_TEXT, SELECTOR_BOX_PREVIEW_LOADING_WRAPPER, SELECTOR_BOX_PREVIEW_LOGO_CUSTOM, @@ -20,7 +19,6 @@ import { SELECTOR_NAVIGATION_LEFT, SELECTOR_NAVIGATION_RIGHT } from './constants'; -import { ICON_FILE_DEFAULT } from './icons/icons'; let container; let contentContainer; @@ -70,9 +68,6 @@ function setupLoading() { return; } - const iconWrapperEl = loadingWrapperEl.querySelector(SELECTOR_BOX_PREVIEW_ICON); - iconWrapperEl.innerHTML = ICON_FILE_DEFAULT; - const loadingTextEl = loadingWrapperEl.querySelector(SELECTOR_BOX_PREVIEW_LOADING_TEXT); loadingTextEl.textContent = __('loading_preview'); diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index f198c4b21..197be14a4 100644 --- a/src/lib/viewers/BaseViewer.js +++ b/src/lib/viewers/BaseViewer.js @@ -21,9 +21,12 @@ import { CLASS_BOX_PREVIEW_MOBILE, SELECTOR_BOX_PREVIEW, SELECTOR_BOX_PREVIEW_BTN_ANNOTATE, + SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER, + SELECTOR_BOX_PREVIEW_ICON, STATUS_SUCCESS, STATUS_VIEWABLE } from '../constants'; +import { ICON_FILE_DEFAULT } from '../icons/icons'; const ANNOTATIONS_JS = ['annotations.js']; const ANNOTATIONS_CSS = ['annotations.css']; @@ -33,18 +36,25 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300; @autobind class BaseViewer extends EventEmitter { /** * Rotation value in degrees of the document, if rotated. - * + * * @property {number} */ rotationAngle = 0; /** * Scale amount of the document, if zoomed. - * + * * @property {number} */ scale = 1; + /** + * Viewer specific file loading Icon + * + * @property {string} + */ + fileLoadingIcon; + /** * [constructor] * @@ -60,11 +70,13 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300; } /** - * Sets up the vewier and its DOM + * Sets up the viewer and its DOM * * @return {void} */ setup() { + this.finishLoadingSetup(); + // Get the container dom element if selector was passed, in tests let { container } = this.options; if (typeof container === 'string') { @@ -93,6 +105,22 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300; } } + /** + * Removes the crawler and sets the file type specific loading icon + * + * @return {void} + */ + finishLoadingSetup() { + const { container } = this.options; + const crawler = container.querySelector(SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER); + if (crawler) { + crawler.classList.add(CLASS_HIDDEN); + } + + const iconWrapperEl = container.querySelector(SELECTOR_BOX_PREVIEW_ICON); + iconWrapperEl.innerHTML = this.fileLoadingIcon || ICON_FILE_DEFAULT; + } + /** * Destroys the viewer * @@ -566,7 +594,7 @@ const RESIZE_WAIT_TIME_IN_MILLIS = 300; /** * Orient anntations to the correct scale and orientatio of the annotated document. * @TODO(jholdstock|spramod): Remove this once we are emitting the correct messaging. - * + * * @protected * @param {Object} data - Scale and orientation values needed to orient annotations. * @return {void} diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js index c08558c5f..b4b8303e3 100644 --- a/src/lib/viewers/__tests__/BaseViewer-test.js +++ b/src/lib/viewers/__tests__/BaseViewer-test.js @@ -43,6 +43,7 @@ describe('lib/viewers/BaseViewer', () => { it('should set options, a container, bind event listeners, and set timeout', () => { sandbox.stub(base, 'addCommonListeners'); sandbox.stub(base, 'loadAssets').returns(Promise.resolve()); + sandbox.stub(base, 'finishLoadingSetup'); base.options.showAnnotations = true; base.setup(); @@ -63,6 +64,8 @@ describe('lib/viewers/BaseViewer', () => { it('should add a mobile class to the container if on mobile', () => { base.isMobile = true; sandbox.stub(base, 'loadAssets').returns(Promise.resolve()); + sandbox.stub(base, 'finishLoadingSetup'); + base.setup(); const container = document.querySelector('.bp'); @@ -72,18 +75,45 @@ describe('lib/viewers/BaseViewer', () => { it('should not load annotations assets if global preview showAnnotations option is false', () => { sandbox.stub(base, 'addCommonListeners'); sandbox.stub(base, 'loadAssets'); + sandbox.stub(base, 'finishLoadingSetup'); base.options.showAnnotations = false; + + base.setup(); + expect(base.loadAssets).to.not.be.called; }); it('should not load annotations assets if expiring embed is a shared link', () => { sandbox.stub(base, 'addCommonListeners'); sandbox.stub(base, 'loadAssets'); + sandbox.stub(base, 'finishLoadingSetup'); base.options.sharedLink = 'url'; + + base.setup(); + expect(base.loadAssets).to.not.be.called; }); }); + describe('finishLoadingSetup()', () => { + it('should hide the crawler and set the file icon into the icon element', () => { + const container = { + classList: { + add: sandbox.stub() + }, + innerHTML: '', + removeEventListener: sandbox.stub() + }; + base.fileLoadingIcon = 'icon'; + + sandbox.stub(containerEl, 'querySelector').returns(container); + + base.finishLoadingSetup(); + expect(container.innerHTML).to.equal('icon'); + expect(container.classList.add).to.be.called; + }); + }); + describe('debouncedResizeHandler()', () => { it('should return a resize handler', () => { expect(base.debouncedResizeHandler()).to.be.a.function; @@ -293,6 +323,7 @@ describe('lib/viewers/BaseViewer', () => { it('should cleanup the base viewer', () => { sandbox.stub(base, 'loadAssets').returns(Promise.resolve()); sandbox.stub(base, 'loadAnnotator'); + sandbox.stub(base, 'finishLoadingSetup'); base.setup(); sandbox.mock(fullscreen).expects('removeAllListeners'); @@ -366,6 +397,7 @@ describe('lib/viewers/BaseViewer', () => { }); sandbox.stub(base, 'loadAssets').returns(Promise.resolve()); sandbox.stub(base, 'loadAnnotator'); + sandbox.stub(base, 'finishLoadingSetup'); base.setup(); event = { preventDefault: sandbox.stub(), diff --git a/src/lib/viewers/box3d/Box3DViewer.js b/src/lib/viewers/box3d/Box3DViewer.js index f7f94cac3..bced94933 100644 --- a/src/lib/viewers/box3d/Box3DViewer.js +++ b/src/lib/viewers/box3d/Box3DViewer.js @@ -21,6 +21,7 @@ import { } from './box3DConstants'; import JS from './box3DAssets'; import './Box3D.scss'; +import { ICON_FILE_OBJ } from '../../icons/icons'; // Milliseconds to wait for model to load before cancelling Preview const LOAD_TIMEOUT = 50000; @@ -37,7 +38,9 @@ const CLASS_VR_ENABLED = 'vr-enabled'; * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = this.fileLoadingIcon || ICON_FILE_OBJ; + + // Call super() to set up common layout super.setup(); this.renderer = null; diff --git a/src/lib/viewers/box3d/image360/Image360Viewer.js b/src/lib/viewers/box3d/image360/Image360Viewer.js index 6011c4713..232bf4f49 100644 --- a/src/lib/viewers/box3d/image360/Image360Viewer.js +++ b/src/lib/viewers/box3d/image360/Image360Viewer.js @@ -2,6 +2,7 @@ import './Image360.scss'; import Box3DViewer from '../Box3DViewer'; import Box3DControls from '../Box3DControls'; import Image360Renderer from './Image360Renderer'; +import { ICON_FILE_IMAGE } from '../../../icons/icons'; const CSS_CLASS_IMAGE_360 = 'bp-image-360'; const LOAD_TIMEOUT = 120000; @@ -11,7 +12,9 @@ class Image360Viewer extends Box3DViewer { * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_IMAGE; + + // Call super() to set up common layout super.setup(); this.wrapperEl.classList.add(CSS_CLASS_IMAGE_360); diff --git a/src/lib/viewers/box3d/video360/Video360Viewer.js b/src/lib/viewers/box3d/video360/Video360Viewer.js index 3a0aea236..11bff89bf 100644 --- a/src/lib/viewers/box3d/video360/Video360Viewer.js +++ b/src/lib/viewers/box3d/video360/Video360Viewer.js @@ -6,6 +6,7 @@ import Video360Controls from './Video360Controls'; import Video360Renderer from './Video360Renderer'; import sceneEntities from './SceneEntities'; import { EVENT_TOGGLE_VR, EVENT_SHOW_VR_BUTTON } from '../box3DConstants'; +import { ICON_FILE_MEDIA } from '../../../icons/icons'; import JS from '../box3DAssets'; import './Video360.scss'; @@ -24,7 +25,9 @@ class Video360Viewer extends DashViewer { * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_MEDIA; + + // Call super() to set up common layout super.setup(); this.renderer = null; diff --git a/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js b/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js index 667bf1b48..94b6428cb 100644 --- a/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js +++ b/src/lib/viewers/box3d/video360/__tests__/Video360Viewer-test.js @@ -58,6 +58,7 @@ describe('lib/viewers/box3d/video360/Video360Viewer', () => { describe('setup()', () => { beforeEach(() => { + sandbox.stub(viewer, 'finishLoadingSetup'); viewer.setup(); }); @@ -366,6 +367,8 @@ describe('lib/viewers/box3d/video360/Video360Viewer', () => { getScene: sandbox.stub().returns(scene) }; + sandbox.stub(viewer, 'finishLoadingSetup'); + viewer.setup(); viewer.renderer = renderer; createPromise = viewer.create360Environment(); diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index c80a446f4..180a0700e 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -19,7 +19,7 @@ import { } from '../../constants'; import { checkPermission, getRepresentation } from '../../file'; import { get, createAssetUrlCreator, decodeKeydown } from '../../util'; -import { ICON_PRINT_CHECKMARK } from '../../icons/icons'; +import { ICON_PRINT_CHECKMARK, ICON_FILE_DOCUMENT } from '../../icons/icons'; import { JS, CSS } from './docAssets'; const CURRENT_PAGE_MAP_KEY = 'doc-current-page-map'; @@ -49,7 +49,9 @@ const MOBILE_MAX_CANVAS_SIZE = 2949120; // ~3MP 1920x1536 * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = this.fileLoadingIcon || ICON_FILE_DOCUMENT; + + // Call super() to set up common layout super.setup(); this.docEl = this.containerEl.appendChild(document.createElement('div')); diff --git a/src/lib/viewers/doc/DocumentViewer.js b/src/lib/viewers/doc/DocumentViewer.js index 9e52fcac4..ffbe5ebf5 100644 --- a/src/lib/viewers/doc/DocumentViewer.js +++ b/src/lib/viewers/doc/DocumentViewer.js @@ -6,6 +6,10 @@ import fullscreen from '../../Fullscreen'; import { ICON_DROP_DOWN, ICON_DROP_UP, + ICON_FILE_DOCUMENT, + ICON_FILE_PDF, + ICON_FILE_SPREADSHEET, + ICON_FILE_WORD, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_ZOOM_IN, @@ -13,6 +17,18 @@ import { } 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 { //-------------------------------------------------------------------------- // Public @@ -22,7 +38,10 @@ import './Document.scss'; * @inheritdoc */ setup() { - // Call super() first to set up common layout + 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 index 10dad2fbf..8f9e0c77d 100644 --- a/src/lib/viewers/doc/PresentationViewer.js +++ b/src/lib/viewers/doc/PresentationViewer.js @@ -8,6 +8,7 @@ import { CLASS_INVISIBLE } from '../../constants'; import { ICON_DROP_DOWN, ICON_DROP_UP, + ICON_FILE_PRESENTATION, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_ZOOM_IN, @@ -28,7 +29,9 @@ const SCROLL_EVENT_OFFSET = 5; * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_PRESENTATION; + + // Call super() to set up common layout super.setup(); this.docEl.classList.add('bp-doc-presentation'); diff --git a/src/lib/viewers/error/PreviewErrorViewer.js b/src/lib/viewers/error/PreviewErrorViewer.js index d552cb9d0..df9f7300c 100644 --- a/src/lib/viewers/error/PreviewErrorViewer.js +++ b/src/lib/viewers/error/PreviewErrorViewer.js @@ -20,10 +20,21 @@ import './PreviewError.scss'; this.infoEl = this.containerEl.appendChild(document.createElement('div')); this.iconEl = this.infoEl.appendChild(document.createElement('div')); + this.iconEl.className = 'bp-icon bp-icon-file'; this.messageEl = this.infoEl.appendChild(document.createElement('div')); this.infoEl.className = 'bp-error'; } + /** + * Removes the crawler and sets the file type specific loading icon + * + * @override + * @return {void} + */ + finishLoadingSetup() { + /* no op, custom loading logic for errors */ + } + /** * [destructor] * diff --git a/src/lib/viewers/iframe/IFrameViewer.js b/src/lib/viewers/iframe/IFrameViewer.js index cdd7b3ba2..e4b9c0ecd 100644 --- a/src/lib/viewers/iframe/IFrameViewer.js +++ b/src/lib/viewers/iframe/IFrameViewer.js @@ -1,11 +1,20 @@ import BaseViewer from '../BaseViewer'; +import { ICON_FILE_BOX_NOTE, ICON_FILE_DICOM } from '../../icons/icons'; + +const LOADING_ICON_MAP = { + boxdicom: ICON_FILE_DICOM, + boxnote: ICON_FILE_BOX_NOTE +}; class IFrameViewer extends BaseViewer { /** * @inheritdoc */ setup() { - // Call super() first to set up common layout + const fileExt = this.options.file.extension; + this.fileLoadingIcon = LOADING_ICON_MAP[fileExt]; + + // Call super() to set up common layout super.setup(); this.iframeEl = this.containerEl.appendChild(document.createElement('iframe')); diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js index b7906b9a4..630755409 100644 --- a/src/lib/viewers/image/ImageViewer.js +++ b/src/lib/viewers/image/ImageViewer.js @@ -1,7 +1,12 @@ import autobind from 'autobind-decorator'; import Browser from '../../Browser'; import ImageBaseViewer from './ImageBaseViewer'; -import { ICON_ROTATE_LEFT, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT } from '../../icons/icons'; +import { + ICON_FILE_IMAGE, + ICON_FULLSCREEN_IN, + ICON_FULLSCREEN_OUT, + ICON_ROTATE_LEFT +} from '../../icons/icons'; import { CLASS_INVISIBLE } from '../../constants'; import { openContentInsideIframe } from '../../util'; import './Image.scss'; @@ -15,7 +20,9 @@ const IMAGE_ZOOM_SCALE = 1.2; * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_IMAGE; + + // Call super() to set up common layout super.setup(); this.wrapperEl = this.containerEl.appendChild(document.createElement('div')); diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js index 4f98d02f0..dab2d9a95 100644 --- a/src/lib/viewers/image/MultiImageViewer.js +++ b/src/lib/viewers/image/MultiImageViewer.js @@ -2,7 +2,7 @@ import autobind from 'autobind-decorator'; import ImageBaseViewer from './ImageBaseViewer'; import './MultiImage.scss'; -import { ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT } from '../../icons/icons'; +import { ICON_FILE_IMAGE, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT } from '../../icons/icons'; import { CLASS_INVISIBLE } from '../../constants'; const PADDING_BUFFER = 100; @@ -15,6 +15,9 @@ const ZOOM_UPDATE_PAN_DELAY = 50; * @inheritdoc */ setup() { + this.fileLoadingIcon = ICON_FILE_IMAGE; + + // Call super() to set up common layout super.setup(); this.wrapperEl = this.containerEl.appendChild(document.createElement('div')); diff --git a/src/lib/viewers/media/MP3Viewer.js b/src/lib/viewers/media/MP3Viewer.js index 3b62e1d9f..50ecd4706 100644 --- a/src/lib/viewers/media/MP3Viewer.js +++ b/src/lib/viewers/media/MP3Viewer.js @@ -1,5 +1,6 @@ import autobind from 'autobind-decorator'; import MediaBaseViewer from './MediaBaseViewer'; +import { ICON_FILE_AUDIO } from '../../icons/icons'; import './MP3.scss'; const CSS_CLASS_MP3 = 'bp-media-mp3'; @@ -9,7 +10,9 @@ const CSS_CLASS_MP3 = 'bp-media-mp3'; * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_AUDIO; + + // Call super() to set up common layout super.setup(); // mp3 specific class diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js index 7aa14b0d5..390b05dfe 100644 --- a/src/lib/viewers/media/MediaBaseViewer.js +++ b/src/lib/viewers/media/MediaBaseViewer.js @@ -5,6 +5,7 @@ import cache from '../../Cache'; import Browser from '../../Browser'; import MediaControls from './MediaControls'; import { CLASS_ELEM_KEYBOARD_FOCUS, CLASS_HIDDEN, CLASS_IS_BUFFERING, CLASS_IS_VISIBLE } from '../../constants'; +import { ICON_FILE_MEDIA } from '../../icons/icons'; const CSS_CLASS_MEDIA = 'bp-media'; const CSS_CLASS_MEDIA_CONTAINER = 'bp-media-container'; @@ -18,7 +19,9 @@ const EMIT_WAIT_TIME_IN_MILLIS = 100; * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = this.fileLoadingIcon || ICON_FILE_MEDIA; + + // Call super() to set up common layout super.setup(); // Media Wrapper diff --git a/src/lib/viewers/media/VideoBaseViewer.js b/src/lib/viewers/media/VideoBaseViewer.js index 6c35353f2..f04bff633 100644 --- a/src/lib/viewers/media/VideoBaseViewer.js +++ b/src/lib/viewers/media/VideoBaseViewer.js @@ -12,7 +12,7 @@ const CLASS_PLAY_BUTTON = 'bp-media-play-button'; * @inheritdoc */ setup() { - // Call super() first to set up common layout + // Call super() to set up common layout super.setup(); // Video element diff --git a/src/lib/viewers/office/OfficeViewer.js b/src/lib/viewers/office/OfficeViewer.js index a0cf8a53c..4a57161f2 100644 --- a/src/lib/viewers/office/OfficeViewer.js +++ b/src/lib/viewers/office/OfficeViewer.js @@ -4,7 +4,7 @@ import Browser from '../../Browser'; import Popup from '../../Popup'; import { CLASS_HIDDEN } from '../../constants'; import { getRepresentation } from '../../file'; -import { ICON_PRINT_CHECKMARK } from '../../icons/icons'; +import { ICON_FILE_SPREADSHEET, ICON_PRINT_CHECKMARK } from '../../icons/icons'; import { get } from '../../util'; const LOAD_TIMEOUT_MS = 120000; @@ -25,7 +25,9 @@ const MESSAGE_HOST_READY = 'Host_PostmessageReady'; * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_SPREADSHEET; + + // Call super() to set up common layout super.setup(); // Set to false only in the WebApp, everywhere else we want to avoid hitting a runmode. // This flag will be removed once we run the entire integration through the client. diff --git a/src/lib/viewers/swf/SWFViewer.js b/src/lib/viewers/swf/SWFViewer.js index 744bbc18b..78fe78e8a 100644 --- a/src/lib/viewers/swf/SWFViewer.js +++ b/src/lib/viewers/swf/SWFViewer.js @@ -1,5 +1,6 @@ import BaseViewer from '../BaseViewer'; import { SWF_STATIC_ASSETS_VERSION } from '../../constants'; +import { ICON_FILE_IMAGE } from '../../icons/icons'; const SWF_PARAMS = { allowfullscreen: 'true', @@ -18,7 +19,9 @@ class SWFViewer extends BaseViewer { * @inheritdoc */ setup() { - // Call super() first to set up common layout + this.fileLoadingIcon = ICON_FILE_IMAGE; + + // Call super() to set up common layout super.setup(); this.playerEl = this.containerEl.appendChild(document.createElement('div')); this.playerEl.id = 'flash-player'; diff --git a/src/lib/viewers/text/TextBaseViewer.js b/src/lib/viewers/text/TextBaseViewer.js index 579ce3b90..a60bf0c3a 100644 --- a/src/lib/viewers/text/TextBaseViewer.js +++ b/src/lib/viewers/text/TextBaseViewer.js @@ -3,14 +3,34 @@ import Controls from '../../Controls'; import BaseViewer from '../BaseViewer'; import { checkPermission } from '../../file'; import { CLASS_IS_SELECTABLE, PERMISSION_DOWNLOAD } from '../../constants'; -import { ICON_ZOOM_IN, ICON_ZOOM_OUT, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT } from '../../icons/icons'; -@autobind class TextBaseViewer extends BaseViewer { +import { + ICON_FILE_DOCUMENT, + ICON_FILE_SPREADSHEET, + ICON_FILE_CODE, + ICON_ZOOM_IN, + ICON_ZOOM_OUT, + ICON_FULLSCREEN_IN, + ICON_FULLSCREEN_OUT +} from '../../icons/icons'; + +const LOADING_ICON_MAP = { + csv: ICON_FILE_SPREADSHEET, + log: ICON_FILE_DOCUMENT, + tsv: ICON_FILE_SPREADSHEET, + txt: ICON_FILE_DOCUMENT +}; + +@autobind +class TextBaseViewer extends BaseViewer { /** * @inheritdoc */ setup() { - // Call super() first to set up common layout + const fileExt = this.options.file.extension; + this.fileLoadingIcon = LOADING_ICON_MAP[fileExt] || ICON_FILE_CODE; + + // Call super() to set up common layout super.setup(); }