Add picture upload component (#6646)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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",

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`<ha-circular-progress
+            alt="Uploading"
+            size="large"
+            active
+          ></ha-circular-progress>`
+        : html`
+            ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+            <label for="input">
+              <paper-input-container
+                .alwaysFloatLabel=${Boolean(this.value)}
+                @drop=${this._handleDrop}
+                @dragenter=${this._handleDragStart}
+                @dragover=${this._handleDragStart}
+                @dragleave=${this._handleDragEnd}
+                @dragend=${this._handleDragEnd}
+                class=${classMap({
+                  dragged: this._drag,
+                })}
+              >
+                <label for="input" slot="label">
+                  ${this.label ||
+                  this.hass.localize("ui.components.picture-upload.label")}
+                </label>
+                <iron-input slot="input">
+                  <input
+                    id="input"
+                    type="file"
+                    class="file"
+                    accept="image/png, image/jpeg, image/gif"
+                    @change=${this._handleFilePicked}
+                  />
+                  ${this.value ? html`<img .src=${this.value} />` : ""}
+                </iron-input>
+                ${this.value
+                  ? html`<mwc-icon-button
+                      slot="suffix"
+                      @click=${this._clearPicture}
+                    >
+                      <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                    </mwc-icon-button>`
+                  : html`<mwc-icon-button slot="suffix">
+                      <ha-svg-icon .path=${mdiImagePlus}></ha-svg-icon>
+                    </mwc-icon-button>`}
+              </paper-input-container>
+            </label>
+          `}
+    `;
+  }
+
+  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;
+  }
+}

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<Image[]>({ type: "image/list" });
+
+export const createImage = async (
+  hass: HomeAssistant,
+  file: File
+): Promise<Image> => {
+  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<ImageMutableParams>
+) =>
+  hass.callWS<Image>({
+    type: "image/update",
+    media_id: id,
+    ...updates,
+  });
+
+export const deleteImage = (hass: HomeAssistant, id: string) =>
+  hass.callWS({
+    type: "image/delete",
+    media_id: id,
+  });

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) =>

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`<ha-dialog
+      @closed=${this.closeDialog}
+      scrimClickAction
+      escapeKeyAction
+      .open=${this._open}
+    >
+      <div
+        class="container ${classMap({
+          round: Boolean(this._params?.options.round),
+        })}"
+      >
+        <img />
+      </div>
+      <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        ${this.hass.localize("ui.common.cancel")}
+      </mwc-button>
+      <mwc-button slot="primaryAction" @click=${this._cropImage}>
+        ${this.hass.localize("ui.dialogs.image_cropper.crop")}
+      </mwc-button>
+    </ha-dialog>`;
+  }
+
+  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;
+  }
+}

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,
+  });
+};

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`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -92,6 +106,14 @@ class DialogPersonDetail extends LitElement {
               required
               auto-validate
             ></paper-input>
+            <ha-picture-upload
+              .hass=${this.hass}
+              .value=${this._picture}
+              crop
+              .cropOptions=${cropOptions}
+              @change=${this._pictureChanged}
+            ></ha-picture-upload>
+
             <ha-user-picker
               label="${this.hass!.localize(
                 "ui.panel.config.person.detail.linked_user"
@@ -197,6 +219,11 @@ class DialogPersonDetail extends LitElement {
     this._deviceTrackers = ev.detail.value;
   }
 
+  private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
+    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;
         }

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 {
           <ha-card class="storage">
             ${this._storageItems.map((entry) => {
               return html`
-                <paper-item @click=${this._openEditEntry} .entry=${entry}>
+                <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
+                  ${entry.picture
+                    ? html`<div
+                        style=${styleMap({
+                          backgroundImage: `url(${entry.picture})`,
+                        })}
+                        class="picture"
+                        slot="item-icon"
+                      ></div>`
+                    : ""}
                   <paper-item-body>
                     ${entry.name}
                   </paper-item-body>
-                </paper-item>
+                </paper-icon-item>
               `;
             })}
             ${this._storageItems.length === 0
@@ -111,11 +121,20 @@ class HaConfigPerson extends LitElement {
                 <ha-card header="Configuration.yaml persons">
                   ${this._configItems.map((entry) => {
                     return html`
-                      <paper-item>
+                      <paper-icon-item>
+                        ${entry.picture
+                          ? html`<div
+                              style=${styleMap({
+                                backgroundImage: `url(${entry.picture})`,
+                              })}
+                              class="picture"
+                              slot="item-icon"
+                            ></div>`
+                          : ""}
                         <paper-item-body>
                           ${entry.name}
                         </paper-item-body>
-                      </paper-item>
+                      </paper-icon-item>
                     `;
                   })}
                 </ha-card>
@@ -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;
       }
     `;

src/state/connection-mixin.ts

@@ -86,8 +86,10 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         },
         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<typeof fetchWithAuth>[2]
+        ) => fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init),
         // For messages that do not get a response
         sendWS: (msg) => {
           if (__DEV__) {

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",

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"