mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
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:
parent
de57b025e6
commit
4d107f978c
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -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": {
|
||||
|
Loading…
x
Reference in New Issue
Block a user