Mute stream outside of more info (#6959)

src/components/ha-camera-stream.ts

@@ -26,7 +26,11 @@ class HaCameraStream extends LitElement {
 
   @property({ attribute: false }) public stateObj?: CameraEntity;
 
-  @property({ type: Boolean }) public showControls = false;
+  @property({ type: Boolean, attribute: "controls" })
+  public controls = false;
+
+  @property({ type: Boolean, attribute: "muted" })
+  public muted = false;
 
   // We keep track if we should force MJPEG with a string
   // that way it automatically resets if we change entity.
@@ -56,9 +60,9 @@ class HaCameraStream extends LitElement {
         ? html`
             <ha-hls-player
               autoplay
-              muted
               playsinline
-              ?controls=${this.showControls}
+              .muted=${this.muted}
+              .controls=${this.controls}
               .hass=${this.hass}
               .url=${this._url}
             ></ha-hls-player>

src/dialogs/more-info/controls/more-info-camera.ts

@@ -48,7 +48,7 @@ class MoreInfoCamera extends LitElement {
       <ha-camera-stream
         .hass=${this.hass}
         .stateObj=${this.stateObj}
-        showcontrols
+        controls
       ></ha-camera-stream>
       ${this._cameraPrefs
         ? html`

src/panels/config/users/ha-config-users.ts

@@ -1,3 +1,5 @@
+import "@material/mwc-fab";
+import { mdiPlus } from "@mdi/js";
 import {
   customElement,
   LitElement,
@@ -11,7 +13,7 @@ import {
   DataTableColumnContainer,
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "@material/mwc-fab";
+import "../../../components/ha-svg-icon";
 import { deleteUser, fetchUsers, updateUser, User } from "../../../data/user";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
@@ -19,8 +21,6 @@ import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showAddUserDialog } from "./show-dialog-add-user";
 import { showUserDetailDialog } from "./show-dialog-user-detail";
-import "../../../components/ha-svg-icon";
-import { mdiPlus } from "@mdi/js";
 
 @customElement("ha-config-users")
 export class HaConfigUsers extends LitElement {
@@ -56,7 +56,7 @@ export class HaConfigUsers extends LitElement {
           ),
           sortable: true,
           filterable: true,
-          width: "25%",
+          width: "30%",
           template: (groupIds) => html`
             ${this.hass.localize(`groups.${groupIds[0]}`)}
           `,
@@ -66,6 +66,7 @@ export class HaConfigUsers extends LitElement {
             "ui.panel.config.users.picker.headers.system"
           ),
           type: "icon",
+          width: "80px",
           sortable: true,
           filterable: true,
           template: (generated) => html`

src/panels/lovelace/components/hui-image.ts

@@ -3,9 +3,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
@@ -16,8 +16,8 @@ import { STATES_OFF } from "../../../common/const";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-camera-stream";
 import { fetchThumbnailUrlWithCache } from "../../../data/camera";
-import { CameraEntity, HomeAssistant } from "../../../types";
 import { UNAVAILABLE } from "../../../data/entity";
+import { CameraEntity, HomeAssistant } from "../../../types";
 
 const UPDATE_INTERVAL = 10000;
 const DEFAULT_FILTER = "grayscale(100%)";
@@ -132,8 +132,9 @@ export class HuiImage extends LitElement {
         ${this.cameraImage && this.cameraView === "live"
           ? html`
               <ha-camera-stream
+                muted
                 .hass=${this.hass}
-                .stateObj="${cameraObj}"
+                .stateObj=${cameraObj}
               ></ha-camera-stream>
             `
           : html`