diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index 6fea483952ba4a92bba688f2c189bdbb96b2bb92..e5f769b7e37ee423d698a60f8eb01a53b0be5c5f 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -18,6 +18,7 @@ import { } from './AnnotationCreationUtils'; import AnnotationFormOverlay from './annotationForm/AnnotationFormOverlay/AnnotationFormOverlay'; import AnnotationFormFooter from './annotationForm/AnnotationFormFooter'; +import AnnotationFormManifestNetwork from './annotationForm/AnnotationFormManifestNetwork'; const TARGET_VIEW = 'target'; const OVERLAY_VIEW = 'layer'; @@ -96,6 +97,9 @@ function AnnotationCreation(props) { if (props.annotation.drawingState) { setDrawingState(JSON.parse(props.annotation.drawingState)); } + if (props.annotation.manifestNetwork) { + annoState.manifestNetwork = props.annotation.manifestNetwork; + } } // TODO add a case where no annotation @@ -110,6 +114,10 @@ function AnnotationCreation(props) { annoState.textBody = ''; } + if (!annoState?.manifestNetwork) { + annoState.manifestNetwork = ''; + } + // If we don't have tstart setted, we are creating a new annotation. // If we don't have tend setted, we set it at the end of the video. // So Tstart is current time and Tend the end of the video @@ -273,6 +281,13 @@ function AnnotationCreation(props) { })); }; + const updateManifestNetwork = (manifestNetwork) => { + setState((prevState) => ({ + ...prevState, + manifestNetwork, + })); + }; + /** Set color tool from current shape */ const setColorToolFromCurrentShape = (colorState) => { setToolState((prevState) => ({ @@ -315,7 +330,7 @@ function AnnotationCreation(props) { tstart: 0, xywh: null, }); - } + }; /** */ const { @@ -326,6 +341,7 @@ function AnnotationCreation(props) { } = props; const { + manifestNetwork, textBody, tstart, tend, @@ -401,8 +417,7 @@ function AnnotationCreation(props) { mediaVideo={props.mediaVideo} setDrawingState={setDrawingState} /> - <StyledForm - > + <StyledForm> <TabContext value={viewTool}> <TabList value={viewTool} onChange={tabHandler} aria-label="icon tabs"> <StyledTab @@ -467,7 +482,12 @@ function AnnotationCreation(props) { </StyledTabPanel> <StyledTabPanel value={MANIFEST_LINK_VIEW} - /> + > + <AnnotationFormManifestNetwork + manifestNetwork={manifestNetwork} + updateManifestNetwork={updateManifestNetwork} + /> + </StyledTabPanel> </TabContext> <AnnotationFormFooter annotation={annotation} diff --git a/src/annotationForm/AnnotationFormFooter.js b/src/annotationForm/AnnotationFormFooter.js index a72142a748a07cbe3c9f45b380365b8ec343e9f0..42b301fd105298b7aef326ba08bd4907c6422d2c 100644 --- a/src/annotationForm/AnnotationFormFooter.js +++ b/src/annotationForm/AnnotationFormFooter.js @@ -8,8 +8,7 @@ import { } from '../AnnotationCreationUtils'; import { secondsToHMS } from '../utils'; import { - getJPGAsDataURL, - getKonvaAsDataURL + getKonvaAsDataURL, } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils'; const StyledButtonDivSaveOrCancel = styled('div')(({ theme }) => ({ @@ -48,21 +47,12 @@ function AnnotationFormFooter({ const { textBody, - tags, xywh, tstart, tend, - image, + manifestNetwork, } = state; - // Save annotation drawing in svg and sent it to the server - // const svg = await getSvg(windowId); - // const drawingImageExport = jpg; - // const filename = await sendFile(drawingImageExport); - // const annotationBodyImageId = fileReaderUrl + filename; - - - // Temporal target of the annotation const target = { t: (tstart && tend) ? `${tstart},${tend}` : null, @@ -80,6 +70,7 @@ function AnnotationFormFooter({ }, drawingState: JSON.stringify(drawingState), id: (annotation && annotation.id) || `${uuid()}`, + manifestNetwork, motivation: 'commenting', target: null, type: 'Annotation', // Will be updated in saveAnnotationInEachCanvas @@ -94,7 +85,7 @@ function AnnotationFormFooter({ getKonvaAsDataURL(windowId).then((dataURL) => { console.log('dataURL:', dataURL); const annotation = { ...annotationToSaved }; - annotation.body.id = dataURL + annotation.body.id = dataURL; saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation); closeFormCompanionWindow(); resetStateAfterSave(); diff --git a/src/annotationForm/AnnotationFormManifestNetwork.js b/src/annotationForm/AnnotationFormManifestNetwork.js new file mode 100644 index 0000000000000000000000000000000000000000..6e7d5341aad3473a6c2287cdb7a7cc286631b29c --- /dev/null +++ b/src/annotationForm/AnnotationFormManifestNetwork.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { + Grid, Paper, TextField, Typography, Button, +} from '@mui/material'; +import PropTypes from 'prop-types'; + +/** Form part for edit annotation content and body */ +function AnnotationFormNetwork({ manifestNetwork, updateManifestNetwork }) { + const addManifest = () => { + updateManifestNetwork(manifestNetwork); + }; + + return ( + <Paper style={{ padding: '5px' }}> + <Typography variant="overline"> + Network + </Typography> + <Grid> + <TextField + value={manifestNetwork} + onChange={(ev) => updateManifestNetwork(ev.target.value)} + label="Manifest URL" + /> + </Grid> + </Paper> + ); +} + +AnnotationFormNetwork.propTypes = { + manifestNetwork: PropTypes.string.isRequired, + updateManifestNetwork: PropTypes.func.isRequired, +}; + +export default AnnotationFormNetwork;