From de0ea0d7fecb8aa984504eb1b4de8e2a43a09c0c Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Tue, 10 Jan 2023 15:47:25 -0700
Subject: [PATCH] Fix debug button status not showing correctly when switching
 cameras

---
 web/src/components/ButtonsTabbed.jsx | 3 ++-
 web/src/routes/Camera.jsx            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ButtonsTabbed.jsx b/web/src/components/ButtonsTabbed.jsx
index b7318d6bf..e49b9239d 100644
--- 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
index 70f87d161..5681bc269 100644
--- a/web/src/routes/Camera.jsx
+++ b/web/src/routes/Camera.jsx
@@ -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}