refactoring

Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1
 # Build commands:
-# - $VERSION=1.1
+# - $VERSION=1.2
 # - rm build -r -Force ; rm ./node_modules/.cache/babel-loader -r -Force ; yarn build
 # - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "."
 # - docker image push --all-tags oncharterliz/multi-frigate

README.md

@@ -11,7 +11,7 @@
 - Frigate config editor page: Save and restart configuration using JSON schema from the host.
 - Frigate system page: Display camera capture, ffmpeg, and decode stats. Show camera recordings storage stats.
 - Admin pages access control: Restrict access to certain pages for administrators only.
-- OpenID provider authorization using JWT tokens.
+- Keycloak OpenID provider authorization using JWT tokens.
 # Instruction
 Frontend for [Proxy Frigate](https://github.com/NlightN22/frigate-proxy)
  - create file: `docker-compose.yml`
@@ -23,8 +23,9 @@ services:
     image: oncharterliz/multi-frigate:latest
     environment:
       FRIGATE_PROXY: http://localhost:4000
-      OPENID_SERVER: https://server:port/realms/your-realm
+      OPENID_SERVER: https://server:port
       CLIENT_ID: frontend-client
+      REALM: frigate-realm
     ports:
       - 80:80 # set your port here
 ```

src/pages/HostConfigPage.tsx

@@ -33,7 +33,7 @@ window.MonacoEnvironment = {
 }
 
 export const hostConfigPageQuery = {
-  searchWord: 'searchWord ',
+  searchWord: 'searchWord',
 }
 
 const HostConfigPage = () => {

src/widgets/CameraMaskDrawer.tsx

@@ -4,7 +4,6 @@ import { IconMinus, IconPlus } from '@tabler/icons-react'
 import { useQuery } from '@tanstack/react-query'
 import Konva from 'konva'
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Circle, Image, Layer, Line, Stage } from 'react-konva'
 import { proxyApi } from '../services/frigate.proxy/frigate.api'
 import RetryError from '../shared/components/RetryError'
@@ -27,7 +26,7 @@ const CameraMaskDrawer: React.FC<CameraMaskDrawerProps> = ({
   onChange
 }) => {
 
-  const { height, width } = useViewportSize()
+  const { width } = useViewportSize()
   const scaleStep = 0.1
   const [stageScale, setStageScale] = useState<number>(1)