Merge pull request #2232 from lindapaiste/feature/asset

Feature: Preview uploaded files in the editor

Author: raclim

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;

client/modules/IDE/components/Editor.jsx

@@ -44,6 +44,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 './show-hint';
 import * as hinter from '../../../utils/p5-hinter';
@@ -532,6 +533,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>
     );