Camera WebUI fixes (blakeblackshear#5010)

* Show jsmpeg when restream is disabled * Fix debug button status not showing correctly when switching cameras * Change label to make clear only motion masks are shown
Sammy1Am · Jan 11, 2023 · 3edbb8d · 3edbb8d
1 parent 581c259
commit 3edbb8d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/web/src/components/ButtonsTabbed.jsx b/web/src/components/ButtonsTabbed.jsx
@@ -3,13 +3,14 @@ import { useCallback, useState } from 'preact/hooks';
 
 export default function ButtonsTabbed({
  viewModes = [''],
+ currentViewMode = '',
  setViewMode = null,
  setHeader = null,
  headers = [''],
  className = 'text-gray-600 py-0 px-4 block hover:text-gray-500',
  selectedClassName = `${className} focus:outline-none border-b-2 font-medium border-gray-500`,
 }) {
- const [selected, setSelected] = useState(0);
+ const [selected, setSelected] = useState(viewModes ? viewModes.indexOf(currentViewMode) : 0);
  const captitalize = (str) => {
  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
  };

diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
@@ -30,7 +30,7 @@ export default function Camera({ camera }) {
  ? Math.round(cameraConfig.restream.jsmpeg.height * (cameraConfig.detect.width / cameraConfig.detect.height))
  : 0;
  const [viewSource, setViewSource, sourceIsLoaded] = usePersistence(`${camera}-source`, 'mse');
- const sourceValues = cameraConfig && cameraConfig.restream.enabled ? ['mse', 'webrtc', 'jsmpeg'] : ['mse'];
+ const sourceValues = cameraConfig && cameraConfig.restream.enabled ? ['mse', 'webrtc', 'jsmpeg'] : ['jsmpeg'];
  const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
 
  const handleSetOption = useCallback(
@@ -77,7 +77,7 @@ export default function Camera({ camera }) {
  labelPosition="after"
  />
  <Switch checked={options['zones']} id="zones" onChange={handleSetOption} label="Zones" labelPosition="after" />
- <Switch checked={options['mask']} id="mask" onChange={handleSetOption} label="Masks" labelPosition="after" />
+ <Switch checked={options['mask']} id="mask" onChange={handleSetOption} label="Motion Masks" labelPosition="after" />
  <Switch
  checked={options['motion']}
  id="motion"
@@ -98,7 +98,7 @@ export default function Camera({ camera }) {
 
  let player;
  if (viewMode === 'live') {
- if (viewSource == 'mse') {
+ if (viewSource == 'mse' && cameraConfig.restream.enabled) {
  if (videojs.browser.IS_IOS) {
  player = (
  <Fragment>
@@ -116,7 +116,7 @@ export default function Camera({ camera }) {
  </Fragment>
  );
  }
- } else if (viewSource == 'webrtc') {
+ } else if (viewSource == 'webrtc' && cameraConfig.restream.enabled) {
  player = (
  <Fragment>
  <div className="max-w-5xl">
@@ -170,7 +170,7 @@ export default function Camera({ camera }) {
  </select>
  </div>
 
- <ButtonsTabbed viewModes={['live', 'debug']} setViewMode={setViewMode} />
+ <ButtonsTabbed viewModes={['live', 'debug']} currentViewMode={viewMode} setViewMode={setViewMode} />
 
  {player}