Initial framework for new UI with React/Typescript (#8885)

* Write a low resolution low fps stream from decoded frames (#8673)

* Generate low res low fps previews for recordings viewer

* Make sure previews end on the hour

* Fix durations and decrase keyframe interval to ensure smooth scrubbing

* Ensure minimized resolution is compatible with yuv

* Add ability to configure preview quality

* Fix

* Clean up previews more efficiently

* Use iterator

* Ensure final frame in preview is not duplicated

* initial react/ts framework

* fix gitignore glob excluding ts files

* ignore folders in web-new

* SWRConfig changes for swr 2.x

* use frigateConfig type in websocket handlers

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web-new/vite.config.ts

@@ -0,0 +1,61 @@
+/// <reference types="vitest" />
+import path from "path"
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    'import.meta.vitest': 'undefined',
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        ws: true,
+      },
+      '/vod': {
+        target: 'http://localhost:5000'
+      },
+      '/exports': {
+        target: 'http://localhost:5000'
+      },
+      '/ws': {
+        target: 'ws://localhost:5000',
+        ws: true,
+      },
+      '/live': {
+        target: 'ws://localhost:5000',
+        changeOrigin: true,
+        ws: true,
+      },
+    }
+  },
+  plugins: [
+    react(),
+    monacoEditorPlugin.default({
+      customWorkers: [{ label: 'yaml', entry: 'monaco-yaml/yaml.worker' }],
+      languageWorkers: ['editorWorkerService'], // we don't use any of the default languages
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    alias: {
+      'testing-library': path.resolve(__dirname, './__test__/testing-library.js'),
+    },
+    setupFiles: ['./__test__/test-setup.ts'],
+    includeSource: ['src/**/*.{js,jsx,ts,tsx}'],
+    coverage: {
+      reporter: ['text-summary', 'text'],
+    },
+    mockReset: true,
+    restoreMocks: true,
+    globals: true,
+  },
+})