diff --git a/docs/viewers/csv.md b/docs/viewers/csv.md deleted file mode 100755 index 7d7d6655d..000000000 --- a/docs/viewers/csv.md +++ /dev/null @@ -1,36 +0,0 @@ -# CSV Viewer - -The CSV viewer uses [PapaParse](https://github.com/mholt/PapaParse) to parse CSV and TSV files and [React Virtualized](https://github.com/bvaughn/react-virtualized) to display the parsed data in a table. - -## Screenshot - -![Screenshot of CSV viewer](images/csv.png) - -## Behavior - -Resizing the viewer window will cause the table to resize, and the zoom in and out buttons will increase and decrease font size respectively. Currently, column and row sizes are fixed and overflowing text will be truncated. - -This viewer does not support printing. - -### Controls: - -* Zoom In -* Zoom Out -* Fullscreen (can be exited with the escape key) - -## Supported File Extensions - -`csv, tsv` - -## Events -The CSV viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| zoom | The preview zooms in or out | 1. {number} **zoom**: new zoom value 2. {boolean} **canZoomIn**: true if the viewer can zoom in more 3. {boolean} **canZoomOut**: true if the viewer can zoom out more | diff --git a/docs/viewers/dash.md b/docs/viewers/dash.md deleted file mode 100755 index 4a5093081..000000000 --- a/docs/viewers/dash.md +++ /dev/null @@ -1,49 +0,0 @@ -# DASH Viewer - -The DASH viewer renders previews for video files using [shaka player](https://github.com/google/shaka-player). - -## Screenshot - -![Screenshot of DASH viewer](images/dash.png) - - -## Behavior - -The DASH viewer uses a black background to create a more native viewing experience. Video is streamed in chunks of ____ at an initial quality determined automatically. Volume can be muted or unmuted by clicking the volume icon, or changed by dragging the volume scrubber. The position of the video can be changed by clicking or dragging the playback scrubber. - -### Controls: - -* Play/Pause -* Volume -* Settings -* Fullscreen (can be exited with the escape key) - -### Settings (cog icon in toolbar): - -* Video Speed: 0.25, 0.5, normal (1), 1.25, 1.5, 2.0 -* Video Quality: 480p, 1080p, auto - -## Supported File Extensions - -`3g2, 3gp, avi, m2v, m2ts, m4v, mkv, mov, mp4, mpeg, mpg, ogg, mts, qt, wmv` - -## Events -The DASH viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| ratechange | The media speed changes | {string} playback speed | -| volumechange | The media volume changes | {number} volume between 0 and 1| -| qualitychange | The video quality changes | {string} media quality | -| bandwidthhistory | Gives bandwidth history when the preview is destroyed | {array} bandwidth information | -| switchhistory | Gives quality switching history when the preview is destroyed | {array} quality switch objects | -| adaptation | Quality adapts to a change in bandwidth | {number} bandwidth | -| play | The video plays || -| pause | The video pauses || -| seeked | The video skips to a time | {number} time | diff --git a/docs/viewers/markdown.md b/docs/viewers/markdown.md deleted file mode 100755 index 7a87a836a..000000000 --- a/docs/viewers/markdown.md +++ /dev/null @@ -1,36 +0,0 @@ -# Markdown Viewer - -The Markdown viewer uses [Remarkable] (https://github.com/jonschlinkert/remarkable) to parse markdown files and [highlight.js] (https://github.com/isagalaev/highlight.js) to add syntax highlighting to code blocks contained within. - -## Screenshot - -![Screenshot of markdown viewer](images/markdown.png) - -## Behavior - -The Markdown viewer parses the first 192KB of raw markdown in the file and renders it using Github's Markdown style. Additional content is truncated and a notification along with a download button are appended to the bottom of the preview. - -The viewer supports GFM (Github Flavored Markdown) as defined in https://guides.github.com/features/mastering-markdown/, including tables, syntax highlighting, and automatic URL linking. - -Re-sizing the viewer window will reflow the markdown to fit the available space. Also, this viewer supports printing and will attempt to print the parsed markdown and with syntax highlighting on code when either `print()` is invoked or the print button is pressed. Note that printing large files may cause some browsers to hang for a few seconds. - -### Controls: - -* Fullscreen (can be exited with the escape key) - -## Supported File Extensions - -`md` - -## Events -The Markdown viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| printsuccess | An attempt to print triggered successfully || diff --git a/docs/viewers/mp3.md b/docs/viewers/mp3.md deleted file mode 100755 index e101e5e5f..000000000 --- a/docs/viewers/mp3.md +++ /dev/null @@ -1,40 +0,0 @@ -# MP3 Viewer - -the MP3 viewer displays previews for audio files. - -## Screenshot -![Screenshot of MP3 viewer](images/mp3.png) - -## Behavior -Volume can be muted or unmuted by clicking the volume icon, or changed by dragging the volume scrubber. The position of the audio can be changed by clicking or dragging the playback scrubber. - -### Controls: -* Play/Pause -* Volume -* Settings - -###Settings (cog icon in toolbar): - -* Audio Speed: 0.25, 0.5, normal (1), 1.25, 1.5, 2.0 - - -## Supported File Extensions - -`aac, aif, aifc, aiff, amr, au, flac, m4a, mp3, ra, wav, wma` - -## Events -The MP3 viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| ratechange | Media speed changes | {string} playback speed | -| volumechange | The media volume changes | {number} volume between 0 and 1| -| play | The audio plays || -| pause | The audio pauses || -| seeked | The audio skips to a time | {number} time | diff --git a/docs/viewers/mp4.md b/docs/viewers/mp4.md deleted file mode 100755 index 54f3a7e4a..000000000 --- a/docs/viewers/mp4.md +++ /dev/null @@ -1,43 +0,0 @@ -# MP4 Viewer - -The MP4 viewer renders previews for video files - -## Screenshot -![Screenshot of MP4 viewer](images/mp4.png) - - -## Behavior - -The mp4 viewer uses a black background to create a better viewing experience. Volume can be muted or unmuted by clicking the volume icon, or changed by dragging the volume scrubber. The position of the video can be changed by clicking or dragging the playback scrubber. - -### Controls: - -* Play/Pause -* Volume -* Settings -* Fullscreen (can be exited with the escape key) - -### Settings (cog icon in toolbar): - -* video speed values: 0.25, 0.5, normal (1), 1.25, 1.5, 2.0 - -## Supported File Extensions - -`3g2, 3gp, avi, m2v, m2ts, m4v, mkv, mov, mp4, mpeg, mpg, ogg, mts, qt, wmv` - -## Events -The MP4 viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| ratechange | Media speed changes | {string} playback speed | -| volumechange | The media volume changes | {number} volume between 0 and 1 | -| play | The video plays || -| pause | The video pauses || -| seeked | The video skips to a time | {number} time | diff --git a/docs/viewers/presentation.md b/docs/viewers/presentation.md deleted file mode 100755 index 8298993ec..000000000 --- a/docs/viewers/presentation.md +++ /dev/null @@ -1,44 +0,0 @@ -# Presentation Viewer - -The presentation viewer renders previews of powerpoint files. - -## Screenshot -![Screenshot of presentation viewer](images/presentation.png) - - -## Behavior - -The presentation viewer remembers which slide you were viewing upon closing the preview. The next time that file is opened, you will immediately be brought to that page. Scrolling the mouse up and down, or swiping up and down on mobile will transition between slides. Zooming in or out will increase or decrease the size of the slide respectively. If the zoom level causes the content to overflow, scrolling the mouse will allow you to scroll around the slide. To return to normal scrolling behavior, the user must zoom out until the overflow is removed. - -### Controls: -* Zoom In -* Zoom Out -* Set Page: either with the up and down arrows, or by clicking the page number and entering text -* Fullscreen: can be exited with the escape key - -## Supported File Extensions - -`ppt, pptx, odp` - -## Options - -| Option | Type | Description | -| --- | --- | --- | -| annotations | boolean | Optional. Whether annotations on content are shown. Defaults to false | - -## Events -The presentation viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| zoom | The preview zooms in or out | 1. {number} **zoom**: new zoom value 2. {boolean} **canZoomIn**: true if the viewer can zoom in more 3. {boolean} **canZoomOut**: true if the viewer can zoom out more | -| pagerendered | A page renders | {number} page number of rendered page | -| pagefocus | A page is visible | {number} page number of focused page | -| scrollstart | The viewer starts to scroll | 1. {number} **scrollTop**: number of pixels scrolled from top of viewport 2. {number} **scrollLeft**: number of pixels scrolled from left of viewport | -| scrollend | The viewer stops scrolling | 1. {number} **scrollTop**: number of pixels scrolled from top of viewport 2. {number} **scrollLeft**: number of pixels scrolled from left of viewport | diff --git a/docs/viewers/text.md b/docs/viewers/text.md deleted file mode 100755 index 22b7598e5..000000000 --- a/docs/viewers/text.md +++ /dev/null @@ -1,39 +0,0 @@ -# Text Viewer - -The text viewer renders previews of text files and uses [highlight.js] (https://github.com/isagalaev/highlight.js) to add syntax highlighting to code files. - -## Screenshot - -![Screenshot of text viewer](images/text.png) - -## Behavior - -The text viewer displays the first 192KB of text in the file. Additional text is truncated and a notification and download button are appended to the bottom of the preview. - -Re-sizing the viewer window will reflow the text to fit the available space and the zoom in and out buttons will increase and decrease font size respectively. - -This viewer supports printing and will attempt to print with appropriate syntax highlighting when either `print()` is invoked or the print button is pressed. Note that printing large files may cause some browsers to hang for a few seconds. - -### Controls: -* Zoom In -* Zoom Out -* Fullscreen: can be exited with the escape key - -## Supported File Extensions - -`as, as3, asm, bat, c, cc, cmake, cpp, cs, css, cxx, diff, erb, groovy, h, haml, hh, htm, html, java, js, less, m, make, md, ml, mm, php, pl, plist, properties, py, rb, rst, sass, scala, script, scm, sml, sql, sh, vi, vim, webdoc, xhtml, yaml` - - -## Events -The text viewer fires the following events - -| Event Name | Explanation | Event Data | -| --- | --- | --- | -| destroy | The preview is intentionally destroyed || -| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | -| notification | A notification is displayed || -| navigate | The preview is shown for a given index | {object} file | -| reload | The preview reloads || -| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | -| zoom | The preview zooms in or out | 1. {number} **zoom**: new zoom value 2. {boolean} **canZoomIn**: true if the viewer can zoom in more 3. {boolean} **canZoomOut**: true if the viewer can zoom out more | -| printsuccess | An attempt to print triggered successfully || diff --git a/docs/viewers/images/csv.png b/images/csv.png similarity index 100% rename from docs/viewers/images/csv.png rename to images/csv.png diff --git a/docs/viewers/images/dash.png b/images/dash.png similarity index 100% rename from docs/viewers/images/dash.png rename to images/dash.png diff --git a/docs/viewers/images/document.png b/images/document.png similarity index 100% rename from docs/viewers/images/document.png rename to images/document.png diff --git a/docs/viewers/images/image.png b/images/image.png similarity index 100% rename from docs/viewers/images/image.png rename to images/image.png diff --git a/docs/viewers/images/image360.png b/images/image360.png similarity index 100% rename from docs/viewers/images/image360.png rename to images/image360.png diff --git a/docs/viewers/images/markdown.png b/images/markdown.png similarity index 100% rename from docs/viewers/images/markdown.png rename to images/markdown.png diff --git a/docs/viewers/images/model3d.png b/images/model3d.png similarity index 100% rename from docs/viewers/images/model3d.png rename to images/model3d.png diff --git a/docs/viewers/images/mp3.png b/images/mp3.png similarity index 100% rename from docs/viewers/images/mp3.png rename to images/mp3.png diff --git a/docs/viewers/images/mp4.png b/images/mp4.png similarity index 100% rename from docs/viewers/images/mp4.png rename to images/mp4.png diff --git a/docs/viewers/images/office.png b/images/office.png similarity index 100% rename from docs/viewers/images/office.png rename to images/office.png diff --git a/docs/viewers/images/presentation.png b/images/presentation.png similarity index 100% rename from docs/viewers/images/presentation.png rename to images/presentation.png diff --git a/docs/viewers/images/text.png b/images/text.png similarity index 100% rename from docs/viewers/images/text.png rename to images/text.png diff --git a/docs/viewers/images/video360.png b/images/video360.png similarity index 100% rename from docs/viewers/images/video360.png rename to images/video360.png diff --git a/docs/viewers/image360.md b/src/lib/viewers/box3d/image360/README.md similarity index 96% rename from docs/viewers/image360.md rename to src/lib/viewers/box3d/image360/README.md index f7d8fc45f..c982f2eae 100755 --- a/docs/viewers/image360.md +++ b/src/lib/viewers/box3d/image360/README.md @@ -4,7 +4,7 @@ The 360 image viewer renders a preview of an image stored as an equirectangular ## Screenshot -![Screenshot of 360 image viewer](images/image360.png) +![Screenshot of 360 image viewer](../../../../../images/image360.png) ## Behavior diff --git a/docs/viewers/model3d.md b/src/lib/viewers/box3d/model3d/README.md similarity index 97% rename from docs/viewers/model3d.md rename to src/lib/viewers/box3d/model3d/README.md index bff2de749..a298e0517 100755 --- a/docs/viewers/model3d.md +++ b/src/lib/viewers/box3d/model3d/README.md @@ -4,7 +4,7 @@ The Model3D viewer renders previews of 3d model files and allows you to enable d ## Screenshot -![Screenshot of Model3D viewer](images/model3d.png) +![Screenshot of Model3D viewer](../../../../../images/model3d.png) ## Behavior diff --git a/docs/viewers/video360.md b/src/lib/viewers/box3d/video360/README.md similarity index 96% rename from docs/viewers/video360.md rename to src/lib/viewers/box3d/video360/README.md index f60788645..55114c7de 100755 --- a/docs/viewers/video360.md +++ b/src/lib/viewers/box3d/video360/README.md @@ -4,7 +4,7 @@ The 360 video viewer renders a preview of a video stored as an equirectangular p ## Screenshot - +![Screenshot of 360 video viewer](../../../../../images/video360.png) ## Behavior diff --git a/docs/viewers/document.md b/src/lib/viewers/doc/README.md similarity index 50% rename from docs/viewers/document.md rename to src/lib/viewers/doc/README.md index 7497f62b8..9c5c4fa02 100755 --- a/docs/viewers/document.md +++ b/src/lib/viewers/doc/README.md @@ -4,7 +4,7 @@ The document viewer renders previews for a variety of document types. ## Screenshot -![Screenshot of document viewer](images/document.png) +![Screenshot of document viewer](../../../../images/document.png) ## Behavior @@ -45,3 +45,48 @@ The document viewer fires the following events | scrollend | The viewer stops scrolling | 1. {number} **scrollTop**: number of pixels scrolled from top of viewport 2. {number} **scrollLeft**: number of pixels scrolled from left of viewport | | printsuccess | An attempt to print triggered successfully || | printsuccess | An attempt to print failed || + + +# Presentation Viewer + +The presentation viewer renders previews of powerpoint files. + +## Screenshot +![Screenshot of presentation viewer](../../../../images/presentation.png) + +## Behavior + +The presentation viewer remembers which slide you were viewing upon closing the preview. The next time that file is opened, you will immediately be brought to that page. Scrolling the mouse up and down, or swiping up and down on mobile will transition between slides. Zooming in or out will increase or decrease the size of the slide respectively. If the zoom level causes the content to overflow, scrolling the mouse will allow you to scroll around the slide. To return to normal scrolling behavior, the user must zoom out until the overflow is removed. + +### Controls: +* Zoom In +* Zoom Out +* Set Page: either with the up and down arrows, or by clicking the page number and entering text +* Fullscreen: can be exited with the escape key + +## Supported File Extensions + +`ppt, pptx, odp` + +## Options + +| Option | Type | Description | +| --- | --- | --- | +| annotations | boolean | Optional. Whether annotations on content are shown. Defaults to false | + +## Events +The presentation viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| zoom | The preview zooms in or out | 1. {number} **zoom**: new zoom value 2. {boolean} **canZoomIn**: true if the viewer can zoom in more 3. {boolean} **canZoomOut**: true if the viewer can zoom out more | +| pagerendered | A page renders | {number} page number of rendered page | +| pagefocus | A page is visible | {number} page number of focused page | +| scrollstart | The viewer starts to scroll | 1. {number} **scrollTop**: number of pixels scrolled from top of viewport 2. {number} **scrollLeft**: number of pixels scrolled from left of viewport | +| scrollend | The viewer stops scrolling | 1. {number} **scrollTop**: number of pixels scrolled from top of viewport 2. {number} **scrollLeft**: number of pixels scrolled from left of viewport | diff --git a/docs/viewers/iframe.md b/src/lib/viewers/iframe/README.md similarity index 100% rename from docs/viewers/iframe.md rename to src/lib/viewers/iframe/README.md diff --git a/docs/viewers/image.md b/src/lib/viewers/image/README.md similarity index 96% rename from docs/viewers/image.md rename to src/lib/viewers/image/README.md index 3af8609cd..c4611b064 100755 --- a/docs/viewers/image.md +++ b/src/lib/viewers/image/README.md @@ -3,7 +3,7 @@ The image viewer renders previews of image files. ## Screenshot -![Screenshot of image viewer](images/image.png) +![Screenshot of image viewer](../../../../images/image.png) ## Behavior Rotating the viewer will rotate the image 90 degrees clockwise. At the default zoom level, clicking on the image will zoom in once. When zoomed in, clicking on the document will return to the default zoom level. When zoomed out, clicking on the document will zoom in until the original zoom level is reached. diff --git a/src/lib/viewers/media/README.md b/src/lib/viewers/media/README.md new file mode 100755 index 000000000..411c44980 --- /dev/null +++ b/src/lib/viewers/media/README.md @@ -0,0 +1,136 @@ +# DASH Viewer + +The DASH viewer renders previews for video files using [shaka player](https://github.com/google/shaka-player). + +## Screenshot + +![Screenshot of DASH viewer](../../../../images/dash.png) + + +## Behavior + +The DASH viewer uses a black background to create a more native viewing experience. Video is streamed in chunks of ____ at an initial quality determined automatically. Volume can be muted or unmuted by clicking the volume icon, or changed by dragging the volume scrubber. The position of the video can be changed by clicking or dragging the playback scrubber. + +### Controls: + +* Play/Pause +* Volume +* Settings +* Fullscreen (can be exited with the escape key) + +### Settings (cog icon in toolbar): + +* Video Speed: 0.25, 0.5, normal (1), 1.25, 1.5, 2.0 +* Video Quality: 480p, 1080p, auto + +## Supported File Extensions + +`3g2, 3gp, avi, m2v, m2ts, m4v, mkv, mov, mp4, mpeg, mpg, ogg, mts, qt, wmv` + +## Events +The DASH viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| ratechange | The media speed changes | {string} playback speed | +| volumechange | The media volume changes | {number} volume between 0 and 1| +| qualitychange | The video quality changes | {string} media quality | +| bandwidthhistory | Gives bandwidth history when the preview is destroyed | {array} bandwidth information | +| switchhistory | Gives quality switching history when the preview is destroyed | {array} quality switch objects | +| adaptation | Quality adapts to a change in bandwidth | {number} bandwidth | +| play | The video plays || +| pause | The video pauses || +| seeked | The video skips to a time | {number} time | + + +# MP3 Viewer + +the MP3 viewer displays previews for audio files. + +## Screenshot +![Screenshot of MP3 viewer](../../../../images/mp3.png) + +## Behavior +Volume can be muted or unmuted by clicking the volume icon, or changed by dragging the volume scrubber. The position of the audio can be changed by clicking or dragging the playback scrubber. + +### Controls: +* Play/Pause +* Volume +* Settings + +###Settings (cog icon in toolbar): + +* Audio Speed: 0.25, 0.5, normal (1), 1.25, 1.5, 2.0 + + +## Supported File Extensions + +`aac, aif, aifc, aiff, amr, au, flac, m4a, mp3, ra, wav, wma` + +## Events +The MP3 viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| ratechange | Media speed changes | {string} playback speed | +| volumechange | The media volume changes | {number} volume between 0 and 1| +| play | The audio plays || +| pause | The audio pauses || +| seeked | The audio skips to a time | {number} time | + + +# MP4 Viewer + +The MP4 viewer renders previews for video files + +## Screenshot +![Screenshot of MP4 viewer](../../../../images/mp4.png) + + +## Behavior + +The mp4 viewer uses a black background to create a better viewing experience. Volume can be muted or unmuted by clicking the volume icon, or changed by dragging the volume scrubber. The position of the video can be changed by clicking or dragging the playback scrubber. + +### Controls: + +* Play/Pause +* Volume +* Settings +* Fullscreen (can be exited with the escape key) + +### Settings (cog icon in toolbar): + +* video speed values: 0.25, 0.5, normal (1), 1.25, 1.5, 2.0 + +## Supported File Extensions + +`3g2, 3gp, avi, m2v, m2ts, m4v, mkv, mov, mp4, mpeg, mpg, ogg, mts, qt, wmv` + +## Events +The MP4 viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| ratechange | Media speed changes | {string} playback speed | +| volumechange | The media volume changes | {number} volume between 0 and 1 | +| play | The video plays || +| pause | The video pauses || +| seeked | The video skips to a time | {number} time | diff --git a/docs/viewers/office.md b/src/lib/viewers/office/README.md similarity index 95% rename from docs/viewers/office.md rename to src/lib/viewers/office/README.md index b312db881..066b244d0 100755 --- a/docs/viewers/office.md +++ b/src/lib/viewers/office/README.md @@ -4,7 +4,7 @@ The Office viewer renders previews of Microsoft Office documents by embedding an ## Screenshot -![Screenshot of office viewer](images/office.png) +![Screenshot of office viewer](../../../../images/office.png) ## Behavior diff --git a/docs/viewers/swf.md b/src/lib/viewers/swf/README.md similarity index 100% rename from docs/viewers/swf.md rename to src/lib/viewers/swf/README.md diff --git a/src/lib/viewers/text/README.md b/src/lib/viewers/text/README.md new file mode 100755 index 000000000..7c5cda886 --- /dev/null +++ b/src/lib/viewers/text/README.md @@ -0,0 +1,115 @@ +# CSV Viewer + +The CSV viewer uses [PapaParse](https://github.com/mholt/PapaParse) to parse CSV and TSV files and [React Virtualized](https://github.com/bvaughn/react-virtualized) to display the parsed data in a table. + +## Screenshot + +![Screenshot of CSV viewer](../../../../images/csv.png) + +## Behavior + +Resizing the viewer window will cause the table to resize, and the zoom in and out buttons will increase and decrease font size respectively. Currently, column and row sizes are fixed and overflowing text will be truncated. + +This viewer does not support printing. + +### Controls: + +* Zoom In +* Zoom Out +* Fullscreen (can be exited with the escape key) + +## Supported File Extensions + +`csv, tsv` + +## Events +The CSV viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| zoom | The preview zooms in or out | 1. {number} **zoom**: new zoom value 2. {boolean} **canZoomIn**: true if the viewer can zoom in more 3. {boolean} **canZoomOut**: true if the viewer can zoom out more | + + +# Markdown Viewer + +The Markdown viewer uses [Remarkable] (https://github.com/jonschlinkert/remarkable) to parse markdown files and [highlight.js] (https://github.com/isagalaev/highlight.js) to add syntax highlighting to code blocks contained within. + +## Screenshot + +![Screenshot of markdown viewer](../../../../images/markdown.png) + +## Behavior + +The Markdown viewer parses the first 192KB of raw markdown in the file and renders it using Github's Markdown style. Additional content is truncated and a notification along with a download button are appended to the bottom of the preview. + +The viewer supports GFM (Github Flavored Markdown) as defined in https://guides.github.com/features/mastering-markdown/, including tables, syntax highlighting, and automatic URL linking. + +Re-sizing the viewer window will reflow the markdown to fit the available space. Also, this viewer supports printing and will attempt to print the parsed markdown and with syntax highlighting on code when either `print()` is invoked or the print button is pressed. Note that printing large files may cause some browsers to hang for a few seconds. + +### Controls: + +* Fullscreen (can be exited with the escape key) + +## Supported File Extensions + +`md` + +## Events +The Markdown viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| printsuccess | An attempt to print triggered successfully || + + +# Text Viewer + +The text viewer renders previews of text files and uses [highlight.js] (https://github.com/isagalaev/highlight.js) to add syntax highlighting to code files. + +## Screenshot + +![Screenshot of text viewer](../../../../images/text.png) + +## Behavior + +The text viewer displays the first 192KB of text in the file. Additional text is truncated and a notification and download button are appended to the bottom of the preview. + +Re-sizing the viewer window will reflow the text to fit the available space and the zoom in and out buttons will increase and decrease font size respectively. + +This viewer supports printing and will attempt to print with appropriate syntax highlighting when either `print()` is invoked or the print button is pressed. Note that printing large files may cause some browsers to hang for a few seconds. + +### Controls: +* Zoom In +* Zoom Out +* Fullscreen: can be exited with the escape key + +## Supported File Extensions + +`as, as3, asm, bat, c, cc, cmake, cpp, cs, css, cxx, diff, erb, groovy, h, haml, hh, htm, html, java, js, less, m, make, md, ml, mm, php, pl, plist, properties, py, rb, rst, sass, scala, script, scm, sml, sql, sh, vi, vim, webdoc, xhtml, yaml` + + +## Events +The text viewer fires the following events + +| Event Name | Explanation | Event Data | +| --- | --- | --- | +| destroy | The preview is intentionally destroyed || +| load | The preview loads | 1. {string} **error** (optional): error message 2. {object} **file**: current file 3. {object} **metrics**: information from the logger 4. {object} **viewer**: current viewer | +| notification | A notification is displayed || +| navigate | The preview is shown for a given index | {object} file | +| reload | The preview reloads || +| resize | The preview resizes | 1. {number} **height**: window height 2. {number} **width**: window width | +| zoom | The preview zooms in or out | 1. {number} **zoom**: new zoom value 2. {boolean} **canZoomIn**: true if the viewer can zoom in more 3. {boolean} **canZoomOut**: true if the viewer can zoom out more | +| printsuccess | An attempt to print triggered successfully ||