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

Media Card Seek Functionality (#4907)

Browse Source 
* Seek function

* Remove a testing section

* reviews
This commit is contained in:
Zack Arnett 2020-02-19 04:19:57 -05:00 committed by GitHub
parent aa94e45582
commit 68baeb83cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/data/media-player.ts
View File

@ -3,6 +3,7 @@ import { HomeAssistant } from "../types";
import { timeCachePromiseFunc } from "../common/util/time-cache-function-promise";
export const SUPPORT_PAUSE = 1;
export const SUPPORT_SEEK = 2;
export const SUPPORT_VOLUME_SET = 4;
export const SUPPORT_VOLUME_MUTE = 8;
export const SUPPORT_PREVIOUS_TRACK = 16;

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

@ -26,6 +26,7 @@ import {
SUPPORTS_PLAY,
fetchMediaPlayerThumbnailWithCache,
SUPPORT_STOP,
SUPPORT_SEEK,
} from "../../../data/media-player";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { HomeAssistant, MediaEntity } from "../../../types";
@ -118,7 +119,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
<paper-progress
.max="${stateObj.attributes.media_duration}"
.value="${stateObj.attributes.media_position}"
class="progress"
class="progress ${classMap({
seek: supportsFeature(stateObj, SUPPORT_SEEK),
})}"
@click=${(e: MouseEvent) => this._handleSeek(e, stateObj)}
></paper-progress>
`}
<div class="controls">
@ -273,6 +277,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
});
}
private _handleSeek(e: MouseEvent, stateObj: MediaEntity): void {
if (!supportsFeature(stateObj, SUPPORT_SEEK)) {
return;
}
const percent = e.offsetX / this.offsetWidth;
const position = (e.currentTarget! as any).max * percent;
this.hass!.callService("media_player", "media_seek", {
entity_id: this._config!.entity,
seek_position: position,
});
}
static get styles(): CSSResult {
return css`
.ratio {
@ -383,6 +401,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
--paper-progress-active-color: var(--accent-color);
--paper-progress-container-color: rgba(200, 200, 200, 0.5);
}
.seek:hover {
--paper-progress-height: 8px;
}
`;
}
}