Target set from video size and slider

src/AnnotationCreation.js

@@ -105,6 +105,13 @@ function AnnotationCreation(props) {
     }
     // TODO add a case where no annotation
 
+    // TODO improve this code
+    if (!annoState?.xywh) {
+      const targetHeigth = props.mediaVideo ? props.mediaVideo.props.canvas.__jsonld.height : 1000;
+      const targetWidth = props.mediaVideo ? props.mediaVideo.props.canvas.__jsonld.width : 500;
+      annoState.xywh = `10,10,${targetWidth - 10},${targetHeigth - 10}`;
+    }
+
     if (!annoState?.textBody) {
       annoState.textBody = '';
     }

src/AnnotationCreationUtils.js

@@ -86,7 +86,7 @@ export async function saveAnnotation(canvases, config, receiveAnnotation, annota
       drawingState: drawingStateSerialized,
       id: (annotation && annotation.id) || `${uuid()}`,
       motivation: 'commenting',
-      target: `${canvas.id}#xywh=0,0,640,360&t=${t}`,
+      target: `${canvas.id}#xywh=${xywh}&t=${t}`,
       type: 'Annotation',
     };
 

src/utils.js

@@ -10,13 +10,14 @@ export function mapChildren(layerThing) {
 
 /** Pretty print a seconds count into HH:mm:ss */
 export function secondsToHMS(secs) {
-  const [h, m, s] = secondsToHMSarray(secs);
+  const { hours, minutes, seconds } = secondsToHMSarray(secs);
   // eslint-disable-next-line require-jsdoc
   const pad = (n) => (n < 10 ? `0${n}` : n);
-  return `${pad(h)}:${pad(m)}:${pad(s)}`;
+  const result = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  return result;
 }
 
-/** Split a second to [hours, minutes, seconds]  */
+/** Split a second to { hours, minutes, seconds }  */
 export function secondsToHMSarray(secs) {
   const h = Math.floor(secs / 3600);
   return {