Widget to Control the Sonos Sound System with Volume, Favorites, Shuffle and Media Control with configurable color
Changelog
Version 0.1
- initial release
Resources
uid: Cell_Speaker
tags: []
props:
parameters:
- description: Header on top of the card
label: Header
name: header
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Foreground Color
name: fgcolor
required: false
type: TEXT
- context: item
label: Player control
name: playerControl
required: false
type: TEXT
- context: item
label: Volume
name: volume
required: false
type: TEXT
- context: item
label: Album cover art
name: albumCover
required: false
type: TEXT
- context: item
label: Current track
name: currentTrack
required: false
type: TEXT
- context: item
label: Favorites
name: favorites
required: false
type: TEXT
- context: item
label: Shuffle
name: shuffle
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 6, 2022, 7:25:15 PM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 120px
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: "=items[props.playerControl].state === 'PLAY' ? 'speaker_3' : 'speaker'"
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
- component: f7-block
config:
style:
flex-direction: row
left: 16px
position: absolute
top: 50px
width: 65%
slots:
default:
- component: Label
config:
style:
font-size: 14px
font-weight: 600
margin-left: 0px
margin-top: 0px
text: =items[props.currentTrack].state
- null
- component: oh-button
config:
action: command
actionCommand: PREVIOUS
actionItem: =props.playerControl
iconColor: "=(items[props.playerControl].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: backward_end
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 10px
top: 10px
- component: oh-button
config:
action: command
actionCommand: "=items[props.playerControl].state === 'PAUSE' ? 'PLAY' : 'PAUSE'"
actionItem: =props.playerControl
iconColor: "=(items[props.playerControl].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: "=items[props.playerControl].state === 'PAUSE' ? 'play' : 'pause'"
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 10px
top: 45px
- component: oh-button
config:
action: command
actionCommand: NEXT
actionItem: =props.playerControl
iconColor: "=(items[props.playerControl].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: forward_end
iconSize: 35
style:
background: transparent
height: 35px
position: absolute
right: 10px
top: 80px
- component: oh-button
config:
action: command
actionCommand: '=(items[props.shuffle].state !== "ON") ? "ON" : "OFF"'
actionItem: =props.shuffle
iconColor: "=(items[props.shuffle].state === 'OFF') ? ((themeOptions.dark === 'dark') ? 'white' : 'black') : props.fgcolor"
iconF7: shuffle
iconSize: 25
style:
background: transparent
height: 35px
position: absolute
right: 175px
top: 10px
- component: oh-slider
config:
color: =props.fgcolor
item: =props.volume
max: 100
min: 0
style:
--f7-range-bar-border-radius: 8px
--f7-range-bar-size: 3px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-knob-size: 12px
bottom: -75px
left: 20px
position: absolute
width: calc(100% - 205px)
- component: oh-image
config:
item: =props.albumCover
style:
bottom: -78px
height: 100px
position: absolute
right: 70px
- component: f7-block
config:
style:
bottom: -67px
display: flex
flex-direction: row
left: 150px
position: absolute
slots:
default:
- component: oh-button
config:
action: options
actionItem: =[props.favorites]
color: =props.fgcolor
fill: false
style:
bottom: 80px
right: -10px
text: =items[props.favorites].displayState || items[props.favorites].state