diff --git a/.gitignore b/.gitignore index a34cf4ba55e69fba3e3dccf434efeb68a0dc13ac..6a62d7fbef574204d29bed51a8681a9862b088ca 100644 --- a/.gitignore +++ b/.gitignore @@ -7,5 +7,3 @@ npm-debug.log* .idea .package-lock.json -``` -/package-lock.json diff --git a/mirador b/mirador index 9f36a451d213fffb794e41198bc312e2b9cfa80e..fd236dcb8581ca647b90793e29578fbdd2709bc0 160000 --- a/mirador +++ b/mirador @@ -1 +1 @@ -Subproject commit 9f36a451d213fffb794e41198bc312e2b9cfa80e +Subproject commit fd236dcb8581ca647b90793e29578fbdd2709bc0 diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index 3d2c604fd333d3f7eca6a1f98abcb3594a9f0760..9c2923c59cbb7e6e045ca1c6124dd6ffb5bdbca4 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -33,7 +33,7 @@ import CursorIcon from './icons/Cursor'; import HMSInput from './HMSInput'; import ImageFormField from './ImageFormField'; import { secondsToHMS } from './utils'; -import RangeSlider from './slider'; +import TextField from '@mui/material/TextField'; /** Extract time information from annotation target */ function timeFromAnnoTarget(annotarget) { @@ -107,7 +107,6 @@ class AnnotationCreation extends Component { } } - const toolState = { activeTool: 'cursor', closedMode: 'closed', @@ -143,6 +142,7 @@ class AnnotationCreation extends Component { ...annoState, valuetextTime: '', mediaVideo: null, + title: '', }; this.submitForm = this.submitForm.bind(this); @@ -166,12 +166,14 @@ class AnnotationCreation extends Component { this.handleImgChange = this.handleImgChange.bind(this); this.handleChangeTime = this.handleChangeTime.bind(this); this.valuetextTime = this.valuetextTime.bind(this); + this.updateTitle = this.updateTitle.bind(this); } componentDidMount() { const mediaVideo = VideosReferences.get(this.props.windowId); this.setState({ mediaVideo }); // Update mediaVideo in state } + /** */ handleImgChange(newUrl, imgRef) { const { image } = this.state; @@ -227,7 +229,10 @@ class AnnotationCreation extends Component { this.setState({ tend: value }); } - /** seekTo/goto annotation start time */ + updateTitle(e){ + const thisTitle = e.target.value; + this.setState({title : thisTitle}); + } /** seekTo/goto annotation end time */ seekToTend() { @@ -308,6 +313,7 @@ class AnnotationCreation extends Component { config, } = this.props; const { + title, textBody, image, tags, @@ -324,6 +330,7 @@ class AnnotationCreation extends Component { const storageAdapter = config.annotation.adapter(canvas.id); const anno = new WebAnnotation({ + title, body, canvasId: canvas.id, fragsel: { @@ -351,6 +358,7 @@ class AnnotationCreation extends Component { }); this.setState({ + title: '', image: { id: null }, svg: null, tend: 0, @@ -380,6 +388,7 @@ class AnnotationCreation extends Component { this.setState({ textBody }); } + /** */ updateGeometry({ svg, @@ -419,6 +428,7 @@ class AnnotationCreation extends Component { image, valueTime, mediaVideo, + title } = this.state; // TODO : Vérifier ce code, c'est étrange de comprarer un typeof à une chaine de caractère. @@ -430,9 +440,10 @@ class AnnotationCreation extends Component { const isVideoDataLoaded = mediaVideo && mediaVideo.video && !isNaN(mediaVideo.video.duration) && mediaVideo.video.duration > 0; + return ( <CompanionWindow - title={annotation ? 'Edit annotation' : 'New annotation'} + title={title ? title : 'New Annotation'} windowId={windowId} id={id} > @@ -453,18 +464,22 @@ class AnnotationCreation extends Component { > <div> <Grid item xs={12}> - <Typography variant="overline"> - Text Content - </Typography> + <TextField + id="outlined-basic" + label="Title" + variant="outlined" + onChange={this.updateTitle} + /> </Grid> - <Grid item xs={12}> - <TextEditor + </div> + <Grid> + <Typography>TODO:METTRE CE CHAMPS TEXTE EN ONGLET</Typography> + <TextEditor key={textEditorStateBustingKey} annoHtml={textBody} updateAnnotationBody={this.updateTextBody} - /> - </Grid> - </div> + /> + </Grid> <div> {mediaIsVideo && ( @@ -472,42 +487,37 @@ class AnnotationCreation extends Component { <Grid item xs={12} - sx={{ - display: 'flex', - flexWrap: 'wrap', - }} > <Typography id="range-slider" variant="overline"> Display period </Typography> {isVideoDataLoaded ? ( - <div> - <Typography> - {this.state.mediaVideo.video.duration} - </Typography> - <Slider - value={valueTime} - onChange={this.handleChangeTime} - valueLabelDisplay="auto" - aria-labelledby="range-slider" - max={Math.round(this.state.mediaVideo.video.duration)} - color="secondary" - windowId={windowId} - sx={{ - color: 'rgba(1, 0, 0, 0.38)', - }} - /> - </div> + <div> + <Typography> + {this.state.mediaVideo.video.duration} + </Typography> + <Slider + value={valueTime} + onChange={this.handleChangeTime} + valueLabelDisplay="auto" + aria-labelledby="range-slider" + max={Math.round(this.state.mediaVideo.video.duration)} + color="secondary" + windowId={windowId} + sx={{ + color: 'rgba(1, 0, 0, 0.38)', + }} + /> + </div> ) : ( - <Typography>Loading video data...</Typography> + <Typography>Loading video data...</Typography> )} - </Grid> <div style={{ alignContent: 'center', display: 'flex', - flexDirection: 'wrap', + flexDirection: 'column', gap: '5px', padding: '5px', }} diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js index ea9396572e7cf9ff210a05578988177a62b0508c..d9911a9f372ac0aa75a0ec9b8eeb3a1ee5fd53b2 100644 --- a/src/WebAnnotation.js +++ b/src/WebAnnotation.js @@ -2,8 +2,9 @@ export default class WebAnnotation { /** */ constructor({ - canvasId, id, fragsel, image, body, tags, svg, manifestId, + canvasId, id, fragsel, image, body, tags, svg, manifestId, title }) { + this.title = title; this.id = id; this.canvasId = canvasId; this.fragsel = fragsel; @@ -17,6 +18,7 @@ export default class WebAnnotation { /** */ toJson() { return { + title: this.title, body: this.createBody(), id: this.id, motivation: 'commenting', @@ -45,6 +47,13 @@ export default class WebAnnotation { bodies.push(imgBody); } + if(this.title){ + const title={ + type: 'AnnotationTitle', + value: this.title, + } + } + if (this.tags) { bodies = bodies.concat(this.tags.map((tag) => ({ purpose: 'tagging', @@ -80,8 +89,7 @@ export default class WebAnnotation { .map((kv) => `${kv[0]}=${kv[1]}`) .join('&'), }); - } - target.selector = selectors.length === 1 ? selectors[0] : selectors; + }target.selector = selectors.length === 1 ? selectors[0] : selectors; return target; }