Re: UI Widget Amazon Echo TuneIN
Verfasst: 10. Nov 2022 14:16
Mühsam ernährt sich das Eichhörnchen. Ich bin wieder einen Schritt weiter, aber jetzt habe ich nochmal eine Frage, da komme ich wieder mal nicht drauf wie ich das umsetzen kann. Ich möchte das die Medienwiedergabe also das Bedienelement immer auf derselben Höhe bleibt auch wenn sich oben die Anzeige ändert. Aber egal was ich versuche das klappt nicht. Das kommt immer dann vor wenn ein Radiosender irgendwelche Infos nicht mit sendet.
Vielleicht hat da noch jemand nen Tipp was ich machen muss, damit das in der Höhe statisch bleibt. Horizontal gleich zu den Bedienelementen links davon.
Code: Alles auswählen
uid: Amazon Player
tags:
- alexa
- music
- amazon
- tunein
- senderauswahl
- lenschi.th
props:
parameters:
- context: item
label: Player Control Item
name: playerControlItem
required: true
type: TEXT
- context: item
label: Artist Name Item
name: artistItem
required: true
type: TEXT
- context: item
label: Album Name Item
name: albumItem
required: true
type: TEXT
- context: item
label: Track Name Item
name: trackItem
required: true
type: TEXT
- context: item
label: Album Art Item
name: albumArtItem
required: false
type: TEXT
- context: item
label: Track Progress Time Item
name: trackProgressItem
required: false
type: TEXT
- context: item
label: Track Total Time Item
name: trackTimeItem
required: false
type: TEXT
- context: item
label: Power Item
name: powerItem
required: false
type: TEXT
- context: item
label: Musikanbieter
name: musikanbieterItem
required: false
type: TEXT
- context: item
label: Volume Control Item
name: volumeControlItem
required: false
type: TEXT
- label: Force Dark Theme
name: darkTheme
required: false
type: BOOLEAN
- description: Sender
label: Sender1
name: Sender1
required: true
type: TEXT
- description: Sender
label: Sender2
name: Sender2
required: true
type: TEXT
- description: Sender
label: Sender3
name: Sender3
required: true
type: TEXT
- description: Sender
label: Sender4
name: Sender4
required: true
type: TEXT
- description: Sender
label: Sender5
name: Sender5
required: true
type: TEXT
- description: Sender
label: Sender6
name: Sender6
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 10, 2022, 11:51:07 AM
component: f7-card
config:
themeDark: =props.darkTheme
style:
height: auto
slots:
default:
- component: f7-card-content
slots:
default:
- component: oh-image
config:
item: =props.albumArtItem
action: photos
actionPhotos: =[props.albumArtItem]
actionPhotoBrowserConfig:
theme: dark
style:
display: "=props.albumArtItem ? 'block' : 'none'"
height: 80px
width: 80px
float: left
- component: f7-block
config:
style:
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: =items[props.artistItem].state
class:
- margin-top
style:
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
- component: Label
config:
text: =items[props.albumItem].state
style:
font-size: 10px
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
- component: Label
config:
text: =items[props.trackItem].state
style:
font-size: 18px
font-weight: bold
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
- component: Label
config:
text: "=(props.trackProgressItem && props.trackTimeItem) ? items[props.trackProgressItem].state + ' / ' + items[props.trackTimeItem].state : ''"
style:
font-size: 12px
height: 20px
margin-top: 2px
color: gray
- component: oh-player-controls
config:
item: =props.playerControlItem
color: green
visible: =!vars.showVolume
style:
margin: 0.5rem
- component: oh-slider
config:
item: =props.volumeControlItem
color: blue
visible: =vars.showVolume === true
style:
margin-top: 1.3rem
- component: f7-block
config:
style:
position: absolute
top: 138px
width: 112px
text-align: right
display: flex
flex-direction: row-reverse
justify-content: center
slots:
default:
- component: oh-link
config:
style:
margin: 0 0.5em
visible: =props.volumeControlItem !== undefined
iconF7: speaker_3_fill
iconSize: 18
color: "=(vars.showVolume) ? 'blue' : 'gray'"
round: true
action: variable
actionVariable: showVolume
actionVariableValue: =!(vars.showVolume === true)
- component: oh-link
config:
style:
margin: 0 0.5em
visible: =props.musikanbieterItem !== undefined
iconF7: music_house_fill
iconSize: 18
color: gray
round: true
action: options
actionItem: =props.musikanbieterItem
tooltip: =items[props.musikanbieterItem].displayState || items[props.musikanbieterItem].state
- component: oh-link
config:
style:
margin: 0 0.5em
color: var(--f7-card-text-color)
opacity: "=(items[props.powerItem].state === 'ON') ? 1 : 0.3"
visible: =props.powerItem !== undefined
iconF7: power
iconSize: 18
round: true
action: toggle
actionItem: =props.powerItem
actionCommand: ON
actionCommandAlt: OFF
- component: oh-list
config:
accordionList: true
class:
padding-top: 0 5em
padding-bottom: 0 5em
style:
--f7-button-bg-color: var(--f7-card-bg-color)
--f7-button-text-color: var(--f7-text-color)
--f7-theme-color-rgb: var(--f7-color-blue-rgb)
font-size: 15px
height: auto
text-align: center
slots:
default:
- component: oh-list-item
config:
badge: =items['AlexaEchoDOTBuero_Musikanbieter'].state
badgeColor: gray
icon: f7:bars
textColor: gray
size: 100px
title: Senderliste
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
class:
- margin
- no-padding
slots:
default:
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender1 + "auf tunein"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender1
color: blue
title: =items['AlexaEchoDOTBuero_AnbieterName'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender2 + "auf tunein"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender2
color: blue
title: =items['AlexaEchoDOTBuero_AnbieterName'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender3 + "auf tunein"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender3
color: blue
title: =items['AlexaEchoDOTBuero_AnbieterName'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender4 + "auf tunein"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender4
color: blue
title: =items['AlexaEchoDOTBuero_AnbieterName'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender5 + "auf tunein"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender5
color: blue
title: =items['AlexaEchoDOTBuero_AnbieterName'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender6 + "auf tunein"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender6
color: blue
title: =items['AlexaEchoDOTBuero_AnbieterName'].state
