@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.4 → 5.0.0-beta.41

package/homebridge-ui/public/index.html

@@ -17,6 +17,7 @@
       data-i18n-aria-label="menuDiagnostics"
     >
       <img src="assets/icons/bug-report.svg" alt="" />
+      <span class="diagnostics-capturing" data-i18n="diagnosticsCapturing"></span>
     </button>
   </header>
 
@@ -27,6 +28,7 @@
       <h2 id="legacy-notice-title" data-i18n="legacyTitle"></h2>
       <p data-i18n="legacySummary"></p>
       <p class="legacy-settings" data-legacy-settings></p>
+      <p role="status" data-legacy-status></p>
     </div>
     <button type="button" data-legacy-acknowledge data-i18n="acknowledge"></button>
   </aside>
@@ -61,13 +63,17 @@
         <p class="eyebrow" data-i18n="devicesEyebrow"></p>
         <h2 id="dashboard-title" data-dashboard-title></h2>
       </div>
-      <button type="button" class="dashboard-diagnose" data-dashboard-diagnose hidden data-i18n="dashboardDiagnose"></button>
       <div class="dashboard-actions" role="group" data-i18n-aria-label="dashboardActionsLabel">
         <button type="button" class="dashboard-action" data-dashboard-authenticate data-i18n-aria-label="menuRelogin">
           <img src="assets/icons/settings_backup_restore.svg" alt="" />
         </button>
         <button type="button" class="dashboard-action" data-menu-diagnostics data-i18n-aria-label="menuDiagnostics">
           <img src="assets/icons/bug-report.svg" alt="" />
+          <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="" />
@@ -163,10 +169,141 @@
           <input type="text" data-advanced-ffmpeg />
           <small data-i18n="advancedFfmpegHelp"></small>
         </label>
+        <label>
+          <span data-i18n="advancedSmallVideoPacketsLabel"></span>
+          <input type="checkbox" data-advanced-small-video-packets />
+          <small data-i18n="advancedSmallVideoPacketsHelp"></small>
+        </label>
+        <label>
+          <span data-i18n="advancedLiveVideoPassthroughLabel"></span>
+          <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 />
+          <small data-i18n="advancedHdLiveVideoHelp"></small>
+        </label>
+        <label>
+          <span data-i18n="advancedIgnoreHomeBitRateLabel"></span>
+          <input type="checkbox" data-advanced-ignore-home-bit-rate />
+          <small data-i18n="advancedIgnoreHomeBitRateHelp"></small>
+        </label>
       </div>
       <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>
+        <div class="wizard-live" data-wizard-live>
+          <figure>
+            <img data-wizard-live-image alt="" draggable="false" hidden />
+            <figcaption class="wizard-live-label" data-wizard-live-camera data-i18n="wizardLiveCamera"></figcaption>
+          </figure>
+          <figure>
+            <img data-wizard-live-homekit alt="" draggable="false" hidden />
+            <span class="wizard-live-spinner" data-wizard-live-homekit-spinner hidden aria-hidden="true"></span>
+            <figcaption class="wizard-live-label" data-wizard-live-encoder></figcaption>
+          </figure>
+          <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>
+      </div>
+      <form class="wizard-card" data-wizard-live-controls hidden aria-labelledby="wizard-live-title">
+        <h3 id="wizard-live-title" data-i18n="wizardLiveTitle"></h3>
+        <p class="preference-note" data-i18n="wizardLiveHelp"></p>
+        <div class="preference-grid">
+          <label class="wizard-setting" data-setting>
+            <span class="setting-label" data-i18n="wizardLiveAsk"></span>
+            <select name="ask">
+              <option value="wifi" data-i18n="wizardLiveAskWifi"></option>
+              <option value="cellular" data-i18n="wizardLiveAskCellular"></option>
+            </select>
+          </label>
+          <p class="preference-representation" data-i18n="wizardLiveThisCamera"></p>
+          <div data-setting>
+            <label class="toggle">
+              <input type="checkbox" name="liveVideoPassthrough" />
+              <span class="setting-label" data-i18n="advancedLiveVideoPassthroughLabel"></span>
+            </label>
+            <p data-i18n="advancedLiveVideoPassthroughHelp"></p>
+          </div>
+          <div data-setting>
+            <label class="toggle">
+              <input type="checkbox" name="ignoreHomeBitRate" />
+              <span class="setting-label" data-i18n="advancedIgnoreHomeBitRateLabel"></span>
+            </label>
+            <p data-i18n="advancedIgnoreHomeBitRateHelp"></p>
+          </div>
+          <div class="wizard-nav">
+            <button type="button" data-wizard-live-save data-i18n="wizardLiveSave"></button>
+          </div>
+          <p class="preference-representation" data-i18n="wizardLiveAllCameras"></p>
+          <div data-setting>
+            <label class="toggle">
+              <input type="checkbox" name="hardwareVideoEncoder" />
+              <span class="setting-label" data-i18n="advancedHardwareVideoEncoderLabel"></span>
+            </label>
+            <p data-i18n="advancedHardwareVideoEncoderHelp"></p>
+          </div>
+          <div data-setting>
+            <label class="toggle">
+              <input type="checkbox" name="smallVideoPackets" />
+              <span class="setting-label" data-i18n="advancedSmallVideoPacketsLabel"></span>
+            </label>
+            <p data-i18n="advancedSmallVideoPacketsHelp"></p>
+          </div>
+        </div>
+      </form>
+      <p class="summary" data-wizard-live-diagnose hidden>
+        <span data-i18n="wizardLiveDiagnoseHelp"></span>
+        <button type="button" data-wizard-live-diagnose-start data-i18n="wizardLiveDiagnose"></button>
+      </p>
+      <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">
@@ -186,121 +323,87 @@
       </div>
     </div>
     <div class="diagnostics-stage">
