Hi,
I created a sonos widget based on a widget here in the community.
Clicking on the icon gives a popup with the sonos favorites.
Clicking on a list item changes the sonos playlist, but is it possible to close the popup at the same time?
uid: SonosPlayer
tags: []
props:
parameterGroups: []
timestamp: Jan 18, 2022, 8:04:01 PM
component: f7-card
config:
style:
noShadow: false
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
border-radius: var(--f7-card-expandable-border-radius)
background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark' ? 'DimGrey' : 'GhostWhite'"
height: 440px
width: auto
min-width: 273px
max-width: 300px
slots:
header:
- component: Label
config:
text: Sonos Woonkamer
style:
font-size: 20px
margin-top: 0px
default:
- component: oh-button
config:
iconF7: doc_plaintext
iconSize: 40px
action: popup
popupOpen: .popupSonosDetails
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
style:
padding-bottom: 40px
padding-right: 5px
padding-top: 3px
position: absolute
right: 5px
top: 0
z-index: 998
- component: f7-card-content
slots:
default:
- component: f7-row
config:
style:
position: relative
top: -10px
height: 25px
class:
- justify-content-center
slots:
default:
- component: Label
config:
text: = items.Sonos_CurrentTitle.displayState || items.Sonos_CurrentTitle.state
style:
fontSize: 20px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis;
- component: f7-row
config:
visible: true
style:
position: relative
top: -10px
height: 10px
class:
- justify-content-center
slots:
default:
- component: Label
config:
text: =items.Sonos_CurrentArtist.displayState || items.Sonos_CurrentArtist.state
style:
fontSize: 16px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis;
- component: f7-row
config:
class:
- margin-vertical
- justify-content-center
slots:
default:
- component: oh-image
config:
url: =items.Sonos_CurrentAlbumUrl.state
style:
width: 70%
- component: f7-row
config:
visible: true
class:
- justify-content-space-around
- display-flex
- align-items-center
- align-content-stretch
- margin-top
style:
position: relative
top: +5px
slots:
default:
- component: f7-icon
config:
f7: shuffle
size: 20
color: '=(items.Sonos_Shuffle.state === "ON") ? ((themeOptions.dark === "dark") ? "blue" : "deeporange" ): "gray"'
style:
position: relative
left: +5%
slots:
default:
- component: oh-button
config:
action: command
actionItem: Sonos_Shuffle
actionCommand: '=(items.Sonos_Shuffle.state !== "ON") ? "ON" : "OFF"'
style:
position: absolute
width: 100%
height: 100%
top: 0px
- component: oh-player-item
config:
style:
width: 150px
item: Sonos_Control
class:
- display-flex
- margin-
- align-content-stretch
- align-items-center
- justify-content-space-around
- component: f7-icon
config:
f7: '=(items.Sonos_Repeat.state === "ALL") ? "repeat" : (items.Sonos_Repeat.state === "ONE") ? "repeat_1" : "repeat"'
size: 20
color: '=(items.Sonos_Repeat.state === "ALL") ? ((themeOptions.dark === "dark") ? "blue" : "deeporange" ) : (items.Sonos_Repeat.state === "ONE") ? ((themeOptions.dark === "dark") ? "blue" : "deeporange" ) : "gray"'
style:
position: relative
left: -5%
slots:
default:
- component: oh-button
config:
action: command
actionItem: Sonos_Repeat
actionCommand: '=(items.Sonos_Repeat.state === "ALL") ? "ONE" : (items.Sonos_Repeat.state === "ONE") ? "OFF": "ALL"'
style:
position: absolute
width: 100%
height: 100%
top: 0px
- component: f7-row
config:
visible: true
class:
- justify-content-space-around
- display-flex
- align-items-center
- align-content-stretch
slots:
default:
- component: f7-card
config:
noShadow: true
class: margin display-flex align-items-center
style:
fontSize: 20px
min-width: calc(100% - 20px)
background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark' ? 'DimGrey' : 'GhostWhite'"
slots:
default:
- component: oh-slider
config:
label: true
scale: false
style:
height: +40px
width: calc(100% - 35px)
min: 0
item: Sonos_Volume
class:
- display-flex
- margin-horizontal
- align-content-stretch
- align-items-center
- justify-content-space-around
- component: f7-icon
config:
visible: true
f7: '=(items.Sonos_Mute.state !== "ON") ? "speaker_3" : "speaker_slash"'
color: '=(themeOptions.dark === "dark") ? "blue" : "deeporange"'
class: margin-horizontal margin
size: 20
slots:
default:
- component: oh-button
config:
action: command
actionItem: Sonos_Mute
actionCommand: '=(items.Sonos_Mute.state !== "ON") ? "ON" : "OFF"'
style:
position: absolute
width: 100%
height: 100%
top: 0px
- component: f7-row
config:
visible: true
style:
position: relative
top: -30px
height: 10px
class:
- justify-content-center
slots:
default:
- component: Label
config:
text: =items.Sonos_Favorite.state || items.Sonos_Favorite.state
style:
fontSize: 16px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis;
- component: f7-popup
config:
class: popupSonosDetails
style:
overflow-y: scroll
slots:
default:
- component: oh-button
config:
iconF7: clear_fill
iconSize: 40px
action: popup
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
popupClose: .popupSonosDetails
style:
position: absolute
right: 10px
top: 20px
height: 50px
z-index: 99999999
- component: f7-card
slots:
default:
- component: Label
config:
text: Favorieten
style:
font-size: 20px
margin-top: 30px
margin-bottom: 10px
- component: oh-list
slots:
default:
- component: oh-repeater
config:
sourceType: itemCommandOptions
itemOptions: Sonos_Favorite
for: favourite
slots:
default:
- component: oh-list-item
config:
icon: =loop.favourite.label.startsWith("Radio")? "f7:hifispeaker":loop.favourite.label.startsWith("Spotify")?"f7:line_horizontal_3_decrease_circle_fill":"f7:star"
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: =loop.favourite.label
action: command
actionItem: Sonos_Favorite
actionCommand: =loop.favourite.label