mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-11 05:35:25 +03:00
Merge branch 'blakeblackshear:dev' into dev
This commit is contained in:
Remon Nashid
GitHub
commit
7440f4b5cf
@ -77,6 +77,8 @@ def events():
|
||||
min_length = request.args.get("min_length", type=float)
|
||||
max_length = request.args.get("max_length", type=float)
|
||||
|
||||
sort = request.args.get("sort", type=str)
|
||||
|
||||
clauses = []
|
||||
|
||||
selected_columns = [
|
||||
@ -219,10 +221,22 @@ def events():
|
||||
if len(clauses) == 0:
|
||||
clauses.append((True))
|
||||
|
||||
if sort:
|
||||
if sort == "score_asc":
|
||||
order_by = Event.data["score"].asc()
|
||||
elif sort == "score_desc":
|
||||
order_by = Event.data["score"].desc()
|
||||
elif sort == "date_asc":
|
||||
Event.start_time.asc()
|
||||
elif sort == "date_desc":
|
||||
Event.start_time.desc()
|
||||
else:
|
||||
order_by = Event.start_time.desc()
|
||||
|
||||
events = (
|
||||
Event.select(*selected_columns)
|
||||
.where(reduce(operator.and_, clauses))
|
||||
.order_by(Event.start_time.desc())
|
||||
.order_by(order_by)
|
||||
.limit(limit)
|
||||
.dicts()
|
||||
.iterator()
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
"""Configure and control camera via onvif."""
|
||||
|
||||
import logging
|
||||
import site
|
||||
from enum import Enum
|
||||
from importlib.util import find_spec
|
||||
from pathlib import Path
|
||||
|
||||
import numpy
|
||||
from onvif import ONVIFCamera, ONVIFError
|
||||
@ -50,10 +51,7 @@ class OnvifController:
|
||||
cam.onvif.port,
|
||||
cam.onvif.user,
|
||||
cam.onvif.password,
|
||||
wsdl_dir=site.getsitepackages()[0].replace(
|
||||
"dist-packages", "site-packages"
|
||||
)
|
||||
+ "/wsdl",
|
||||
wsdl_dir=Path(find_spec("onvif").origin).parent / "../wsdl",
|
||||
),
|
||||
"init": False,
|
||||
"active": False,
|
||||
|
||||
192
web/package-lock.json
generated
192
web/package-lock.json
generated
@ -34,10 +34,10 @@
|
||||
"clsx": "^2.1.0",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"date-fns": "^3.6.0",
|
||||
"hls.js": "^1.5.7",
|
||||
"hls.js": "^1.5.8",
|
||||
"idb-keyval": "^6.2.1",
|
||||
"immer": "^10.0.4",
|
||||
"lucide-react": "^0.365.0",
|
||||
"lucide-react": "^0.368.0",
|
||||
"monaco-yaml": "^5.1.1",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18.2.0",
|
||||
@ -45,7 +45,7 @@
|
||||
"react-day-picker": "^8.9.1",
|
||||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.51.2",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-swipeable": "^7.0.1",
|
||||
@ -68,9 +68,9 @@
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@testing-library/jest-dom": "^6.1.5",
|
||||
"@types/node": "^20.12.5",
|
||||
"@types/react": "^18.2.74",
|
||||
"@types/react-dom": "^18.2.24",
|
||||
"@types/node": "^20.12.7",
|
||||
"@types/react": "^18.2.78",
|
||||
"@types/react-dom": "^18.2.25",
|
||||
"@types/react-icons": "^3.0.0",
|
||||
"@types/react-transition-group": "^4.4.10",
|
||||
"@types/strftime": "^0.9.8",
|
||||
@ -93,9 +93,9 @@
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.2.5",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.4",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.8",
|
||||
"vitest": "^1.3.1"
|
||||
"vitest": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
@ -715,9 +715,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/object-schema": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
|
||||
"integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
|
||||
"integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@inquirer/confirm": {
|
||||
@ -2507,9 +2507,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
|
||||
"integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
|
||||
"version": "20.12.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
|
||||
"integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
@ -2522,9 +2522,9 @@
|
||||
"devOptional": true
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.74",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.74.tgz",
|
||||
"integrity": "sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==",
|
||||
"version": "18.2.78",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.78.tgz",
|
||||
"integrity": "sha512-qOwdPnnitQY4xKlKayt42q5W5UQrSHjgoXNVEtxeqdITJ99k4VXJOP3vt8Rkm9HmgJpH50UNU+rlqfkfWOqp0A==",
|
||||
"devOptional": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
@ -2532,9 +2532,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.2.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.24.tgz",
|
||||
"integrity": "sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==",
|
||||
"version": "18.2.25",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz",
|
||||
"integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==",
|
||||
"devOptional": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
@ -2618,6 +2618,58 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/type-utils": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.5.0.tgz",
|
||||
"integrity": "sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/typescript-estree": "7.5.0",
|
||||
"@typescript-eslint/utils": "7.5.0",
|
||||
"debug": "^4.3.4",
|
||||
"ts-api-utils": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || >=20.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^8.56.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz",
|
||||
"integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.4.0",
|
||||
"@types/json-schema": "^7.0.12",
|
||||
"@types/semver": "^7.5.0",
|
||||
"@typescript-eslint/scope-manager": "7.5.0",
|
||||
"@typescript-eslint/types": "7.5.0",
|
||||
"@typescript-eslint/typescript-estree": "7.5.0",
|
||||
"semver": "^7.5.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || >=20.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^8.56.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/parser": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.5.0.tgz",
|
||||
@ -2663,33 +2715,6 @@
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/type-utils": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.5.0.tgz",
|
||||
"integrity": "sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/typescript-estree": "7.5.0",
|
||||
"@typescript-eslint/utils": "7.5.0",
|
||||
"debug": "^4.3.4",
|
||||
"ts-api-utils": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || >=20.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^8.56.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/types": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.5.0.tgz",
|
||||
@ -2755,31 +2780,6 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/utils": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.5.0.tgz",
|
||||
"integrity": "sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.4.0",
|
||||
"@types/json-schema": "^7.0.12",
|
||||
"@types/semver": "^7.5.0",
|
||||
"@typescript-eslint/scope-manager": "7.5.0",
|
||||
"@typescript-eslint/types": "7.5.0",
|
||||
"@typescript-eslint/typescript-estree": "7.5.0",
|
||||
"semver": "^7.5.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || >=20.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^8.56.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/visitor-keys": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.5.0.tgz",
|
||||
@ -2945,9 +2945,9 @@
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.11.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
|
||||
"integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
|
||||
"version": "8.11.3",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
|
||||
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
@ -4476,9 +4476,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/flatted": {
|
||||
"version": "3.2.9",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
|
||||
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
|
||||
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
@ -4622,9 +4622,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/globals": {
|
||||
"version": "13.23.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
|
||||
"integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
|
||||
"version": "13.24.0",
|
||||
"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
|
||||
"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"type-fest": "^0.20.2"
|
||||
@ -4703,9 +4703,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/hls.js": {
|
||||
"version": "1.5.7",
|
||||
"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.7.tgz",
|
||||
"integrity": "sha512-Hnyf7ojTBtXHeOW1/t6wCBJSiK1WpoKF9yg7juxldDx8u3iswrkPt2wbOA/1NiwU4j27DSIVoIEJRAhcdMef/A=="
|
||||
"version": "1.5.8",
|
||||
"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.8.tgz",
|
||||
"integrity": "sha512-hJYMPfLhWO7/7+n4f9pn6bOheCGx0WgvVz7k3ouq3Pp1bja48NN+HeCQu3XCGYzqWQF/wo7Sk6dJAyWVJD8ECA=="
|
||||
},
|
||||
"node_modules/html-encoding-sniffer": {
|
||||
"version": "4.0.0",
|
||||
@ -5279,9 +5279,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.365.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.365.0.tgz",
|
||||
"integrity": "sha512-sJYpPyyzGHI4B3pys+XSFnE4qtSWc68rFnDLxbNNKjkLST5XSx9DNn5+1Z3eFgFiw39PphNRiVBSVb+AL3oKwA==",
|
||||
"version": "0.368.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.368.0.tgz",
|
||||
"integrity": "sha512-soryVrCjheZs8rbXKdINw9B8iPi5OajBJZMJ1HORig89ljcOcEokKKAgGbg3QWxSXel7JwHOfDFUdDHAKyUAMw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
@ -6261,9 +6261,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-hook-form": {
|
||||
"version": "7.51.2",
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
|
||||
"integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
|
||||
"version": "7.51.3",
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.3.tgz",
|
||||
"integrity": "sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==",
|
||||
"engines": {
|
||||
"node": ">=12.22.0"
|
||||
},
|
||||
@ -7284,9 +7284,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tinypool": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.2.tgz",
|
||||
"integrity": "sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==",
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.3.tgz",
|
||||
"integrity": "sha512-Ud7uepAklqRH1bvwy22ynrliC7Dljz7Tm8M/0RBUW+YRa4YHhZ6e4PpgE+fu1zr/WqB1kbeuVrdfeuyIBpy4tw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
@ -7421,9 +7421,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.4.tgz",
|
||||
"integrity": "sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==",
|
||||
"version": "5.4.5",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
|
||||
"integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
|
||||
@ -39,10 +39,10 @@
|
||||
"clsx": "^2.1.0",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"date-fns": "^3.6.0",
|
||||
"hls.js": "^1.5.7",
|
||||
"hls.js": "^1.5.8",
|
||||
"idb-keyval": "^6.2.1",
|
||||
"immer": "^10.0.4",
|
||||
"lucide-react": "^0.365.0",
|
||||
"lucide-react": "^0.368.0",
|
||||
"monaco-yaml": "^5.1.1",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18.2.0",
|
||||
@ -50,7 +50,7 @@
|
||||
"react-day-picker": "^8.9.1",
|
||||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.51.2",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-swipeable": "^7.0.1",
|
||||
@ -73,9 +73,9 @@
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@testing-library/jest-dom": "^6.1.5",
|
||||
"@types/node": "^20.12.5",
|
||||
"@types/react": "^18.2.74",
|
||||
"@types/react-dom": "^18.2.24",
|
||||
"@types/node": "^20.12.7",
|
||||
"@types/react": "^18.2.78",
|
||||
"@types/react-dom": "^18.2.25",
|
||||
"@types/react-icons": "^3.0.0",
|
||||
"@types/react-transition-group": "^4.4.10",
|
||||
"@types/strftime": "^0.9.8",
|
||||
@ -98,8 +98,8 @@
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.2.5",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.4",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.8",
|
||||
"vitest": "^1.3.1"
|
||||
"vitest": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,7 +209,7 @@ type CameraFilterButtonProps = {
|
||||
selectedCameras: string[] | undefined;
|
||||
updateCameraFilter: (cameras: string[] | undefined) => void;
|
||||
};
|
||||
function CamerasFilterButton({
|
||||
export function CamerasFilterButton({
|
||||
allCameras,
|
||||
groups,
|
||||
selectedCameras,
|
||||
@ -227,7 +227,7 @@ function CamerasFilterButton({
|
||||
size="sm"
|
||||
>
|
||||
<FaVideo
|
||||
className={`${selectedCameras?.length == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
className={`${(selectedCameras?.length ?? 0) >= 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
|
||||
@ -92,6 +92,9 @@ export function ThresholdBarGraph({
|
||||
},
|
||||
tooltip: {
|
||||
theme: systemTheme || theme,
|
||||
y: {
|
||||
formatter: (val) => `${val}${unit}`,
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
@ -118,7 +121,7 @@ export function ThresholdBarGraph({
|
||||
min: 0,
|
||||
},
|
||||
} as ApexCharts.ApexOptions;
|
||||
}, [graphId, threshold, systemTheme, theme, formatTime]);
|
||||
}, [graphId, threshold, unit, systemTheme, theme, formatTime]);
|
||||
|
||||
useEffect(() => {
|
||||
ApexCharts.exec(graphId, "updateOptions", options, true, true);
|
||||
@ -190,7 +193,7 @@ export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { LuLoader2 } from "react-icons/lu";
|
||||
|
||||
export default function ActivityIndicator({ size = 30 }) {
|
||||
export default function ActivityIndicator({ className = "w-full", size = 30 }) {
|
||||
return (
|
||||
<div
|
||||
className="w-full flex items-center justify-center"
|
||||
className={`flex items-center justify-center ${className}`}
|
||||
aria-label="Loading…"
|
||||
>
|
||||
<LuLoader2 className="animate-spin" size={size} />
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
import {
|
||||
MutableRefObject,
|
||||
ReactNode,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { MutableRefObject, useEffect, useRef, useState } from "react";
|
||||
import Hls from "hls.js";
|
||||
import { isAndroid, isDesktop, isMobile } from "react-device-detect";
|
||||
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
|
||||
@ -19,7 +13,6 @@ const unsupportedErrorCodes = [
|
||||
];
|
||||
|
||||
type HlsVideoPlayerProps = {
|
||||
children?: ReactNode;
|
||||
videoRef: MutableRefObject<HTMLVideoElement | null>;
|
||||
visible: boolean;
|
||||
currentSource: string;
|
||||
@ -30,7 +23,6 @@ type HlsVideoPlayerProps = {
|
||||
onPlaying?: () => void;
|
||||
};
|
||||
export default function HlsVideoPlayer({
|
||||
children,
|
||||
videoRef,
|
||||
visible,
|
||||
currentSource,
|
||||
@ -83,19 +75,88 @@ export default function HlsVideoPlayer({
|
||||
// controls
|
||||
|
||||
const [isPlaying, setIsPlaying] = useState(true);
|
||||
const [muted, setMuted] = useState(true);
|
||||
const [volume, setVolume] = useState(1.0);
|
||||
const [mobileCtrlTimeout, setMobileCtrlTimeout] = useState<NodeJS.Timeout>();
|
||||
const [controls, setControls] = useState(isMobile);
|
||||
const [controlsOpen, setControlsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDesktop) {
|
||||
return;
|
||||
}
|
||||
|
||||
const callback = (e: MouseEvent) => {
|
||||
if (!videoRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = videoRef.current.getBoundingClientRect();
|
||||
|
||||
if (
|
||||
e.clientX > rect.left &&
|
||||
e.clientX < rect.right &&
|
||||
e.clientY > rect.top &&
|
||||
e.clientY < rect.bottom
|
||||
) {
|
||||
setControls(true);
|
||||
} else {
|
||||
setControls(controlsOpen);
|
||||
}
|
||||
};
|
||||
window.addEventListener("mousemove", callback);
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", callback);
|
||||
};
|
||||
}, [videoRef, controlsOpen]);
|
||||
|
||||
return (
|
||||
<TransformWrapper minScale={1.0}>
|
||||
<VideoControls
|
||||
className="absolute bottom-5 left-1/2 -translate-x-1/2 z-50"
|
||||
video={videoRef.current}
|
||||
isPlaying={isPlaying}
|
||||
show={visible && controls}
|
||||
muted={muted}
|
||||
volume={volume}
|
||||
controlsOpen={controlsOpen}
|
||||
setControlsOpen={setControlsOpen}
|
||||
setMuted={setMuted}
|
||||
playbackRate={videoRef.current?.playbackRate ?? 1}
|
||||
hotKeys={hotKeys}
|
||||
onPlayPause={(play) => {
|
||||
if (!videoRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (play) {
|
||||
videoRef.current.play();
|
||||
} else {
|
||||
videoRef.current.pause();
|
||||
}
|
||||
}}
|
||||
onSeek={(diff) => {
|
||||
const currentTime = videoRef.current?.currentTime;
|
||||
|
||||
if (!videoRef.current || !currentTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
videoRef.current.currentTime = Math.max(0, currentTime + diff);
|
||||
}}
|
||||
onSetPlaybackRate={(rate) =>
|
||||
videoRef.current ? (videoRef.current.playbackRate = rate) : null
|
||||
}
|
||||
/>
|
||||
<TransformComponent
|
||||
wrapperStyle={{
|
||||
position: "relative",
|
||||
display: visible ? undefined : "none",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
wrapperProps={{
|
||||
onClick: isDesktop ? undefined : () => setControls(!controls),
|
||||
}}
|
||||
contentStyle={{
|
||||
width: "100%",
|
||||
height: isMobile ? "100%" : undefined,
|
||||
@ -108,7 +169,8 @@ export default function HlsVideoPlayer({
|
||||
autoPlay
|
||||
controls={false}
|
||||
playsInline
|
||||
muted
|
||||
muted={muted}
|
||||
onVolumeChange={() => setVolume(videoRef.current?.volume ?? 1.0)}
|
||||
onPlay={() => {
|
||||
setIsPlaying(true);
|
||||
|
||||
@ -145,61 +207,6 @@ export default function HlsVideoPlayer({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
onMouseOver={
|
||||
isDesktop
|
||||
? () => {
|
||||
setControls(true);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onMouseOut={
|
||||
isDesktop
|
||||
? () => {
|
||||
setControls(controlsOpen);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onClick={isDesktop ? undefined : () => setControls(!controls)}
|
||||
>
|
||||
<div className={`size-full relative ${visible ? "" : "hidden"}`}>
|
||||
<VideoControls
|
||||
className="absolute bottom-5 left-1/2 -translate-x-1/2"
|
||||
video={videoRef.current}
|
||||
isPlaying={isPlaying}
|
||||
show={controls}
|
||||
controlsOpen={controlsOpen}
|
||||
setControlsOpen={setControlsOpen}
|
||||
playbackRate={videoRef.current?.playbackRate ?? 1}
|
||||
hotKeys={hotKeys}
|
||||
onPlayPause={(play) => {
|
||||
if (!videoRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (play) {
|
||||
videoRef.current.play();
|
||||
} else {
|
||||
videoRef.current.pause();
|
||||
}
|
||||
}}
|
||||
onSeek={(diff) => {
|
||||
const currentTime = videoRef.current?.currentTime;
|
||||
|
||||
if (!videoRef.current || !currentTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
videoRef.current.currentTime = Math.max(0, currentTime + diff);
|
||||
}}
|
||||
onSetPlaybackRate={(rate) =>
|
||||
videoRef.current ? (videoRef.current.playbackRate = rate) : null
|
||||
}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</TransformComponent>
|
||||
</TransformWrapper>
|
||||
);
|
||||
|
||||
@ -14,6 +14,7 @@ import { isCurrentHour } from "@/utils/dateUtil";
|
||||
import { baseUrl } from "@/api/baseUrl";
|
||||
import { isAndroid, isChrome, isMobile } from "react-device-detect";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
|
||||
type PreviewPlayerProps = {
|
||||
className?: string;
|
||||
@ -143,6 +144,8 @@ function PreviewVideoPlayer({
|
||||
|
||||
// initial state
|
||||
|
||||
const [firstLoad, setFirstLoad] = useState(true);
|
||||
|
||||
const initialPreview = useMemo(() => {
|
||||
return cameraPreviews.find(
|
||||
(preview) =>
|
||||
@ -253,6 +256,10 @@ function PreviewVideoPlayer({
|
||||
disableRemotePlayback
|
||||
onSeeked={onPreviewSeeked}
|
||||
onLoadedData={() => {
|
||||
if (firstLoad) {
|
||||
setFirstLoad(false);
|
||||
}
|
||||
|
||||
if (controller) {
|
||||
controller.previewReady();
|
||||
} else {
|
||||
@ -280,6 +287,7 @@ function PreviewVideoPlayer({
|
||||
No Preview Found
|
||||
</div>
|
||||
)}
|
||||
{firstLoad && <Skeleton className="absolute size-full aspect-video" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -427,6 +435,8 @@ function PreviewFramesPlayer({
|
||||
|
||||
// initial state
|
||||
|
||||
const [firstLoad, setFirstLoad] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!controller) {
|
||||
return;
|
||||
@ -441,6 +451,8 @@ function PreviewFramesPlayer({
|
||||
}, [controller]);
|
||||
|
||||
const onImageLoaded = useCallback(() => {
|
||||
setFirstLoad(false);
|
||||
|
||||
if (!controller) {
|
||||
return;
|
||||
}
|
||||
@ -477,6 +489,7 @@ function PreviewFramesPlayer({
|
||||
No Preview Found
|
||||
</div>
|
||||
)}
|
||||
{firstLoad && <Skeleton className="absolute size-full aspect-video" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,7 +8,6 @@ import React, {
|
||||
import { useApiHost } from "@/api";
|
||||
import { isCurrentHour } from "@/utils/dateUtil";
|
||||
import { ReviewSegment } from "@/types/review";
|
||||
import { Slider } from "../ui/slider-no-thumb";
|
||||
import { getIconForLabel } from "@/utils/iconUtil";
|
||||
import TimeAgo from "../dynamic/TimeAgo";
|
||||
import useSWR from "swr";
|
||||
@ -23,6 +22,7 @@ import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
|
||||
import useContextMenu from "@/hooks/use-contextmenu";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
import { NoThumbSlider } from "../ui/slider";
|
||||
|
||||
type PreviewPlayerProps = {
|
||||
review: ReviewSegment;
|
||||
@ -543,7 +543,7 @@ function VideoPreview({
|
||||
>
|
||||
<source src={relevantPreview.src} type={relevantPreview.type} />
|
||||
</video>
|
||||
<Slider
|
||||
<NoThumbSlider
|
||||
ref={sliderRef}
|
||||
className="absolute inset-x-0 bottom-0 z-30"
|
||||
value={[progress]}
|
||||
@ -707,7 +707,7 @@ function InProgressPreview({
|
||||
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
|
||||
onLoad={handleLoad}
|
||||
/>
|
||||
<Slider
|
||||
<NoThumbSlider
|
||||
ref={sliderRef}
|
||||
className="absolute inset-x-0 bottom-0 z-30"
|
||||
value={[key]}
|
||||
|
||||
@ -16,8 +16,8 @@ import {
|
||||
MdVolumeOff,
|
||||
MdVolumeUp,
|
||||
} from "react-icons/md";
|
||||
import { Slider } from "../ui/slider-volume";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
import { VolumeSlider } from "../ui/slider";
|
||||
|
||||
type VideoControls = {
|
||||
volume?: boolean;
|
||||
@ -38,11 +38,14 @@ type VideoControlsProps = {
|
||||
features?: VideoControls;
|
||||
isPlaying: boolean;
|
||||
show: boolean;
|
||||
muted?: boolean;
|
||||
volume?: number;
|
||||
controlsOpen?: boolean;
|
||||
playbackRates?: number[];
|
||||
playbackRate: number;
|
||||
hotKeys?: boolean;
|
||||
setControlsOpen?: (open: boolean) => void;
|
||||
setMuted?: (muted: boolean) => void;
|
||||
onPlayPause: (play: boolean) => void;
|
||||
onSeek: (diff: number) => void;
|
||||
onSetPlaybackRate: (rate: number) => void;
|
||||
@ -53,11 +56,14 @@ export default function VideoControls({
|
||||
features = CONTROLS_DEFAULT,
|
||||
isPlaying,
|
||||
show,
|
||||
muted,
|
||||
volume,
|
||||
controlsOpen,
|
||||
playbackRates = PLAYBACK_RATE_DEFAULT,
|
||||
playbackRate,
|
||||
hotKeys = true,
|
||||
setControlsOpen,
|
||||
setMuted,
|
||||
onPlayPause,
|
||||
onSeek,
|
||||
onSetPlaybackRate,
|
||||
@ -89,18 +95,18 @@ export default function VideoControls({
|
||||
// volume control
|
||||
|
||||
const VolumeIcon = useMemo(() => {
|
||||
if (!video || video?.muted) {
|
||||
if (!volume || volume == 0.0 || muted) {
|
||||
return MdVolumeOff;
|
||||
} else if (video.volume <= 0.33) {
|
||||
} else if (volume <= 0.33) {
|
||||
return MdVolumeMute;
|
||||
} else if (video.volume <= 0.67) {
|
||||
} else if (volume <= 0.67) {
|
||||
return MdVolumeDown;
|
||||
} else {
|
||||
return MdVolumeUp;
|
||||
}
|
||||
// only update when specific fields change
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [video?.volume, video?.muted]);
|
||||
}, [volume, muted]);
|
||||
|
||||
const onKeyboardShortcut = useCallback(
|
||||
(key: string, down: boolean, repeat: boolean) => {
|
||||
@ -116,8 +122,8 @@ export default function VideoControls({
|
||||
}
|
||||
break;
|
||||
case "m":
|
||||
if (down && !repeat && video) {
|
||||
video.muted = !video.muted;
|
||||
if (setMuted && down && !repeat && video) {
|
||||
setMuted(!muted);
|
||||
}
|
||||
break;
|
||||
case " ":
|
||||
@ -150,13 +156,16 @@ export default function VideoControls({
|
||||
className="size-5"
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
video.muted = !video.muted;
|
||||
|
||||
if (setMuted) {
|
||||
setMuted(!muted);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{video.muted == false && (
|
||||
<Slider
|
||||
{muted == false && (
|
||||
<VolumeSlider
|
||||
className="w-20"
|
||||
value={[video.volume]}
|
||||
value={[volume ?? 1.0]}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.02}
|
||||
@ -193,7 +202,11 @@ export default function VideoControls({
|
||||
onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}
|
||||
>
|
||||
{playbackRates.map((rate) => (
|
||||
<DropdownMenuRadioItem key={rate} value={rate.toString()}>
|
||||
<DropdownMenuRadioItem
|
||||
key={rate}
|
||||
className="cursor-pointer"
|
||||
value={rate.toString()}
|
||||
>
|
||||
{rate}x
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import TimelineEventOverlay from "../../overlay/TimelineDataOverlay";
|
||||
import { useApiHost } from "@/api";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
@ -8,7 +7,8 @@ import { Preview } from "@/types/preview";
|
||||
import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
|
||||
import { DynamicVideoController } from "./DynamicVideoController";
|
||||
import HlsVideoPlayer from "../HlsVideoPlayer";
|
||||
import { TimeRange, Timeline } from "@/types/timeline";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
|
||||
/**
|
||||
* Dynamically switches between video playback and scrubbing preview player.
|
||||
@ -45,9 +45,6 @@ export default function DynamicVideoPlayer({
|
||||
const playerRef = useRef<HTMLVideoElement | null>(null);
|
||||
const [previewController, setPreviewController] =
|
||||
useState<PreviewController | null>(null);
|
||||
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
|
||||
undefined,
|
||||
);
|
||||
const controller = useMemo(() => {
|
||||
if (!config || !playerRef.current || !previewController) {
|
||||
return undefined;
|
||||
@ -59,7 +56,7 @@ export default function DynamicVideoPlayer({
|
||||
previewController,
|
||||
(config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
|
||||
isScrubbing ? "scrubbing" : "playback",
|
||||
setFocusedItem,
|
||||
() => {},
|
||||
);
|
||||
// we only want to fire once when players are ready
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@ -81,6 +78,7 @@ export default function DynamicVideoPlayer({
|
||||
// initial state
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
|
||||
const [source, setSource] = useState(
|
||||
`${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
|
||||
);
|
||||
@ -88,8 +86,8 @@ export default function DynamicVideoPlayer({
|
||||
// start at correct time
|
||||
|
||||
useEffect(() => {
|
||||
if (isScrubbing) {
|
||||
setIsLoading(true);
|
||||
if (!isScrubbing) {
|
||||
setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
|
||||
}
|
||||
}, [isScrubbing]);
|
||||
|
||||
@ -137,7 +135,7 @@ export default function DynamicVideoPlayer({
|
||||
setSource(
|
||||
`${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
|
||||
);
|
||||
setIsLoading(true);
|
||||
setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
|
||||
|
||||
controller.newPlayback({
|
||||
recordings: recordings ?? [],
|
||||
@ -162,16 +160,13 @@ export default function DynamicVideoPlayer({
|
||||
playerRef.current?.pause();
|
||||
}
|
||||
|
||||
if (loadingTimeout) {
|
||||
clearTimeout(loadingTimeout);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
}}
|
||||
>
|
||||
{config && focusedItem && (
|
||||
<TimelineEventOverlay
|
||||
timeline={focusedItem}
|
||||
cameraConfig={config.cameras[camera]}
|
||||
/>
|
||||
)}
|
||||
</HlsVideoPlayer>
|
||||
<PreviewPlayer
|
||||
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
|
||||
camera={camera}
|
||||
@ -183,6 +178,9 @@ export default function DynamicVideoPlayer({
|
||||
setPreviewController(previewController);
|
||||
}}
|
||||
/>
|
||||
{isLoading && (
|
||||
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x1/2 -translate-y-1/2" />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-blue-500" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-4 w-16 rounded-full bg-transparent -translate-y-[50%] ring-offset-transparent focus-visible:outline-none focus-visible:ring-transparent disabled:pointer-events-none disabled:opacity-50 cursor-col-resize" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
export { Slider };
|
||||
@ -1,26 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-muted">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-white" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-3 w-3 rounded-full bg-white ring-white focus:ring-white disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
export { Slider };
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
import * as React from "react";
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Slider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
@ -11,7 +11,7 @@ const Slider = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
@ -20,7 +20,68 @@ const Slider = React.forwardRef<
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
))
|
||||
Slider.displayName = SliderPrimitive.Root.displayName
|
||||
));
|
||||
Slider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
export { Slider }
|
||||
const VolumeSlider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-muted">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-white" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-3 w-3 rounded-full bg-white ring-white focus:ring-white disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
VolumeSlider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
const NoThumbSlider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-selected" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block h-4 w-16 rounded-full bg-transparent -translate-y-[50%] ring-offset-transparent focus-visible:outline-none focus-visible:ring-transparent disabled:pointer-events-none disabled:opacity-50 cursor-col-resize" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
NoThumbSlider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
const DualThumbSlider = React.forwardRef<
|
||||
React.ElementRef<typeof SliderPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SliderPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none select-none items-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-selected/60">
|
||||
<SliderPrimitive.Range className="absolute h-full bg-selected" />
|
||||
</SliderPrimitive.Track>
|
||||
<SliderPrimitive.Thumb className="block size-3 rounded-full bg-selected transition-colors cursor-col-resize disabled:pointer-events-none disabled:opacity-50" />
|
||||
<SliderPrimitive.Thumb className="block size-3 rounded-full bg-selected transition-colors cursor-col-resize disabled:pointer-events-none disabled:opacity-50" />
|
||||
</SliderPrimitive.Root>
|
||||
));
|
||||
DualThumbSlider.displayName = SliderPrimitive.Root.displayName;
|
||||
|
||||
export { DualThumbSlider, Slider, NoThumbSlider, VolumeSlider };
|
||||
|
||||
@ -11,6 +11,7 @@ import { FaCopy } from "react-icons/fa6";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { toast } from "sonner";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
|
||||
const logTypes = ["frigate", "go2rtc", "nginx"] as const;
|
||||
type LogType = (typeof logTypes)[number];
|
||||
@ -278,6 +279,9 @@ function Logs() {
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
contentRef.current?.scrollBy({
|
||||
top: 10,
|
||||
});
|
||||
}
|
||||
});
|
||||
if (node) startObserver.current.observe(node);
|
||||
@ -388,7 +392,7 @@ function Logs() {
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden">
|
||||
<div className="relative size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-background_alt border border-secondary rounded-md overflow-hidden">
|
||||
<div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary/40">
|
||||
<div className="p-1 flex items-center capitalize">Type</div>
|
||||
<div className="col-span-2 sm:col-span-1 flex items-center">
|
||||
@ -443,6 +447,9 @@ function Logs() {
|
||||
})}
|
||||
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
|
||||
</div>
|
||||
{logLines.length == 0 && (
|
||||
<ActivityIndicator className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import { baseUrl } from "@/api/baseUrl";
|
||||
import FilterCheckBox from "@/components/filter/FilterCheckBox";
|
||||
import {
|
||||
CamerasFilterButton,
|
||||
GeneralFilterContent,
|
||||
} from "@/components/filter/ReviewFilterGroup";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@ -13,16 +16,25 @@ import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { DualThumbSlider } from "@/components/ui/slider";
|
||||
import { Event } from "@/types/event";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import axios from "axios";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { FaList, FaVideo } from "react-icons/fa";
|
||||
import {
|
||||
FaList,
|
||||
FaSort,
|
||||
FaSortAmountDown,
|
||||
FaSortAmountUp,
|
||||
} from "react-icons/fa";
|
||||
import { PiSlidersHorizontalFill } from "react-icons/pi";
|
||||
import useSWR from "swr";
|
||||
|
||||
export default function SubmitPlus() {
|
||||
@ -36,6 +48,11 @@ export default function SubmitPlus() {
|
||||
|
||||
const [selectedCameras, setSelectedCameras] = useState<string[]>();
|
||||
const [selectedLabels, setSelectedLabels] = useState<string[]>();
|
||||
const [scoreRange, setScoreRange] = useState<number[]>();
|
||||
|
||||
// sort
|
||||
|
||||
const [sort, setSort] = useState<string>();
|
||||
|
||||
// data
|
||||
|
||||
@ -47,6 +64,9 @@ export default function SubmitPlus() {
|
||||
is_submitted: 0,
|
||||
cameras: selectedCameras ? selectedCameras.join(",") : null,
|
||||
labels: selectedLabels ? selectedLabels.join(",") : null,
|
||||
min_score: scoreRange ? scoreRange[0] : null,
|
||||
max_score: scoreRange ? scoreRange[1] : null,
|
||||
sort: sort ? sort : null,
|
||||
},
|
||||
]);
|
||||
const [upload, setUpload] = useState<Event>();
|
||||
@ -104,12 +124,17 @@ export default function SubmitPlus() {
|
||||
|
||||
return (
|
||||
<div className="size-full flex flex-col">
|
||||
<div className="w-full h-16 px-2 flex items-center justify-between overflow-x-auto">
|
||||
<PlusFilterGroup
|
||||
selectedCameras={selectedCameras}
|
||||
setSelectedCameras={setSelectedCameras}
|
||||
selectedLabels={selectedLabels}
|
||||
selectedScoreRange={scoreRange}
|
||||
setSelectedCameras={setSelectedCameras}
|
||||
setSelectedLabels={setSelectedLabels}
|
||||
setSelectedScoreRange={setScoreRange}
|
||||
/>
|
||||
<PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
|
||||
</div>
|
||||
<div className="size-full flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
|
||||
<div className="w-full p-2 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
|
||||
<Dialog
|
||||
@ -178,15 +203,19 @@ const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
|
||||
|
||||
type PlusFilterGroupProps = {
|
||||
selectedCameras: string[] | undefined;
|
||||
setSelectedCameras: (cameras: string[] | undefined) => void;
|
||||
selectedLabels: string[] | undefined;
|
||||
selectedScoreRange: number[] | undefined;
|
||||
setSelectedCameras: (cameras: string[] | undefined) => void;
|
||||
setSelectedLabels: (cameras: string[] | undefined) => void;
|
||||
setSelectedScoreRange: (range: number[] | undefined) => void;
|
||||
};
|
||||
function PlusFilterGroup({
|
||||
selectedCameras,
|
||||
setSelectedCameras,
|
||||
selectedLabels,
|
||||
selectedScoreRange,
|
||||
setSelectedCameras,
|
||||
setSelectedLabels,
|
||||
setSelectedScoreRange,
|
||||
}: PlusFilterGroupProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
@ -217,97 +246,28 @@ function PlusFilterGroup({
|
||||
return [...labels].sort();
|
||||
}, [config, selectedCameras]);
|
||||
|
||||
const [open, setOpen] = useState<"none" | "camera" | "label">("none");
|
||||
const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
|
||||
undefined,
|
||||
const [open, setOpen] = useState<"none" | "camera" | "label" | "score">(
|
||||
"none",
|
||||
);
|
||||
const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
|
||||
undefined,
|
||||
);
|
||||
const [currentScoreRange, setCurrentScoreRange] = useState<
|
||||
number[] | undefined
|
||||
>(undefined);
|
||||
|
||||
const Menu = isMobile ? Drawer : DropdownMenu;
|
||||
const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
|
||||
const Content = isMobile ? DrawerContent : DropdownMenuContent;
|
||||
|
||||
return (
|
||||
<div className="w-full h-16 flex justify-start gap-2 items-center">
|
||||
<Menu
|
||||
open={open == "camera"}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setCurrentCameras(selectedCameras);
|
||||
}
|
||||
setOpen(open ? "camera" : "none");
|
||||
}}
|
||||
>
|
||||
<Trigger asChild>
|
||||
<Button size="sm" className="mx-1 capitalize">
|
||||
<FaVideo className="md:mr-[10px] text-secondary-foreground" />
|
||||
<div className="hidden md:block text-primary">
|
||||
{selectedCameras == undefined
|
||||
? "All Cameras"
|
||||
: `${selectedCameras.length} Cameras`}
|
||||
</div>
|
||||
</Button>
|
||||
</Trigger>
|
||||
<Content className={isMobile ? "max-h-[75dvh]" : ""}>
|
||||
<DropdownMenuLabel className="flex justify-center">
|
||||
Filter Cameras
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<FilterCheckBox
|
||||
isChecked={currentCameras == undefined}
|
||||
label="All Cameras"
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
setCurrentCameras(undefined);
|
||||
}
|
||||
}}
|
||||
<div className="h-full flex justify-start gap-2 items-center">
|
||||
<CamerasFilterButton
|
||||
allCameras={allCameras}
|
||||
groups={[]}
|
||||
selectedCameras={selectedCameras}
|
||||
updateCameraFilter={setSelectedCameras}
|
||||
/>
|
||||
<DropdownMenuSeparator />
|
||||
<div className={isMobile ? "h-auto overflow-y-auto" : ""}>
|
||||
{allCameras.map((item) => (
|
||||
<FilterCheckBox
|
||||
key={item}
|
||||
isChecked={currentCameras?.includes(item) ?? false}
|
||||
label={item.replaceAll("_", " ")}
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
const updatedCameras = currentCameras
|
||||
? [...currentCameras]
|
||||
: [];
|
||||
|
||||
updatedCameras.push(item);
|
||||
setCurrentCameras(updatedCameras);
|
||||
} else {
|
||||
const updatedCameras = currentCameras
|
||||
? [...currentCameras]
|
||||
: [];
|
||||
|
||||
// can not deselect the last item
|
||||
if (updatedCameras.length > 1) {
|
||||
updatedCameras.splice(updatedCameras.indexOf(item), 1);
|
||||
setCurrentCameras(updatedCameras);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="flex justify-center items-center">
|
||||
<Button
|
||||
variant="select"
|
||||
onClick={() => {
|
||||
setSelectedCameras(currentCameras);
|
||||
setOpen("none");
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</div>
|
||||
</Content>
|
||||
</Menu>
|
||||
<Menu
|
||||
open={open == "label"}
|
||||
onOpenChange={(open) => {
|
||||
@ -318,8 +278,14 @@ function PlusFilterGroup({
|
||||
}}
|
||||
>
|
||||
<Trigger asChild>
|
||||
<Button size="sm" className="mx-1 capitalize">
|
||||
<FaList className="md:mr-[10px] text-secondary-foreground" />
|
||||
<Button
|
||||
className="flex items-center gap-2 capitalize"
|
||||
size="sm"
|
||||
variant={selectedLabels == undefined ? "default" : "select"}
|
||||
>
|
||||
<FaList
|
||||
className={`${selectedLabels == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
|
||||
/>
|
||||
<div className="hidden md:block text-primary">
|
||||
{selectedLabels == undefined
|
||||
? "All Labels"
|
||||
@ -328,60 +294,250 @@ function PlusFilterGroup({
|
||||
</Button>
|
||||
</Trigger>
|
||||
<Content className={isMobile ? "max-h-[75dvh]" : ""}>
|
||||
<DropdownMenuLabel className="flex justify-center">
|
||||
Filter Labels
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<FilterCheckBox
|
||||
isChecked={currentLabels == undefined}
|
||||
label="All Labels"
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
setCurrentLabels(undefined);
|
||||
}
|
||||
}}
|
||||
<GeneralFilterContent
|
||||
allLabels={allLabels}
|
||||
selectedLabels={selectedLabels}
|
||||
currentLabels={currentLabels}
|
||||
setCurrentLabels={setCurrentLabels}
|
||||
updateLabelFilter={setSelectedLabels}
|
||||
onClose={() => setOpen("none")}
|
||||
/>
|
||||
<DropdownMenuSeparator />
|
||||
<div className={isMobile ? "h-auto overflow-y-auto" : ""}>
|
||||
{allLabels.map((item) => (
|
||||
<FilterCheckBox
|
||||
key={item}
|
||||
isChecked={currentLabels?.includes(item) ?? false}
|
||||
label={item.replaceAll("_", " ")}
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
const updatedLabels = currentLabels
|
||||
? [...currentLabels]
|
||||
: [];
|
||||
|
||||
updatedLabels.push(item);
|
||||
setCurrentLabels(updatedLabels);
|
||||
} else {
|
||||
const updatedLabels = currentLabels
|
||||
? [...currentLabels]
|
||||
: [];
|
||||
|
||||
// can not deselect the last item
|
||||
if (updatedLabels.length > 1) {
|
||||
updatedLabels.splice(updatedLabels.indexOf(item), 1);
|
||||
setCurrentLabels(updatedLabels);
|
||||
}
|
||||
}
|
||||
</Content>
|
||||
</Menu>
|
||||
<Menu
|
||||
open={open == "score"}
|
||||
onOpenChange={(open) => {
|
||||
setOpen(open ? "score" : "none");
|
||||
}}
|
||||
>
|
||||
<Trigger asChild>
|
||||
<Button
|
||||
className="flex items-center gap-2 capitalize"
|
||||
size="sm"
|
||||
variant={selectedScoreRange == undefined ? "default" : "select"}
|
||||
>
|
||||
<PiSlidersHorizontalFill
|
||||
className={`${selectedScoreRange == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
|
||||
/>
|
||||
<div className="hidden md:block text-primary">
|
||||
{selectedScoreRange == undefined
|
||||
? "Score Range"
|
||||
: `${selectedScoreRange[0] * 100}% - ${selectedScoreRange[1] * 100}%`}
|
||||
</div>
|
||||
</Button>
|
||||
</Trigger>
|
||||
<Content
|
||||
className={`min-w-80 p-2 flex flex-col justify-center ${isMobile ? "gap-2 *:max-h-[75dvh]" : ""}`}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
className="w-12"
|
||||
inputMode="numeric"
|
||||
value={Math.round((currentScoreRange?.at(0) ?? 0.5) * 100)}
|
||||
onChange={(e) =>
|
||||
setCurrentScoreRange([
|
||||
parseInt(e.target.value) / 100.0,
|
||||
currentScoreRange?.at(1) ?? 1.0,
|
||||
])
|
||||
}
|
||||
/>
|
||||
<DualThumbSlider
|
||||
className="w-full"
|
||||
min={0.5}
|
||||
max={1.0}
|
||||
step={0.01}
|
||||
value={currentScoreRange ?? [0.5, 1.0]}
|
||||
onValueChange={setCurrentScoreRange}
|
||||
/>
|
||||
<Input
|
||||
className="w-12"
|
||||
inputMode="numeric"
|
||||
value={Math.round((currentScoreRange?.at(1) ?? 1.0) * 100)}
|
||||
onChange={(e) =>
|
||||
setCurrentScoreRange([
|
||||
currentScoreRange?.at(0) ?? 0.5,
|
||||
parseInt(e.target.value) / 100.0,
|
||||
])
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="p-2 flex justify-evenly items-center">
|
||||
<Button
|
||||
variant="select"
|
||||
onClick={() => {
|
||||
setSelectedLabels(currentLabels);
|
||||
setSelectedScoreRange(currentScoreRange);
|
||||
setOpen("none");
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCurrentScoreRange(undefined);
|
||||
setSelectedScoreRange(undefined);
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</Content>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type PlusSortSelectorProps = {
|
||||
selectedSort?: string;
|
||||
setSelectedSort: (sort: string | undefined) => void;
|
||||
};
|
||||
function PlusSortSelector({
|
||||
selectedSort,
|
||||
setSelectedSort,
|
||||
}: PlusSortSelectorProps) {
|
||||
// menu state
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// sort
|
||||
|
||||
const [currentSort, setCurrentSort] = useState<string>();
|
||||
const [currentDir, setCurrentDir] = useState<string>("desc");
|
||||
|
||||
// components
|
||||
|
||||
const Sort = selectedSort
|
||||
? selectedSort.split("_")[1] == "desc"
|
||||
? FaSortAmountDown
|
||||
: FaSortAmountUp
|
||||
: FaSort;
|
||||
const Menu = isMobile ? Drawer : DropdownMenu;
|
||||
const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
|
||||
const Content = isMobile ? DrawerContent : DropdownMenuContent;
|
||||
|
||||
return (
|
||||
<div className="h-full flex justify-start gap-2 items-center">
|
||||
<Menu
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
setOpen(open);
|
||||
|
||||
if (!open) {
|
||||
const parts = selectedSort?.split("_");
|
||||
|
||||
if (parts?.length == 2) {
|
||||
setCurrentSort(parts[0]);
|
||||
setCurrentDir(parts[1]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trigger asChild>
|
||||
<Button
|
||||
className="flex items-center gap-2 capitalize"
|
||||
size="sm"
|
||||
variant={selectedSort == undefined ? "default" : "select"}
|
||||
>
|
||||
<Sort
|
||||
className={`${selectedSort == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
|
||||
/>
|
||||
<div className="hidden md:block text-primary">
|
||||
{selectedSort == undefined ? "Sort" : selectedSort.split("_")[0]}
|
||||
</div>
|
||||
</Button>
|
||||
</Trigger>
|
||||
<Content
|
||||
className={`p-2 flex flex-col justify-center gap-2 ${isMobile ? "max-h-[75dvh]" : ""}`}
|
||||
>
|
||||
<RadioGroup
|
||||
className={`flex flex-col gap-4 ${isMobile ? "mt-4" : ""}`}
|
||||
onValueChange={(value) => setCurrentSort(value)}
|
||||
>
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<RadioGroupItem
|
||||
className={
|
||||
currentSort == "date"
|
||||
? "from-selected/50 to-selected/90 text-selected bg-selected"
|
||||
: "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
|
||||
}
|
||||
id="date"
|
||||
value="date"
|
||||
/>
|
||||
<Label
|
||||
className="w-full cursor-pointer capitalize"
|
||||
htmlFor="date"
|
||||
>
|
||||
Date
|
||||
</Label>
|
||||
{currentSort == "date" ? (
|
||||
currentDir == "desc" ? (
|
||||
<FaSortAmountDown
|
||||
className="size-5 cursor-pointer"
|
||||
onClick={() => setCurrentDir("asc")}
|
||||
/>
|
||||
) : (
|
||||
<FaSortAmountUp
|
||||
className="size-5 cursor-pointer"
|
||||
onClick={() => setCurrentDir("desc")}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="size-5" />
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<RadioGroupItem
|
||||
className={
|
||||
currentSort == "score"
|
||||
? "from-selected/50 to-selected/90 text-selected bg-selected"
|
||||
: "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
|
||||
}
|
||||
id="score"
|
||||
value="score"
|
||||
/>
|
||||
<Label
|
||||
className="w-full cursor-pointer capitalize"
|
||||
htmlFor="score"
|
||||
>
|
||||
Score
|
||||
</Label>
|
||||
{currentSort == "score" ? (
|
||||
currentDir == "desc" ? (
|
||||
<FaSortAmountDown
|
||||
className="size-5 cursor-pointer"
|
||||
onClick={() => setCurrentDir("asc")}
|
||||
/>
|
||||
) : (
|
||||
<FaSortAmountUp
|
||||
className="size-5 cursor-pointer"
|
||||
onClick={() => setCurrentDir("desc")}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="size-5" />
|
||||
)}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2 flex justify-evenly items-center">
|
||||
<Button
|
||||
variant="select"
|
||||
onClick={() => {
|
||||
setSelectedSort(`${currentSort}_${currentDir}`);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCurrentSort(undefined);
|
||||
setCurrentDir("desc");
|
||||
setSelectedSort(undefined);
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</Content>
|
||||
</Menu>
|
||||
|
||||
@ -364,11 +364,11 @@ export function RecordingView({
|
||||
>
|
||||
<div
|
||||
key={mainCamera}
|
||||
className={
|
||||
className={`relative ${
|
||||
isDesktop
|
||||
? `${mainCameraAspect == "tall" ? "xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
|
||||
? `${mainCameraAspect == "tall" ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
|
||||
: `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
|
||||
}
|
||||
}`}
|
||||
style={{
|
||||
aspectRatio: isDesktop
|
||||
? mainCameraAspect == "tall"
|
||||
|
||||
@ -182,7 +182,7 @@ export default function GeneralMetrics({
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statsIdx + 1, y: stats.gpu });
|
||||
series[key].data.push({ x: statsIdx + 1, y: stats.gpu.slice(0, -1) });
|
||||
});
|
||||
});
|
||||
return Object.keys(series).length > 0 ? Object.values(series) : [];
|
||||
@ -215,7 +215,7 @@ export default function GeneralMetrics({
|
||||
series[key] = { name: key, data: [] };
|
||||
}
|
||||
|
||||
series[key].data.push({ x: statsIdx + 1, y: stats.mem });
|
||||
series[key].data.push({ x: statsIdx + 1, y: stats.mem.slice(0, -1) });
|
||||
});
|
||||
});
|
||||
return Object.values(series);
|
||||
@ -373,7 +373,7 @@ export default function GeneralMetrics({
|
||||
key={series.name}
|
||||
graphId={`${series.name}-gpu`}
|
||||
name={series.name}
|
||||
unit=""
|
||||
unit="%"
|
||||
threshold={GPUUsageThreshold}
|
||||
updateTimes={updateTimes}
|
||||
data={[series]}
|
||||
@ -392,7 +392,7 @@ export default function GeneralMetrics({
|
||||
<ThresholdBarGraph
|
||||
key={series.name}
|
||||
graphId={`${series.name}-mem`}
|
||||
unit=""
|
||||
unit="%"
|
||||
name={series.name}
|
||||
threshold={GPUMemThreshold}
|
||||
updateTimes={updateTimes}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user