Disabled states for previous/next buttons

[jselbie]

My app will likely have the following concepts:

1. Listening to the first song in the playlist - the Previous button should be disabled (faded out)
2. Listening to the the last song in the playlist - which case, the Next button should be disabled (faded out)

I can get all the color customizations I want by dropping in my own styles.css file. But I don't see a direct way to make certain buttons in a disabled state.

The only way I have found to be able to do this is by importing the default icons directly and re-reference the color I already used in the CSS file.

    import skipPrevious from '@iconify/icons-mdi/skip-previous';
    import skipNext from '@iconify/icons-mdi/skip-next';
    ...
    const enabledColor = "#003057FF";  // navy blue
    const disabledColor = "#00305722"; // faded

    const customIcons = {
      previous : <Icon icon={skipPrevious} color={canClickPrevious ? enabledColor : disabledColor} />,
      next : <Icon icon={skipNext} color={canClickNext ? enabledColor : disabledColor} />
    };
    ...

    <AudioPlayer customIcons={customIcons} ... />

Is there any easier way to do this? Given that there was a previous ask on this board for disabling the play button, I think it would be nice if <AudioPlayer> had some simple props and backing CSS styles for this.

[lhz516]

I agree that adding a disabled state is a good-to-have feature, but not a must-have feature. What about doing a condition in onClickPrevious, if it's the first song, do nothing or show a toast that tells the user it's the first song, or jump to the beginning of this song?

I use YouTube Music, and when I click Previous button when it's the first song of playlist, it jumps to the beginning of the song.

[jselbie]

I already implemented the behavior you suggested for clicking on the previous button. But that's not a solution for the "next" button when at the end of the play list. And I disagree about it not being a must-have feature. It absolutely is a must-have feature - especially when the loop control is off.

For purposes of accessibility (e.g. screen reader technology), a button explicitly in the disabled state is understood by the assistive technology correctly (such that it can announce to the user that the control is unavailable). Faking it with a different icon and just having the onclick handler dismiss would suffice for a normal user, but would likely confuse a visual disabled user.

I really think it would be great if the <AudioPlayer> had a set of props for specifying which items are disable, a corresponding css style for it, and a disabled attribute getting applied to the actual DOM elements.

Something like the following:

<AudioPlayer disableNext={true} disablePlay={true}, disablePrevious={true} />

Honestly, I think every control including the volume/position sliders need to have support for this as well.