Hi , thank you for the reply. unfortunately I can’t solve the puzzle.
Static image until a player is activated would be enough.
#################################################
# #
# BASE MEDIA #
# #
#################################################
base_media:
variables:
media_on: >
[[[ return !entity || ['playing', 'paused'].indexOf(entity.state) !== -1; ]]]
media_off: >
[[[ return !entity || ['off', 'idle', 'standby', 'unknown', 'unavailable'].indexOf(entity.state) !== -1; ]]]
tap_action:
action: >
[[[
return variables.media_on
? 'call-service'
: 'none';
]]]
service: media_player.media_play_pause
service_data:
entity_id: >
[[[
return variables.entity_id;
]]]
double_tap_action:
action: more-info
styles:
card:
- color: >
[[[
let entity_picture = entity === undefined || entity.attributes.entity_picture;
if (variables.state === 'off' || variables.state === 'idle' || variables.state === 'standby' ||
variables.state === 'unknown' || variables.state === 'unavailable' || entity === undefined) {
return 'rgba(255, 255, 255, 0.3)';
}
return (variables.state != 'off' && variables.state != 'idle' && variables.state != 'standby') && (entity_picture == null) ? 'rgba(0, 0, 0, 0.6)' : '#efefef';
]]]
- text-shadow: >
[[[
let entity_picture = entity === undefined ? null : entity.attributes.entity_picture;
if (variables.state === 'off' || variables.state === 'idle' || variables.state === 'standby' || variables.state === 'unknown' || variables.state === 'unavailable') {
return entity_picture == null ? 'none' : '1px 1px 5px rgba(18, 22, 23, 0)';
}
return entity_picture == null ? 'none' : '1px 1px 5px rgba(18, 22, 23, 0.9)';
]]]
#################################################
# #
# MEDIA #
# #
#################################################
media:
template:
- base
- base_media
styles:
custom_fields:
icon:
- width: 70%
- margin-left: 2%
- fill: '#9da0a2'
- display: >
[[[
return variables.media_off || variables.entity_picture === undefined
? 'initial'
: 'none';
]]]
card:
- background-color: none
- background-size: cover
- background-position: center
- background-image: >
[[[
let entity_picture = entity === undefined || entity.attributes.entity_picture;
if (variables.state === 'off' || variables.state === 'idle' || variables.state === 'standby' ||
variables.state === 'unknown' || variables.state === 'unavailable' || entity === undefined) {
return 'linear-gradient(0deg, rgba(115, 115, 115, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%)';
}
return (variables.state != 'off' && variables.state != 'idle' && variables.state != 'standby') && (entity_picture == null) ?
'linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%)' :
'linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%), url(' + entity_picture + ')';
]]]
#################################################
# #
# CONDITIONAL MEDIA #
# #
#################################################
conditional_media:
aspect_ratio: 1000/996
template:
- base
- base_media
- icon_play_pause
variables:
i: >
[[[
if (entity) {
let data = entity.attributes.data;
return data === undefined || Math.floor(Math.random() * (data.length - 1)) + 1;
}
]]]
state_display: >
[[[
if (entity) {
let elt = this.shadowRoot,
await = setTimeout(marquee, 100),
data = entity.attributes.data,
artist = entity.attributes.media_artist,
title = entity.attributes.media_title;
if (data !== undefined) {
var number = data[variables.i].number === undefined && data[variables.i].aired !== undefined
? `(${data[variables.i].aired.split("-")[0]})`
: data[variables.i].number === undefined && data[variables.i].aired === undefined
? ' '
: data[variables.i].number,
output = `${data[variables.i].title} ${number}`;
} else {
var output = artist === undefined && title !== undefined
? title
: title === undefined && artist !== undefined
? artist
: title !== undefined && artist !== undefined
? `${artist} - ${title}`
: variables.translate_idle;
}
function marquee() {
let state = elt.getElementById("state"),
container = elt.getElementById("container");
if (state && container) {
state.innerHTML = output;
let ro = new ResizeObserver(entries => {
let spacer = " ".repeat(3),
s = entries[0],
c = entries[1],
r = s && s.contentRect &&
c && c.contentRect &&
s.contentRect.width !== 0 &&
c.contentRect.width !== 0;
if (r && s.contentRect.width < c.contentRect.width) {
state.classList.remove("marquee");
}
else if (r && s.contentRect.width >= c.contentRect.width) {
state.innerHTML = `${output} ${spacer} ${output} ${spacer} `;
state.classList.add("marquee");
}
});
ro.observe(state);
ro.observe(container);
}
}
return output;
}
return variables.translate_unknown;
]]]
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: >
[[[ return variables.entity_id; ]]]
styles:
grid:
- gap: 0.65%
name:
- padding: 0.2vw
- margin: -0.2vw
state:
- padding-bottom: 5.25%
- max-width: unset
- overflow: visible
card:
- padding: 5.75% 5.25% 0 5.75%
- border-radius: calc(var(--button-card-border-radius) / 2)
- background: rgba(115, 115, 115, 0.2) center center/cover no-repeat
- background-image: &media_background_image >
[[[
if (entity) {
let data = entity.attributes.data;
return data && (data[variables.i].fanart || data[variables.i].poster)
? `url("${data[variables.i].fanart}"), url("${data[variables.i].poster}")`
: `url("${variables.entity_picture}")`;
}
]]]
- color: >
[[[
return entity === undefined
? '#97989c'
: '#efefef';
]]]
- text-shadow: >
[[[
return entity === undefined
? 'none'
: '1px 1px 5px rgba(18, 22, 23, 0.9)';
]]]
custom_fields:
icon:
- width: 30%
- fill: >
[[[
return entity && variables.media_on
? 'rgba(255, 255, 255, 0.8)'
: '#9da0a2';
]]]
blur_overlay:
- display: block
- position: absolute
- width: 103.1%
- height: 103.1%
- filter: var(--blur-intensity)
- clip-path: >
inset(74.5% 1.45% 1.45% 1.45% round 0 0 calc(var(--button-card-border-radius) / 2) calc(var(--button-card-border-radius) / 2))
- background: center center/cover no-repeat
- background-image: *media_background_image
- left: -1.5%
- bottom: -1.6%
custom_fields:
blur_overlay: >
[[[
setTimeout(() => {
let elt = this.shadowRoot,
card = elt.getElementById('card'),
container = elt.getElementById('container'),
blur_overlay = elt.getElementById('blur_overlay');
if (elt && card && container && blur_overlay) {
card.insertBefore(blur_overlay, container);
}
}, 0);
return ' ';
]]]
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: select.conditional_media
state_not: Spotify_D
- entity: select.conditional_media
state_not: Spotify_L
- entity: select.conditional_media
state_not: PLEX
card:
type: custom:button-card
entity: media_player.spotify_dennis
name: Currently playing
tap_action:
action: none
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: Spotify_D
card:
type: custom:button-card
entity: media_player.spotify_dennis
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: Spotify_L
card:
type: custom:button-card
entity: media_player.spotify_lillian
template:
- conditional_media
- icon_spotify
- type: conditional
conditions:
- entity: select.conditional_media
state: PLEX
card:
type: custom:button-card
entity: media_player.plex_dennis_plex_for_lg_lg_oled48cx6lb
template:
- conditional_media
- icon_plex
# SWIPE CARD - 2nd PAGE
- type: grid
columns: 1
cards:
this video helped me a lot to get started. 
