mirror of
https://github.com/scottlamb/moonfire-nvr.git
synced 2024-12-26 07:05:56 -05:00
0236ab8d64
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
74 lines
2.1 KiB
JSON
74 lines
2.1 KiB
JSON
{
|
|
"name": "ui",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"dependencies": {
|
|
"@emotion/react": "^11.1.5",
|
|
"@emotion/styled": "^11.1.5",
|
|
"@fontsource/roboto": "^4.2.1",
|
|
"@material-ui/core": "^5.0.0-alpha.26",
|
|
"@material-ui/icons": "^5.0.0-alpha.26",
|
|
"@material-ui/lab": "^5.0.0-alpha.26",
|
|
"@react-hook/resize-observer": "^1.2.0",
|
|
"@types/jest": "^26.0.20",
|
|
"@types/node": "^14.14.22",
|
|
"@types/react": "^17.0.0",
|
|
"@types/react-dom": "^17.0.0",
|
|
"date-fns": "^2.18.0",
|
|
"date-fns-tz": "^1.1.3",
|
|
"gzipper": "^4.4.0",
|
|
"react": "^17.0.1",
|
|
"react-dom": "^17.0.1",
|
|
"react-scripts": "4.0.1",
|
|
"typescript": "^4.1.3"
|
|
},
|
|
"scripts": {
|
|
"start": "react-scripts start",
|
|
"build": "react-scripts build && gzipper compress --exclude=png,woff2 --remove-larger ./build",
|
|
"test": "react-scripts test",
|
|
"eject": "react-scripts eject",
|
|
"format": "prettier --write src/ public/",
|
|
"check-format": "prettier --check src/ public/",
|
|
"lint": "eslint src"
|
|
},
|
|
"eslintConfig": {
|
|
"extends": [
|
|
"react-app",
|
|
"react-app/jest"
|
|
],
|
|
"rules": {
|
|
"no-restricted-imports": [
|
|
"error",
|
|
{
|
|
"name": "@material-ui/core",
|
|
"message": "Please use the 'import Button from \"material-ui/core/Button\";' style instead; see https://material-ui.com/guides/minimizing-bundle-size/#option-1"
|
|
},
|
|
{
|
|
"name": "@material-ui/icons",
|
|
"message": "Please use the 'import MenuIcon from \"material-ui/icons/Menu\";' style instead; see https://material-ui.com/guides/minimizing-bundle-size/#option-1"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
"browserslist": {
|
|
"production": [
|
|
">0.2%",
|
|
"not dead",
|
|
"not op_mini all"
|
|
],
|
|
"development": [
|
|
"last 1 chrome version",
|
|
"last 1 firefox version",
|
|
"last 1 safari version"
|
|
]
|
|
},
|
|
"devDependencies": {
|
|
"@testing-library/jest-dom": "^5.11.4",
|
|
"@testing-library/react": "^11.1.0",
|
|
"@testing-library/user-event": "^12.6.3",
|
|
"http-proxy-middleware": "^1.0.6",
|
|
"msw": "^0.26.1",
|
|
"prettier": "2.2.1"
|
|
}
|
|
}
|