-      <div class="diagnostics-wizard diagnostics-surface" data-diagnostics-wizard aria-live="polite">
+      <div class="diagnostics-wizard diagnostics-surface" data-diagnostics-wizard>
         <div class="diagnostics-question" data-diagnostics-question>
-          <strong
+          <h3
             id="diagnostics-question-heading"
             tabindex="-1"
             data-diagnostics-question-text
             data-i18n="diagnosticsTilesHeading"
-          ></strong>
+          ></h3>
+          <p class="diagnostics-note" data-i18n="diagnosticsPrivacy"></p>
           <div class="diagnostics-tiles" role="group" aria-labelledby="diagnostics-question-heading">
-            <button type="button" data-diagnostics-tile="startup-authentication" data-i18n="diagnosticsProfileStartup"></button>
-            <button type="button" data-diagnostics-tile="device-representation" data-i18n="diagnosticsProfileDevices"></button>
-            <button type="button" data-diagnostics-tile="control-state" data-i18n="diagnosticsProfileControl"></button>
-            <button type="button" data-diagnostics-tile="live-media" data-i18n="diagnosticsProfileLiveMedia"></button>
-            <button type="button" data-diagnostics-tile="hksv-recording" data-i18n="diagnosticsProfileRecording"></button>
-            <button type="button" data-diagnostics-tile="dashboard-ui" data-i18n="diagnosticsProfileDashboard"></button>
-            <button type="button" data-diagnostics-tile="other" data-i18n="diagnosticsProfileOther"></button>
+            <button type="button" data-diagnostics-tile="startup-authentication">
+              <span data-i18n="diagnosticsProfileStartup"></span>
+              <small data-i18n="diagnosticsStartupSummary"></small>
+            </button>
+            <button type="button" data-diagnostics-tile="device-representation">
+              <span data-i18n="diagnosticsProfileDevices"></span>
+              <small data-i18n="diagnosticsDevicesSummary"></small>
+            </button>
+            <button type="button" data-diagnostics-tile="control-state">
+              <span data-i18n="diagnosticsProfileControl"></span>
+              <small data-i18n="diagnosticsControlSummary"></small>
+            </button>
+            <button type="button" data-diagnostics-tile="live-media">
+              <span data-i18n="diagnosticsProfileLiveMedia"></span>
+              <small data-i18n="diagnosticsLiveSummary"></small>
+            </button>
+            <button type="button" data-diagnostics-tile="hksv-recording">
+              <span data-i18n="diagnosticsProfileRecording"></span>
+              <small data-i18n="diagnosticsRecordingSummary"></small>
+            </button>
+            <button type="button" data-diagnostics-tile="dashboard-ui">
+              <span data-i18n="diagnosticsProfileDashboard"></span>
+              <small data-i18n="diagnosticsDashboardSummary"></small>
+            </button>
+            <button type="button" data-diagnostics-tile="other">
+              <span data-i18n="diagnosticsProfileOther"></span>
+              <small data-i18n="diagnosticsOtherSummary"></small>
+            </button>
           </div>
         </div>
