mirrors
/
webminidisc
mirror of https://github.com/cybercase/webminidisc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: change play/pause button/status in track list

This commit is contained in:
Stefano Brilli 2021-07-24 13:34:08 +02:00
parent 3667725c6a
commit 0296dc4017
1 changed files with 26 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/main.tsx
View File

@ -158,46 +158,30 @@ const useStyles = makeStyles(theme => ({
textDecorationStyle: 'dotted', textDecorationStyle: 'dotted',
}, },
controlButtonInTrackCommon: { controlButtonInTrackCommon: {
width: `16px`, width: theme.spacing(2),
height: `16px`, height: theme.spacing(2),
verticalAlign: 'middle', verticalAlign: 'middle',
cursor: 'pointer',
marginLeft: theme.spacing(-0.5), marginLeft: theme.spacing(-0.5),
}, },
playButtonInTrackListPlaying: { playButtonInTrackList: {
color: theme.palette.primary.main,
display: 'none', display: 'none',
}, },
pauseButtonInTrackListPlaying: {
color: theme.palette.primary.main,
display: 'none',
},
currentControlButton: {
display: 'inline-block',
},
playButtonInTrackListNotPlaying: {
width: `0px`,
},
trackRow: { trackRow: {
'&:hover': { '&:hover': {
/* For the tracks that aren't currently playing */ '& $playButtonInTrackList': {
'& $playButtonInTrackListNotPlaying': { display: 'inline-flex',
width: `16px`,
}, },
'& $trackIndex': { '& $trackIndex': {
width: `0px`,
display: 'none',
},
/* For the current track */
'& svg:not($currentControlButton)': {
display: 'inline-block',
},
'& $currentControlButton': {
display: 'none', display: 'none',
}, },
}, },
}, },
currentTrackRow: {
color: theme.palette.primary.main,
'& > td': {
color: 'inherit',
},
},
inGroupTrackRow: { inGroupTrackRow: {
'& > $indexCell': { '& > $indexCell': {
transform: `translateX(${theme.spacing(3)}px)`, transform: `translateX(${theme.spacing(3)}px)`,
@ -435,6 +419,7 @@ export const Main = (props: {}) => {
} }
const getTrackRow = (track: Track, inGroup: boolean, draggableProvided: DraggableProvided) => { const getTrackRow = (track: Track, inGroup: boolean, draggableProvided: DraggableProvided) => {
const isCurrentTrack = track.index === deviceStatus?.track && ['playing', 'paused'].includes(deviceStatus?.state);
const child = ( const child = (
<TableRow <TableRow
{...draggableProvided.draggableProps} {...draggableProvided.draggableProps}
@ -443,45 +428,25 @@ export const Main = (props: {}) => {
selected={selected.includes(track.index)} selected={selected.includes(track.index)}
onDoubleClick={event => handleRenameDoubleClick(event, track.index)} onDoubleClick={event => handleRenameDoubleClick(event, track.index)}
onClick={event => handleSelectClick(event, track.index)} onClick={event => handleSelectClick(event, track.index)}
className={clsx(classes.trackRow, { [classes.inGroupTrackRow]: inGroup })} color="inherit"
className={clsx(classes.trackRow, { [classes.inGroupTrackRow]: inGroup, [classes.currentTrackRow]: isCurrentTrack })}
> >
<TableCell className={classes.dragHandle} {...draggableProvided.dragHandleProps} onClick={event => event.stopPropagation()}> <TableCell className={classes.dragHandle} {...draggableProvided.dragHandleProps} onClick={event => event.stopPropagation()}>
<DragIndicator fontSize="small" color="disabled" /> <DragIndicator fontSize="small" color="disabled" />
</TableCell> </TableCell>
<TableCell className={classes.indexCell}> <TableCell className={classes.indexCell}>
{track.index === deviceStatus?.track && ['playing', 'paused'].includes(deviceStatus?.state) ? ( <span className={classes.trackIndex}>{track.index + 1}</span>
<span> <IconButton
<PlayArrowIcon aria-label="delete"
className={clsx(classes.controlButtonInTrackCommon, classes.playButtonInTrackListPlaying, { className={clsx(classes.controlButtonInTrackCommon, classes.playButtonInTrackList)}
[classes.currentControlButton]: deviceStatus?.state === 'playing', size="small"
})} onClick={event => {
onClick={event => { handlePlayTrack(event, track.index);
handleCurrentClick(event); event.stopPropagation();
event.stopPropagation(); }}
}} >
/> <PlayArrowIcon fontSize="inherit" />
<PauseIcon </IconButton>
className={clsx(classes.controlButtonInTrackCommon, classes.pauseButtonInTrackListPlaying, {
[classes.currentControlButton]: deviceStatus?.state === 'paused',
})}
onClick={event => {
handleCurrentClick(event);
event.stopPropagation();
}}
/>
</span>
) : (
<span>
<span className={classes.trackIndex}>{track.index + 1}</span>
<PlayArrowIcon
className={clsx(classes.controlButtonInTrackCommon, classes.playButtonInTrackListNotPlaying)}
onClick={event => {
handlePlayTrack(event, track.index);
event.stopPropagation();
}}
/>
</span>
)}
</TableCell> </TableCell>
<TableCell className={classes.titleCell} title={track.title ?? ''}> <TableCell className={classes.titleCell} title={track.title ?? ''}>
{track.fullWidthTitle ? `${track.fullWidthTitle} / ` : ``} {track.fullWidthTitle ? `${track.fullWidthTitle} / ` : ``}