feat: Timeline UI (#2830)

.gitignore

@@ -14,3 +14,4 @@ web/build
 web/node_modules
 web/coverage
 core
+!/web/**/*.ts

docs/docs/configuration/user_interface.md

@@ -0,0 +1,15 @@
+---
+id: user_interface
+title: User Interface Configurations
+---
+
+### Experimental UI
+
+While developing and testing new components, users may decide to opt-in to test potential new features on the front-end.
+
+```yaml
+ui:
+ use_experimental: true
+```
+
+Note that experimental changes may contain bugs or may be removed at any time in future releases of the software. Use of these features are presented as-is and with no functional guarantee.

frigate/config.py

@@ -43,6 +43,8 @@ class DetectorConfig(FrigateBaseModel):
  device: str = Field(default="usb", title="Device Type")
  num_threads: int = Field(default=3, title="Number of detection threads")
 
+class UIConfig(FrigateBaseModel):
+ use_experimental: bool = Field(default=False, title="Experimental UI")
 
 class MqttConfig(FrigateBaseModel):
  host: str = Field(title="MQTT Host")
@@ -709,6 +711,7 @@ class FrigateConfig(FrigateBaseModel):
  environment_vars: Dict[str, str] = Field(
  default_factory=dict, title="Frigate environment variables."
  )
+ ui: UIConfig = Field(default_factory=UIConfig, title="UI configuration.")
  model: ModelConfig = Field(
  default_factory=ModelConfig, title="Detection model configuration."
  )

web/.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
  'prettier',
  'preact',
  'plugin:import/react',
+ 'plugin:import/typescript',
  'plugin:testing-library/recommended',
  'plugin:jest/recommended',
  ],
@@ -137,4 +138,20 @@ module.exports = {
  },
  },
  },
+
+ overrides: [
+ {
+ files: ['*.{ts,tsx}'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['@typescript-eslint'],
+ extends: ['plugin:@typescript-eslint/recommended'],
+ settings: {
+ 'import/resolver': {
+ node: {
+ extensions: ['.ts', '.tsx'],
+ },
+ },
+ },
+ },
+ ],
 };

web/babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
- presets: ['@babel/preset-env'],
+ presets: ['@babel/preset-env', ['@babel/typescript', { jsxPragma: 'h' }]],
  plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'h' }]],
 };

web/jsconfig.json

@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "target": "ES2019",
+ "jsx": "preserve",
+ "jsxFactory": "h",
+ "jsxFragmentFactory": "Fragment",
+ }
+}