mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Make media player card work as square + add to gallery + icon pos tweaks (#7727)
This commit is contained in:
parent
dbdced0971
commit
2ab1c6e9a9
@ -7,8 +7,8 @@ export const createMediaPlayerEntities = () => [
|
||||
media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
|
||||
media_artist: "Technohead",
|
||||
// Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
|
||||
// Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
|
||||
supported_features: 195135,
|
||||
// Select Source + Stop + Clear + Play + Shuffle Set
|
||||
supported_features: 64063,
|
||||
entity_picture: "/images/album_cover_2.jpg",
|
||||
media_duration: 300,
|
||||
media_position: 50,
|
||||
@ -24,8 +24,8 @@ export const createMediaPlayerEntities = () => [
|
||||
media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
|
||||
media_artist: "Technohead",
|
||||
// Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
|
||||
// Select Source + Stop + Clear + Play + Shuffle Set
|
||||
supported_features: 64063,
|
||||
// Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
|
||||
supported_features: 195135,
|
||||
entity_picture: "/images/album_cover.jpg",
|
||||
media_duration: 300,
|
||||
media_position: 0,
|
||||
|
@ -146,6 +146,16 @@ const CONFIGS = [
|
||||
entity: media_player.receiver_off
|
||||
`,
|
||||
},
|
||||
{
|
||||
heading: "Grid Full Size",
|
||||
config: `
|
||||
- type: grid
|
||||
columns: 1
|
||||
cards:
|
||||
- type: media-control
|
||||
entity: media_player.music_paused
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
class DemoHuiMediControlCard extends PolymerElement {
|
||||
|
@ -246,14 +246,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
${!isUnavailable &&
|
||||
(mediaDescription || stateObj.attributes.media_title || showControls)
|
||||
? html`
|
||||
<div
|
||||
class="title-controls"
|
||||
style=${styleMap({
|
||||
paddingRight: isOffState
|
||||
? "0"
|
||||
: `${this._cardHeight - 40}px`,
|
||||
})}
|
||||
>
|
||||
<div>
|
||||
<div class="title-controls">
|
||||
${!mediaDescription && !stateObj.attributes.media_title
|
||||
? ""
|
||||
: html`
|
||||
@ -318,6 +312,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
@click=${this._handleSeek}
|
||||
></paper-progress>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -635,6 +630,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
.player {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
color: var(--text-primary-color);
|
||||
transition-property: color, padding;
|
||||
transition-duration: 0.4s;
|
||||
@ -671,7 +671,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
|
||||
mwc-icon-button.browse-media {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: 4px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
|
||||
@ -693,7 +693,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
.more-info {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.media-info {
|
||||
|
@ -72,7 +72,7 @@ class HuiMarquee extends LitElement {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 1em;
|
||||
height: 1.2em;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user