tentative de fixer le bug à la selection du temps avec componentDidMount

mirador @ 1a9ef869

-Subproject commit 2a11c195b2274ae892e01df86c60e1903fd266a1
+Subproject commit 1a9ef869f8868c6983ba5e465da63598b14d2d8e

src/AnnotationCreation.js

@@ -33,6 +33,7 @@ import CursorIcon from './icons/Cursor';
 import HMSInput from './HMSInput';
 import ImageFormField from './ImageFormField';
 import { secondsToHMS } from './utils';
+import RangeSlider from './slider';
 
 /** Extract time information from annotation target */
 function timeFromAnnoTarget(annotarget) {
@@ -106,6 +107,7 @@ class AnnotationCreation extends Component {
       }
     }
 
+
     const toolState = {
       activeTool: 'cursor',
       closedMode: 'closed',
@@ -136,11 +138,11 @@ class AnnotationCreation extends Component {
       textBody: '',
       textEditorStateBustingKey: 0,
       // eslint-disable-next-line sort-keys,max-len
-      // TO DO : The state must be updated with the video's timing information when the component is mounted
       valueTime: [0, 1],
       xywh: null,
       ...annoState,
       valuetextTime: '',
+      mediaVideo: null,
     };
 
     this.submitForm = this.submitForm.bind(this);
@@ -166,6 +168,11 @@ class AnnotationCreation extends Component {
     this.valuetextTime = this.valuetextTime.bind(this);
   }
 
+  componentDidMount() {
+      const mediaVideo = VideosReferences.get(this.props.windowId);
+      this.setState({ mediaVideo }); // Update mediaVideo in state
+      console.log('MEDIAVIDEO COMPONENTDIDMOUNT:', mediaVideo)
+  }
   /** */
   handleImgChange(newUrl, imgRef) {
     const { image } = this.state;
@@ -347,10 +354,10 @@ class AnnotationCreation extends Component {
     this.setState({
       image: { id: null },
       svg: null,
-      tend: null,
+      tend: 0,
       textBody: '',
       textEditorStateBustingKey: textEditorStateBustingKey + 1,
-      tstart: null,
+      tstart: 0,
       xywh: null,
     });
   }
@@ -412,17 +419,20 @@ class AnnotationCreation extends Component {
       textEditorStateBustingKey,
       image,
       valueTime,
+      mediaVideo,
     } = this.state;
 
-    let mediaVideo;
     // TODO : Vérifier ce code, c'est étrange de comprarer un typeof à une chaine de caractère.
     const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
     if (mediaIsVideo) {
-      mediaVideo = VideosReferences.get(windowId);
       valueTime[0] = tstart;
       valueTime[1] = tend;
     }
 
+    const isVideoDataLoaded = mediaVideo && mediaVideo.video && !isNaN(mediaVideo.video.duration) && mediaVideo.video.duration > 0;
+    console.log(isVideoDataLoaded)
+
+
     return (
       <CompanionWindow
         title={annotation ? 'Edit annotation' : 'New annotation'}
@@ -473,22 +483,29 @@ class AnnotationCreation extends Component {
                   <Typography id="range-slider" variant="overline">
                     Display period
                   </Typography>
-                  {/*  <Typography>
-                  {mediaIsVideo ? mediaVideo?.video.duration : null}
-                </Typography> */}
+                  {isVideoDataLoaded ? (
+                          <div>
+                            <Typography>
+                              {this.state.mediaVideo.video.duration}
+                            </Typography>
                             <Slider
                                 value={valueTime}
                                 onChange={this.handleChangeTime}
                                 valueLabelDisplay="auto"
                                 aria-labelledby="range-slider"
-                    getAriaValueText={secondsToHMS}
-                    max={mediaVideo ? mediaVideo.video.duration : null}
+                                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>
+                  )}
+
+
                 </Grid>
                 <div style={{
                   alignContent: 'center',

src/HMSInput.js

@@ -25,13 +25,16 @@ const StyledRoot = styled('div')({
 });
 
 function HMSInput({ seconds, onChange }) {
-  const [hms, setHms] = useState(secondsToHMSarray(seconds));
-  console.log('hms', secondsToHMSarray(seconds));
-  console.log('seconds', seconds);
+  const [hms, setHms] = useState(secondsToHMSarray(0));
+  console.log('hms', hms);
 
   useEffect(() => {
+      if(seconds != null) {
+  console.log('seconds', seconds);
     setHms(secondsToHMSarray(seconds));
+      }
   }, [seconds]);
+    console.log('seconds AFTER USEEFFECT', seconds);
 
   const someChange = (ev) => {
     const newState = secondsToHMSarray(Number(ev.target.value));

src/slider.js

+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Slider from '@mui/material/Slider';
+
+// eslint-disable-next-line require-jsdoc
+function valuetext(value) {
+  return `${value}°C`;
+}
+
+export default function RangeSlider({max, valueTime, windowId, onChange}) {
+  const [value, setValue] = React.useState(valueTime);
+  // eslint-disable-next-line require-jsdoc
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+    onChange(newValue);
+  };
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <Slider
+        getAriaLabel={() => 'Temperature range'}
+        value={value}
+        max = {max}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        getAriaValueText={valuetext}
+        windowId={windowId}
+        sx={{
+            color: 'rgba(1, 0, 0, 0.38)',
+        }}
+      />
+    </Box>
+  );
+}