diff --git a/packages/web/src/components/play-bar/queue-button/QueueButton.tsx b/packages/web/src/components/play-bar/queue-button/QueueButton.tsx index ce9a9e28f87..ece862d7dee 100644 --- a/packages/web/src/components/play-bar/queue-button/QueueButton.tsx +++ b/packages/web/src/components/play-bar/queue-button/QueueButton.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef, useState } from 'react' +import { useCallback, useContext, useEffect, useRef, useState } from 'react' import { useQueueNewFeatureBadge } from '@audius/common/hooks' import { Name } from '@audius/common/models' @@ -16,12 +16,15 @@ import { useSelector } from 'react-redux' import { make, useRecord } from 'common/store/analytics/actions' import { QueuePopover } from 'components/queue-popover' +import { ToastContext } from 'components/toast/ToastContext' -const { getPlaybackQueue } = playbackSelectors +const { getPlaybackQueue, getShuffle } = playbackSelectors const messages = { queue: 'Queue', - newFeature: 'New' + newFeature: 'New', + queueDisabledDuringShuffle: 'Turn shuffle off to view queue', + disableShuffleToast: 'Disable shuffle to use the queue' } const pulse = keyframes` @@ -39,13 +42,19 @@ export const QueueButton = () => { const anchorRef = useRef(null) const [isOpen, setIsOpen] = useState(false) const queue = useSelector(getPlaybackQueue) + const isShuffleEnabled = useSelector(getShuffle) const hasItems = queue.length > 0 const { color } = useTheme() const record = useRecord() + const { toast } = useContext(ToastContext) const { showBadge: showNewFeatureBadge, dismiss: dismissNewFeatureBadge } = useQueueNewFeatureBadge() const handleToggle = useCallback(() => { + if (isShuffleEnabled) { + toast(messages.disableShuffleToast) + return + } if (showNewFeatureBadge) { dismissNewFeatureBadge() } @@ -63,7 +72,14 @@ export const QueueButton = () => { } return next }) - }, [record, queue.length, showNewFeatureBadge, dismissNewFeatureBadge]) + }, [ + isShuffleEnabled, + record, + queue.length, + showNewFeatureBadge, + dismissNewFeatureBadge, + toast + ]) const handleClose = useCallback(() => { setIsOpen((open) => { @@ -74,6 +90,18 @@ export const QueueButton = () => { }) }, [record]) + useEffect(() => { + if (isShuffleEnabled) { + handleClose() + } + }, [handleClose, isShuffleEnabled]) + + const tooltipText = isShuffleEnabled + ? messages.queueDisabledDuringShuffle + : showNewFeatureBadge + ? messages.newFeature + : messages.queue + return ( <> { alignItems='center' justifyContent='center' > - + - {hasItems ? ( + {hasItems && !isShuffleEnabled ? ( { }} /> ) : null} - {showNewFeatureBadge ? ( + {showNewFeatureBadge && !isShuffleEnabled ? ( { ) : null}