Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-09-28 16:04:00 +01:00
Code Activity

Introduce ha-progress-bar (#51453)

Browse Source 
* Replace mwc-linear-progress with ha-progress-bar

* Update src/panels/lovelace/cards/hui-media-control-card.ts

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* Remove duplicate import of ha-slider in hui-media-control-card.ts

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
Wendelin
2026-04-08 09:40:42 +03:00
committed by GitHub
co-authored by Petar Petrov
parent 65485ce8c9
commit 2cda06e7a6
21 changed files with 174 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
landing-page/src/components/landing-page-logs.ts
+1 -2
View File
@@ -1,6 +1,5 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
import { mdiArrowCollapseDown, mdiDownload } from "@mdi/js";
import { LitElement, type PropertyValues, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
landing-page/src/ha-landing-page.ts
+2 -2
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress";
import { mdiOpenInNew } from "@mdi/js";
import { css, html, nothing, type PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -8,6 +7,7 @@ import "../../src/components/ha-button";
import "../../src/components/ha-fade-in";
import "../../src/components/ha-spinner";
import "../../src/components/ha-svg-icon";
import "../../src/components/progress/ha-progress-bar";
import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
import "../../src/onboarding/onboarding-welcome-links";
import { onBoardingStyles } from "../../src/onboarding/styles";
@@ -60,7 +60,7 @@ class HaLandingPage extends LandingPageBaseElement {
${!networkIssue && !this._supervisorError
? html`
<p>${this.localize("subheader")}</p>
<mwc-linear-progress indeterminate></mwc-linear-progress>
<ha-progress-bar indeterminate></ha-progress-bar>
`
: nothing}
${networkIssue || this._networkInfoError
package.json
-1
View File
@@ -67,7 +67,6 @@
"@material/mwc-drawer": "0.27.0",
"@material/mwc-floating-label": "0.27.0",
"@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
"@material/mwc-linear-progress": "0.27.0",
"@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
"@material/mwc-radio": "0.27.0",
"@material/mwc-select": "0.27.0",
src/components/ha-file-upload.ts
+6 -5
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiDelete, mdiFileUpload } from "@mdi/js";
import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
@@ -12,6 +11,7 @@ import type { HomeAssistant } from "../types";
import { bytesToString } from "../util/bytes-to-string";
import "./ha-button";
import "./ha-icon-button";
import "./progress/ha-progress-bar";
declare global {
interface HASSDomEvents {
@@ -100,10 +100,11 @@ export class HaFileUpload extends LitElement {
</div>`
: nothing}
</div>
<mwc-linear-progress
<ha-progress-bar
.indeterminate=${!this.progress}
.progress=${this.progress ? this.progress / 100 : undefined}
></mwc-linear-progress>
.value=${this.progress}
loading
></ha-progress-bar>
</div>`
: html`<label
for=${this.value ? "" : "input"}
@@ -319,7 +320,7 @@ export class HaFileUpload extends LitElement {
--mdc-button-outline-color: var(--primary-color);
--ha-icon-button-size: 24px;
}
mwc-linear-progress {
ha-progress-bar {
width: 100%;
padding: 8px 32px;
box-sizing: border-box;
src/components/ha-slider.ts
+4 -1
View File
@@ -23,7 +23,10 @@ export class HaSlider extends Slider {
--marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
--marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
--wa-color-surface-default: var(--card-background-color);
--wa-color-neutral-fill-normal: var(--disabled-color);
--wa-color-neutral-fill-normal: var(
--ha-slider-track-color,
var(--disabled-color)
);
--wa-tooltip-background-color: var(
--ha-tooltip-background-color,
var(--secondary-background-color)
src/components/progress/ha-progress-bar.ts
+92
View File
@@ -0,0 +1,92 @@
import ProgressBar from "@home-assistant/webawesome/dist/components/progress-bar/progress-bar";
import type { CSSResultGroup } from "lit";
import { css } from "lit";
import { customElement, property } from "lit/decorators";
/**
* Home Assistant progress bar component
*
* @element ha-progress-bar
* @extends {ProgressBar}
*
* @summary
* A stylable progress bar component based on webawesome progress bar.
* Supports regular, indeterminate, and loading states with Home Assistant theming.
*
* @cssprop --ha-progress-bar-indicator-color - Color of the filled progress indicator.
* @cssprop --ha-progress-bar-track-color - Color of the progress track.
* @cssprop --ha-progress-bar-track-height - Height of the progress track. Defaults to `16px`.
* @cssprop --ha-progress-bar-border-radius - Border radius of the progress bar. Defaults to `var(--ha-border-radius-pill)`.
* @cssprop --ha-progress-bar-animation-duration - Animation duration for indeterminate/loading highlight. Defaults to `2.5s`.
*
* @attr {boolean} loading - Shows the loading highlight animation on top of the indicator.
* @attr {boolean} indeterminate - Shows indeterminate progress animation (inherited from ProgressBar).
*/
@customElement("ha-progress-bar")
export class HaProgressBar extends ProgressBar {
@property({ type: Boolean, reflect: true })
loading = false;
static get styles(): CSSResultGroup {
return [
ProgressBar.styles,
css`
:host {
--indicator-color: var(
--ha-progress-bar-indicator-color,
var(--ha-color-on-primary-normal)
);
--track-color: var(
--ha-progress-bar-track-color,
var(--ha-color-fill-neutral-normal-hover)
);
--track-height: var(--ha-progress-bar-track-height, 16px);
--wa-transition-slow: var(--ha-animation-duration-slow);
}
.progress-bar {
border-radius: var(
--ha-progress-bar-border-radius,
var(--ha-border-radius-pill)
);
}
@keyframes slide-highlight {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
:host([indeterminate]) .indicator {
animation: wa-progress-indeterminate
var(--ha-progress-bar-animation-duration, 2.5s) infinite
cubic-bezier(0.37, 0, 0.63, 1);
}
:host([indeterminate]) .indicator::after,
:host([loading]) .indicator::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
var(--ha-color-fill-primary-normal-hover) 45%,
var(--ha-color-fill-primary-normal-active) 50%,
var(--ha-color-fill-primary-normal-hover) 55%,
transparent 100%
);
opacity: 0.4;
animation: slide-highlight
var(--ha-progress-bar-animation-duration, 2.5s) infinite
cubic-bezier(0.37, 0, 0.63, 1);
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-progress-bar": HaProgressBar;
}
}
src/components/ha-progress-ring.ts → src/components/progress/ha-progress-ring.ts
View File
src/dialogs/config-flow/step-flow-progress.ts
+1 -1
View File
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { blankBeforePercent } from "../../common/translations/blank_before_percent";
import "../../components/ha-progress-ring";
import "../../components/ha-spinner";
import "../../components/progress/ha-progress-ring";
import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow";
import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow";
src/dialogs/more-info/controls/more-info-update.ts
+6 -10
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -15,6 +14,7 @@ import "../../../components/ha-md-list";
import "../../../components/ha-md-list-item";
import "../../../components/ha-spinner";
import "../../../components/ha-switch";
import "../../../components/progress/ha-progress-bar";
import type { BackupConfig } from "../../../data/backup";
import { fetchBackupConfig } from "../../../data/backup";
import { isUnavailableState } from "../../../data/entity/entity";
@@ -191,11 +191,11 @@ class MoreInfoUpdate extends LitElement {
${this.stateObj.attributes.in_progress
? supportsFeature(this.stateObj, UpdateEntityFeature.PROGRESS) &&
this.stateObj.attributes.update_percentage !== null
? html`<mwc-linear-progress
.progress=${this.stateObj.attributes.update_percentage / 100}
buffer=""
></mwc-linear-progress>`
: html`<mwc-linear-progress indeterminate></mwc-linear-progress>`
? html`<ha-progress-bar
loading
.value=${this.stateObj.attributes.update_percentage}
></ha-progress-bar>`
: html`<ha-progress-bar indeterminate></ha-progress-bar>`
: nothing}
<h3>${this.stateObj.attributes.title}</h3>
${this._error
@@ -521,10 +521,6 @@ class MoreInfoUpdate extends LitElement {
justify-content: center;
align-items: center;
}
mwc-linear-progress {
margin-bottom: calc(var(--ha-space-2) * -1);
margin-top: var(--ha-space-1);
}
ha-markdown {
direction: ltr;
padding-bottom: var(--ha-space-4);
src/dialogs/restart/dialog-restart.ts
+4 -5
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import {
mdiAutoFix,
mdiLifebuoy,
@@ -19,6 +18,7 @@ import "../../components/ha-icon-next";
import "../../components/ha-md-list";
import "../../components/ha-md-list-item";
import "../../components/ha-spinner";
import "../../components/progress/ha-progress-bar";
import { fetchBackupInfo } from "../../data/backup";
import type { BackupManagerState } from "../../data/backup_manager";
import {
@@ -120,9 +120,7 @@ class DialogRestart extends LitElement {
<div class="action-loader">
${this._loadingBackupInfo
? html`<ha-fade-in .delay=${250}>
<mwc-linear-progress
.indeterminate=${true}
></mwc-linear-progress>
<ha-progress-bar indeterminate></ha-progress-bar>
</ha-fade-in>`
: nothing}
</div>
@@ -464,7 +462,8 @@ class DialogRestart extends LitElement {
padding: 24px;
}
.action-loader {
height: 4px;
--ha-progress-bar-track-height: 4px;
--ha-progress-bar-border-radius: 0;
}
`,
];
src/dialogs/sidebar/dialog-edit-sidebar.ts
-1
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiDotsVertical, mdiRestart } from "@mdi/js";
import { css, html, LitElement, type TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts
+1 -1
View File
@@ -2,8 +2,8 @@ import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-progress-ring";
import "../../components/ha-spinner";
import "../../components/progress/ha-progress-ring";
import { ON, UNAVAILABLE } from "../../data/entity/entity";
import {
updateCanInstall,
src/onboarding/ha-onboarding.ts
+14 -14
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import type { Auth } from "home-assistant-js-websocket";
import {
createConnection,
@@ -16,6 +15,8 @@ import {
} from "../common/auth/token_storage";
import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
import type { HASSDomEvent } from "../common/dom/fire_event";
import { mainWindow } from "../common/dom/get_main_window";
import { navigate } from "../common/navigate";
import {
addSearchParam,
extractSearchParam,
@@ -33,19 +34,18 @@ import {
onboardIntegrationStep,
} from "../data/onboarding";
import { subscribeUser } from "../data/ws-user";
import { makeDialogManager } from "../dialogs/make-dialog-manager";
import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
import { HassElement } from "../state/hass-element";
import type { HomeAssistant } from "../types";
import { storeState } from "../util/ha-pref-storage";
import { registerServiceWorker } from "../util/register-service-worker";
import "../components/progress/ha-progress-bar";
import "./onboarding-analytics";
import "./onboarding-create-user";
import "./onboarding-loading";
import "./onboarding-welcome";
import "./onboarding-welcome-links";
import { makeDialogManager } from "../dialogs/make-dialog-manager";
import { navigate } from "../common/navigate";
import { mainWindow } from "../common/dom/get_main_window";
type OnboardingEvent =
| {
@@ -126,9 +126,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
};
protected render() {
return html`<mwc-linear-progress
.progress=${this._progress}
></mwc-linear-progress>
return html`<ha-progress-bar .value=${this._progress}></ha-progress-bar>
<ha-card>
<div class="card-content">${this._renderStep()}</div>
</ha-card>
@@ -318,7 +316,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
history.replaceState(null, "", location.pathname);
await this._connectHass(auth);
const currentStep = steps.findIndex((stp) => !stp.done);
const singelStepProgress = 1 / steps.length;
const singelStepProgress = 100 / steps.length;
this._progress = currentStep * singelStepProgress + singelStepProgress;
} else {
this._init = true;
@@ -333,7 +331,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
}
private _handleProgress(ev: HASSDomEvent<OnboardingProgressEvent>) {
const stepSize = 1 / this._steps!.length;
const stepSize = 100 / this._steps!.length;
if (ev.detail.increase) {
this._progress += ev.detail.increase * stepSize;
}
@@ -355,7 +353,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
this._init = false;
this._restoring = stepResult.result?.restore;
if (!this._restoring) {
this._progress = 0.25;
this._progress = 25;
} else {
navigate(
`${location.pathname}?${addSearchParam({ page: `restore_backup${this._restoring === "cloud" ? "_cloud" : ""}` })}`
@@ -364,7 +362,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
} else if (stepResult.type === "user") {
const result = stepResult.result as OnboardingResponses["user"];
this._loading = true;
this._progress = 0.5;
this._progress = 50;
enableWrite();
try {
const auth = await getAuth({
@@ -381,10 +379,10 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
this._loading = false;
}
} else if (stepResult.type === "core_config") {
this._progress = 0.75;
this._progress = 75;
// We do nothing
} else if (stepResult.type === "analytics") {
this._progress = 1;
this._progress = 100;
// We do nothing
} else if (stepResult.type === "integration") {
this._loading = true;
@@ -505,7 +503,9 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
.card-content {
padding: 32px;
}
mwc-linear-progress {
ha-progress-bar {
--ha-progress-bar-border-radius: 0;
--ha-progress-bar-track-height: 4px;
position: fixed;
top: 0;
left: 0;
src/onboarding/restore-backup/onboarding-restore-backup-status.ts
+5 -5
View File
@@ -1,12 +1,12 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import type { LocalizeFunc } from "../../common/translations/localize";
import "../../components/ha-alert";
import "../../components/ha-button";
import type { LocalizeFunc } from "../../common/translations/localize";
import "../../components/progress/ha-progress-bar";
import type { BackupOnboardingInfo } from "../../data/backup_onboarding";
import { onBoardingStyles } from "../styles";
import { fireEvent } from "../../common/dom/fire_event";
@customElement("onboarding-restore-backup-status")
class OnboardingRestoreBackupStatus extends LitElement {
@@ -33,7 +33,7 @@ class OnboardingRestoreBackupStatus extends LitElement {
${this.backupInfo.state === "restore_backup"
? html`
<div class="loading">
<mwc-linear-progress indeterminate></mwc-linear-progress>
<ha-progress-bar indeterminate></ha-progress-bar>
</div>
`
: html`
@@ -92,7 +92,7 @@ class OnboardingRestoreBackupStatus extends LitElement {
padding: 16px 0;
font-size: var(--ha-font-size-l);
}
mwc-linear-progress {
ha-progress-bar {
width: 100%;
}
`,
src/panels/config/dashboard/ha-config-updates.ts
+1 -1
View File
@@ -12,8 +12,8 @@ import "../../../components/ha-alert";
import "../../../components/ha-icon-next";
import "../../../components/ha-md-list";
import "../../../components/ha-md-list-item";
import "../../../components/ha-progress-ring";
import "../../../components/ha-spinner";
import "../../../components/progress/ha-progress-ring";
import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
import { subscribeDeviceRegistry } from "../../../data/device/device_registry";
import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes-detail.ts
-1
View File
@@ -1,5 +1,4 @@
import { consume, type ContextType } from "@lit/context";
import "@material/mwc-linear-progress/mwc-linear-progress";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators";
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes/dialog-zwave_js-rebuild-network-routes.ts
+7 -9
View File
@@ -1,5 +1,4 @@
import { consume, provide, type ContextType } from "@lit/context";
import "@material/mwc-linear-progress/mwc-linear-progress";
import {
mdiAlert,
mdiCheckCircle,
@@ -19,6 +18,7 @@ import "../../../../../../components/ha-dialog";
import "../../../../../../components/ha-dialog-footer";
import "../../../../../../components/ha-fade-in";
import "../../../../../../components/ha-spinner";
import "../../../../../../components/progress/ha-progress-bar";
import {
connectionContext,
localizeContext,
@@ -130,16 +130,14 @@ class DialogZWaveJSRebuildNetworkRoutes extends DialogMixin<ZWaveJSRebuildNetwor
)}
</p>
</div>
<mwc-linear-progress
<ha-progress-bar
loading
.indeterminate=${!this._progress}
.progress=${this._progress
? this._progressPercent(this._progress)
: undefined}
.buffer=${this._progress
.value=${this._progress
? this._progressPercent(this._progress)
: undefined}
>
</mwc-linear-progress>
</ha-progress-bar>
${this._progress
? html` <div class="progress-detail">
<ha-button
@@ -367,7 +365,7 @@ class DialogZWaveJSRebuildNetworkRoutes extends DialogMixin<ZWaveJSRebuildNetwor
const done =
progress.done.length + progress.skipped.length + progress.failed.length;
const total = done + progress.pending.length;
return parseFloat((total > 0 ? done / total : 0).toFixed(2));
return total > 0 ? (done / total) * 100 : 0;
}
);
@@ -424,7 +422,7 @@ class DialogZWaveJSRebuildNetworkRoutes extends DialogMixin<ZWaveJSRebuildNetwor
margin-inline-start: initial;
}
mwc-linear-progress {
ha-progress-bar {
margin-top: var(--ha-space-8);
}
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
+8 -7
View File
@@ -1,4 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiCheckCircle, mdiCloseCircle, mdiFileUpload } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
@@ -7,12 +6,13 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
import "../../../../../components/ha-button";
import "../../../../../components/ha-dialog-footer";
import "../../../../../components/ha-dialog";
import "../../../../../components/ha-dialog-footer";
import "../../../../../components/ha-file-upload";
import "../../../../../components/ha-form/ha-form";
import type { HaFormSchema } from "../../../../../components/ha-form/types";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/progress/ha-progress-bar";
import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry";
import type {
ZWaveJSControllerFirmwareUpdateFinishedMessage,
@@ -269,11 +269,12 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
}
)}
</p>
<mwc-linear-progress
determinate
.progress=${this._updateProgressMessage.sent_fragments /
this._updateProgressMessage.total_fragments}
></mwc-linear-progress>
<ha-progress-bar
loading
.value=${(this._updateProgressMessage.sent_fragments /
this._updateProgressMessage.total_fragments) *
100}
></ha-progress-bar>
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.update_firmware.close",
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+1 -1
View File
@@ -25,9 +25,9 @@ import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-icon-next";
import "../../../../../components/ha-md-list";
import "../../../../../components/ha-md-list-item";
import "../../../../../components/ha-progress-ring";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/progress/ha-progress-ring";
import type { ConfigEntry } from "../../../../../data/config_entries";
import {
ERROR_STATES,
src/panels/lovelace/cards/hui-media-control-card.ts
+20 -16
View File
@@ -1,5 +1,3 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress";
import {
mdiDotsVertical,
mdiPlayBoxMultiple,
@@ -18,6 +16,8 @@ import { extractColors } from "../../../common/image/extract_color";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
import "../../../components/ha-slider";
import type { HaSlider } from "../../../components/ha-slider";
import "../../../components/ha-state-icon";
import { showJoinMediaPlayersDialog } from "../../../components/media-player/show-join-media-players-dialog";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@@ -82,7 +82,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@state() private _cardHeight = 0;
@query("mwc-linear-progress") private _progressBar?: LinearProgress;
@query("ha-slider") private _progressBar?: HaSlider;
@state() private _marqueeActive = false;
@@ -342,10 +342,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
${!this._showProgressBar
? ""
: html`
<mwc-linear-progress
determinate
<ha-slider
style=${styleMap({
"--mdc-theme-primary":
"--ha-slider-indicator-color":
this._foregroundColor || "var(--accent-color)",
cursor: supportsFeature(
stateObj,
@@ -356,7 +355,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
})}
@click=${this._handleSeek}
>
</mwc-linear-progress>
</ha-slider>
`}
</div>
`
@@ -561,9 +560,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
private _updateProgressBar(): void {
if (this._progressBar && this._stateObj?.attributes.media_duration) {
this._progressBar.progress =
getCurrentProgress(this._stateObj) /
this._stateObj!.attributes.media_duration;
this._progressBar.value =
(getCurrentProgress(this._stateObj) /
this._stateObj!.attributes.media_duration) *
100;
}
}
@@ -571,16 +571,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
return this.hass!.states[this._config!.entity] as MediaPlayerEntity;
}
private _handleSeek(e: MouseEvent): void {
private _handleSeek(): void {
const stateObj = this._stateObj!;
if (!supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)) {
return;
}
const progressWidth = (this._progressBar as HTMLElement).offsetWidth;
const percentValue = this._progressBar?.value ?? 0;
const percent = percentValue ? percentValue / 100 : 0;
const percent = e.offsetX / progressWidth;
const position = this._stateObj!.attributes.media_duration! * percent;
this.hass!.callService("media_player", "media_seek", {
@@ -815,10 +815,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
padding-top: 16px;
}
mwc-linear-progress {
ha-slider {
--track-size: 8px;
width: 100%;
margin-top: 4px;
--mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5);
--ha-slider-track-color: rgba(200, 200, 200, 0.5);
}
ha-slider::part(thumb) {
display: none;
}
.no-image .controls {
yarn.lock
+1 -15
View File
@@ -2546,7 +2546,7 @@ __metadata:
languageName: node
linkType: hard
"@material/linear-progress@npm:14.0.0-canary.53b3cad2f.0, @material/linear-progress@npm:=14.0.0-canary.53b3cad2f.0":
"@material/linear-progress@npm:14.0.0-canary.53b3cad2f.0":
version: 14.0.0-canary.53b3cad2f.0
resolution: "@material/linear-progress@npm:14.0.0-canary.53b3cad2f.0"
dependencies:
@@ -2736,19 +2736,6 @@ __metadata:
languageName: node
linkType: hard
"@material/mwc-linear-progress@npm:0.27.0":
version: 0.27.0
resolution: "@material/mwc-linear-progress@npm:0.27.0"
dependencies:
"@material/linear-progress": "npm:=14.0.0-canary.53b3cad2f.0"
"@material/mwc-base": "npm:^0.27.0"
"@material/theme": "npm:=14.0.0-canary.53b3cad2f.0"
lit: "npm:^2.0.0"
tslib: "npm:^2.0.1"
checksum: 10/5358712b52ee9dc17854eb1fb254d7a9a7416b6544b7bd44d7eee97b72fb55614b7c0f6544484748a1b233b3668b085dcf7512224ce47bac9305d4b6da6aac38
languageName: node
linkType: hard
"@material/mwc-list@npm:0.27.0":
version: 0.27.0
resolution: "@material/mwc-list@npm:0.27.0"
@@ -9069,7 +9056,6 @@ __metadata:
"@material/mwc-drawer": "npm:0.27.0"
"@material/mwc-floating-label": "npm:0.27.0"
"@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch"
"@material/mwc-linear-progress": "npm:0.27.0"
"@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
"@material/mwc-radio": "npm:0.27.0"
"@material/mwc-select": "npm:0.27.0"