Feat : Control streamer

packages/web/src/components/AgentSettings.tsx

@@ -1,5 +1,10 @@
 import { useState } from 'react';
-import type { AgentAction, AgentView, WatchSettings } from '@stream-control/shared';
+import type {
+  AgentAction,
+  AgentView,
+  BrowserSettings,
+  WatchSettings,
+} from '@stream-control/shared';
 import { api } from '../api';
 
 interface Props {
@@ -20,6 +25,11 @@ export function AgentSettings({ agent, onClose, onCommand, notify }: Props) {
   const [token, setToken] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
   const [watch, setWatch] = useState<WatchSettings>(agent.watch);
+  const [browser, setBrowser] = useState<BrowserSettings>(agent.browser);
+
+  function patchBrowser(patch: Partial<BrowserSettings>) {
+    setBrowser((current) => ({ ...current, ...patch }));
+  }
 
   function patchWatch(patch: Partial<WatchSettings>) {
     setWatch((current) => ({ ...current, ...patch }));
@@ -38,6 +48,7 @@ export function AgentSettings({ agent, onClose, onCommand, notify }: Props) {
         autoConnectObs: autoConnect,
         obs: { host, port: Number(port), password },
         watch,
+        browser,
       } as Partial<AgentView>);
       notify('Configuration enregistrée');
       onClose();
@@ -139,6 +150,72 @@ export function AgentSettings({ agent, onClose, onCommand, notify }: Props) {
             </button>
           </div>
 
+          <fieldset className="group">
+            <legend>Pilotage du navigateur</legend>
+
+            <label className="checkbox">
+              <input
+                type="checkbox"
+                checked={browser.enabled}
+                onChange={(event) => patchBrowser({ enabled: event.target.checked })}
+              />
+              <span>
+                Ouvrir la page du streamer et passer en plein écran automatiquement
+              </span>
+            </label>
+
+            <div className="row">
+              <label className="field grow">
+                <span>Commande du navigateur</span>
+                <input
+                  value={browser.command}
+                  onChange={(event) => patchBrowser({ command: event.target.value })}
+                  placeholder="firefox"
+                />
+              </label>
+              <label className="field grow">
+                <span>Arguments (séparés par des espaces)</span>
+                <input
+                  value={browser.args.join(' ')}
+                  onChange={(event) =>
+                    patchBrowser({ args: event.target.value.split(/\s+/).filter(Boolean) })
+                  }
+                  placeholder="--new-window"
+                />
+              </label>
+            </div>
+
+            <div className="row">
+              <label className="field grow">
+                <span>Délai avant le plein écran (s)</span>
+                <input
+                  value={String(Math.round(browser.readyDelayMs / 1000))}
+                  onChange={(event) =>
+                    patchBrowser({ readyDelayMs: (Number(event.target.value) || 0) * 1000 })
+                  }
+                  inputMode="numeric"
+                />
+                <span className="muted small">
+                  Le temps que la page charge et que le lecteur démarre.
+                </span>
+              </label>
+            </div>
+
+            <label className="checkbox">
+              <input
+                type="checkbox"
+                checked={browser.closeOnStop}
+                onChange={(event) => patchBrowser({ closeOnStop: event.target.checked })}
+              />
+              <span>Fermer la fenêtre à l'arrêt de l'enregistrement</span>
+            </label>
+
+            <p className="muted small">
+              La touche et le titre de fenêtre utilisés pour le plein écran sont ceux
+              configurés ci-dessous, dans « Surveillance du stream ».
+            </p>
+          </fieldset>
+
           <fieldset className="group">
             <legend>Surveillance du stream</legend>