LoadingButton was merged into the core Button component in MUI v7.
Replace all usages and remove the @mui/lab dependency entirely.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove @babel/core, @babel/preset-env, @babel/preset-react,
@babel/preset-typescript (Vite uses SWC via @vitejs/plugin-react-swc),
http-proxy-middleware (Vite has built-in proxy), and ts-node (unused).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
React 19:
- Replace JSX.Element with React.JSX.Element (namespace moved)
- Update RefObject types to include null
- Remove forwardRef from FullScreenVideo (ref is a regular prop now)
- Fix snackbar test to use await act() for fake timer advancement
testing-library:
- @testing-library/dom 8 → 10
- @testing-library/react 13 → 16
- Use ReactNode instead of ReactElement in testutil
react-router:
- Rename react-router-dom → react-router (package consolidated in v7)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The default trailingComma changed from "es5" to "all", so many files
are reformatted with trailing commas in more positions.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump @emotion/react, @emotion/styled, react-hook-form,
@testing-library/jest-dom, msw, eslint-plugin-react, and
@testing-library/user-event within their current major versions.
Fix App.test.tsx race condition exposed by msw 2.12: wait for the
fetch error to render before test cleanup aborts the request.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
...to:
* 20 (maintenance LTS)
* 22 (maintenance LTS)
* 24 (active LTS release)
* 25 (current non-LTS release)
And address some "realm mismatch" problems in tests:
* It was using `AbortSignal` from `jsdom`'s realm, `fetch` from the Node
native `fetch`. Node 24 upgraded to undici v7 with stricter Fetch spec
compliance, which complained about this.
* It was doing `instanceof` checks from `myfetch` which failed for
similar reasons.
by updating vitest (see <https://github.com/vitest-dev/vitest/issues/8374>) and simplifying the `api.ts` checking.
Along the way, give error messages like `POST /api/login failed; see browser console` rather than the unhelpful `TypeError: Failed to fetch`.
In the upgrade I managed to dust off some tests that I'd been skipping
for quite a while. It turns out one of them was pointing out a real
problem: in the network error case, we didn't display the error to the
user properly. It's really sad this reaches our code as a `TypeError`,
but it is what it is.
* update `msw` 0.49 -> 1.x. (2.x is out now, but small steps.)
* wrap some `jest.{runOnlyPendingTimers,advanceTimersByTime}` calls
in `act`.
* extend a timeout that had no slack at all
No problems seen so far.
msw version 0.46.0 is advertised as supporting ts v4.8, so I updated
them together, even though tests seemed to pass without the msw update.
I was struggling to upgrade the version of mui stuff (material and date
picker). I'm hoping getting rid of the deprecated stuff eases this a
bit.
I don't love that I can't just use sx on plain HTML stuff and have to
wrap it in Box, but oh well. Looks like I'm not alone, fwiw.
https://github.com/mui/material-ui/issues/23220
I had to disable more of the Login tests to get this to work.
Frustrating, but I just can't figure out how to fake jest timers,
msw, and the testing libraries to all get along anymore.
This requires a bunch of package name changes. See
[https://mui.com/blog/material-ui-is-now-mui/] for their rationale.
[https://mui.com/guides/migration-v4/] lists the changes:
```
@material-ui/core -> @mui/material
@material-ui/system -> @mui/system
@material-ui/unstyled -> @mui/core
@material-ui/styles -> @mui/styles
@material-ui/icons -> @mui/icons-material
@material-ui/lab -> @mui/lab
@material-ui/types -> @mui/types
@material-ui/styled-engine -> @mui/styled-engine
@material-ui/styled-engine-sc ->@mui/styled-engine-sc
@material-ui/private-theming -> @mui/private-theming
@material-ui/codemod -> @mui/codemod
@material-ui/docs -> @mui/docs
@material-ui/envinfo -> @mui/envinfo
```
We only use a few of these.
This worked fine on my workstation with node 12. But on CI or my laptop
with node 14, it failed. Apparently there @testing-library/user-events
expects a peer @testing-library/dom dependency. At least copying the
"npm install --save-dev @testing-library/user-event @testing-library/dom" command
from the top of https://testing-library.com/docs/ecosystem-user-event/
made it work again on my laptop; fingers crossed about CI.
This is a surprisingly complex upgrade. Some relevant changes from
[their CHANGELOG](https://github.com/mui-org/material-ui/blob/v5.0.0-beta.3/CHANGELOG.md):
* @material-ui/core/styles no longer re-exports some stuff from
@material-ui/styles
* there's no more defaultTheme, so tests need to provide one
* select's onChange has a new type; match that. I haven't actually
tried that the string form (apparently from autofill) works correctly.
* checkboxes no longer default to the secondary color; explicitly
request this in some places.
* checkbox no longer has a checked argument; use event.target.checked
instead.
* date pickers have switched to the new style system, so I had to
redo how I was overridding their spacing for desktop.
* LoadingButton now has a loading property, not pending
* createMuiTheme is no createTheme
It's a start. It can display several streams at once, which is nice.
There are lots of opportunities for improvement:
* it doesn't keep the videos approximately in sync.
* it accumulates extra buffering, drifting behind live. This is
particularly noticeable when it's paused and played again; it can
be several seconds before it jumps to after the break.
* it always uses the sub stream rather main. I'd prefer it support
"auto" (use main if the viewport is larger than the sub stream and
there's sufficient bandwidth), "main", or "sub".
* it has a kludgy heuristic where it throws away everything buffered 5
seconds before the current timestamp. It should throw away
everything before the current GOP instead, but I need to alter the
API so it can easily know when that is.
* it can't tell you when a camera connection is down. This needs an
API change also.
* it'd be nice to quickly double-click on a stream to view only it,
then double-click again to go back to the multi-pane view.
* it doesn't allow you to zoom in on part of the video. This would be
nice particularly when viewing 4k video streams on small screens.
* it has only four preconfigured layouts that subdivide a 16x9
viewport. You have to choose every camera every time. It'd be nice
to both allow more flexibility and have more memory.
React prototype: #111
live stream: #59
(and various other lockfile upgrades. "npm audit" is clean.)
The date picker to use with 4.0 is unmaintained, and the new one is
apparently quite different.
Given that 5.0 is expected to be released this quarter, I prefer to
jump straight to the new one and get things working with it, even if
it means using an alpha in the short-term.
Besides being more clear about what belongs to which, this helps with
docker caching. The server and ui parts are only rebuilt when their
respective subdirectories change.
Extend this a bit further by making the webpack build not depend on
the target architecture. And adding cache dirs so parts of the server
and ui build process can be reused when layer-wide caching fails.
Scott LambandClaude Opus 4.6
michioxd
dependabot[bot]
Damian Krysta