From f928a8e58e8cb4561b67f4a8fad138f51d3dad0d Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 19 Aug 2020 11:33:18 +0200 Subject: [PATCH] Add picture upload component (#6646) Co-authored-by: Bram Kragten --- package.json | 1 + src/components/ha-picture-upload.ts | 226 ++++++++++++++++++ src/data/image.ts | 54 +++++ src/data/person.ts | 2 + .../image-cropper-dialog.ts | 136 +++++++++++ .../show-image-cropper-dialog.ts | 30 +++ .../config/person/dialog-person-detail.ts | 33 ++- src/panels/config/person/ha-config-person.ts | 39 ++- src/state/connection-mixin.ts | 6 +- src/translations/en.json | 7 + yarn.lock | 11 +- 11 files changed, 532 insertions(+), 13 deletions(-) create mode 100644 src/components/ha-picture-upload.ts create mode 100644 src/data/image.ts create mode 100644 src/dialogs/image-cropper-dialog/image-cropper-dialog.ts create mode 100644 src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts diff --git a/package.json b/package.json index 47bf3b8ec9..f2fe5f1c72 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "codemirror": "^5.49.0", "comlink": "^4.3.0", "cpx": "^1.5.0", + "cropperjs": "^1.5.7", "deep-clone-simple": "^1.1.1", "deep-freeze": "^0.0.1", "es6-object-assign": "^1.1.0", diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts new file mode 100644 index 0000000000..411984d555 --- /dev/null +++ b/src/components/ha-picture-upload.ts @@ -0,0 +1,226 @@ +import "@material/mwc-icon-button/mwc-icon-button"; +import { mdiClose, mdiImagePlus } from "@mdi/js"; +import "@polymer/iron-input/iron-input"; +import "@polymer/paper-input/paper-input-container"; +import { + css, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; +import { fireEvent } from "../common/dom/fire_event"; +import { createImage, generateImageThumbnailUrl } from "../data/image"; +import { HomeAssistant } from "../types"; +import "./ha-circular-progress"; +import "./ha-svg-icon"; +import { + showImageCropperDialog, + CropOptions, +} from "../dialogs/image-cropper-dialog/show-image-cropper-dialog"; + +@customElement("ha-picture-upload") +export class HaPictureUpload extends LitElement { + public hass!: HomeAssistant; + + @property() public value: string | null = null; + + @property() public label?: string; + + @property({ type: Boolean }) public crop = false; + + @property({ attribute: false }) public cropOptions?: CropOptions; + + @property({ type: Number }) public size = 512; + + @internalProperty() private _error = ""; + + @internalProperty() private _uploading = false; + + @internalProperty() private _drag = false; + + protected updated(changedProperties: PropertyValues) { + if (changedProperties.has("_drag")) { + (this.shadowRoot!.querySelector( + "paper-input-container" + ) as any)._setFocused(this._drag); + } + } + + public render(): TemplateResult { + return html` + ${this._uploading + ? html`` + : html` + ${this._error ? html`
${this._error}
` : ""} + + `} + `; + } + + private _handleDrop(ev: DragEvent) { + ev.preventDefault(); + ev.stopPropagation(); + if (ev.dataTransfer?.files) { + if (this.crop) { + this._cropFile(ev.dataTransfer.files[0]); + } else { + this._uploadFile(ev.dataTransfer.files[0]); + } + } + this._drag = false; + } + + private _handleDragStart(ev: DragEvent) { + ev.preventDefault(); + ev.stopPropagation(); + this._drag = true; + } + + private _handleDragEnd(ev: DragEvent) { + ev.preventDefault(); + ev.stopPropagation(); + this._drag = false; + } + + private async _handleFilePicked(ev) { + if (this.crop) { + this._cropFile(ev.target.files[0]); + } else { + this._uploadFile(ev.target.files[0]); + } + } + + private async _cropFile(file: File) { + if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) { + this._error = this.hass.localize( + "ui.components.picture-upload.unsupported_format" + ); + return; + } + showImageCropperDialog(this, { + file, + options: this.cropOptions || { + round: false, + aspectRatio: NaN, + }, + croppedCallback: (croppedFile) => { + this._uploadFile(croppedFile); + }, + }); + } + + private async _uploadFile(file: File) { + if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) { + this._error = this.hass.localize( + "ui.components.picture-upload.unsupported_format" + ); + return; + } + this._uploading = true; + this._error = ""; + try { + const media = await createImage(this.hass, file); + this.value = generateImageThumbnailUrl(media.id, this.size); + fireEvent(this, "change"); + } catch (err) { + this._error = err.toString(); + } finally { + this._uploading = false; + } + } + + private _clearPicture(ev: Event) { + ev.preventDefault(); + this.value = null; + this._error = ""; + fireEvent(this, "change"); + } + + static get styles() { + return css` + .error { + color: var(--error-color); + } + paper-input-container { + position: relative; + padding: 8px; + margin: 0 -8px; + } + paper-input-container.dragged:before { + position: var(--layout-fit_-_position); + top: var(--layout-fit_-_top); + right: var(--layout-fit_-_right); + bottom: var(--layout-fit_-_bottom); + left: var(--layout-fit_-_left); + background: currentColor; + content: ""; + opacity: var(--dark-divider-opacity); + pointer-events: none; + border-radius: 4px; + } + img { + max-width: 125px; + max-height: 125px; + } + input.file { + display: none; + } + mwc-icon-button { + --mdc-icon-button-size: 24px; + --mdc-icon-size: 20px; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-picture-upload": HaPictureUpload; + } +} diff --git a/src/data/image.ts b/src/data/image.ts new file mode 100644 index 0000000000..b81499f002 --- /dev/null +++ b/src/data/image.ts @@ -0,0 +1,54 @@ +import { HomeAssistant } from "../types"; + +interface Image { + filesize: number; + name: string; + uploaded_at: string; // isoformat date + content_type: string; + id: string; +} + +export interface ImageMutableParams { + name: string; +} + +export const generateImageThumbnailUrl = (mediaId: string, size: number) => + `/api/image/serve/${mediaId}/${size}x${size}`; + +export const fetchImages = (hass: HomeAssistant) => + hass.callWS({ type: "image/list" }); + +export const createImage = async ( + hass: HomeAssistant, + file: File +): Promise => { + const fd = new FormData(); + fd.append("file", file); + const resp = await hass.fetchWithAuth("/api/image/upload", { + method: "POST", + body: fd, + }); + if (resp.status === 413) { + throw new Error("Uploaded image is too large"); + } else if (resp.status !== 200) { + throw new Error("Unknown error"); + } + return await resp.json(); +}; + +export const updateImage = ( + hass: HomeAssistant, + id: string, + updates: Partial +) => + hass.callWS({ + type: "image/update", + media_id: id, + ...updates, + }); + +export const deleteImage = (hass: HomeAssistant, id: string) => + hass.callWS({ + type: "image/delete", + media_id: id, + }); diff --git a/src/data/person.ts b/src/data/person.ts index 00e77a838f..eb3b358729 100644 --- a/src/data/person.ts +++ b/src/data/person.ts @@ -5,12 +5,14 @@ export interface Person { name: string; user_id?: string; device_trackers?: string[]; + picture?: string; } export interface PersonMutableParams { name: string; user_id: string | null; device_trackers: string[]; + picture: string | null; } export const fetchPersons = (hass: HomeAssistant) => diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts new file mode 100644 index 0000000000..ed9e3a05aa --- /dev/null +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -0,0 +1,136 @@ +import "@material/mwc-button/mwc-button"; +import Cropper from "cropperjs"; +// @ts-ignore +import cropperCss from "cropperjs/dist/cropper.css"; +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + PropertyValues, + query, + TemplateResult, + unsafeCSS, +} from "lit-element"; +import "../../components/ha-dialog"; +import { haStyleDialog } from "../../resources/styles"; +import type { HomeAssistant } from "../../types"; +import { HaImageCropperDialogParams } from "./show-image-cropper-dialog"; +import { classMap } from "lit-html/directives/class-map"; + +@customElement("image-cropper-dialog") +export class HaImagecropperDialog extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _params?: HaImageCropperDialogParams; + + @internalProperty() private _open = false; + + @query("img") private _image!: HTMLImageElement; + + private _cropper?: Cropper; + + public showDialog(params: HaImageCropperDialogParams): void { + this._params = params; + this._open = true; + } + + public closeDialog() { + this._open = false; + this._params = undefined; + this._cropper?.destroy(); + } + + protected updated(changedProperties: PropertyValues) { + if (!changedProperties.has("_params") || !this._params) { + return; + } + if (!this._cropper) { + this._image.src = URL.createObjectURL(this._params.file); + this._cropper = new Cropper(this._image, { + aspectRatio: this._params.options.aspectRatio, + viewMode: 1, + dragMode: "move", + minCropBoxWidth: 50, + ready: () => { + URL.revokeObjectURL(this._image!.src); + }, + }); + } else { + this._cropper.replace(URL.createObjectURL(this._params.file)); + } + } + + protected render(): TemplateResult { + return html` +
+ +
+ + ${this.hass.localize("ui.common.cancel")} + + + ${this.hass.localize("ui.dialogs.image_cropper.crop")} + + `; + } + + private _cropImage() { + this._cropper!.getCroppedCanvas().toBlob( + (blob) => { + if (!blob) { + return; + } + const file = new File([blob], this._params!.file.name, { + type: this._params!.options.type || this._params!.file.type, + }); + this._params!.croppedCallback(file); + this.closeDialog(); + }, + this._params!.options.type || this._params!.file.type, + this._params!.options.quality + ); + } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + ${unsafeCSS(cropperCss)} + .container { + max-width: 640px; + } + img { + max-width: 100%; + } + .container.round .cropper-view-box, + .container.round .cropper-face { + border-radius: 50%; + } + .cropper-line, + .cropper-point, + .cropper-point.point-se::before { + background-color: var(--primary-color); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "image-cropper-dialog": HaImagecropperDialog; + } +} diff --git a/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts new file mode 100644 index 0000000000..3ca19001c8 --- /dev/null +++ b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts @@ -0,0 +1,30 @@ +import { fireEvent } from "../../common/dom/fire_event"; + +export interface CropOptions { + round: boolean; + type?: "image/jpeg" | "image/png"; + quality?: number; + aspectRatio: number; +} + +export interface HaImageCropperDialogParams { + file: File; + options: CropOptions; + croppedCallback: (file: File) => void; +} + +const loadImageCropperDialog = () => + import( + /* webpackChunkName: "image-cropper-dialog" */ "./image-cropper-dialog" + ); + +export const showImageCropperDialog = ( + element: HTMLElement, + dialogParams: HaImageCropperDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "image-cropper-dialog", + dialogImport: loadImageCropperDialog, + dialogParams, + }); +}; diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index b146cf4074..94c50807c1 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -10,6 +10,8 @@ import { TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; +import "../../../components/ha-picture-upload"; +import type { HaPictureUpload } from "../../../components/ha-picture-upload"; import "../../../components/entity/ha-entities-picker"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/user/ha-user-picker"; @@ -18,9 +20,17 @@ import { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { PersonDetailDialogParams } from "./show-dialog-person-detail"; +import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog"; const includeDomains = ["device_tracker"]; +const cropOptions: CropOptions = { + round: true, + type: "image/jpeg", + quality: 0.75, + aspectRatio: 1, +}; + class DialogPersonDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -30,6 +40,8 @@ class DialogPersonDetail extends LitElement { @internalProperty() private _deviceTrackers!: string[]; + @internalProperty() private _picture!: string | null; + @internalProperty() private _error?: string; @internalProperty() private _params?: PersonDetailDialogParams; @@ -50,10 +62,12 @@ class DialogPersonDetail extends LitElement { this._name = this._params.entry.name || ""; this._userId = this._params.entry.user_id || undefined; this._deviceTrackers = this._params.entry.device_trackers || []; + this._picture = this._params.entry.picture || null; } else { this._name = ""; this._userId = undefined; this._deviceTrackers = []; + this._picture = null; } await this.updateComplete; } @@ -66,7 +80,7 @@ class DialogPersonDetail extends LitElement { return html` + + ) { + this._error = undefined; + this._picture = (ev.target as HaPictureUpload).value; + } + private async _updateEntry() { this._submitting = true; try { @@ -204,6 +231,7 @@ class DialogPersonDetail extends LitElement { name: this._name.trim(), device_trackers: this._deviceTrackers, user_id: this._userId || null, + picture: this._picture, }; if (this._params!.entry) { await this._params!.updateEntry(values); @@ -240,6 +268,9 @@ class DialogPersonDetail extends LitElement { .form { padding-bottom: 24px; } + ha-picture-upload { + display: block; + } ha-user-picker { margin-top: 16px; } diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 94934fe200..764ae63b28 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -1,4 +1,4 @@ -import "@polymer/paper-item/paper-item"; +import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import { css, @@ -32,6 +32,7 @@ import { } from "./show-dialog-person-detail"; import "../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; +import { styleMap } from "lit-html/directives/style-map"; class HaConfigPerson extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @@ -84,11 +85,20 @@ class HaConfigPerson extends LitElement { ${this._storageItems.map((entry) => { return html` - + + ${entry.picture + ? html`
` + : ""} ${entry.name} - + `; })} ${this._storageItems.length === 0 @@ -111,11 +121,20 @@ class HaConfigPerson extends LitElement { ${this._configItems.map((entry) => { return html` - + + ${entry.picture + ? html`
` + : ""} ${entry.name} - + `; })} @@ -228,15 +247,21 @@ class HaConfigPerson extends LitElement { margin: 16px auto; overflow: hidden; } + .picture { + width: 40px; + height: 40px; + background-size: cover; + border-radius: 50%; + } .empty { text-align: center; padding: 8px; } - paper-item { + paper-icon-item { padding-top: 4px; padding-bottom: 4px; } - ha-card.storage paper-item { + ha-card.storage paper-icon-item { cursor: pointer; } `; diff --git a/src/state/connection-mixin.ts b/src/state/connection-mixin.ts index a5bb5daa2b..7af421029d 100644 --- a/src/state/connection-mixin.ts +++ b/src/state/connection-mixin.ts @@ -86,8 +86,10 @@ export const connectionMixin = >( }, callApi: async (method, path, parameters) => hassCallApi(auth, method, path, parameters), - fetchWithAuth: (path, init) => - fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init), + fetchWithAuth: ( + path: string, + init: Parameters[2] + ) => fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init), // For messages that do not get a response sendWS: (msg) => { if (__DEV__) { diff --git a/src/translations/en.json b/src/translations/en.json index 41f54a7386..cf43d60daa 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -299,6 +299,10 @@ "failed_create_area": "Failed to create area." } }, + "picture-upload": { + "label": "Picture", + "unsupported_format": "Unsupported format, please choose a JPEG, PNG or GIF image." + }, "date-range-picker": { "start_date": "Start date", "end_date": "End date", @@ -354,6 +358,9 @@ "default_confirmation_title": "Are you sure?", "close": "close" }, + "image_cropper": { + "crop": "Crop" + }, "more_info_control": { "dismiss": "Dismiss dialog", "settings": "Entity settings", diff --git a/yarn.lock b/yarn.lock index e6976c9b36..5fbc9e27ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1345,7 +1345,7 @@ "@babel/runtime" "^7.7.2" core-js "^3.4.1" -"@material/animation@8.0.0-canary.096a7a066.0", "@material/animation@8.0.0-canary.a78ceb112.0", "@material/animation@=8.0.0-canary.096a7a066.0": +"@material/animation@8.0.0-canary.096a7a066.0", "@material/animation@8.0.0-canary.a78ceb112.0": version "8.0.0-canary.096a7a066.0" resolved "https://registry.yarnpkg.com/@material/animation/-/animation-8.0.0-canary.096a7a066.0.tgz#9c1b3d31858889e04e722ca8f1ade7ae3c54f7e6" integrity sha512-hGL6sMGcyd9JoxcyhRkAhD6KKQwZVRkhaFcra9YMBYHUbWRxfUbfDTjUZ3ZxmLDDcsjL4Hqjblet6Xmtq3Br5g== @@ -1463,7 +1463,7 @@ "@material/feature-targeting" "8.0.0-canary.096a7a066.0" "@material/theme" "8.0.0-canary.096a7a066.0" -"@material/feature-targeting@8.0.0-canary.096a7a066.0", "@material/feature-targeting@8.0.0-canary.a78ceb112.0", "@material/feature-targeting@=8.0.0-canary.096a7a066.0": +"@material/feature-targeting@8.0.0-canary.096a7a066.0", "@material/feature-targeting@8.0.0-canary.a78ceb112.0": version "8.0.0-canary.096a7a066.0" resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-8.0.0-canary.096a7a066.0.tgz#fca721c287b08e0868467ee60daa5d32aad16430" integrity sha512-5nxnG08PjdwhrLMNxfeCOImbdEtP/bVveOVr72hdqldHuwfnzNjp0lwWAAh/QZrpJNl4Ve2Cnp/LkRnlOELIkw== @@ -1839,7 +1839,7 @@ "@material/typography" "8.0.0-canary.096a7a066.0" tslib "^1.9.3" -"@material/theme@8.0.0-canary.096a7a066.0", "@material/theme@8.0.0-canary.a78ceb112.0", "@material/theme@=8.0.0-canary.096a7a066.0": +"@material/theme@8.0.0-canary.096a7a066.0", "@material/theme@8.0.0-canary.a78ceb112.0": version "8.0.0-canary.096a7a066.0" resolved "https://registry.yarnpkg.com/@material/theme/-/theme-8.0.0-canary.096a7a066.0.tgz#f657eaa545797ee3e6a2d96e4a61f844ad3dc425" integrity sha512-FdAUEjq7KJ835sobJQL0w0XWD5PabXl77HmBuy5F3bEYbYterWOutvuHbTkAEN6sTzgHCKhdoMubRxMKidqafA== @@ -4782,6 +4782,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +cropperjs@^1.5.7: + version "1.5.7" + resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.7.tgz#b65019725bae1c6285e881fb661b2141fa57025b" + integrity sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw== + cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"