jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 01:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes media card (#5115)

Browse Source 
* Fixes media card

* Update hui-media-control-card.ts

* Change update of progress bar
This commit is contained in:
Bram Kragten 2020-03-09 21:22:17 +01:00 committed by GitHub
parent 1f143176ad
commit 2085260ce7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -7,12 +7,16 @@ import {
property, property,
css, css,
CSSResult, CSSResult,
query,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
import Vibrant from "node-vibrant"; import Vibrant from "node-vibrant";
import { Palette } from "node-vibrant/lib/color"; import { Palette } from "node-vibrant/lib/color";
import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-progress/paper-progress";
// tslint:disable-next-line: no-duplicate-imports
import { PaperProgressElement } from "@polymer/paper-progress/paper-progress";
import { MediaControlCardConfig } from "./types"; import { MediaControlCardConfig } from "./types";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCard, LovelaceCardEditor } from "../types";
@ -89,6 +93,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@property() private _narrow: boolean = false; @property() private _narrow: boolean = false;
@property() private _veryNarrow: boolean = false; @property() private _veryNarrow: boolean = false;
@property() private _cardHeight: number = 0; @property() private _cardHeight: number = 0;
@query("paper-progress") private _progressBar?: PaperProgressElement;
@property() private _marqueeActive: boolean = false; @property() private _marqueeActive: boolean = false;
private _progressInterval?: number; private _progressInterval?: number;
private _resizeObserver?: ResizeObserver; private _resizeObserver?: ResizeObserver;
@ -125,7 +130,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
stateObj.state === "playing" stateObj.state === "playing"
) { ) {
this._progressInterval = window.setInterval( this._progressInterval = window.setInterval(
() => this.requestUpdate(), () => this._updateProgressBar(stateObj),
1000 1000
); );
} }
@ -212,7 +217,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
> >
<div class="top-info"> <div class="top-info">
<div class="icon-name"> <div class="icon-name">
<ha-icon class="icon" .icon="${stateIcon(stateObj)}"></ha-icon> <ha-icon class="icon" .icon=${stateIcon(stateObj)}></ha-icon>
<div> <div>
${this._config!.name || ${this._config!.name ||
computeStateName(this.hass!.states[this._config!.entity])} computeStateName(this.hass!.states[this._config!.entity])}
@ -336,10 +341,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
? "" ? ""
: html` : html`
<paper-progress <paper-progress
.max="${stateObj.attributes.media_duration}" .max=${stateObj.attributes.media_duration}
.value="${getCurrentProgress(stateObj)}"
class="progress" class="progress"
${styleMap({ style=${styleMap({
"--paper-progress-active-color": "--paper-progress-active-color":
this._foregroundColor || "var(--accent-color)", this._foregroundColor || "var(--accent-color)",
cursor: supportsFeature(stateObj, SUPPORT_SEEK) cursor: supportsFeature(stateObj, SUPPORT_SEEK)
@ -396,7 +400,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
stateObj.state === "playing" stateObj.state === "playing"
) { ) {
this._progressInterval = window.setInterval( this._progressInterval = window.setInterval(
() => this.requestUpdate(), () => this._updateProgressBar(stateObj),
1000 1000
); );
} else if ( } else if (
@ -460,7 +464,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
} }
private _measureCard() { private _measureCard() {
const card = this.shadowRoot!.querySelector("ha-card")!; const card = this.shadowRoot!.querySelector("ha-card");
if (!card) {
return;
}
this._narrow = card.offsetWidth < 350; this._narrow = card.offsetWidth < 350;
this._veryNarrow = card.offsetWidth < 300; this._veryNarrow = card.offsetWidth < 300;
this._cardHeight = card.offsetHeight; this._cardHeight = card.offsetHeight;
@ -494,6 +501,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
}); });
} }
private _updateProgressBar(stateObj: MediaEntity): void {
if (this._progressBar) {
this._progressBar.value = getCurrentProgress(stateObj);
}
}
private _handleSeek(e: MouseEvent, stateObj: MediaEntity): void { private _handleSeek(e: MouseEvent, stateObj: MediaEntity): void {
if (!supportsFeature(stateObj, SUPPORT_SEEK)) { if (!supportsFeature(stateObj, SUPPORT_SEEK)) {
return; return;