@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.32 → 5.0.0-beta.34

package/homebridge-ui/public/i18n/fr.json

@@ -11,6 +11,8 @@
   "advancedFfmpegLabel": "Chemin FFmpeg personnalisé",
   "advancedLiveVideoPassthroughHelp": "Activez cette option si la vidéo en direct ne s’affiche jamais, ou si le journal indique que FFmpeg s’est arrêté avant d’envoyer la vidéo. La vidéo des caméras qui enregistrent en H.264 est alors envoyée telle que la caméra l’a enregistrée, comme dans la version 4, au lieu d’être convertie selon ce que demande l’app Maison.",
   "advancedLiveVideoPassthroughLabel": "Envoyer la vidéo de la caméra sans conversion",
+  "advancedHardwareVideoEncoderHelp": "Utiliser le matériel vidéo de l’ordinateur : désactivez cette option si la vidéo en direct ne fonctionne plus depuis une mise à jour ou s’affiche mal.",
+  "advancedHardwareVideoEncoderLabel": "Encodage vidéo matériel",
   "advancedHdLiveVideoHelp": "Activez cette option si la vidéo en direct paraît floue dans l’app Maison. Les caméras ne proposent alors à l’app Maison que du 720p et du 1080p, aussi en données mobiles et dans la grille des caméras, ce qui consomme plus de données.",
   "advancedHdLiveVideoLabel": "Vidéo en direct toujours en HD",
   "advancedIgnoreHomeBitRateHelp": "Activez cette option si la vidéo en direct est nette quelques secondes, puis floue ou pixelisée. La vidéo est alors convertie à une qualité constante proche de celle de la caméra, au lieu du faible débit demandé par l’app Maison, ce qui utilise plus de bande passante.",
@@ -255,5 +257,31 @@
   "updatePendingManual": "Cette page montre ce que sait faire la version en cours. Redémarrez Homebridge pour utiliser la version installée.",
   "updatePendingSummary": "Cette page montre ce que sait faire la version en cours. Redémarrez pour utiliser la version installée.",
   "updatePendingTitle": "Une mise à jour attend",
-  "updatePendingVersionLabel": "Version en cours"
+  "updatePendingVersionLabel": "Version en cours",
+  "menuWizard": "Assistant de configuration",
+  "closeWizard": "Retour aux appareils",
+  "wizardTitle": "Assistant de configuration",
+  "wizardProgress": "Appareil {current} sur {total}",
+  "wizardRestartSummary": "Redémarrez Homebridge pour connecter vos caméras. Cet assistant s’ouvrira de lui-même une fois le plugin lancé, pour passer chaque appareil en revue avec vous.",
+  "wizardBack": "Retour",
+  "wizardNext": "Suivant",
+  "wizardFinish": "Terminer",
+  "wizardClose": "Fermer",
+  "wizardLiveStarting": "Connexion à la caméra. Cela peut prendre jusqu’à 30 secondes.",
+  "wizardLiveFailed": "La caméra n’a pas envoyé de vidéo. Vérifiez qu’elle est allumée et en ligne, puis réessayez.",
+  "wizardEufySettings": "Réglages de la caméra dans l’app eufy",
+  "wizardMotionDetection": "Détection de mouvement",
+  "wizardNightVision": "Vision nocturne",
+  "wizardNotificationStyle": "Style de notification",
+  "wizardSettingSending": "Envoi à la caméra…",
+  "wizardSettingSent": "Envoyé. La caméra le confirme d’ici quelques minutes.",
+  "wizardSettingFailed": "La caméra n’a pas pris le changement. Réessayez.",
+  "wizardLivePlay": "Lancer la vidéo en direct",
+  "wizardLiveStop": "Arrêter la vidéo en direct",
+  "wizardHomeKitTitle": "Dans l’app Maison",
+  "wizardHomeKitHelp": "Ce que l’app Maison montre de cet appareil et comment il s’y comporte. Enregistré avec les réglages du plugin.",
+  "wizardEufyHelp": "Envoyé à la caméra elle-même, les mêmes réglages que dans l’app eufy.",
+  "wizardMapLabel": "Vos appareils",
+  "wizardMapBase": "HomeBase",
+  "wizardMapStandalone": "Autonomes"
 }

