From ad5f8956fba881e194a79b93530e54cc1a132e24 Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Thu, 28 Dec 2023 13:11:23 +0100
Subject: [PATCH] Improve UX of HS Input button

---
 package-lock.json         | 399 ++++++++++++++++++++++----------------
 src/AnnotationCreation.js |   8 +-
 2 files changed, 238 insertions(+), 169 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 08061ea..afd0aaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "jest-canvas-mock": "^2.2.0",
         "jest-junit": "^15.0.0",
         "jest-localstorage-mock": "^2.4.2",
-        "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#annotation-on-video",
+        "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador/mirador-video#annotation-on-video",
         "nwb": "^0.24.7",
         "prop-types": "^15.7.2",
         "react": "^16.8",
@@ -55,7 +55,7 @@
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.52",
         "lodash": "^4.17.11",
-        "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#annotation-on-video",
+        "mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador/mirador-video#annotation-on-video",
         "prop-types": "^15.7.2",
         "react": "^16.8",
         "react-dom": "^16.8",
@@ -2088,10 +2088,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.1",
-      "license": "MIT",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
+      "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.10"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2109,6 +2110,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -2269,6 +2275,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.5.0.tgz",
+      "integrity": "sha512-n+am6O32jo/CFXciCysz83lPM3I3F58FJw4uS44TceieymcyxQSfzK5OhzPAKrVBZktmuOI6Zim9WABTMtXv4A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "css-box-model": "^1.2.1",
+        "memoize-one": "^6.0.0",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^8.1.3",
+        "redux": "^4.2.1",
+        "use-memo-one": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@hello-pangea/dnd/node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "dev": true
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "dev": true,
@@ -3379,18 +3410,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@researchgate/react-intersection-observer": {
-      "version": "1.3.5",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.18.1"
-      },
-      "peerDependencies": {
-        "react": "^16.3.2",
-        "react-dom": "^16.3.2"
-      }
-    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.2.0",
       "dev": true,
@@ -3562,17 +3581,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-redux": {
-      "version": "7.1.24",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "license": "MIT",
@@ -3616,6 +3624,12 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "dev": true
+    },
     "node_modules/@types/webpack": {
       "version": "4.41.33",
       "dev": true,
@@ -7398,8 +7412,9 @@
     },
     "node_modules/css-box-model": {
       "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "tiny-invariant": "^1.0.6"
       }
@@ -10718,8 +10733,9 @@
     },
     "node_modules/fscreen": {
       "version": "1.2.0",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+      "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
+      "dev": true
     },
     "node_modules/function-bind": {
       "version": "1.1.1",
@@ -11695,11 +11711,26 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/i18next": {
-      "version": "19.9.2",
+      "version": "22.5.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.1.tgz",
+      "integrity": "sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==",
       "dev": true,
-      "license": "MIT",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
       "dependencies": {
-        "@babel/runtime": "^7.12.0"
+        "@babel/runtime": "^7.20.6"
       }
     },
     "node_modules/icomcom-react": {
@@ -12024,11 +12055,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/intersection-observer": {
-      "version": "0.10.0",
-      "dev": true,
-      "license": "W3C-20150513"
-    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "dev": true,
@@ -15537,22 +15563,20 @@
     },
     "node_modules/mirador": {
       "version": "3.3.0",
-      "resolved": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#047b206353616adc135bcd3b018da9857c4222d6",
+      "resolved": "git+https://gitlab.tetras-libre.fr/iiif/mirador/mirador-video#6233d1d682902e9b904fc171a6d4e1625bb61ae7",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
+        "@hello-pangea/dnd": "^16.0.1",
         "@material-ui/core": "^4.12.3",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.53",
-        "@researchgate/react-intersection-observer": "^1.0.0",
         "classnames": "^2.2.6",
         "clsx": "^1.0.4",
         "deepmerge": "^4.2.2",
         "dompurify": "^2.0.11",
-        "i18next": "^19.5.0",
+        "i18next": "^21.0.0 || ^22.0.0",
         "icomcom-react": "^1.0.1",
-        "intersection-observer": "^0.10.0",
-        "isomorphic-unfetch": "^3.0.0",
         "jss": "^10.3.0",
         "jss-rtl": "^0.3.0",
         "lodash": "^4.17.11",
@@ -15562,20 +15586,20 @@
         "prop-types": "^15.6.2",
         "re-reselect": "^4.0.0",
         "react-aria-live": "^2.0.5",
-        "react-beautiful-dnd": "^13.0.0",
         "react-copy-to-clipboard": "^5.0.1",
         "react-dnd": "^10.0.2",
         "react-dnd-html5-backend": "^10.0.2",
         "react-dnd-multi-backend": "^5.0.0",
         "react-dnd-touch-backend": "^10.0.2",
-        "react-full-screen": "^0.2.4",
-        "react-i18next": "^11.7.0",
+        "react-full-screen": "^1.1.1",
+        "react-i18next": "^11.7.0 || ^12.0.0",
         "react-image": "^4.0.1",
+        "react-intersection-observer": "^9.0.0",
         "react-mosaic-component": "^4.0.1",
-        "react-redux": "^7.1.0",
+        "react-redux": "^7.1.0 || ^8.0.0",
         "react-resize-observer": "^1.1.1",
         "react-rnd": "^10.1",
-        "react-sizeme": "^2.6.7",
+        "react-sizeme": "^2.6.7 || ^3.0.0",
         "react-virtualized-auto-sizer": "^1.0.2",
         "react-window": "^1.8.5",
         "redux": "^4.0.5",
@@ -15584,11 +15608,11 @@
         "redux-thunk": "^2.3.0",
         "reselect": "^4.0.0",
         "url": "^0.11.0",
-        "uuid": "^8.1.0"
+        "uuid": "^8.1.0 || ^9.0.0"
       },
       "peerDependencies": {
-        "react": "^16.8.3",
-        "react-dom": "^16.8.3"
+        "react": "^16.14.0",
+        "react-dom": "^16.14.0"
       }
     },
     "node_modules/mississippi": {
@@ -18967,8 +18991,9 @@
     },
     "node_modules/raf-schd": {
       "version": "4.0.3",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "dev": true
     },
     "node_modules/railroad-diagrams": {
       "version": "1.0.0",
@@ -19077,24 +19102,6 @@
         "uuid": "bin/uuid"
       }
     },
