refactor fetching context for React from ModelAdmin

client/components/editor/Audio.tsx

@@ -1,22 +1,23 @@
-import React, {useContext, useState} from 'react';
+import React, {Fragment, useState} from 'react';
 import WavesurferPlayer from '@wavesurfer/react';
 import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js';
-import {FinderSettings} from 'finder/FinderSettings';
 import {FileDetails} from 'finder/FileDetails';
 import PauseIcon from 'icons/pause.svg';
 import PlayIcon from 'icons/play.svg';
 
 
 export default function Audio(props) {
+	const {settings} = props;
 	const sampleFields = {
 		start: document.getElementById('id_sample_start') as HTMLInputElement,
 		duration: document.getElementById('id_sample_duration') as HTMLInputElement,
 	};
-	const settings = useContext(FinderSettings);
 	const [wavesurfer, setWavesurfer] = useState(null);
 	const [isPlaying, setIsPlaying] = useState(false);
 
 	const onReady = (ws) => {
+		document.getElementById('wavesurfer-initializing')?.remove();
+		ws.setOptions({height: 128});
 		setWavesurfer(ws);
 
 		const wsRegions = ws.registerPlugin(RegionsPlugin.create());
@@ -35,21 +36,36 @@ export default function Audio(props) {
 		});
 
 		setIsPlaying(false);
-	}
+	};
 
 	const onPlayPause = () => {
 		wavesurfer && wavesurfer.playPause();
-	}
+	};
 
