fileviewer compoonent

2 files changed, 59 insertions, 1 deletions

diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js
new file mode 100644
index 0000000..bc71f20
--- /dev/null
+++ b/app/client/common/fileViewer.component.js
@@ -0,0 +1,57 @@
+import { h, Component } from 'preact'
+
+const image_types = {
+  'jpg': 'image/jpeg',
+  'jpeg': 'image/jpeg',
+  'png': 'image/png',
+  'gif': 'image/gif',
+}
+
+const audio_types = {
+  'wav': 'audio/wav',
+  'mp3': 'audio/mp3',
+  'flac': 'audio/flac',
+  'aiff': 'audio/aiff',
+}
+
+const video_types = {
+  'mp4': 'video/mp4',
+}
+
+export default function FileViewer({ file }) {
+  const {
+    error,
+    name, path,
+    date, size,
+    buf,
+  } = file
+  if (error) {
+    return <div className='fileViewer'>{error}</div>
+  }
+  if (!buf) {
+    return <div className='fileViewer'>File empty</div>
+  }
+  const ext = name.split('.').slice(-1)[0].toLowerCase()
+  let tag;
+  if (ext in image_types) {
+    tag = <img src={getURLFor(buf, image_types[ext])} />
+  } else if (ext in audio_types) {
+    tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
+  } else if (ext in video_types) {
+    tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
+  } else {
+    tag = <div className='text'>{ab2str(buf)}</div>
+  }
+  return (
+    <div className='fileViewer'>{tag}</div>
+  )
+}
+
+const getURLFor = (buf, type) => {
+  const arrayBufferView = new Uint8Array(buf)
+  const blob = new Blob([arrayBufferView], { type })
+  const urlCreator = window.URL || window.webkitURL
+  return urlCreator.createObjectURL(blob)
+}
+
+const ab2str = buf => String.fromCharCode.apply(null, new Uint8Array(buf))
diff --git a/app/client/common/index.js b/app/client/common/index.js
index e6baafc..ffb852d 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -6,6 +6,7 @@ import Checkbox from './checkbox.component'
 import CurrentTask from './currentTask.component'
 import { FileList, FileRow } from './fileList.component'
 import FileUpload from './fileUpload.component'
+import FileViewer from './fileViewer.component'
 import FolderList from './folderList.component'
 import Gallery from './gallery.component'
 import Group from './group.component'
@@ -26,7 +27,7 @@ import * as Views from './views'
 export {
   Views,
   Loading, Progress, Header, AudioPlayer,
-  FolderList, FileList, FileRow, FileUpload,
+  FolderList, FileList, FileRow, FileUpload, FileViewer,
   Gallery, Player,
   Group, ParamGroup, Param,
   TextInput, NumberInput,