-    "node_modules/react-beautiful-dnd": {
-      "version": "13.1.1",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2",
-        "css-box-model": "^1.2.0",
-        "memoize-one": "^5.1.1",
-        "raf-schd": "^4.0.2",
-        "react-redux": "^7.2.0",
-        "redux": "^4.0.4",
-        "use-memo-one": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-color": {
       "version": "2.19.3",
       "license": "MIT",
@@ -19224,16 +19231,18 @@
       }
     },
     "node_modules/react-full-screen": {
-      "version": "0.2.5",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
+      "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@types/react": "*",
-        "fscreen": "^1.0.1"
+        "fscreen": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=10"
       },
       "peerDependencies": {
-        "prop-types": "^15.5",
-        "react": "^15.6 || ^16"
+        "react": ">= 16.8.0"
       }
     },
     "node_modules/react-i18next": {
@@ -19267,10 +19276,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.5.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz",
+      "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-mosaic-component": {
       "version": "4.1.1",
@@ -19300,34 +19317,44 @@
       }
     },
     "node_modules/react-redux": {
-      "version": "7.2.9",
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
+      "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.15.4",
-        "@types/react-redux": "^7.1.20",
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
         "hoist-non-react-statics": "^3.3.2",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^17.0.2"
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
       },
       "peerDependencies": {
-        "react": "^16.8.3 || ^17 || ^18"
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4 || ^5.0.0-beta.0"
       },
       "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
         "react-dom": {
           "optional": true
         },
         "react-native": {
           "optional": true
+        },
+        "redux": {
+          "optional": true
         }
       }
     },
-    "node_modules/react-redux/node_modules/react-is": {
-      "version": "17.0.2",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/react-refresh": {
       "version": "0.8.2",
       "dev": true,
@@ -19733,9 +19760,10 @@
       }
     },
     "node_modules/redux": {
-      "version": "4.2.0",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -19806,6 +19834,7 @@
     },
     "node_modules/regenerator-runtime": {
       "version": "0.13.10",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/regenerator-transform": {
@@ -22452,8 +22481,9 @@
     },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "dev": true
     },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
@@ -23137,8 +23167,18 @@
     },
     "node_modules/use-memo-one": {
       "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
@@ -25854,9 +25894,18 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.20.1",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz",
+      "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==",
       "requires": {
-        "regenerator-runtime": "^0.13.10"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
       }
     },
     "@babel/runtime-corejs3": {
@@ -25979,6 +26028,29 @@
         }
       }
     },
