mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Allow uploading multiple files (#11687)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
520896a3c2
commit
8bb2374b1b
@ -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,
|
||||
@ -265,32 +265,25 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
: !currentItem.children?.length
|
||||
? html`
|
||||
<div class="container no-items">
|
||||
${this.hass.localize(
|
||||
"ui.components.media-browser.no_items"
|
||||
)}
|
||||
<br />
|
||||
${currentItem.media_content_id ===
|
||||
"media-source://media_source/local/."
|
||||
? html`<br />${this.hass.localize(
|
||||
"ui.components.media-browser.learn_adding_local_media",
|
||||
"documentation",
|
||||
html`<a
|
||||
href=${documentationUrl(
|
||||
this.hass,
|
||||
"/more-info/local-media/add-media"
|
||||
)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>${this.hass.localize(
|
||||
"ui.components.media-browser.documentation"
|
||||
)}</a
|
||||
>`
|
||||
)}
|
||||
<br />
|
||||
? html`
|
||||
<div class="highlight-add-button">
|
||||
<span>
|
||||
<ha-svg-icon
|
||||
.path=${mdiArrowUpRight}
|
||||
></ha-svg-icon>
|
||||
</span>
|
||||
<span>
|
||||
${this.hass.localize(
|
||||
"ui.components.media-browser.local_media_files"
|
||||
)}`
|
||||
: ""}
|
||||
"ui.components.media-browser.file_management.highlight_button"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: this.hass.localize(
|
||||
"ui.components.media-browser.no_items"
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: childrenMediaClass.layout === "grid"
|
||||
@ -772,6 +765,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;
|
||||
|
||||
@ -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";
|
||||
@ -64,6 +65,8 @@ class PanelMediaBrowser extends LitElement {
|
||||
|
||||
@state() _currentItem?: MediaPlayerItem;
|
||||
|
||||
@state() _uploading = 0;
|
||||
|
||||
private _navigateIds: MediaPlayerItemId[] = [
|
||||
{
|
||||
media_content_id: undefined,
|
||||
@ -107,12 +110,34 @@ class PanelMediaBrowser extends LitElement {
|
||||
)
|
||||
? html`
|
||||
<mwc-button
|
||||
.label=${this.hass.localize(
|
||||
.label=${this._uploading > 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}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiUpload} slot="icon"></ha-svg-icon>
|
||||
${this._uploading > 0
|
||||
? html`
|
||||
<ha-circular-progress
|
||||
size="tiny"
|
||||
active
|
||||
alt=""
|
||||
slot="icon"
|
||||
></ha-circular-progress>
|
||||
`
|
||||
: html`
|
||||
<ha-svg-icon
|
||||
.path=${mdiUpload}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
`}
|
||||
</mwc-button>
|
||||
`
|
||||
: ""}
|
||||
@ -255,16 +280,24 @@ 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 () => {
|
||||
input.multiple = true;
|
||||
input.addEventListener(
|
||||
"change",
|
||||
async () => {
|
||||
const files = input.files!;
|
||||
const target = this._currentItem!.media_content_id!;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
this._uploading = files.length - i;
|
||||
try {
|
||||
await uploadLocalMedia(
|
||||
this.hass,
|
||||
this._currentItem!.media_content_id!,
|
||||
input.files![0]
|
||||
);
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await uploadLocalMedia(this.hass, target, files[i]);
|
||||
} catch (err: any) {
|
||||
showAlertDialog(this, {
|
||||
text: this.hass.localize(
|
||||
@ -274,10 +307,14 @@ class PanelMediaBrowser extends LitElement {
|
||||
}
|
||||
),
|
||||
});
|
||||
return;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this._uploading = 0;
|
||||
await this._browser.refresh();
|
||||
});
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
input.click();
|
||||
}
|
||||
|
||||
@ -285,6 +322,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)));
|
||||
}
|
||||
@ -300,7 +343,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;
|
||||
}
|
||||
`,
|
||||
|
||||
@ -525,8 +525,10 @@
|
||||
"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"
|
||||
"add_media": "Add Media",
|
||||
"uploading": "Uploading {count} {count, plural,\n one {file}\n other {files}\n}"
|
||||
},
|
||||
"class": {
|
||||
"album": "Album",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user