streamer mode fix

raw_package/index.template.html

@@ -8,6 +8,7 @@
 <esphome-main
   version="{{ version }}"
   docsLink="{{ docs_link }}"
+  {% if streamer_mode %}streamerMode{% end %}
   {% if login_enabled %}logoutUrl="{{ relative_url }}logout"{% end %}
 ></esphome-main>
 {% end %}

src/components/remote-process.ts

@@ -3,6 +3,10 @@ import { StreamError, streamLogs } from "../api";
 import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
 import { fireEvent } from "../util/fire-event";
 
+export class ESPHomeBlurSecrets {
+  public static enabled = false;
+}
+
 @customElement("esphome-remote-process")
 class ESPHomeRemoteProcess extends HTMLElement {
   public type!: "validate" | "logs" | "upload" | "clean-mqtt" | "clean";
@@ -28,7 +32,9 @@ class ESPHomeRemoteProcess extends HTMLElement {
         }
         ${coloredConsoleStyles}
       </style>
-      <div class="log"></div>
+      <div class="log${
+        ESPHomeBlurSecrets.enabled ? " blur-secrets" : ""
+      }"></div>
     `;
 
     const coloredConsole = new ColoredConsole(shadowRoot.querySelector("div")!);

src/editor/esphome-editor.ts

@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import { LitElement, html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import "@material/mwc-dialog";
 import "@material/mwc-button";
 import "@material/mwc-snackbar";
@@ -12,6 +12,7 @@ import type { Snackbar } from "@material/mwc-snackbar";
 import { fireEvent } from "../util/fire-event";
 import { debounce } from "../util/debounce";
 import "./monaco-provider";
+import "./streamer-warning";
 
 // WebSocket URL Helper
 const loc = window.location;
@@ -25,6 +26,33 @@ const darkQuery: MediaQueryList = window.matchMedia(
   "(prefers-color-scheme: dark)"
 );
 
+const commonStyle = html`
+  <style>
+    html,
+    body {
+      height: 100vh;
+      overflow: hidden;
+    }
+    .esphome-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-content: stretch;
+    }
+    .esphome-header h2 {
+      line-height: 100%;
+      /* this margin, padding stretches the container, offsetHeight does not calculate margin of .editor-header */
+      padding: 0.8rem 0.5rem 1rem 0.5rem;
+      margin: 0px;
+      font-size: 1.4rem;
+      flex: 1 1 auto;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  </style>
+`;
+
 @customElement("esphome-editor")
 class ESPHomeEditor extends LitElement {
   private editor?: monaco.editor.IStandaloneCodeEditor;
@@ -34,42 +62,25 @@ class ESPHomeEditor extends LitElement {
   private editorActiveSecrets = false;
 
   @property() public fileName!: string;
+  @property({ type: Boolean }) streamerMode = false;
   @query("mwc-snackbar", true) private _snackbar!: Snackbar;
   @query("main", true) private container!: HTMLElement;
   @query(".esphome-header", true) private editor_header!: HTMLElement;
+  @state() private _showSecrets = false;
 
   createRenderRoot() {
     return this;
   }
 
-  protected render() {
-    const isSecrets =
-      this.fileName === "secrets.yaml" || this.fileName === "secrets.yml";
+  private _isSecrets() {
+    return this.fileName === "secrets.yaml" || this.fileName === "secrets.yml";
+  }
 
+  protected render() {
+    const isSecrets = this._isSecrets();
     return html`
+      ${commonStyle}
       <style>
-        html,
-        body {
-          height: 100vh;
-          overflow: hidden;
-        }
-        .esphome-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          align-content: stretch;
-        }
-        h2 {
-          line-height: 100%;
-          /* this margin, padding stretches the container, offsetHeight does not calculate margin of .editor-header */
-          padding: 0.8rem 0.5rem 1rem 0.5rem;
-          margin: 0px;
-          font-size: 1.4rem;
-          flex: 1 1 auto;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
         mwc-icon-button {
           --mdc-icon-button-size: 32px;
         }
@@ -101,9 +112,24 @@ class ESPHomeEditor extends LitElement {
             ></mwc-button>`}
       </div>
       <main></main>
+      ${isSecrets && this.streamerMode && !this._showSecrets
+        ? html`<streamer-warning
+            @closed=${this.__handleSecretsWarning}
+          ></streamer-warning>`
+        : ""}
     `;
   }
 
+  private __handleSecretsWarning(e: CustomEvent) {
+    if (e.detail.action === "close") {
+      this._handleClose();
+    } else if (e.detail.action === "accept") {
+      this._showSecrets = true;
+      // as the 1st update was skipped, fire firstUpdated again
+      setTimeout(() => this.firstUpdated(), 50);
+    }
+  }
+
   public getValue() {
     return this.editor!.getModel()?.getValue();
   }
@@ -137,6 +163,10 @@ class ESPHomeEditor extends LitElement {
   }
 
   firstUpdated() {
+    const isSecrets = this._isSecrets();
+    if (isSecrets && this.streamerMode && !this._showSecrets) {
+      return;
+    }
     // @ts-ignore
     self.MonacoEnvironment = {
       getWorkerUrl: function (moduleId: string, label: string) {
@@ -159,9 +189,6 @@ class ESPHomeEditor extends LitElement {
         'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
     });
 
-    const isSecrets =
-      this.fileName === "secrets.yaml" || this.fileName === "secrets.yml";
-
     getFile(this.fileName).then((response) => {
       if (response === null && isSecrets) {
         response = EMPTY_SECRETS;

src/editor/streamer-warning.ts

@@ -0,0 +1,54 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { fireEvent } from "../util/fire-event";
+import { mdiIncognito } from "@mdi/js";
+
+@customElement("streamer-warning")
+export class ESPHomeStreamerWarning extends LitElement {
+  protected render() {
+    return html`
+      <mwc-dialog
+        open
+        scrimClickAction=""
+        @escapeKeyAction=${() => fireEvent(this, "closed", { action: "close" })}
+        @closed=${(e: any) =>
+          fireEvent(this, "closed", { action: e.detail.action })}
+      >
+        <div class="dialog-content">
+            <esphome-svg-icon .path=${mdiIncognito}></esphome-svg-icon> 
+            <h3>Streamer mode enabled</h3>
+            <p>Are you sure you want to disclose your secrets?</p>
+        </div>
+        <mwc-button
+            slot="secondaryAction"
+            label="Cancel"
+            dialogAction="close"
+        ></mwc-button>
+        <mwc-button
+            slot="primaryAction"
+            label="Show Secrets"
+            dialogAction="accept"
+        ></mwc-button>
+      </<mwc-dialog>
+    `;
+  }
+
+  static styles = css`
+    .dialog-content {
+      text-align: center;
+      --mdc-theme-primary: var(--primary-text-color);
+    }
+    esphome-svg-icon {
+      --mdc-icon-size: 56px;
+    }
+    mwc-button {
+      --mdc-theme-primary: var(--primary-text-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "streamer-warning": ESPHomeStreamerWarning;
+  }
+}

src/esphome-main.ts

@@ -3,14 +3,14 @@ import "./components/esphome-header-menu";
 import "./components/esphome-fab";
 import { LitElement, html, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { ESPHomeBlurSecrets } from "./components/remote-process";
 
 @customElement("esphome-main")
 class ESPHomeMainView extends LitElement {
   @property() version = "unknown";
-
   @property() docsLink = "";
-
   @property() logoutUrl?: string;
+  @property({ type: Boolean }) streamerMode = false;
 
   @state() private editing?: string;
 
@@ -27,6 +27,7 @@ class ESPHomeMainView extends LitElement {
         <esphome-editor
           @close=${this._handleEditorClose}
           fileName=${this.editing}
+          .streamerMode=${this.streamerMode}
         ></esphome-editor>
       `;
     }
@@ -61,6 +62,11 @@ class ESPHomeMainView extends LitElement {
     return this;
   }
 
+  connectedCallback() {
+    ESPHomeBlurSecrets.enabled = this.streamerMode;
+    super.connectedCallback();
+  }
+
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
     document.body.addEventListener<any>("edit-file", (ev) => {

src/util/console-color.ts

@@ -24,7 +24,9 @@ export class ColoredConsole {
   constructor(public targetElement: HTMLElement) {}
 
   logs(): string {
-    return this.targetElement.innerText;
+    const logs = this.targetElement.cloneNode(true) as HTMLElement;
+    logs.querySelectorAll(".log-secret").forEach((e) => (e.innerHTML = ""));
+    return logs.innerText;
   }
 
   addLine(line: string) {
@@ -228,9 +230,11 @@ export const coloredConsoleStyles = `
     -ms-user-select: none;
     user-select: none;
   }
+  .log.blur-secrets .log-secret {
+    filter: blur(5px);
+  }
   .log-secret-redacted {
     opacity: 0;
-    width: 1px;
     font-size: 1px;
   }
   .log-fg-black {