WIP: Dynamically import

src/components/File.jsx

@@ -1,13 +1,12 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useState, Suspense} from "react";
 import config from "../app.config";
 import {AppBar, Box, Divider, Grid, Tab, Tabs, Typography} from "@material-ui/core"
 import {makeStyles} from "@material-ui/core/styles";
 import {ClowderInput} from "./styledComponents/ClowderInput";
 import {ClowderButton} from "./styledComponents/ClowderButton";
-import Audio from "./previewers/Audio";
-import Video from "./previewers/Video";
 import {downloadResource} from "../utils/common";
-import Thumbnail from "./previewers/Thumbnail";
+
+import previewerList from "../previewer.config";
 
 const useStyles = makeStyles((theme) => ({
 	appBar: {
@@ -75,16 +74,15 @@ export default function File(props) {
 						<TabPanel value={selectedTabIndex} index={0}>
 							{
 								previews.map((preview) =>{
-									if (preview["previewType"] === "audio"){
-										return <Audio fileId={preview["fileid"]} audioSrc={preview["resource"]} />;
-									}
-									else if (preview["previewType"] === "video"){
-										return <Video fileId={preview["fileid"]} videoSrc={preview["resource"]} />;
-									}
-									else if (preview["previewType"] === "thumbnail"){
-										return <Thumbnail fileId={preview["fileid"]} fileType={preview["fileType"]}
-														  imgSrc={preview["resource"]} />;
-									}
+									return(
+										<Suspense fallback={<div>loading...</div>}>
+											{(()=>{
+													let Previewer = previewerList[preview["previewType"]];
+													return <Previewer configuration={preview} />;
+												})()
+											}
+										</Suspense>
+									);
 								})
 							}
 						</TabPanel>

src/components/previewers/Audio.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
 export default function Audio(props) {
-	const {fileId, audioSrc, ...other} = props;
-	return <audio controls><source id={fileId} src={audioSrc} /></audio>
+	const {configuration, ...other} = props;
+	return <audio controls><source id={configuration["fileid"]} src={configuration["resource"]} /></audio>
 }

src/components/previewers/Thumbnail.jsx

@@ -2,16 +2,16 @@ import React from "react";
 import { Typography } from "@material-ui/core";
 
 export default function Thumbnail(props){
-	const {fileId, imgSrc, fileType, ...other} = props;
+	const {configuration, ...other} = props;
 	return (
 		(() => {
-			if (fileType === "image/jpeg" || fileType === "image/jpg" || fileType === "image/png"
-				|| fileType === "image/gif" || fileType === "image/bmp"){
-				return <img className="rubberbandimage" src={imgSrc} alt="img" id={`rubberbandCanvas-${fileId}`}/>;
+			if (configuration["fileType"] === "image/jpeg" || configuration["fileType"] === "image/jpg" || configuration["fileType"] === "image/png"
+				|| configuration["fileType"] === "image/gif" || configuration["fileType"] === "image/bmp"){
+				return <img className="rubberbandimage" src={configuration["resource"]} alt="img" id={`rubberbandCanvas-${configuration["fileid"]}`}/>;
 			}
-			else if (fileType === "image/tiff"){
+			else if (configuration["fileType"] === "image/tiff"){
 				return <embed alt="No plugin capable of displaying TIFF images was found."
-							  width={750} height={550} src={imgSrc} type="image/tiff" negative="no" id="embedded" />;
+							  width={750} height={550} src={configuration["resource"]} type="image/tiff" negative="no" id="embedded" />;
 			}
 			else{
 				return <Typography>ERROR: Unrecognised image format.</Typography>;

src/components/previewers/Video.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 export default function Video(props) {
-	const {fileId, videoSrc, ...other} = props;
+	const {configuration, ...others} = props;
 	return (<video width='100%' id='ourvideo' controls>
-		<source id={fileId} src={videoSrc}></source>
+		<source id={configuration["fileid"]} src={configuration["resource"]}></source>
 	</video>);
 }

src/previewer.config.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+// GET the config
+
+// reference to the buddle
+
+// import the buddle
+let previewerList = {
+	"audio": React.lazy(() => import("dist/0.179e97826b3ea9652c81.js")),
+	"video": React.lazy(() => import("./components/previewers/Video.jsx")),
+	"thumbnail": React.lazy(()=> import("./components/previewers/Thumbnail.jsx"))
+}
+
+export default previewerList