+    "@hello-pangea/dnd": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.5.0.tgz",
+      "integrity": "sha512-n+am6O32jo/CFXciCysz83lPM3I3F58FJw4uS44TceieymcyxQSfzK5OhzPAKrVBZktmuOI6Zim9WABTMtXv4A==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "css-box-model": "^1.2.1",
+        "memoize-one": "^6.0.0",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^8.1.3",
+        "redux": "^4.2.1",
+        "use-memo-one": "^1.1.3"
+      },
+      "dependencies": {
+        "memoize-one": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+          "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+          "dev": true
+        }
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "dev": true,
@@ -26705,11 +26777,6 @@
       "version": "1.2.1",
       "dev": true
     },
-    "@researchgate/react-intersection-observer": {
-      "version": "1.3.5",
-      "dev": true,
-      "requires": {}
-    },
     "@rushstack/eslint-patch": {
       "version": "1.2.0",
       "dev": true
@@ -26858,16 +26925,6 @@
         }
       }
     },
-    "@types/react-redux": {
-      "version": "7.1.24",
-      "dev": true,
-      "requires": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      }
-    },
     "@types/react-transition-group": {
       "version": "4.4.5",
       "requires": {
@@ -26900,6 +26957,12 @@
         "source-map": "^0.6.1"
       }
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.33",
       "dev": true,
@@ -29514,6 +29577,8 @@
     },
     "css-box-model": {
       "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
       "dev": true,
       "requires": {
         "tiny-invariant": "^1.0.6"
@@ -31836,6 +31901,8 @@
     },
     "fscreen": {
       "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+      "integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
       "dev": true
     },
     "function-bind": {
@@ -32513,10 +32580,12 @@
       "version": "1.0.4"
     },
     "i18next": {
-      "version": "19.9.2",
+      "version": "22.5.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.1.tgz",
+      "integrity": "sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==",
       "dev": true,
       "requires": {
-        "@babel/runtime": "^7.12.0"
+        "@babel/runtime": "^7.20.6"
       }
     },
     "icomcom-react": {
@@ -32725,10 +32794,6 @@
         "side-channel": "^1.0.4"
       }
     },
-    "intersection-observer": {
-      "version": "0.10.0",
-      "dev": true
-    },
     "invariant": {
       "version": "2.2.4",
       "dev": true,
@@ -35046,22 +35111,20 @@
       }
     },
     "mirador": {
-      "version": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#047b206353616adc135bcd3b018da9857c4222d6",
+      "version": "git+https://gitlab.tetras-libre.fr/iiif/mirador/mirador-video#6233d1d682902e9b904fc171a6d4e1625bb61ae7",
       "dev": true,
-      "from": "mirador@git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#annotation-on-video",
+      "from": "mirador@git+https://gitlab.tetras-libre.fr/iiif/mirador/mirador-video#annotation-on-video",
       "requires": {
+        "@hello-pangea/dnd": "^16.0.1",
         "@material-ui/core": "^4.12.3",
         "@material-ui/icons": "^4.9.1",
         "@material-ui/lab": "^4.0.0-alpha.53",
-        "@researchgate/react-intersection-observer": "^1.0.0",
         "classnames": "^2.2.6",
         "clsx": "^1.0.4",
         "deepmerge": "^4.2.2",
         "dompurify": "^2.0.11",
-        "i18next": "^19.5.0",
+        "i18next": "^21.0.0 || ^22.0.0",
         "icomcom-react": "^1.0.1",
-        "intersection-observer": "^0.10.0",
-        "isomorphic-unfetch": "^3.0.0",
         "jss": "^10.3.0",
         "jss-rtl": "^0.3.0",
         "lodash": "^4.17.11",
@@ -35071,20 +35134,20 @@
         "prop-types": "^15.6.2",
         "re-reselect": "^4.0.0",
         "react-aria-live": "^2.0.5",
-        "react-beautiful-dnd": "^13.0.0",
         "react-copy-to-clipboard": "^5.0.1",
         "react-dnd": "^10.0.2",
         "react-dnd-html5-backend": "^10.0.2",
         "react-dnd-multi-backend": "^5.0.0",
         "react-dnd-touch-backend": "^10.0.2",
-        "react-full-screen": "^0.2.4",
-        "react-i18next": "^11.7.0",
+        "react-full-screen": "^1.1.1",
+        "react-i18next": "^11.7.0 || ^12.0.0",
         "react-image": "^4.0.1",
+        "react-intersection-observer": "^9.0.0",
         "react-mosaic-component": "^4.0.1",
-        "react-redux": "^7.1.0",
+        "react-redux": "^7.1.0 || ^8.0.0",
         "react-resize-observer": "^1.1.1",
         "react-rnd": "^10.1",
-        "react-sizeme": "^2.6.7",
+        "react-sizeme": "^2.6.7 || ^3.0.0",
         "react-virtualized-auto-sizer": "^1.0.2",
         "react-window": "^1.8.5",
         "redux": "^4.0.5",
@@ -35093,7 +35156,7 @@
         "redux-thunk": "^2.3.0",
         "reselect": "^4.0.0",
         "url": "^0.11.0",
-        "uuid": "^8.1.0"
+        "uuid": "^8.1.0 || ^9.0.0"
       }
     },
     "mississippi": {
@@ -37506,6 +37569,8 @@
     },
     "raf-schd": {
       "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
       "dev": true
     },
     "railroad-diagrams": {
@@ -37582,19 +37647,6 @@
         }
       }
     },
