From 4dacee52786dd1010d9d29043ffbde45d0489a09 Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Sun, 4 Jun 2023 16:30:28 -0500
Subject: [PATCH] Preview uploaded files in the editor.

---
 .../modules/IDE/components/AssetPreview.jsx   | 48 +++++++++++++++++++
 client/modules/IDE/components/Editor.jsx      |  4 ++
 2 files changed, 52 insertions(+)
 create mode 100644 client/modules/IDE/components/AssetPreview.jsx

diff --git a/client/modules/IDE/components/AssetPreview.jsx b/client/modules/IDE/components/AssetPreview.jsx
new file mode 100644
index 0000000000..a8ace64b54
--- /dev/null
+++ b/client/modules/IDE/components/AssetPreview.jsx
@@ -0,0 +1,48 @@
+import mime from 'mime';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+const Audio = styled.audio`
+  width: 90%;
+  margin: 30px 5%;
+`;
+
+const Image = styled.img`
+  max-width: 100%;
+  height: auto;
+`;
+
+const Video = styled.video`
+  max-width: 100%;
+  height: auto;
+`;
+
+function AssetPreview({ url, name }) {
+  const contentType = mime.getType(url);
+  const type = contentType?.split('/')[0];
+
+  switch (type) {
+    case 'image':
+      return <Image src={url} alt={`Preview of file ${name}`} />;
+    case 'audio':
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      return <Audio src={url} controls preload="metadata" />;
+    case 'video':
+      return (
+        // eslint-disable-next-line jsx-a11y/media-has-caption
+        <Video controls preload="metadata">
+          <source src={url} type={contentType} />
+        </Video>
+      );
+    default:
+      return null;
+  }
+}
+
+AssetPreview.propTypes = {
+  url: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+};
+
+export default AssetPreview;
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index e1899e0bfe..7f7ccda888 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -42,6 +42,7 @@ import '../../../utils/htmlmixed';
 import '../../../utils/p5-javascript';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
+import AssetPreview from './AssetPreview';
 import { metaKey } from '../../../utils/metaKey';
 
 import '../../../utils/codemirror-search';
@@ -429,6 +430,9 @@ class Editor extends React.Component {
           }}
           className={editorHolderClass}
         />
+        {this.props.file.url ? (
+          <AssetPreview url={this.props.file.url} name={this.props.file.name} />
+        ) : null}
         <EditorAccessibility lintMessages={this.props.lintMessages} />
       </section>
     );