mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Media Card Seek Functionality (#4907)
* Seek function * Remove a testing section * reviews
This commit is contained in:
parent
aa94e45582
commit
68baeb83cb
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user