From a91977a153d00cf4c61cdf5ffa229ad48456eaa2 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 14 Feb 2022 10:21:26 -0800 Subject: [PATCH 1/4] Allow uploading multiple files --- .../media-browser/ha-panel-media-browser.ts | 84 +++++++++++++------ src/translations/en.json | 3 +- 2 files changed, 62 insertions(+), 25 deletions(-) diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index 0ab9f870c42d..d07ec72172e3 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,4 +1,4 @@ -import { mdiArrowLeft, mdiUpload } from "@mdi/js"; +import { mdiArrowLeft, mdiProgressUpload, mdiUpload } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@material/mwc-button"; @@ -54,6 +54,8 @@ class PanelMediaBrowser extends LitElement { @state() _currentItem?: MediaPlayerItem; + @state() _uploading = 0; + private _navigateIds: MediaPlayerItemId[] = [ { media_content_id: undefined, @@ -97,12 +99,25 @@ class PanelMediaBrowser extends LitElement { ) ? html` 0 + ? this.hass.localize( + "ui.components.media-browser.file_management.uploading", + { + count: this._uploading, + } + ) + : this.hass.localize( + "ui.components.media-browser.file_management.add_media" + )} + .disabled=${this._uploading > 0} @click=${this._startUpload} > - + 0 + ? mdiProgressUpload + : mdiUpload} + slot="icon" + > ` : ""} @@ -240,29 +255,44 @@ class PanelMediaBrowser extends LitElement { } private async _startUpload() { + if (this._uploading > 0) { + return; + } const input = document.createElement("input"); input.type = "file"; input.accept = "audio/*,video/*,image/*"; - input.addEventListener("change", async () => { - try { - await uploadLocalMedia( - this.hass, - this._currentItem!.media_content_id!, - input.files![0] - ); - } catch (err: any) { - showAlertDialog(this, { - text: this.hass.localize( - "ui.components.media-browser.file_management.upload_failed", - { - reason: err.message || err, + input.multiple = true; + input.addEventListener( + "change", + async () => { + const files = input.files!; + const target = this._currentItem!.media_content_id!; + + try { + for (let i = 0; i < files.length; i++) { + this._uploading = files.length - i; + try { + // eslint-disable-next-line no-await-in-loop + await uploadLocalMedia(this.hass, target, files[i]); + } catch (err: any) { + showAlertDialog(this, { + text: this.hass.localize( + "ui.components.media-browser.file_management.upload_failed", + { + reason: err.message || err, + } + ), + }); + return; } - ), - }); - return; - } - await this._browser.refresh(); - }); + } + } finally { + this._uploading = 0; + await this._browser.refresh(); + } + }, + { once: true } + ); input.click(); } @@ -270,6 +300,12 @@ class PanelMediaBrowser extends LitElement { return [ haStyle, css` + app-toolbar mwc-button { + --mdc-theme-primary: var(--app-header-text-color); + /* We use icon + text to show disabled state */ + --mdc-button-disabled-ink-color: var(--app-header-text-color); + } + ha-media-player-browse { height: calc(100vh - (100px + var(--header-height))); } diff --git a/src/translations/en.json b/src/translations/en.json index 5bcc4ce4e8da..8e021b58450c 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -526,7 +526,8 @@ "setup_local_help": "Check the {documentation} on how to setup local media.", "file_management": { "upload_failed": "Upload failed: {reason}", - "add_media": "Add Media" + "add_media": "Add Media", + "uploading": "Uploading {count} {count, plural,\n one {file}\n other {files}\n}" }, "class": { "album": "Album", From 4c8bc58ec324e414c9adb7ffc89eccfae1df5319 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 14 Feb 2022 10:47:58 -0800 Subject: [PATCH 2/4] Highlight upload button when no items --- .../media-player/ha-media-player-browse.ts | 53 ++++++++++--------- src/translations/en.json | 1 + 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 6117286c5988..6feb0e36617f 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -1,7 +1,7 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list-item"; -import { mdiPlay, mdiPlus } from "@mdi/js"; +import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, @@ -258,32 +258,25 @@ export class HaMediaPlayerBrowse extends LitElement { : !currentItem.children?.length ? html`
- ${this.hass.localize( - "ui.components.media-browser.no_items" - )} -
${currentItem.media_content_id === "media-source://media_source/local/." - ? html`
${this.hass.localize( - "ui.components.media-browser.learn_adding_local_media", - "documentation", - html` + + + + + ${this.hass.localize( + "ui.components.media-browser.file_management.highlight_button" )} - target="_blank" - rel="noreferrer" - >${this.hass.localize( - "ui.components.media-browser.documentation" - )}` - )} -
- ${this.hass.localize( - "ui.components.media-browser.local_media_files" - )}` - : ""} + +
+ ` + : this.hass.localize( + "ui.components.media-browser.no_items" + )} ` : childrenMediaClass.layout === "grid" @@ -744,6 +737,18 @@ export class HaMediaPlayerBrowse extends LitElement { padding-left: 32px; } + .highlight-add-button { + display: flex; + flex-direction: row-reverse; + margin-right: 48px; + } + + .highlight-add-button ha-svg-icon { + position: relative; + top: -0.5em; + margin-left: 8px; + } + .content { overflow-y: auto; box-sizing: border-box; diff --git a/src/translations/en.json b/src/translations/en.json index 8e021b58450c..b4892018a6e8 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -525,6 +525,7 @@ "no_media_folder": "It looks like you have not yet created a media directory.", "setup_local_help": "Check the {documentation} on how to setup local media.", "file_management": { + "highlight_button": "Click here to upload your first media", "upload_failed": "Upload failed: {reason}", "add_media": "Add Media", "uploading": "Uploading {count} {count, plural,\n one {file}\n other {files}\n}" From e0e6ac55fadbf55a643d39b5ab5f6f8af5b10c1f Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 14 Feb 2022 10:54:51 -0800 Subject: [PATCH 3/4] Show spinner when uploading --- .../media-browser/ha-panel-media-browser.ts | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index d07ec72172e3..2b4641ebb550 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,4 +1,4 @@ -import { mdiArrowLeft, mdiProgressUpload, mdiUpload } from "@mdi/js"; +import { mdiArrowLeft, mdiUpload } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@material/mwc-button"; @@ -15,6 +15,7 @@ import { LocalStorage } from "../../common/decorators/local-storage"; import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event"; import { navigate } from "../../common/navigate"; import "../../components/ha-menu-button"; +import "../../components/ha-circular-progress"; import "../../components/ha-icon-button"; import "../../components/ha-svg-icon"; import "../../components/media-player/ha-media-player-browse"; @@ -112,12 +113,21 @@ class PanelMediaBrowser extends LitElement { .disabled=${this._uploading > 0} @click=${this._startUpload} > - 0 - ? mdiProgressUpload - : mdiUpload} - slot="icon" - > + ${this._uploading > 0 + ? html` + + ` + : html` + + `} ` : ""} @@ -321,7 +331,8 @@ class PanelMediaBrowser extends LitElement { right: 0; } - ha-svg-icon[slot="icon"] { + ha-svg-icon[slot="icon"], + ha-circular-progress[slot="icon"] { vertical-align: middle; } `, From c117c688b6c36bc685196e6ff707de6e8421250b Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 14 Feb 2022 15:09:10 -0800 Subject: [PATCH 4/4] Simplify for loop --- .../media-browser/ha-panel-media-browser.ts | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index 2b4641ebb550..320d7dbcbac2 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -278,28 +278,25 @@ class PanelMediaBrowser extends LitElement { const files = input.files!; const target = this._currentItem!.media_content_id!; - try { - for (let i = 0; i < files.length; i++) { - this._uploading = files.length - i; - try { - // eslint-disable-next-line no-await-in-loop - await uploadLocalMedia(this.hass, target, files[i]); - } catch (err: any) { - showAlertDialog(this, { - text: this.hass.localize( - "ui.components.media-browser.file_management.upload_failed", - { - reason: err.message || err, - } - ), - }); - return; - } + for (let i = 0; i < files.length; i++) { + this._uploading = files.length - i; + try { + // eslint-disable-next-line no-await-in-loop + await uploadLocalMedia(this.hass, target, files[i]); + } catch (err: any) { + showAlertDialog(this, { + text: this.hass.localize( + "ui.components.media-browser.file_management.upload_failed", + { + reason: err.message || err, + } + ), + }); + break; } - } finally { - this._uploading = 0; - await this._browser.refresh(); } + this._uploading = 0; + await this._browser.refresh(); }, { once: true } );