-        <div class="diagnostics-devices" data-diagnostics-devices hidden>
-          <strong id="diagnostics-devices-heading" tabindex="-1" data-i18n="diagnosticsDevicesHeading"></strong>
-          <p data-i18n="diagnosticsDevicesHint"></p>
-          <div class="diagnostics-device-list" data-diagnostics-device-list role="group" aria-labelledby="diagnostics-devices-heading"></div>
-          <div class="diagnostics-choice-actions">
-            <button
-              type="button"
-              class="diagnostics-secondary-action"
-              data-diagnostics-devices-every
-              data-i18n="diagnosticsDevicesEvery"
-            ></button>
-            <button type="button" data-diagnostics-devices-chosen disabled data-i18n="diagnosticsDevicesChosen"></button>
-          </div>
-        </div>
-        <div class="diagnostics-frequency" data-diagnostics-frequency hidden>
-          <strong
-            id="diagnostics-frequency-heading"
-            tabindex="-1"
-            data-i18n="diagnosticsQuestionReproduceNow"
-          ></strong>
-          <div class="diagnostics-choice-actions" role="group" aria-labelledby="diagnostics-frequency-heading">
-            <button
-              type="button"
-              class="diagnostics-secondary-action"
-              data-diagnostics-frequency-answer="intermittent"
-              data-i18n="diagnosticsNo"
-            ></button>
-            <button type="button" data-diagnostics-frequency-answer="now" data-i18n="diagnosticsYes"></button>
-          </div>
-          <button
-            type="button"
-            class="diagnostics-quiet-action"
-            data-diagnostics-frequency-back
-            data-i18n="diagnosticsFrequencyBack"
-          ></button>
-        </div>
-        <div class="diagnostics-match" data-diagnostics-match hidden>
-          <p class="eyebrow" data-i18n="diagnosticsBestMatch"></p>
-          <strong id="diagnostics-match-heading" tabindex="-1" data-diagnostics-guidance-title></strong>
-          <p data-diagnostics-mode-summary></p>
-          <div class="diagnostics-choice-actions" role="group" aria-labelledby="diagnostics-match-heading">
-            <button
-              type="button"
-              class="diagnostics-secondary-action"
-              data-diagnostics-reject
-              data-i18n="diagnosticsChangeAnswers"
-            ></button>
-            <button type="button" data-diagnostics-authorize data-i18n="diagnosticsContinue"></button>
-          </div>
-          <p class="diagnostics-privacy" data-i18n="diagnosticsPrivacy"></p>
-        </div>
       </div>
-      <div class="diagnostics-guidance diagnostics-surface" data-diagnostics-guidance tabindex="-1" hidden>
-        <strong data-diagnostics-phase-title></strong>
-        <div data-diagnostics-guidance-before-section>
-          <span class="guidance-label" data-i18n="diagnosticsBeforeLabel"></span>
-          <p data-diagnostics-guidance-before></p>
-        </div>
+      <div class="diagnostics-guidance diagnostics-surface" data-diagnostics-guidance hidden>
+        <h3 tabindex="-1" data-diagnostics-phase-title></h3>
         <div>
           <span class="guidance-label" data-i18n="diagnosticsActionLabel"></span>
           <p data-diagnostics-guidance-action></p>
         </div>
         <div class="diagnostics-actions" data-diagnostics-actions hidden>
-          <button
-            type="button"
-            data-diagnostics-reproduction
-            disabled
-            data-i18n="diagnosticsStartRecording"
-          ></button>
+          <button type="button" data-diagnostics-reproduction disabled data-i18n="diagnosticsNowFinish"></button>
+          <button type="button" class="diagnostics-quiet-action" data-diagnostics-cancel data-i18n="diagnosticsCancel"></button>
         </div>
+        <p class="diagnostics-note" data-diagnostics-capture-note></p>
       </div>