-    "react-beautiful-dnd": {
-      "version": "13.1.1",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.9.2",
-        "css-box-model": "^1.2.0",
-        "memoize-one": "^5.1.1",
-        "raf-schd": "^4.0.2",
-        "react-redux": "^7.2.0",
-        "redux": "^4.0.4",
-        "use-memo-one": "^1.1.1"
-      }
-    },
     "react-color": {
       "version": "2.19.3",
       "requires": {
@@ -37689,11 +37741,12 @@
       }
     },
     "react-full-screen": {
-      "version": "0.2.5",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
+      "integrity": "sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==",
       "dev": true,
       "requires": {
-        "@types/react": "*",
-        "fscreen": "^1.0.1"
+        "fscreen": "^1.0.2"
       }
     },
     "react-i18next": {
@@ -37709,9 +37762,15 @@
       "dev": true,
       "requires": {}
     },
+    "react-intersection-observer": {
+      "version": "9.5.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz",
+      "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==",
+      "dev": true,
+      "requires": {}
+    },
     "react-is": {
-      "version": "18.2.0",
-      "peer": true
+      "version": "18.2.0"
     },
     "react-mosaic-component": {
       "version": "4.1.1",
@@ -37735,21 +37794,17 @@
       }
     },
     "react-redux": {
-      "version": "7.2.9",
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
+      "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==",
       "dev": true,
       "requires": {
-        "@babel/runtime": "^7.15.4",
-        "@types/react-redux": "^7.1.20",
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
         "hoist-non-react-statics": "^3.3.2",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^17.0.2"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "dev": true
-        }
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
       }
     },
     "react-refresh": {
@@ -38040,7 +38095,9 @@
       }
     },
     "redux": {
-      "version": "4.2.0",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.9.2"
@@ -38091,7 +38148,8 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.10"
+      "version": "0.13.10",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -39985,6 +40043,8 @@
     },
     "tiny-invariant": {
       "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
       "dev": true
     },
     "tiny-warning": {
@@ -40438,6 +40498,15 @@
     },
     "use-memo-one": {
       "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "dev": true,
       "requires": {}
     },
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 8252e8f..311379f 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -411,12 +411,12 @@ class AnnotationCreation extends Component {
             { mediaIsVideo && (
             <>
               <Grid item xs={12} className={classes.paper}>
-                <Typography>
-                  {mediaIsVideo ? mediaVideo?.video.duration : null}
-                </Typography>
                 <Typography id="range-slider" variant="overline">
                   Display period
                 </Typography>
+               {/*  <Typography>
+                  {mediaIsVideo ? mediaVideo?.video.duration : null}
+                </Typography> */}
                 <Slider
                   value={valueTime}
                   onChange={this.handleChangeTime}
@@ -692,6 +692,7 @@ const styles = (theme) => ({
   textTimeButton: {
     fontSize: '15px',
     margin: 0,
+    minWidth: '40px',
   },
   timecontrolsbutton: {
     border: 'none',
@@ -699,7 +700,6 @@ const styles = (theme) => ({
     margin: 'auto',
     marginLeft: '0',
     marginRight: '5px',
-    width: '30px',
   },
 });
 
-- 
GitLab