package/homebridge-ui/public/index.html

@@ -72,6 +72,9 @@
           <span class="diagnostics-name" data-i18n="menuDiagnostics"></span>
           <span class="diagnostics-capturing" data-i18n="diagnosticsCapturing"></span>
         </button>
+        <button type="button" class="dashboard-action" data-menu-wizard data-i18n-aria-label="menuWizard">
+          <img src="assets/icons/auto_fix_high.svg" alt="" />
+        </button>
         <button type="button" class="dashboard-action" data-menu-advanced data-i18n-aria-label="menuAdvanced">
           <img src="assets/icons/settings.svg" alt="" />
         </button>
@@ -176,6 +179,11 @@
           <input type="checkbox" data-advanced-live-video-passthrough />
           <small data-i18n="advancedLiveVideoPassthroughHelp"></small>
         </label>
+        <label>
+          <span data-i18n="advancedHardwareVideoEncoderLabel"></span>
+          <input type="checkbox" data-advanced-hardware-video-encoder />
+          <small data-i18n="advancedHardwareVideoEncoderHelp"></small>
+        </label>
         <label>
           <span data-i18n="advancedHdLiveVideoLabel"></span>
           <input type="checkbox" data-advanced-hd-live-video />
@@ -190,6 +198,60 @@
       <p class="advanced-device-help" data-i18n="advancedDeviceHelp"></p>
       <p class="advanced-status" role="status" aria-live="polite" data-advanced-status></p>
     </section>
+
+    <section class="dashboard-panel wizard-panel" data-setup-wizard hidden aria-labelledby="wizard-title">
+      <div class="dashboard-panel-header">
+        <button type="button" class="dashboard-page-back" data-wizard-close data-i18n-aria-label="closeWizard">
+          <span aria-hidden="true">←</span>
+        </button>
+        <img class="dashboard-page-icon" src="assets/icons/auto_fix_high.svg" alt="" />
+        <div>
+          <p class="eyebrow" data-wizard-progress></p>
+          <h2 id="wizard-title" data-wizard-title></h2>
+          <p class="summary" data-wizard-eyebrow></p>
+        </div>
+      </div>
+      <p class="summary" data-wizard-restart hidden data-i18n="wizardRestartSummary"></p>
+      <nav class="wizard-map" data-wizard-map data-i18n-aria-label="wizardMapLabel"></nav>
+      <div class="wizard-stage" data-wizard-stage>
+        <button type="button" class="wizard-arrow" data-wizard-back data-i18n-aria-label="wizardBack">
+          <img src="assets/icons/keyboard_arrow_left.svg" alt="" />
+        </button>
+        <div class="wizard-live" data-wizard-live>
+          <img data-wizard-live-image alt="" hidden />
+          <button type="button" class="wizard-live-play" data-wizard-live-play data-i18n-aria-label="wizardLivePlay">
+            <img src="assets/icons/play_arrow.svg" alt="" />
+          </button>
+          <button
+            type="button"
+            class="wizard-live-play wizard-live-stop"
+            data-wizard-live-stop
+            hidden
+            data-i18n-aria-label="wizardLiveStop"
+          >
+            <img src="assets/icons/stop.svg" alt="" />
+          </button>
+          <span class="wizard-live-spinner" data-wizard-live-spinner hidden aria-hidden="true"></span>
+          <p class="wizard-live-status" role="status" aria-live="polite" data-wizard-live-status></p>
+        </div>
+        <button type="button" class="wizard-arrow" data-wizard-next data-i18n-aria-label="wizardNext">
+          <img src="assets/icons/keyboard_arrow_right.svg" alt="" />
+        </button>
+      </div>
+      <section class="wizard-card" data-wizard-homekit aria-labelledby="wizard-homekit-title">
+        <h3 id="wizard-homekit-title" data-i18n="wizardHomeKitTitle"></h3>
+        <p class="preference-note" data-i18n="wizardHomeKitHelp"></p>
+        <div class="preference-grid" data-wizard-controls></div>
+      </section>
+      <section class="wizard-card" data-wizard-eufy hidden aria-labelledby="wizard-eufy-title">
+        <h3 id="wizard-eufy-title" data-i18n="wizardEufySettings"></h3>
+        <p class="preference-note" data-i18n="wizardEufyHelp"></p>
+        <div class="preference-grid" data-wizard-settings></div>
+      </section>
+      <div class="wizard-nav">
+        <button type="button" data-wizard-finish></button>
+      </div>
+    </section>
   </section>
 
   <section class="dashboard-panel diagnostics-panel" data-diagnostics hidden aria-labelledby="diagnostics-title">
