Skip to content
Snippets Groups Projects
Commit fc336e0e authored by Anthony's avatar Anthony
Browse files

add manifest network input

parent 7698e0d9
No related branches found
No related tags found
1 merge request!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1918 failed
...@@ -18,6 +18,7 @@ import { ...@@ -18,6 +18,7 @@ import {
} from './AnnotationCreationUtils'; } from './AnnotationCreationUtils';
import AnnotationFormOverlay from './annotationForm/AnnotationFormOverlay/AnnotationFormOverlay'; import AnnotationFormOverlay from './annotationForm/AnnotationFormOverlay/AnnotationFormOverlay';
import AnnotationFormFooter from './annotationForm/AnnotationFormFooter'; import AnnotationFormFooter from './annotationForm/AnnotationFormFooter';
import AnnotationFormManifestNetwork from './annotationForm/AnnotationFormManifestNetwork';
const TARGET_VIEW = 'target'; const TARGET_VIEW = 'target';
const OVERLAY_VIEW = 'layer'; const OVERLAY_VIEW = 'layer';
...@@ -96,6 +97,9 @@ function AnnotationCreation(props) { ...@@ -96,6 +97,9 @@ function AnnotationCreation(props) {
if (props.annotation.drawingState) { if (props.annotation.drawingState) {
setDrawingState(JSON.parse(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 // TODO add a case where no annotation
...@@ -110,6 +114,10 @@ function AnnotationCreation(props) { ...@@ -110,6 +114,10 @@ function AnnotationCreation(props) {
annoState.textBody = ''; 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 tstart setted, we are creating a new annotation.
// If we don't have tend setted, we set it at the end of the video. // 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 // So Tstart is current time and Tend the end of the video
...@@ -273,6 +281,13 @@ function AnnotationCreation(props) { ...@@ -273,6 +281,13 @@ function AnnotationCreation(props) {
})); }));
}; };
const updateManifestNetwork = (manifestNetwork) => {
setState((prevState) => ({
...prevState,
manifestNetwork,
}));
};
/** Set color tool from current shape */ /** Set color tool from current shape */
const setColorToolFromCurrentShape = (colorState) => { const setColorToolFromCurrentShape = (colorState) => {
setToolState((prevState) => ({ setToolState((prevState) => ({
...@@ -315,7 +330,7 @@ function AnnotationCreation(props) { ...@@ -315,7 +330,7 @@ function AnnotationCreation(props) {
tstart: 0, tstart: 0,
xywh: null, xywh: null,
}); });
} };
/** */ /** */
const { const {
...@@ -326,6 +341,7 @@ function AnnotationCreation(props) { ...@@ -326,6 +341,7 @@ function AnnotationCreation(props) {
} = props; } = props;
const { const {
manifestNetwork,
textBody, textBody,
tstart, tstart,
tend, tend,
...@@ -401,8 +417,7 @@ function AnnotationCreation(props) { ...@@ -401,8 +417,7 @@ function AnnotationCreation(props) {
mediaVideo={props.mediaVideo} mediaVideo={props.mediaVideo}
setDrawingState={setDrawingState} setDrawingState={setDrawingState}
/> />
<StyledForm <StyledForm>
>
<TabContext value={viewTool}> <TabContext value={viewTool}>
<TabList value={viewTool} onChange={tabHandler} aria-label="icon tabs"> <TabList value={viewTool} onChange={tabHandler} aria-label="icon tabs">
<StyledTab <StyledTab
...@@ -467,7 +482,12 @@ function AnnotationCreation(props) { ...@@ -467,7 +482,12 @@ function AnnotationCreation(props) {
</StyledTabPanel> </StyledTabPanel>
<StyledTabPanel <StyledTabPanel
value={MANIFEST_LINK_VIEW} value={MANIFEST_LINK_VIEW}
>
<AnnotationFormManifestNetwork
manifestNetwork={manifestNetwork}
updateManifestNetwork={updateManifestNetwork}
/> />
</StyledTabPanel>
</TabContext> </TabContext>
<AnnotationFormFooter <AnnotationFormFooter
annotation={annotation} annotation={annotation}
......
...@@ -8,8 +8,7 @@ import { ...@@ -8,8 +8,7 @@ import {
} from '../AnnotationCreationUtils'; } from '../AnnotationCreationUtils';
import { secondsToHMS } from '../utils'; import { secondsToHMS } from '../utils';
import { import {
getJPGAsDataURL, getKonvaAsDataURL,
getKonvaAsDataURL
} from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils'; } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
const StyledButtonDivSaveOrCancel = styled('div')(({ theme }) => ({ const StyledButtonDivSaveOrCancel = styled('div')(({ theme }) => ({
...@@ -48,21 +47,12 @@ function AnnotationFormFooter({ ...@@ -48,21 +47,12 @@ function AnnotationFormFooter({
const { const {
textBody, textBody,
tags,
xywh, xywh,
tstart, tstart,
tend, tend,
image, manifestNetwork,
} = state; } = 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 // Temporal target of the annotation
const target = { const target = {
t: (tstart && tend) ? `${tstart},${tend}` : null, t: (tstart && tend) ? `${tstart},${tend}` : null,
...@@ -80,6 +70,7 @@ function AnnotationFormFooter({ ...@@ -80,6 +70,7 @@ function AnnotationFormFooter({
}, },
drawingState: JSON.stringify(drawingState), drawingState: JSON.stringify(drawingState),
id: (annotation && annotation.id) || `${uuid()}`, id: (annotation && annotation.id) || `${uuid()}`,
manifestNetwork,
motivation: 'commenting', motivation: 'commenting',
target: null, target: null,
type: 'Annotation', // Will be updated in saveAnnotationInEachCanvas type: 'Annotation', // Will be updated in saveAnnotationInEachCanvas
...@@ -94,7 +85,7 @@ function AnnotationFormFooter({ ...@@ -94,7 +85,7 @@ function AnnotationFormFooter({
getKonvaAsDataURL(windowId).then((dataURL) => { getKonvaAsDataURL(windowId).then((dataURL) => {
console.log('dataURL:', dataURL); console.log('dataURL:', dataURL);
const annotation = { ...annotationToSaved }; const annotation = { ...annotationToSaved };
annotation.body.id = dataURL annotation.body.id = dataURL;
saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation); saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation);
closeFormCompanionWindow(); closeFormCompanionWindow();
resetStateAfterSave(); resetStateAfterSave();
......
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;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment