1
1
import React , { useState , useEffect } from 'react' ;
2
- import { connect , useSelector , useDispatch } from 'react-redux' ;
3
- import { bindActionCreators } from 'redux' ;
4
- import { find , groupBy , map } from 'lodash' ;
2
+ import { useSelector , useDispatch } from 'react-redux' ;
3
+ import { find , groupBy , map , isEmpty } from 'lodash' ;
5
4
import VolumeControl from './VolumeControl' ;
6
5
import MuteControl from './MuteControl' ;
7
6
import Icon from '../Icon' ;
8
7
import Thumbnail from '../Thumbnail' ;
9
8
import LinksSentence from '../LinksSentence' ;
10
9
import DropdownField from './DropdownField' ;
11
- import * as coreActions from '../../services/core/actions' ;
12
- import * as mopidyActions from '../../services/mopidy/actions' ;
13
10
import * as pusherActions from '../../services/pusher/actions' ;
14
11
import * as snapcastActions from '../../services/snapcast/actions' ;
15
12
import { sortItems , indexToArray } from '../../util/arrays' ;
@@ -166,18 +163,10 @@ const Group = ({
166
163
} ;
167
164
168
165
const Outputs = ( ) => {
169
- const snapcastEnabled = useSelector ( ( state ) => state . snapcast . enabled ) ;
170
166
const allGroups = indexToArray ( useSelector ( ( state ) => state . snapcast . groups || { } ) ) ;
171
167
const allStreams = useSelector ( ( state ) => state . snapcast . streams || { } ) ;
172
168
const allServers = indexToArray ( useSelector ( ( state ) => state . mopidy . servers || { } ) ) ;
173
169
const groupsByStream = groupBy ( allGroups , 'stream_id' ) ;
174
- if ( ! snapcastEnabled ) {
175
- return (
176
- < p className = "no-results" >
177
- < I18n path = "playback_controls.snapcast_not_enabled" />
178
- </ p >
179
- ) ;
180
- }
181
170
182
171
return (
183
172
< ErrorBoundary >
@@ -199,12 +188,10 @@ const Outputs = () => {
199
188
) ;
200
189
}
201
190
202
- const Commands = ( ) => {
191
+ const Commands = ( { commands } ) => {
203
192
const dispatch = useDispatch ( ) ;
204
- const commandsObj = useSelector ( ( state ) => state . pusher . commands || { } ) ;
205
- if ( ! commandsObj ) return null ;
206
193
207
- let items = indexToArray ( commandsObj ) ;
194
+ let items = indexToArray ( commands ) ;
208
195
if ( items . length <= 0 ) return null ;
209
196
210
197
items = sortItems ( items , 'sort_order' ) ;
@@ -230,6 +217,8 @@ const Commands = () => {
230
217
} ;
231
218
232
219
const OutputControl = ( { force_expanded } ) => {
220
+ const snapcastEnabled = useSelector ( ( state ) => state . snapcast . enabled ) ;
221
+ const commands = useSelector ( ( state ) => state . pusher . commands ) ;
233
222
const [ expanded , setExpanded ] = useState ( false ) ;
234
223
235
224
useEffect ( ( ) => {
@@ -238,9 +227,9 @@ const OutputControl = ({ force_expanded }) => {
238
227
}
239
228
} , [ force_expanded ] ) ;
240
229
230
+ if ( ! snapcastEnabled && isEmpty ( commands ) ) return null ;
231
+
241
232
if ( expanded ) {
242
- const outputs = < Outputs /> ;
243
- const commands = < Commands /> ;
244
233
return (
245
234
< span className = "output-control" >
246
235
{ ! force_expanded && < div className = "click-outside" onClick = { ( ) => setExpanded ( false ) } /> }
@@ -251,8 +240,8 @@ const OutputControl = ({ force_expanded }) => {
251
240
< Icon name = "speaker" />
252
241
</ button >
253
242
< div className = "output-control__inner" >
254
- { commands }
255
- { outputs }
243
+ { ! isEmpty ( commands ) && < Commands commands = { commands } /> }
244
+ { snapcastEnabled && < Outputs /> }
256
245
</ div >
257
246
</ span >
258
247
) ;
0 commit comments