@@ -383,4 +445,5 @@
 <script src="js/dashboard.js"></script>
 <script src="js/legacy-settings.js"></script>
 <script src="js/profile-wizard.js"></script>
+<script src="js/setup-wizard.js"></script>
 <script src="js/app.js"></script>

package/homebridge-ui/public/js/app.js

@@ -77,6 +77,7 @@ const advancedConcurrentMedia = document.querySelector('[data-advanced-concurren
 const advancedFfmpeg = document.querySelector('[data-advanced-ffmpeg]');
 const advancedSmallVideoPackets = document.querySelector('[data-advanced-small-video-packets]');
 const advancedLiveVideoPassthrough = document.querySelector('[data-advanced-live-video-passthrough]');
+const advancedHardwareVideoEncoder = document.querySelector('[data-advanced-hardware-video-encoder]');
 const advancedHdLiveVideo = document.querySelector('[data-advanced-hd-live-video]');
 const advancedIgnoreHomeBitRate = document.querySelector('[data-advanced-ignore-home-bit-rate]');
 const warmUpAvailable = document.querySelector('[data-warm-up-available]');
@@ -86,6 +87,28 @@ const warmUpAddAll = document.querySelector('[data-warm-up-add-all]');
 const warmUpRemove = document.querySelector('[data-warm-up-remove]');
 const warmUpRemoveAll = document.querySelector('[data-warm-up-remove-all]');
 const advancedStatus = document.querySelector('[data-advanced-status]');
+const menuWizard = document.querySelector('[data-menu-wizard]');
+const wizardPanel = document.querySelector('[data-setup-wizard]');
+const wizardClose = document.querySelector('[data-wizard-close]');
+const wizardProgress = document.querySelector('[data-wizard-progress]');
+const wizardTitle = document.querySelector('[data-wizard-title]');
+const wizardEyebrow = document.querySelector('[data-wizard-eyebrow]');
+const wizardRestart = document.querySelector('[data-wizard-restart]');
+const wizardLive = document.querySelector('[data-wizard-live]');
+const wizardLiveImage = document.querySelector('[data-wizard-live-image]');
+const wizardLiveStatus = document.querySelector('[data-wizard-live-status]');
+const wizardLivePlay = document.querySelector('[data-wizard-live-play]');
+const wizardLiveStop = document.querySelector('[data-wizard-live-stop]');
+const wizardLiveSpinner = document.querySelector('[data-wizard-live-spinner]');
+const wizardSettings = document.querySelector('[data-wizard-settings]');
+const wizardControls = document.querySelector('[data-wizard-controls]');
+const wizardBack = document.querySelector('[data-wizard-back]');
+const wizardNext = document.querySelector('[data-wizard-next]');
+const wizardFinish = document.querySelector('[data-wizard-finish]');
+const wizardMap = document.querySelector('[data-wizard-map]');
+const wizardStage = document.querySelector('[data-wizard-stage]');
+const wizardHomeKit = document.querySelector('[data-wizard-homekit]');
+const wizardEufy = document.querySelector('[data-wizard-eufy]');
 
 let messages = {};
 let pluginConfig = [];
@@ -109,6 +132,7 @@ let dashboardPanelTrigger;
 const dashboardView = window.HomebridgeEufyDashboard;
 const legacySettingsView = window.HomebridgeEufyLegacySettings;
 const diagnosticsWizard = window.HomebridgeEufyDiagnosticsWizard;
+const setupWizard = window.HomebridgeEufySetupWizard;
 const dashboardElements = {
   dashboard,
   title: dashboardTitle,
@@ -118,6 +142,7 @@ const dashboardElements = {
   deviceSettingsTitle,
   deviceSettingsEyebrow,
   deviceSettingsControls,
+  preferenceContainers: [deviceSettingsControls, wizardControls],
   updatePending,
   updatePendingSummary,
   updatePendingVersion,
@@ -512,7 +537,7 @@ function openDashboardPanel(panel, trigger) {
   dashboardState.hidden = insideDashboard;
   dashboardSummary.hidden = insideDashboard;
   deviceGroups.hidden = insideDashboard;
-  for (const other of [diagnosticsPanel, advancedPanel, devicePanel]) {
+  for (const other of [diagnosticsPanel, advancedPanel, devicePanel, wizardPanel]) {
     other.hidden = other !== panel;
   }
   panel.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
@@ -524,6 +549,8 @@ function closeDashboardPanel() {
   diagnosticsPanel.hidden = true;
   advancedPanel.hidden = true;
   devicePanel.hidden = true;
+  wizardPanel.hidden = true;
+  stopWizardLive();
   dashboardState.hidden = false;
   dashboardSummary.hidden = false;
   deviceGroups.hidden = false;
@@ -592,6 +619,7 @@ menuAdvanced.addEventListener('click', async () => {
   advancedFfmpeg.value = config.ffmpegPath ?? '';
   advancedSmallVideoPackets.checked = config.smallVideoPackets === true;
   advancedLiveVideoPassthrough.checked = config.liveVideoPassthrough === true;
+  advancedHardwareVideoEncoder.checked = config.hardwareVideoEncoder !== false;
   advancedHdLiveVideo.checked = config.hdLiveVideo === true;
   advancedIgnoreHomeBitRate.checked = config.ignoreHomeBitRate === true;
   openDashboardPanel(advancedPanel, menuAdvanced);
@@ -653,6 +681,8 @@ async function updateAdvancedSettings() {
   else delete next.smallVideoPackets;
   if (advancedLiveVideoPassthrough.checked) next.liveVideoPassthrough = true;
   else delete next.liveVideoPassthrough;
+  if (advancedHardwareVideoEncoder.checked) delete next.hardwareVideoEncoder;
+  else next.hardwareVideoEncoder = false;
   if (advancedHdLiveVideo.checked) next.hdLiveVideo = true;
   else delete next.hdLiveVideo;
   if (advancedIgnoreHomeBitRate.checked) next.ignoreHomeBitRate = true;
@@ -674,6 +704,7 @@ advancedConcurrentMedia.addEventListener('change', updateAdvancedSettings);
 advancedFfmpeg.addEventListener('change', updateAdvancedSettings);
 advancedSmallVideoPackets.addEventListener('change', updateAdvancedSettings);
 advancedLiveVideoPassthrough.addEventListener('change', updateAdvancedSettings);
+advancedHardwareVideoEncoder.addEventListener('change', updateAdvancedSettings);
 advancedHdLiveVideo.addEventListener('change', updateAdvancedSettings);
 advancedIgnoreHomeBitRate.addEventListener('change', updateAdvancedSettings);
 warmUpAdd.addEventListener('click', () => moveWarmUp('available'));
@@ -810,9 +841,288 @@ dashboardView.bindPreferences(dashboardElements, configuredBlock, updateConfig,
   openDashboardPanel(devicePanel, trigger);
 });
 
+/*
+ * The setup wizard walks every device once a sign-in has a running plugin to show it: each camera live, the eufy
+ * settings the plugin can change, and the HomeKit choices. A sign-in always leaves Homebridge to restart, so it
+ * marks the wizard pending in this browser and the next page opened on a ready plugin starts it.
+ */
+let dashboardPluginState;
+let wizardSteps = [];
+let wizardIndex = 0;
+let wizardLiveSerial;
+let wizardLivePictures = 0;
+const wizardElements = {
+  deviceSettingsTitle: wizardTitle,
+  deviceSettingsEyebrow: wizardEyebrow,
+  deviceSettingsControls: wizardControls,
+};
+/** The eufy settings the wizard offers, each with the label its control is named by. */
+const EUFY_SETTING_LABELS = {
+  motionDetection: 'wizardMotionDetection',
+  nightVision: 'wizardNightVision',
+  notificationStyle: 'wizardNotificationStyle',
+};
+
+/** Whether a plugin is running to stream and change settings: a degraded one still holds its devices. */
+function wizardPluginUp() {
+  return dashboardPluginState === 'ready' || dashboardPluginState === 'degraded';
+}
+
+function wizardPending(pending) {
+  try {
+    if (pending === undefined) return localStorage.getItem(setupWizard.PENDING_KEY) === 'pending';
+    if (pending) localStorage.setItem(setupWizard.PENDING_KEY, 'pending');
+    else localStorage.removeItem(setupWizard.PENDING_KEY);
+  } catch {
+    return false;
+  }
+  return pending;
+}
+
+async function openSetupWizard(trigger) {
+  wizardSteps = setupWizard.steps(dashboardDevices);
+  wizardIndex = 0;
+  openDashboardPanel(wizardPanel, trigger);
+  await renderWizardStep();
+}
+
+function stopWizardLive() {
+  if (!wizardLiveSerial) return;
+  wizardLiveSerial = undefined;
+  wizardLivePictures = 0;
+  wizardLivePlay.hidden = false;
+  wizardLiveStop.hidden = true;
+  wizardLiveSpinner.hidden = true;
+  wizardLiveStatus.textContent = '';
+  void requestWithinDeadline('/device/live/stop', {}, 12000).catch(() => undefined);
+}
+
+/**
+ * Shows a camera's box with its last picture behind the play button, so the step costs nothing until asked.
+ * A camera with no picture yet shows the empty box.
+ */
+async function showWizardCamera(serial) {
+  wizardLive.hidden = false;
+  wizardLiveImage.hidden = true;
+  wizardLivePlay.hidden = false;
+  wizardLiveStatus.textContent = '';
+  let answer;
+  try {
+    answer = await requestWithinDeadline('/device/image', { serial }, 12000);
+  } catch {
+    answer = undefined;
+  }
+  if (!answer?.image || wizardSteps[wizardIndex]?.serial !== serial || wizardLiveSerial) return;
+  wizardLiveImage.src = `data:image/jpeg;base64,${answer.image}`;
+  wizardLiveImage.hidden = false;
+}
+
+function startWizardLive(serial) {
+  stopWizardLive();
+  wizardLiveSerial = serial;
+  wizardLivePlay.hidden = true;
+  wizardLiveSpinner.hidden = false;
+  wizardLiveStatus.textContent = messages.wizardLiveStarting ?? '';
+  void requestWithinDeadline('/device/live/start', { serial }, 12000).catch(() => endWizardLive(serial));
+}
+
+function endWizardLive(serial) {
+  if (serial !== wizardLiveSerial) return;
+  const watched = wizardLivePictures > 0;
+  wizardLiveSerial = undefined;
+  wizardLivePictures = 0;
+  wizardLiveStatus.textContent = watched ? '' : (messages.wizardLiveFailed ?? '');
+  wizardLivePlay.hidden = false;
+  wizardLiveStop.hidden = true;
+  wizardLiveSpinner.hidden = true;
+}
+
+homebridge.addEventListener('device-live', (event) => {
+  if (!event.data || event.data.serial !== wizardLiveSerial) return;
+  wizardLivePictures += 1;
+  // The stop is offered once there is video to stop; until then the spinner says it is on its way.
+  wizardLiveSpinner.hidden = true;
+  wizardLiveStop.hidden = false;
+  wizardLiveImage.src = `data:image/jpeg;base64,${event.data.image}`;
+  wizardLiveImage.hidden = false;
+  wizardLiveStatus.textContent = '';
+});
+homebridge.addEventListener('device-live-end', (event) => endWizardLive(event.data?.serial));
+
+/** One control per eufy setting the device states and can change, named and valued the way the camera describes it. */
+function eufySettingControl(setting) {
+  const label = messages[EUFY_SETTING_LABELS[setting.setting]] ?? setting.setting;
+  const wrapper = document.createElement('label');
+  wrapper.className = typeof setting.value === 'boolean' ? 'toggle' : 'wizard-setting';
+  wrapper.dataset.setting = '';
+  const name = document.createElement('span');
+  name.className = 'setting-label';
+  name.textContent = label;
+  let control;
+  if (typeof setting.value === 'boolean') {
+    control = document.createElement('input');
+    control.type = 'checkbox';
+    control.checked = setting.value;
+    wrapper.append(control, name);
+  } else {
+    control = document.createElement('select');
+    for (const [value, text] of Object.entries(setting.labels ?? { [setting.value]: String(setting.value) })) {
+      const option = document.createElement('option');
+      option.value = value;
+      option.textContent = text;
+      option.selected = Number(value) === setting.value;
+      control.append(option);
+    }
+    wrapper.append(name, control);
+  }
+  control.dataset.eufySetting = setting.setting;
+  return wrapper;
+}
+
+async function renderWizardSettings(serial) {
+  let answer;
+  try {
+    answer = await requestWithinDeadline('/device/settings', { serial }, 12000);
+  } catch {
+    answer = undefined;
+  }
+  if (wizardSteps[wizardIndex]?.serial !== serial) return;
+  const writable = (answer?.settings ?? []).filter((setting) => setting.writable);
+  if (writable.length === 0) return;
+  const status = document.createElement('p');
+  status.className = 'preference-note';
+  status.setAttribute('role', 'status');
+  status.dataset.wizardSettingsStatus = '';
+  wizardSettings.replaceChildren(...writable.map(eufySettingControl), status);
+  wizardEufy.hidden = false;
+}
+
+/** One device on the map: a button that opens its step, marked as the current one where it is. */
+function wizardMapEntry(device, current) {
+  const entry = document.createElement('button');
+  entry.type = 'button';
+  entry.className = 'wizard-map-device';
+  entry.textContent = device.name;
+  entry.dataset.serial = device.serial;
+  if (device.serial === current) entry.setAttribute('aria-current', 'step');
+  return entry;
+}
+
+/**
+ * Draws the household: each HomeBase with the devices that hang off it, then the cameras that stand alone. A base
+ * is a step too where it has HomeKit choices, so its name opens it like any other device.
+ */
+function renderWizardMap(current) {
+  const { bases, standalone } = setupWizard.topology(wizardSteps, dashboardDevices);
+  const group = (title, members, base) => {
+    const section = document.createElement('div');
+    section.className = 'wizard-map-group';
+    const heading = base && wizardSteps.includes(base) ? wizardMapEntry(base, current) : document.createElement('p');
+    heading.classList?.add('wizard-map-base');
+    heading.textContent = title;
+    const list = document.createElement('div');
+    list.className = 'wizard-map-members';
+    list.append(...members.map((device) => wizardMapEntry(device, current)));
+    section.append(heading, list);
+    return section;
+  };
+  wizardMap.replaceChildren(
+    ...bases.map(({ base, members }) => group(base?.name ?? messages.wizardMapBase ?? '', members, base)),
+    ...(standalone.length > 0 ? [group(messages.wizardMapStandalone ?? '', standalone)] : []),
+  );
+}
+
+wizardSettings.addEventListener('change', async (event) => {
+  const control = event.target;
+  const setting = control?.dataset?.eufySetting;
+  const device = wizardSteps[wizardIndex];
+  if (!setting || !device) return;
+  const value = control.type === 'checkbox' ? control.checked : Number(control.value);
+  const status = wizardSettings.querySelector('[data-wizard-settings-status]');
+  control.disabled = true;
+  status.textContent = messages.wizardSettingSending ?? '';
+  try {
+    const answer = await requestWithinDeadline('/device/settings/write', { serial: device.serial, setting, value }, 30000);
+    // A write that reached the camera is not yet a camera that changed, so the step says sent rather than done.
+    status.textContent = answer?.ok ? (messages.wizardSettingSent ?? '') : (messages.wizardSettingFailed ?? '');
+  } catch {
+    status.textContent = messages.wizardSettingFailed ?? '';
+  } finally {
+    control.disabled = false;
+  }
+});
+
+/** A device that is not a camera shows its product picture in the box, with nothing to play. */
+function showWizardArtwork(device) {
+  wizardLivePlay.hidden = true;
+  wizardLiveStop.hidden = true;
+  wizardLiveStatus.textContent = '';
+  wizardLiveImage.hidden = !device.artwork;
+  if (device.artwork) wizardLiveImage.src = device.artwork;
+}
+
+async function renderWizardStep() {
+  stopWizardLive();
+  wizardSettings.replaceChildren();
+  wizardControls.replaceChildren();
+  wizardEufy.hidden = true;
+  const restart = !wizardPluginUp();
+  const empty = restart || wizardSteps.length === 0;
+  wizardRestart.hidden = !restart;
+  wizardMap.hidden = empty;
+  wizardStage.hidden = empty;
+  wizardHomeKit.hidden = empty;
+  wizardFinish.textContent = restart ? (messages.wizardClose ?? '') : (messages.wizardFinish ?? '');
+  if (empty) {
+    wizardProgress.textContent = '';
+    wizardTitle.textContent = messages.wizardTitle ?? '';
+    wizardEyebrow.textContent = '';
+    return;
+  }
+  const device = wizardSteps[wizardIndex];
+  renderWizardMap(device.serial);
+  dashboardView.renderDeviceSettings(device, configuredBlock() ?? {}, messages, wizardElements);
+  wizardHomeKit.hidden = !(device.preferences?.length > 0);
+  wizardProgress.textContent = setupWizard.progress(messages.wizardProgress, wizardIndex, wizardSteps.length);
+  wizardBack.disabled = wizardIndex === 0;
+  wizardNext.disabled = wizardIndex === wizardSteps.length - 1;
+  if (device.deviceClass === 'camera') void showWizardCamera(device.serial);
+  else showWizardArtwork(device);
+  await renderWizardSettings(device.serial);
+}
+
+function goToWizardStep(index) {
+  if (index < 0 || index >= wizardSteps.length || index === wizardIndex) return;
+  wizardIndex = index;
+  void renderWizardStep();
+}
+
+menuWizard.addEventListener('click', () => openSetupWizard(menuWizard));
+wizardClose.addEventListener('click', () => closeDashboardPanel());
+wizardLiveStop.addEventListener('click', () => stopWizardLive());
+wizardLivePlay.addEventListener('click', () => {
+  const device = wizardSteps[wizardIndex];
+  if (device) startWizardLive(device.serial);
+});
+wizardBack.addEventListener('click', () => goToWizardStep(wizardIndex - 1));
+wizardNext.addEventListener('click', () => goToWizardStep(wizardIndex + 1));
+wizardMap.addEventListener('click', (event) => {
+  const serial = event.target?.closest?.('[data-serial]')?.dataset?.serial;
+  goToWizardStep(wizardSteps.findIndex((device) => device.serial === serial));
+});
+// Closing a wizard that waits for a restart keeps it due; finishing one that walked the devices does not.
+wizardFinish.addEventListener('click', () => {
+  if (wizardPluginUp()) wizardPending(false);
+  closeDashboardPanel();
+});
+window.addEventListener?.('pagehide', () => stopWizardLive());
+
 function openAuthentication() {
   diagnosticsPanel.hidden = true;
   advancedPanel.hidden = true;
+  devicePanel.hidden = true;
+  wizardPanel.hidden = true;
+  stopWizardLive();
   dashboard.hidden = true;
   setupContent.hidden = false;
   masthead.hidden = false;
@@ -881,6 +1191,7 @@ async function showDashboard() {
     warmUpCandidates = Array.isArray(snapshot.warmUpCandidates) ? snapshot.warmUpCandidates : [];
     // Kept beside the render that drew them, so opening a tile finds the device that tile stands for.
     dashboardDevices = snapshot.devices ?? [];
+    dashboardPluginState = snapshot.state;
     dashboardAttention = dashboardView.render(snapshot, configuredBlock() ?? {}, messages, dashboardElements);
     if (snapshot.state === 'authentication-required' && snapshot.devices?.length > 0 && !reauthDialog.open) {
       reauthDialog.showModal?.();
@@ -936,8 +1247,11 @@ async function handleResult(result) {
     authForm.hidden = true;
     authStatus.textContent = messages.authSuccess ?? '';
     // The devices this sign-in discovered are already recorded, so the flow ends on them rather than on a notice.
-    if (await saveAuthenticatedConfig()) await showDashboard();
-    else authStatus.textContent = messages.authSaveFailed ?? '';
+    if (await saveAuthenticatedConfig()) {
+      await showDashboard();
+      wizardPending(true);
+      await openSetupWizard();
+    } else authStatus.textContent = messages.authSaveFailed ?? '';
   } else {
     authForm.hidden = false;
     authStatus.textContent = messages[AUTH_OUTCOMES[result.status] ?? 'authFailed'] ?? '';
@@ -1056,5 +1370,6 @@ homebridge.addEventListener('ready', async () => {
   trustedDeviceInput.value = configured?.trustedDeviceName ?? 'Homebridge Eufy';
   if (configured) {
     await showDashboard();
+    if (wizardPending() && wizardPluginUp()) await openSetupWizard();
   }
 });

package/homebridge-ui/public/js/dashboard.js

@@ -346,7 +346,7 @@
       },
       true,
     );
-    (elements.deviceSettingsControls ?? elements.groups).addEventListener('change', async (event) => {
+    const onPreferenceChange = async (event) => {
       const control = event.target;
       const serial = control?.dataset?.serial;
       const key = control?.dataset?.preference;
@@ -395,7 +395,10 @@
       } catch {
         elements.summary.textContent = getMessages().preferenceSaveFailed;
       }
-    });
+    };
+    for (const container of elements.preferenceContainers ?? [elements.deviceSettingsControls ?? elements.groups]) {
+      container.addEventListener('change', onPreferenceChange);
+    }
   }
 
   /**

package/homebridge-ui/public/js/setup-wizard.js

@@ -0,0 +1,52 @@
+(function (root) {
+  'use strict';
+
+  /** The browser key marking a sign-in whose devices have not been walked through yet. */
+  const PENDING_KEY = 'homebridge-eufy.setup-wizard-pending';
+
+  /**
+   * The devices the wizard walks through, in the map's order so the arrows follow it: each HomeBase then what hangs
+   * off it, then the devices that stand alone. Every camera is one, and every other device with a HomeKit choice to
+   * make; a device the plugin only diagnoses has nothing to set.
+   */
+  function steps(devices) {
+    const walkable = (devices ?? []).filter(
+      (device) => !device.diagnosticOnly && (device.deviceClass === 'camera' || device.preferences?.length > 0),
+    );
+    const { bases, standalone } = topology(walkable, devices);
+    return [
+      ...bases.flatMap(({ base, members }) => [...(base && walkable.includes(base) ? [base] : []), ...members]),
+      ...standalone,
+    ];
+  }
+
+  /** The progress line for one step, from a template naming `{current}` and `{total}`. */
+  function progress(template, index, total) {
+    return (template ?? '').replace('{current}', String(index + 1)).replace('{total}', String(total));
+  }
+
+  /**
+   * The household as the map draws it: each HomeBase with the devices that hang off it, then the devices that are
+   * their own station. A base is named by its own entry where the dashboard lists one; a device whose base it does
+   * not list stays with that base all the same, under no name.
+   */
+  function topology(steps, devices) {
+    const bases = new Map();
+    const standalone = [];
+    for (const device of devices ?? []) {
+      if (device.deviceClass === 'homebase') bases.set(device.serial, { base: device, members: [] });
+    }
+    for (const device of steps) {
+      if (device.deviceClass === 'homebase') continue;
+      if (!device.station) {
+        standalone.push(device);
+        continue;
+      }
+      if (!bases.has(device.station)) bases.set(device.station, { base: undefined, members: [] });
+      bases.get(device.station).members.push(device);
+    }
+    return { bases: [...bases.values()], standalone };
+  }
+
+  root.HomebridgeEufySetupWizard = { PENDING_KEY, steps, progress, topology };
+})(window);

package/i18n/runtime/en.json

@@ -44,6 +44,7 @@
   "log.condition.affectedOne": "1 accessory is affected.",
   "log.condition.recovered": "Recovered: {summary}.",
   "log.diagnosticFileFailed": "Diagnostic file logging failed; check storage permissions.",
+  "log.liveVideoEncoders": "Live video encoders, in order of use: {encoders}.",
   "log.discardedSettings": "Some legacy settings were discarded. Review and acknowledge them in the Homebridge Eufy dashboard.",
   "log.snapshotCacheInvalid": "An invalid retained camera image was removed",
   "log.homekit.batteryCapabilityUnavailable": "Battery information is unavailable",

package/package.json

@@ -1,7 +1,7 @@
 {
   "displayName": "Homebridge Eufy",
   "name": "@homebridge-plugins/homebridge-eufy-security",
-  "version": "5.0.0-beta.32",
+  "version": "5.0.0-beta.34",
   "description": "Control Eufy Security from homebridge.",
   "type": "module",
   "license": "Apache-2.0",