Update to React 19

eslint.config.js

@@ -12,6 +12,7 @@ export default [
     rules: {
       // // TODO: We want to turn these on eventually
       "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/no-unnecessary-type-assertion": "off",
     },
   },
 ];

package.json

@@ -6,45 +6,43 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource-variable/roboto-flex": "^5.2.6",
-    "@iarna/toml": "^2.2.5",
-    "@mui/material": "^6.4.1",
-    "@opencast/appkit": "^0.4.0",
+    "@fontsource-variable/roboto-flex": "^5.2.8",
+    "@mui/material": "^9.0.1",
+    "@opencast/appkit": "^0.5.0",
     "@reduxjs/toolkit": "^2.8.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
-    "final-form": "^4.20.10",
-    "i18next": "^25.3.2",
+    "i18next": "^26.2.0",
     "i18next-browser-languagedetector": "^8.2.0",
-    "i18next-chained-backend": "^4.6.2",
+    "i18next-chained-backend": "^5.0.4",
     "i18next-resources-to-backend": "^1.2.1",
     "lodash": "^4.17.21",
     "luxon": "^3.6.1",
-    "mui-rff": "^8.0.4",
-    "react": "^18.2.0",
-    "react-beforeunload": "^2.6.0",
+    "react": "^19.2.6",
+    "react-beforeunload": "^2.7.0",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.6",
     "react-draggable": "^4.5.0",
-    "react-final-form": "^6.5.9",
     "react-hotkeys-hook": "^5.2.1",
-    "react-i18next": "^15.4.0",
+    "react-i18next": "^17.0.8",
     "react-icons": "^5.5.0",
     "react-indiana-drag-scroll": "^2.2.1",
-    "react-player": "git+https://arnei@github.com/Arnei/react-player.git#b441d7aafe9b98745318103d9c93872a3ffc5da9",
+    "react-player": "^3.4.0",
     "react-redux": "^9.2.0",
-    "react-resizable": "^3.0.5",
+    "react-resizable": "^4.0.1",
     "react-select": "^5.10.1",
-    "react-virtualized-auto-sizer": "^1.0.26",
-    "react-window": "^1.8.11",
+    "react-virtualized-auto-sizer": "^2.0.3",
+    "react-window": "^2.2.7",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "smol-toml": "^1.4.0",
     "standardized-audio-context": "^25.3.77",
-    "typescript": "^5.8.3",
-    "uuid": "^11.0.5",
+    "typescript": "^6.0.3",
+    "usehooks-ts": "^3.1.1",
+    "uuid": "^14.0.0",
     "webvtt-parser": "^2.2.0"
   },
   "scripts": {
@@ -71,18 +69,14 @@
     "@playwright/test": "^1.53.2",
     "@types/lodash": "^4.17.19",
     "@types/luxon": "^3.6.2",
+    "@types/node": "^25.9.1",
     "@types/react-beforeunload": "^2.1.5",
-    "@types/react-resizable": "^3.0.8",
-    "@types/react-virtualized-auto-sizer": "^1.0.4",
-    "@types/react-window": "^1.8.8",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^6.0.2",
     "eslint": "^9.30.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^29.1.1",
     "typescript-eslint": "^8.35.1",
-    "use-resize-observer": "^9.1.0",
-    "vite": "^7.0.6",
-    "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^3.2.4"
+    "vite": "^8.0.13",
+    "vite-plugin-svgr": "^5.2.0",
+    "vitest": "^4.1.6"
   }
 }

src/cssStyles.tsx

@@ -339,48 +339,59 @@ export const subtitleSelectStyle = (theme: Theme) => createTheme({
         },
       },
     },
-    /* Labelborder */
+
+    /* Input / Border */
     MuiOutlinedInput: {
       styleOverrides: {
-        notchedOutline: {
-          border: `${theme.dropdown_border} !important`,
-        },
-      },
-    },
-    /* Selectfield/Inputfield with Icon */
-    MuiSelect: {
-      styleOverrides: {
-        select: {
-          background: `${theme.element_bg}`,
-          color: `${theme.text} !important`,
+        root: {
+          backgroundColor: theme.element_bg,
+          color: theme.text,
+
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: theme.dropdown_border,
+          },
+
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            border: theme.dropdown_border,
+          },
+
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            border: theme.dropdown_border,
+          },
         },
-        icon: {
-          color: `${theme.indicator_color}`,
+
+        input: {
+          color: theme.text,
         },
       },
     },
 
-    /* Dropdownlist */
-    MuiMenu: {
+    MuiAutocomplete: {
       styleOverrides: {
-        list: {
-          background: `${theme.background}`,
-          color: `${theme.text}`,
-          border: `${theme.dropdown_border}`,
+        // Dropdown icons
+        popupIndicator: {
+          color: theme.indicator_color,
         },
-      },
-    },
-    /* Dropdownlist: Single entry */
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          "&:hover, &.Mui-selected:hover": {
-            color: `${theme.focus_text}`,
-            background: `${theme.focused}`,
-          },
-          "&.Mui-selected": {
-            color: `${theme.selected_text}`,
-            background: `${theme.selected}`,
+        clearIndicator: {
+          color: theme.indicator_color,
+        },
+        // Dropdown container
+        paper: {
+          backgroundColor: theme.background,
+          color: theme.text,
+          border: theme.dropdown_border,
+        },
+        // Options wrapper
+        listbox: {
+          backgroundColor: theme.background,
+        },
+        // Single option
+        option: {
+          color: theme.text,
+
+          "&.Mui-focused": {
+            color: theme.focus_text,
+            backgroundColor: theme.focused,
           },
         },
       },

src/main/CuttingActions.tsx

@@ -78,7 +78,7 @@ const CuttingActions: React.FC<{
     action: ActionCreatorWithoutPayload<string> | undefined,
     actionWithPayload?: PayloadActionCreator<T, string>,
     payload?: T,
-    ref?: React.RefObject<HTMLButtonElement>,
+    ref?: React.RefObject<HTMLButtonElement | null>,
   ) => {
     if (action) {
       dispatch(action());
@@ -296,7 +296,7 @@ interface cuttingActionsButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLButtonElement>,
+    ref?: React.RefObject<HTMLButtonElement | null>,
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
@@ -344,7 +344,7 @@ interface markAsDeleteButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLButtonElement>
+    ref?: React.RefObject<HTMLButtonElement | null>
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   hotKeyName: string,

src/main/Header.tsx

@@ -1,5 +1,5 @@
 
-import React from "react";
+import React, { JSX } from "react";
 import { useAppSelector } from "../redux/store";
 import { useTheme } from "../themes";
 

src/main/KeyboardControls.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { JSX } from "react";
 import { css } from "@emotion/react";
 import { ParseKeys } from "i18next";
 import { useTranslation, Trans } from "react-i18next";
@@ -292,7 +292,7 @@ const KeyboardControls: React.FC = () => {
 };
 
 const ChangeHotkeyModal: React.FC<{
-  modalRef: React.RefObject<ModalHandle>,
+  modalRef: React.RefObject<ModalHandle | null>,
   keys: Set<string>,
   stop: () => void
   group: string,
@@ -393,7 +393,7 @@ const ChangeHotkeyModal: React.FC<{
 };
 
 const DeleteHotkeyModal: React.FC<{
-  modalRef: React.RefObject<ModalHandle>,
+  modalRef: React.RefObject<ModalHandle | null>,
   group: string,
   action: string,
   actionTitle: string,