diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index dd378692b1dccb3527f704a9bdc053c924d062ce..984f097c87725e259de23ed0d39e1134981c5d92 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -444,7 +444,6 @@ function AnnotationCreation({
           resetStateAfterSave={resetStateAfterSave}
           state={state}
           windowId={windowId}
-          mediaIsVideo={mediaIsVideo}
         />
       </StyledForm>
     </CompanionWindow>
diff --git a/src/annotationForm/AnnotationDrawing.js b/src/annotationForm/AnnotationDrawing.js
index 295cd982fa781e52467dac9f391a7bf001ac4c15..de2b53c2f3cefa8dffee6856220c858174260938 100644
--- a/src/annotationForm/AnnotationDrawing.js
+++ b/src/annotationForm/AnnotationDrawing.js
@@ -11,10 +11,10 @@ import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
 import ParentComponent from './AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent';
-import {OVERLAY_TOOL, SHAPES_TOOL} from '../AnnotationCreationUtils';
+import { OVERLAY_TOOL, SHAPES_TOOL } from '../AnnotationCreationUtils';
 /** All the stuff to draw on the canvas */
-function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
-  const { height, width } = props.mediaVideo ? props.mediaVideo.ref.current : 0;
+function AnnotationDrawing({ drawingState, setDrawingState, height, width, ...props }) {
+
 
   useEffect(() => {
     const overlay = props.mediaVideo ? props.mediaVideo.ref.current : null;
@@ -47,7 +47,6 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
 
   const { fillColor, strokeColor, strokeWidth } = props;
 
-
   useEffect(() => {
     // Perform an action when fillColor, strokeColor, or strokeWidth change
     // update current shape
@@ -129,10 +128,10 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
   const handleDragStart = (evt) => {
     const modifiedshape = evt.currentTarget.attrs;
 
-   setDrawingState({
-        ...drawingState,
-     currentShape: drawingState.shapes.find((s) => s.id === modifiedshape.id),
-   });
+    setDrawingState({
+      ...drawingState,
+      currentShape: drawingState.shapes.find((s) => s.id === modifiedshape.id),
+    });
   };
 
   /** */
@@ -219,8 +218,8 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
             y: pos.y,
           };
           setDrawingState({
-            isDrawing: true,
             currentShape: shape,
+            isDrawing: true,
             shapes: [...drawingState.shapes, shape],
           });
           break;
@@ -242,8 +241,8 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
             y: pos.y,
           };
           setDrawingState({
-            isDrawing: true,
             currentShape: shape,
+            isDrawing: true,
             shapes: [...drawingState.shapes, shape],
           });
           break;
@@ -357,7 +356,6 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
       pos.x /= props.scale;
       pos.y /= props.scale;
 
-
       switch (props.activeTool) {
         case SHAPES_TOOL.RECTANGLE:
           updateCurrentShapeInShapes({
@@ -379,8 +377,8 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
             ...drawingState.currentShape,
             height: pos.y - drawingState.currentShape.y,
             radiusX: (pos.x - drawingState.currentShape.x) / 2,
-            width: pos.x - drawingState.currentShape.x,
             radiusY: (pos.y - drawingState.currentShape.y) / 2,
+            width: pos.x - drawingState.currentShape.x,
           });
 
           break;
@@ -404,12 +402,12 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
           const arrowShape = {};
           // update points
           arrowShape.points = [drawingState.currentShape.points[0], drawingState.currentShape.points[1], pos.x, pos.y];
-          arrowShape.id =drawingState.currentShape.id;
-          arrowShape.type =drawingState.currentShape.type;
-          arrowShape.pointerLength =drawingState.currentShape.pointerLength;
-          arrowShape.pointerWidth =drawingState.currentShape.pointerWidth;
-          arrowShape.x =drawingState.currentShape.x;
-          arrowShape.y =drawingState.currentShape.y;
+          arrowShape.id = drawingState.currentShape.id;
+          arrowShape.type = drawingState.currentShape.type;
+          arrowShape.pointerLength = drawingState.currentShape.pointerLength;
+          arrowShape.pointerWidth = drawingState.currentShape.pointerWidth;
+          arrowShape.x = drawingState.currentShape.x;
+          arrowShape.y = drawingState.currentShape.y;
           arrowShape.fill = props.fillColor;
           arrowShape.stroke = props.strokeColor;
           arrowShape.strokeWidth = props.strokeWidth;
@@ -435,7 +433,7 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
       }
       // For these cases, the action is similar: stop drawing and add the shape
       setDrawingState({
-        ... drawingState,
+        ...drawingState,
         isDrawing: false,
       });
     } catch (error) {
@@ -496,32 +494,22 @@ function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
   if (osdref && videoref) {
     throw new Error('Unhandled case: both OpenSeadragon (image viewer) and video player on the same canvas');
   }
-  const container = osdref ? osdref.current.element : videoref.ref.current.parentElement;
+  const container = osdref ? osdref.current.container : videoref.ref.current.parentElement;
 
   return ReactDOM.createPortal(drawKonvas(), container);
 }
 
 AnnotationDrawing.propTypes = {
+  activeTool: PropTypes.string.isRequired,
+  closed: PropTypes.bool.isRequired,
   drawingState: PropTypes.object.isRequired,
-  activeTool: PropTypes.string,
-  closed: PropTypes.bool,
-  fillColor: PropTypes.string,
-  selectedShapeId: PropTypes.string,
-  strokeColor: PropTypes.string,
-  strokeWidth: PropTypes.number,
+  fillColor: PropTypes.string.isRequired,
+  selectedShapeId: PropTypes.string.isRequired,
+  strokeColor: PropTypes.string.isRequired,
+  strokeWidth: PropTypes.number.isRequired,
   svg: PropTypes.func.isRequired,
   updateGeometry: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,
 };
 
-AnnotationDrawing.defaultProps = {
-  activeTool: null,
-  closed: true,
-  fillColor: 'red',
-  selectedShapeId: null,
-  strokeColor: '#00BFFF',
-  strokeWidth: 1,
-  svg: null,
-};
-
 export default AnnotationDrawing;
diff --git a/src/annotationForm/AnnotationFormFooter.js b/src/annotationForm/AnnotationFormFooter.js
index a14e76f1ad92c8d76b55b2e3d526b8379ddcd2f8..cf5b2051ae99b8e835e41866a93b6d4c322abeb6 100644
--- a/src/annotationForm/AnnotationFormFooter.js
+++ b/src/annotationForm/AnnotationFormFooter.js
@@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid';
 import {
   saveAnnotationInEachCanvas,
 } from '../AnnotationCreationUtils';
-import { secondsToHMS } from '../utils';
+import { removeHTMLTags, secondsToHMS } from '../utils';
 import {
   getKonvaAsDataURL,
 } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
@@ -23,12 +23,10 @@ function AnnotationFormFooter({
   closeFormCompanionWindow,
   config,
   drawingState,
-  mediaIsVideo,
   receiveAnnotation,
   resetStateAfterSave,
   state,
   windowId,
-
 }) {
   /**
    * Validate form and save annotation
@@ -60,7 +58,16 @@ function AnnotationFormFooter({
       xywh, // TODO retrouver calcul de xywh
     };
 
-    const annotationText = (!textBody.length && target.t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody;
+    let annotationText;
+    if (textBody.length == 0 || removeHTMLTags(textBody).length == 0) {
+      if (target.t) {
+        annotationText = `${new Date().toLocaleString()} - ${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}`;
+      } else {
+        annotationText = new Date().toLocaleString();
+      }
+    } else {
+      annotationText = textBody;
+    }
 
     let id = annotation?.id ? annotation.id : `https://${uuid()}`;
     id = id.split('#')[0];
@@ -85,23 +92,15 @@ function AnnotationFormFooter({
 
     const isNewAnnotation = !annotation;
 
-    // TODO dumb code to avoid error from Konva export. WIth image, Konva doesnot work
-    if (mediaIsVideo) {
-      // Save jpg image of the drawing in a data url
-      getKonvaAsDataURL(windowId).then((dataURL) => {
-        console.log('dataURL:', dataURL);
-        const annotation = { ...annotationToSaved };
-        annotation.body.id = dataURL;
-        saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation);
-        closeFormCompanionWindow();
-        resetStateAfterSave();
-      });
-    } else {
+    // Save jpg image of the drawing in a data url
+    getKonvaAsDataURL(windowId).then((dataURL) => {
+      console.log('dataURL:', dataURL);
       const annotation = { ...annotationToSaved };
+      annotation.body.id = dataURL;
       saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation);
       closeFormCompanionWindow();
       resetStateAfterSave();
-    }
+    });
   };
 
   return (
diff --git a/src/utils.js b/src/utils.js
index f30b3dafd1afc7f8ef6194fb9ba2bcd1d0e8aeef..855531c28f5c6452dd7f0922d21b1893e6246c3b 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -38,3 +38,8 @@ export const isValidUrl = (string) => {
     return false;
   }
 };
+
+export const removeHTMLTags = (htmlString) => {
+  const doc = new DOMParser().parseFromString(htmlString, 'text/html');
+  return doc.body.textContent || '';
+};