-      <div class="diagnostics-result diagnostics-surface" data-diagnostics-result hidden>
-        <strong tabindex="-1" data-diagnostics-result-heading data-i18n="diagnosticsEvidenceReady"></strong>
-        <p data-i18n="diagnosticsArchiveReviewIntro"></p>
-        <div class="diagnostics-manifest" data-diagnostics-manifest hidden></div>
-        <label class="diagnostics-review-confirm" data-diagnostics-review-confirm-label hidden>
-          <input type="checkbox" data-diagnostics-review-confirm />
-          <span data-i18n="diagnosticsArchiveReviewConfirm"></span>
-        </label>
-        <p class="diagnostics-local-note" data-i18n="diagnosticsStaysLocal"></p>
+      <dialog class="blocking-dialog diagnostics-result" data-diagnostics-result aria-labelledby="diagnostics-result-heading">
+        <h2 id="diagnostics-result-heading" tabindex="-1" data-diagnostics-result-heading data-i18n="diagnosticsEvidenceReady"></h2>
+        <p data-diagnostics-handoff-note hidden></p>
         <button type="button" data-diagnostics-export disabled hidden data-i18n="diagnosticsArchiveExport"></button>
-        <a
-          data-diagnostics-issue
+        <div class="diagnostics-handoff" data-diagnostics-handoff hidden>
+          <a data-diagnostics-issue target="_blank" rel="noopener noreferrer" data-i18n="diagnosticsOpenIssue"></a>
+          <a
+            data-diagnostics-existing-issue
+            target="_blank"
+            rel="noopener noreferrer"
+            data-i18n="diagnosticsExistingIssue"
+          ></a>
+        </div>
+        <button
+          type="button"
+          class="diagnostics-quiet-action"
+          data-diagnostics-download-again
           hidden
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-describedby="diagnostics-issue-hint"
-          data-i18n="diagnosticsOpenIssue"
-        ></a>
-        <p class="diagnostics-step-hint" id="diagnostics-issue-hint" data-diagnostics-issue-hint></p>
+          data-i18n="diagnosticsDownloadAgain"
+        ></button>
         <button
           type="button"
-          class="diagnostics-secondary-action"
+          class="diagnostics-quiet-action"
           data-diagnostics-start-another
           data-i18n="diagnosticsStartAnother"
         ></button>
-      </div>
+        <p class="diagnostics-status" role="status" aria-live="polite" data-diagnostics-result-status></p>
+      </dialog>
       <p class="diagnostics-status" role="status" aria-live="polite" data-diagnostics-status></p>
     </div>
   </section>
@@ -339,7 +442,7 @@
       <div class="field-row">
         <label>
           <span data-i18n="countryLabel"></span>
-          <input type="text" inputmode="text" maxlength="2" required data-country />
+          <input type="text" inputmode="text" maxlength="2" pattern="[A-Za-z]{2}" required data-country />
         </label>
         <label>
           <span data-i18n="trustedDeviceLabel"></span>
@@ -361,9 +464,34 @@
   </section>
 
   <p class="footnote" data-i18n="footnote"></p>
+
+  <dialog class="blocking-dialog" data-reauth-dialog aria-labelledby="reauth-title" aria-describedby="reauth-summary">
+    <h2 id="reauth-title" data-i18n="reauthTitle"></h2>
+    <p id="reauth-summary" data-i18n="reauthSummary"></p>
+    <button type="button" data-reauth-action data-i18n="reauthAction"></button>
+  </dialog>
+
+  <dialog
+    class="blocking-dialog"
+    closedby="any"
+    data-attention-dialog
+    aria-labelledby="attention-title"
+    aria-describedby="attention-summary"
+  >
+    <h2 id="attention-title" data-attention-title></h2>
+    <p id="attention-summary" data-attention-summary></p>
+    <p class="diagnostics-note" data-i18n="diagnosticsPrivacy"></p>
+    <div class="diagnostics-choice-actions">
+      <button
+        type="button"
+        class="diagnostics-secondary-action"
+        data-attention-choose
+        data-i18n="attentionChooseAnother"
+      ></button>
+      <button type="button" data-attention-diagnose data-i18n="attentionDiagnose"></button>
+    </div>
+  </dialog>
 </main>
 
 <script src="js/dashboard.js"></script>
-<script src="js/legacy-settings.js"></script>
-<script src="js/profile-wizard.js"></script>
 <script src="js/app.js"></script>