Add download snapshot button to camera more info dialog (#22704)

* Add take snapshot button to camera more info dialog

* Change to download

* Use camera proxy

* Remove filename to have right extension

* Add error handling and process indication

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

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Run prettier

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Jan-Philipp Benecke 2024-11-12 11:59:29 +01:00 committed by GitHub
parent de57b025e6
commit 4d107f978c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 2 deletions

View File

@ -4,14 +4,20 @@ import { property, state } from "lit/decorators";
import "../../../components/ha-camera-stream";
import type { CameraEntity } from "../../../data/camera";
import type { HomeAssistant } from "../../../types";
import "../../../components/buttons/ha-progress-button";
import { UNAVAILABLE } from "../../../data/entity";
import { fileDownload } from "../../../util/file_download";
import { showToast } from "../../../util/toast";
class MoreInfoCamera extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj?: CameraEntity;
@state() private _attached = false;
@state() private _waiting = false;
public connectedCallback() {
super.connectedCallback();
this._attached = true;
@ -23,7 +29,7 @@ class MoreInfoCamera extends LitElement {
}
protected render() {
if (!this._attached || !this.hass || !this.stateObj) {
if (!this._attached || !this.stateObj) {
return nothing;
}
@ -34,14 +40,70 @@ class MoreInfoCamera extends LitElement {
allow-exoplayer
controls
></ha-camera-stream>
<div class="actions">
<ha-progress-button
@click=${this._downloadSnapshot}
.progress=${this._waiting}
.disabled=${this.stateObj.state === UNAVAILABLE}
>
${this.hass.localize(
"ui.dialogs.more_info_control.camera.download_snapshot"
)}
</ha-progress-button>
</div>
`;
}
private async _downloadSnapshot(ev: CustomEvent) {
const button = ev.currentTarget as any;
this._waiting = true;
try {
const result: Response | undefined = await this.hass.callApiRaw(
"GET",
`camera_proxy/${this.stateObj!.entity_id}`
);
if (!result) {
throw new Error("No response from API");
}
const blob = await result.blob();
const url = window.URL.createObjectURL(blob);
fileDownload(url);
} catch (err) {
this._waiting = false;
button.actionError();
showToast(this, {
message: this.hass.localize(
"ui.dialogs.more_info_control.camera.failed_to_download"
),
});
return;
}
this._waiting = false;
button.actionSuccess();
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
}
.actions {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
box-sizing: border-box;
padding: 12px;
z-index: 1;
gap: 8px;
}
`;
}
}

View File

@ -1339,6 +1339,10 @@
"button": "[%key:ui::dialogs::more_info_control::cover::switch_mode::button%]",
"position": "[%key:ui::dialogs::more_info_control::cover::switch_mode::position%]"
}
},
"camera": {
"download_snapshot": "Download snapshot",
"failed_to_download": "Failed to download snapshot. Please check the logs for more information."
}
},
"entity_registry": {