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/themes/theme-nature.css

@@ -0,0 +1,61 @@
+.theme-nature.light {
+  --background: 58, 65%, 83%;
+  --foreground: 187, 33%, 43%;
+
+  --muted: 70, 20%, 68%;
+  --muted-foreground: 187, 33%, 43%;
+
+  --popover: 58, 65%, 83%;
+  --popover-foreground: 187, 33%, 43%;
+
+  --border: 93, 28%, 56%;
+  --input: 93, 28%, 56%;
+
+  --card: 58, 65%, 83%;
+  --card-foreground: 187, 33%, 43%;
+
+  --primary: 93, 28%, 56%;
+  --primary-foreground: 58, 65%, 83%;
+
+  --secondary: 70, 20%, 68%;
+  --secondary-foreground: 187, 33%, 43%;
+
+  --accent: 70, 20%, 68%;
+  --accent-foreground: 187, 33%, 43%;
+
+  --destructive: 187, 33%, 43%;
+  --destructive-foreground: 58, 65%, 83%;
+
+  --ring: 93, 28%, 56%;
+}
+
+.theme-nature.dark {
+  --background: 187, 33%, 43%;
+  --foreground: 58, 65%, 83%;
+
+  --muted: 70, 20%, 68%;
+  --muted-foreground: 58, 65%, 83%;
+
+  --popover: 187, 33%, 43%;
+  --popover-foreground: 58, 65%, 83%;
+
+  --border: 93, 28%, 56%;
+  --input: 93, 28%, 56%;
+
+  --card: 187, 33%, 43%;
+  --card-foreground: 58, 65%, 83%;
+
+  --primary: 93, 28%, 56%;
+  --primary-foreground: 187, 33%, 43%;
+
+  --secondary: 70, 20%, 68%;
+  --secondary-foreground: 58, 65%, 83%;
+
+  --accent: 70, 20%, 68%;
+  --accent-foreground: 58, 65%, 83%;
+
+  --destructive: 58, 65%, 83%;
+  --destructive-foreground: 187, 33%, 43%;
+
+  --ring: 93, 28%, 56%;
+}