-	const controlButtons = [isPlaying ?
-		<button type="button" onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
-		<button type="button" onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
+	const controlButtons = [
+		<Fragment key="play-pause">{isPlaying ?
+			<button type="button" onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
+			<button type="button" onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
+		}</Fragment>
 	];
 
+	const placeholderStyle: React.CSSProperties = {
+		height: '143px',
+		padding: '2rem',
+		fontSize: '18px',
+		boxSizing: 'border-box',
+		color: 'rgb(128, 128, 128)',
+		cursor: 'wait',
+	};
+
 	return (
-		<FileDetails controlButtons={controlButtons}>
+		<FileDetails controlButtons={controlButtons} {...props}>
+			<div id="wavesurfer-initializing" style={placeholderStyle}>
+				{gettext("Initializing audio player, please wait ...")}
+			</div>
 			<WavesurferPlayer
 				url={settings.download_url}
+				height={0}
 				onReady={onReady}
 				onPlay={() => setIsPlaying(true)}
 				onPause={() => setIsPlaying(false)}

client/components/editor/Common.tsx

@@ -1,14 +1,11 @@
-import React, {useContext} from 'react';
-import {FinderSettings} from 'finder/FinderSettings';
+import React from 'react';
 import {FileDetails} from 'finder/FileDetails';
 
 
 export default function Common(props) {
-	const settings = useContext(FinderSettings);
-
 	return (
-		<FileDetails>
-			<img src={settings.thumbnail_url} />
+		<FileDetails {...props}>
+			<img src={props.settings.thumbnail_url} />
 		</FileDetails>
 	);
 }

client/components/editor/Image.tsx

@@ -1,11 +1,10 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import ReactCrop, {Crop} from 'react-image-crop';
-import {FinderSettings} from 'finder/FinderSettings';
 import {FileDetails} from 'finder/FileDetails';
 
 
 export default function Image(props) {
-	const settings = useContext(FinderSettings);
+	const {settings} = props;
 	const cropFields = {
 		x: document.getElementById('id_crop_x') as HTMLInputElement,
 		y: document.getElementById('id_crop_y') as HTMLInputElement,
@@ -47,7 +46,7 @@ export default function Image(props) {
 	}
 
 	return (
-		<FileDetails>
+		<FileDetails {...props}>
 			<ReactCrop crop={crop} aspect={1} onChange={handleChange}>
 				<img className="editable" src={settings.download_url} ref={ref} />
 			</ReactCrop>

client/components/editor/Video.tsx

@@ -1,17 +1,16 @@
-import React, {useContext, useRef, useState} from 'react';
+import React, {Fragment, useRef, useState} from 'react';
 import ReactPlayer from 'react-player/file';
-import {FinderSettings} from 'finder/FinderSettings';
 import {FileDetails} from 'finder/FileDetails';
 import PauseIcon from 'icons/pause.svg';
 import PlayIcon from 'icons/play.svg';
 import CameraIcon from 'icons/camera.svg';
 
 
 export default function Video(props) {
+	const {settings} = props;
 	const sampleFields = {
 		sampleStart: document.getElementById('id_sample_start') as HTMLInputElement,
 	};
-	const settings = useContext(FinderSettings);
 	const style = {
 		width: '960px',
 		maxWidth: '100%',
@@ -39,14 +38,17 @@ export default function Video(props) {
 		sampleFields.sampleStart.value = currentTime;
 	}
 
-	const controlButtons = [(isPlaying ?
-		<button type="button" onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
-		<button type="button" onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
-	),
-		<button type="button" onClick={setPosterFrame}><CameraIcon/>{gettext("Use as Poster")}</button>
+	const controlButtons = [
+		<Fragment key="play-pause">{isPlaying ?
+			<button type="button" onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
+			<button type="button" onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
+		}</Fragment>,
+		<Fragment key="poster-frame">
+			<button type="button" onClick={setPosterFrame}><CameraIcon/>{gettext("Use as Poster")}</button>
+		</Fragment>,
 	];
 	return (
-		<FileDetails controlButtons={controlButtons} style={style}>
+		<FileDetails controlButtons={controlButtons} style={style} {...props}>
 			<ReactPlayer
 				url={settings.download_url}
 				controls={true}

client/components/menu/Audio.tsx

@@ -0,0 +1,16 @@
+import React, {useEffect, useState} from 'react';
+import ArchiveIcon from 'icons/archive.svg';
+
+
+export default function Audio(props) {
+	console.log(props);
+
+	function archiveSelectedIcons() {
+	}
+
+	return (
+		<li onClick={() => archiveSelectedIcons()} className={props.numSelectedInodes ? null : "disabled"} data-tooltip-id="django-finder-tooltip" data-tooltip-content={gettext("Create archive from selection")}>
+			<ArchiveIcon />
+		</li>
+	);
+}

client/esbuild.config.mjs

@@ -10,7 +10,8 @@ await build({
     'client/folder-admin.tsx',
     'client/file-admin.tsx',
     'client/components/editor/*.tsx',
-    'client/components/folder/*.tsx',
+    'client/components/folderitem/*.tsx',
+    'client/components/menu/*.tsx',
   ],
   bundle: true,
   minify: buildOptions.minify,

client/finder-admin.scss

@@ -395,6 +395,7 @@ $active-rectangle: rgb(210, 210, 112);
 		right: 0;
 		bottom: 0;
 		left: 0;
+		z-index: 1;
 		background-color: rgba(255, 255, 255, 0.75);
 		display: flex;
 		flex-direction: column;

client/finder/ControlButtons.tsx

@@ -0,0 +1,90 @@
+import React, {Fragment, useMemo, useRef} from 'react';
+import DownloadIcon from 'icons/download.svg';
+import FullSizeIcon from 'icons/full-size.svg';
+import UploadIcon from 'icons/upload.svg';
+
+
+function DownloadFileButton(props) {
+	const {settings} = props;
+
+	return (
+		<a download={settings.filename} href={settings.download_url}>
+			<DownloadIcon/>{gettext("Download")}
+		</a>
+	);
+}
+
+
+function ViewOriginalButton(props) {
+	const {settings} = props;
+
+	function viewOriginal() {
+		window.open(settings.download_url, '_blank').focus();
+	}
+
+	return (
+		<button type="button" onClick={viewOriginal}>
+			<FullSizeIcon/>{gettext("View Original")}
+		</button>
+	);
+}
+
+
+function ReplaceFileButton(props) {
+	const {settings} = props;
+	const inputRef = useRef(null);
+
+	function replaceFile() {
+		inputRef.current.click();
+	}
+
+	function handleFileSelect(event) {
+		const file = event.target.files[0];
+		const promise = new Promise<Response>((resolve, reject) => {
+			file.resolve = resolve;
+			file.reject = reject;
+		});
+		props.setUploadFile(file);
+		promise.then((response) => {
+			window.location.reload();
+		}).catch((error) => {
+			alert(error);
+		}).finally( () => {
+			props.setUploadFile(null);
+		});
+	}
+
+	return (<>
+		<button type="button" onClick={replaceFile}><UploadIcon/>{gettext("Replace File")}</button>
+		<input type="file" name="replaceFile" ref={inputRef} accept={settings.file_mime_type} onChange={handleFileSelect} />
+	</>);
+}
+
+
+export function ControlButtons(props) {
+	//const settings = useContext(FinderSettings);
+	const {settings} = props;
+
+	const controlButtons = useMemo(() => {
+		const buttons: Array<React.JSX.Element> = [];
+		if (settings.download_file) {
+			buttons.push(<DownloadFileButton {...props} />);
+		}
+		if (settings.view_original) {
+			buttons.push(<ViewOriginalButton {...props} />);
+		}
+		if (settings.replace_file) {
+			buttons.push(<ReplaceFileButton {...props} />);
+		}
+		return buttons;
+	}, []);
+
+	return (
+		<div className="button-group">
+			{props.children}
+		{controlButtons.map((button, index) =>
+			<Fragment key={index}>{button}</Fragment>
+		)}
+		</div>
+	);
+}

client/finder/FileAdmin.tsx

@@ -1,12 +1,12 @@
 import React, {useContext, useEffect, useMemo, useRef, lazy, Suspense} from 'react';
 import {FinderSettings} from './FinderSettings';
-import {FolderTabs} from "./FolderTabs";
+import {FolderTabs} from './FolderTabs';
 
 
-export function FileAdmin(props) {
+export function FileAdmin() {
 	const settings = useContext(FinderSettings);
 	const FileEditor = useMemo(() => {
-		const component = `./components/editor/${settings.extension.component}.js`;
+		const component = `./components/editor/${settings.react_component}.js`;
 		const LazyItem = lazy(() => import(component));
 		return (props) => (
 			<Suspense fallback={<span>{gettext("Loading...")}</span>}>
@@ -21,9 +21,9 @@ export function FileAdmin(props) {
 	}, []);
 
 	return (<>
-		<FolderTabs />
+		<FolderTabs settings={settings} />
 		<div className="detail-editor">
-			<FileEditor editorRef={editorRef} extension={settings.extension} />
+			<FileEditor editorRef={editorRef} settings={settings} />
 			<div ref={editorRef}></div>
 		</div>
  	</>);