From 60c9177f8a8b4554a17bb3e36d718984b15d5872 Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Tue, 6 Feb 2024 11:34:30 +0100
Subject: [PATCH] Update UI : label and simplify component
---
src/AnnotationCreation.js | 40 ++---
src/annotationForm/AnnotationFormContent.js | 17 +-
.../AnnotationFormOverlayTool.js | 52 +++---
.../AnnotationFormOverlayToolOptions.js | 3 -
src/annotationForm/AnnotationFormTarget.js | 148 ++++++++++++++++++
src/annotationForm/AnnotationFormTime.js | 143 -----------------
6 files changed, 206 insertions(+), 197 deletions(-)
create mode 100644 src/annotationForm/AnnotationFormTarget.js
delete mode 100644 src/annotationForm/AnnotationFormTime.js
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index f0094ef..7ed93cf 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -12,7 +12,7 @@ import HubIcon from '@mui/icons-material/Hub';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import AnnotationDrawing from './annotationForm/AnnotationDrawing';
import AnnotationFormContent from './annotationForm/AnnotationFormContent';
-import AnnotationFormTime from './annotationForm/AnnotationFormTime';
+import AnnotationFormTarget from './annotationForm/AnnotationFormTarget';
import {
defaultToolState,
geomFromAnnoTarget, timeFromAnnoTarget,
@@ -417,41 +417,43 @@ function AnnotationCreation(props) {
icon={<HighlightAltIcon />}
aria-label="TargetSelector"
value={TARGET_VIEW}
+ tooltip="Target"
/>
<StyledTab
icon={<LayersIcon />}
- aria-label="TargetSelector"
+ aria-label="OverlaySelector"
value={OVERLAY_VIEW}
+ tooltip="Overlay"
/>
<StyledTab
icon={<LocalOfferIcon />}
- aria-label="TargetSelector"
+ aria-label="InfosSelector"
value={TAG_VIEW}
+ tooltip="Infos"
/>
<StyledTab
icon={<HubIcon />}
- aria-label="TargetSelector"
+ aria-label="ManifestNetworkSelector"
value={MANIFEST_LINK_VIEW}
+ tooltip="Manifest Network"
/>
</TabList>
<StyledTabPanel
value={TARGET_VIEW}
>
- {mediaIsVideo && (
- <AnnotationFormTime
- mediaIsVideo={mediaIsVideo}
- videoDuration={videoDuration}
- value={valueTime}
- handleChangeTime={handleChangeTime}
- windowid={windowId}
- setTstartNow={setTstartNow}
- tstart={tstart}
- updateTstart={updateTstart}
- setTendNow={setTendNow}
- tend={tend}
- updateTend={updateTend}
- />
- )}
+ <AnnotationFormTarget
+ mediaIsVideo={mediaIsVideo}
+ videoDuration={videoDuration}
+ value={valueTime}
+ handleChangeTime={handleChangeTime}
+ windowid={windowId}
+ setTstartNow={setTstartNow}
+ tstart={tstart}
+ updateTstart={updateTstart}
+ setTendNow={setTendNow}
+ tend={tend}
+ updateTend={updateTend}
+ />
</StyledTabPanel>
<StyledTabPanel
value={OVERLAY_VIEW}
diff --git a/src/annotationForm/AnnotationFormContent.js b/src/annotationForm/AnnotationFormContent.js
index 642e44b..aa2fc65 100644
--- a/src/annotationForm/AnnotationFormContent.js
+++ b/src/annotationForm/AnnotationFormContent.js
@@ -1,18 +1,16 @@
import React from 'react';
-import {Grid, Paper, Typography} from '@mui/material';
+import { Grid, Paper, Typography } from '@mui/material';
import PropTypes from 'prop-types';
import TextEditor from '../TextEditor';
/** Form part for edit annotation content and body */
-function AnnotationFormContent({textBody, updateTextBody, textEditorStateBustingKey,
-}) {
+function AnnotationFormContent({ textBody, updateTextBody, textEditorStateBustingKey }) {
return (
- <Paper style={{padding:"5px"}}>
+ <Paper style={{ padding: '5px' }}>
<Typography variant="overline">
Metadata
</Typography>
- <Grid
- >
+ <Grid>
<TextEditor
key={textEditorStateBustingKey}
annoHtml={textBody}
@@ -24,10 +22,9 @@ function AnnotationFormContent({textBody, updateTextBody, textEditorStateBusting
}
AnnotationFormContent.propTypes = {
- onChange: PropTypes.func,
- textBody: PropTypes.string,
- textEditorStateBustingKey: PropTypes.string,
- updateTextBody: PropTypes.func,
+ textBody: PropTypes.string.isRequired,
+ textEditorStateBustingKey: PropTypes.string.isRequired,
+ updateTextBody: PropTypes.func.isRequired,
};
export default AnnotationFormContent;
diff --git a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js
index df7738d..f52b164 100644
--- a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js
+++ b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayTool.js
@@ -71,32 +71,31 @@ function AnnotationFormOverlayTool({
<Typography variant="overline">
Selected object
</Typography>
-
- <ul>
- {
- Object.keys(currentShape).sort().map((key) => (
- <>
- { key !== 'lines' && key !== 'image' && (
- <li key={key}>
- {key}
- :
- {currentShape[key]}
- </li>
- )}
- </>
- ))
- }
- </ul>
+ {/* <ul> // useful for debug */}
+ {/* { */}
+ {/* Object.keys(currentShape).sort().map((key) => ( */}
+ {/* <> */}
+ {/* { key !== 'lines' && key !== 'image' && ( */}
+ {/* <li key={key}> */}
+ {/* {key} */}
+ {/* : */}
+ {/* {currentShape[key]} */}
+ {/* </li> */}
+ {/* )} */}
+ {/* </> */}
+ {/* )) */}
+ {/* } */}
+ {/* </ul> */}
<AnnotationFormOverlayToolOptions
toolState={{
...toolState,
activeTool: currentShape.type,
closedMode: currentShape.closedMode,
fillColor: currentShape.fill,
+ image: { id: currentShape.url },
strokeColor: currentShape.stroke,
strokeWidth: currentShape.strokeWidth,
text: currentShape.text,
- image: { id: currentShape.url },
}}
updateToolState={customUpdateToolState}
@@ -104,11 +103,20 @@ function AnnotationFormOverlayTool({
</Paper>
)
}
- <AccordionShapes
- currentShapeId={currentShape?.id}
- shapes={shapes}
- deleteShape={deleteShape}
- />
+ {
+ shapes.length > 0 && (
+ <>
+ <Typography variant="overline">
+ Object lists
+ </Typography>
+ <AccordionShapes
+ currentShapeId={currentShape?.id}
+ shapes={shapes}
+ deleteShape={deleteShape}
+ />
+ </>
+ )
+ }
</>
)
diff --git a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
index 1fa0f56..b87af85 100644
--- a/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
+++ b/src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js
@@ -164,9 +164,6 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
{
isShapesTool(toolState.activeTool) && (
<Grid container>
- <Typography variant="overline">
- Object styles
- </Typography>
<Grid item xs={12}>
<Typography variant="overline">
Style
diff --git a/src/annotationForm/AnnotationFormTarget.js b/src/annotationForm/AnnotationFormTarget.js
new file mode 100644
index 0000000..72f0807
--- /dev/null
+++ b/src/annotationForm/AnnotationFormTarget.js
@@ -0,0 +1,148 @@
+import { Grid, Paper } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Slider from '@mui/material/Slider';
+import ToggleButton from '@mui/material/ToggleButton';
+import { Alarm } from '@mui/icons-material';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import HMSInput from '../HMSInput';
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '10px',
+ padding: '5px',
+}));
+
+const ContainerSlider = styled('div')(({ theme }) => ({
+ paddingLeft: '20px',
+ paddingRight: '20px',
+}));
+
+const StyledSlider = styled(Slider)(({ theme }) => ({
+ color: 'rgba(1, 0, 0, 0.38)',
+}));
+
+const StyledDivFormTimeContainer = styled('div')(({ theme }) => ({
+ alignContent: 'center',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '5px',
+}));
+const StyledDivTimeSelector = styled('div')(({ theme }) => ({
+ border: '1px solid rgba(0, 0, 0, 0.12)',
+ borderRadius: '4px',
+ display: 'flex',
+ flexWrap: 'nowrap',
+ justifyContent: 'center',
+ padding: '5px',
+}));
+
+const StyledDivToggleButton = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+}));
+
+const StyledLabelSelector = styled('p')(({ theme }) => ({
+ fontSize: '15px',
+ margin: 0,
+ minWidth: '40px',
+}));
+
+const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
+ border: 'none',
+ height: '30px',
+ margin: 'auto',
+ marginLeft: '0',
+ marginRight: '5px',
+}));
+
+/** Form part with time mangement, dual slider + double input. Mange Tstart and Tend value */
+function AnnotationFormTarget({
+ videoDuration, value, handleChangeTime, windowid, setTstartNow, tstart, updateTstart, setTendNow, tend, updateTend, mediaIsVideo,
+}) {
+ return (
+ <>
+ { mediaIsVideo && (
+ <StyledPaper>
+ <Grid
+ item
+ xs={12}
+ >
+ <Typography id="range-slider" variant="overline">
+ Target
+ </Typography>
+ <ContainerSlider>
+ <StyledSlider
+ size="small"
+ value={value}
+ onChange={handleChangeTime}
+ valueLabelDisplay="auto"
+ aria-labelledby="range-slider"
+ max={Math.round(videoDuration)}
+ color="secondary"
+ windowid={windowid}
+ />
+ </ContainerSlider>
+ </Grid>
+ <StyledDivFormTimeContainer>
+ <StyledDivTimeSelector>
+ <StyledDivToggleButton>
+ <div>
+ <StyledLabelSelector>
+ Start
+ </StyledLabelSelector>
+ </div>
+ <StyledToggleButton
+ value="true"
+ title="Set current time"
+ size="small"
+ onClick={setTstartNow}
+ >
+ <Alarm fontSize="small" />
+ </StyledToggleButton>
+ </StyledDivToggleButton>
+ <HMSInput seconds={tstart} onChange={updateTstart} />
+ </StyledDivTimeSelector>
+ <StyledDivTimeSelector>
+ <StyledDivToggleButton>
+ <div>
+ <StyledLabelSelector>
+ End
+ </StyledLabelSelector>
+ </div>
+ <StyledToggleButton
+ value="true"
+ title="Set current time"
+ size="small"
+ onClick={setTendNow}
+ >
+ <Alarm fontSize="small" />
+ </StyledToggleButton>
+ </StyledDivToggleButton>
+ <HMSInput seconds={tend} onChange={updateTend} />
+ </StyledDivTimeSelector>
+ </StyledDivFormTimeContainer>
+ </StyledPaper>
+ )}
+ </>
+
+ );
+}
+
+AnnotationFormTarget.propTypes = {
+ handleChangeTime: PropTypes.func.isRequired,
+ mediaIsVideo: PropTypes.bool.isRequired,
+ setTendNow: PropTypes.func.isRequired,
+ setTstartNow: PropTypes.func.isRequired,
+ tend: PropTypes.any.isRequired,
+ tstart: PropTypes.number.isRequired,
+ updateTend: PropTypes.func.isRequired,
+ updateTstart: PropTypes.func.isRequired,
+ value: PropTypes.arrayOf(PropTypes.number).isRequired,
+ videoDuration: PropTypes.any.isRequired,
+ windowid: PropTypes.any.isRequired,
+};
+
+export default AnnotationFormTarget;
diff --git a/src/annotationForm/AnnotationFormTime.js b/src/annotationForm/AnnotationFormTime.js
deleted file mode 100644
index 32ef527..0000000
--- a/src/annotationForm/AnnotationFormTime.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Divider, Grid, Paper } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import Slider from '@mui/material/Slider';
-import ToggleButton from '@mui/material/ToggleButton';
-import { Alarm } from '@mui/icons-material';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import HMSInput from '../HMSInput';
-
-const StyledPaper = styled(Paper)(({ theme }) => ({
- display: 'flex',
- flexDirection: 'column',
- gap: '10px',
- padding: '5px',
-}));
-
-const ContainerSlider = styled('div')(({ theme }) => ({
- paddingRight: '20px',
- paddingLeft: '20px',
-}));
-
-const StyledSlider = styled(Slider)(({ theme }) => ({
- color: 'rgba(1, 0, 0, 0.38)',
-}));
-
-const StyledDivFormTimeContainer = styled('div')(({ theme }) => ({
- alignContent: 'center',
- display: 'flex',
- flexDirection: 'column',
- gap: '5px',
-}));
-const StyledDivTimeSelector = styled('div')(({ theme }) => ({
- border: '1px solid rgba(0, 0, 0, 0.12)',
- borderRadius: '4px',
- display: 'flex',
- flexWrap: 'nowrap',
- justifyContent: 'center',
- padding: '5px',
-}));
-
-const StyledDivToggleButton = styled('div')(({ theme }) => ({
- display: 'flex',
- flexDirection: 'column',
-}));
-
-const StyledLabelSelector = styled('p')(({ theme }) => ({
- fontSize: '15px',
- margin: 0,
- minWidth: '40px',
-}));
-
-const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
- border: 'none',
- height: '30px',
- margin: 'auto',
- marginLeft: '0',
- marginRight: '5px',
-}));
-
-/** Form part with time mangement, dual slider + double input. Mange Tstart and Tend value */
-function AnnotationFormTime({
- videoDuration, value, handleChangeTime, windowid, setTstartNow, tstart, updateTstart, setTendNow, tend, updateTend, ...props
-}) {
- return (
- <StyledPaper>
- <Grid
- item
- xs={12}
- >
- <Typography id="range-slider" variant="overline">
- Target
- </Typography>
- <ContainerSlider>
- <StyledSlider
- size="small"
- value={value}
- onChange={handleChangeTime}
- valueLabelDisplay="auto"
- aria-labelledby="range-slider"
- max={Math.round(videoDuration)}
- color="secondary"
- windowid={windowid}
- />
- </ContainerSlider>
- </Grid>
- <StyledDivFormTimeContainer>
- <StyledDivTimeSelector>
- <StyledDivToggleButton>
- <div>
- <StyledLabelSelector>
- Start
- </StyledLabelSelector>
- </div>
- <StyledToggleButton
- value="true"
- title="Set current time"
- size="small"
- onClick={setTstartNow}
- >
- <Alarm fontSize="small" />
- </StyledToggleButton>
- </StyledDivToggleButton>
- <HMSInput seconds={tstart} onChange={updateTstart} />
- </StyledDivTimeSelector>
- <StyledDivTimeSelector>
- <StyledDivToggleButton>
- <div>
- <StyledLabelSelector>
- End
- </StyledLabelSelector>
- </div>
- <StyledToggleButton
- value="true"
- title="Set current time"
- size="small"
- onClick={setTendNow}
- >
- <Alarm fontSize="small" />
- </StyledToggleButton>
- </StyledDivToggleButton>
- <HMSInput seconds={tend} onChange={updateTend} />
- </StyledDivTimeSelector>
- </StyledDivFormTimeContainer>
- </StyledPaper>
- );
-}
-
-AnnotationFormTime.propTypes = {
- handleChangeTime: PropTypes.func.isRequired,
- mediaIsVideo: PropTypes.bool.isRequired,
- setTendNow: PropTypes.func.isRequired,
- setTstartNow: PropTypes.func.isRequired,
- tend: PropTypes.any.isRequired,
- tstart: PropTypes.number.isRequired,
- updateTend: PropTypes.func.isRequired,
- updateTstart: PropTypes.func.isRequired,
- value: PropTypes.arrayOf(PropTypes.number).isRequired,
- videoDuration: PropTypes.any.isRequired,
- windowid: PropTypes.any.isRequired,
-};
-
-export default AnnotationFormTime;
--
GitLab