1 files changed, 57 insertions, 0 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))