diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index 5363cd88..bd59459a 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -28,6 +28,9 @@ const PlaybackControls = () => {
const consume = useSelector((state) => state.mopidy.consume);
const random = useSelector((state) => state.mopidy.random);
const repeat = useSelector((state) => state.mopidy.repeat);
+ const host = useSelector((state) => state.mopidy.host);
+ const port = useSelector((state) => state.mopidy.port);
+ const ssl = useSelector((state) => state.mopidy.ssl);
const streamTitle = useSelector((state) => state.core.streamTitle);
const currentTrackUri = useSelector((state) => state.core.current_track?.uri);
const currentTrackSelector = makeItemSelector(currentTrackUri);
@@ -50,6 +53,26 @@ const PlaybackControls = () => {
setPlaybackPosition(time_position);
}, [time_position]);
+ const [smartQueue, setSmartQueue] = useState(() => localStorage.getItem('smartQueue') === 'true');
+
+ useEffect(() => {
+ localStorage.setItem('smartQueue', smartQueue);
+ }, [smartQueue]);
+
+ const toggleSmartQueue = () => {
+ const newState = !smartQueue;
+ setSmartQueue(newState);
+
+ const protocol = ssl ? 'https' : 'http';
+ const url = `${protocol}://${host}:${port}/smartplaylists/smart-queue`;
+
+ fetch(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ enabled: newState }),
+ }).catch(() => {});
+ };
+
const handleContextMenu = (e) => {
e.preventDefault();
@@ -173,6 +196,16 @@ const PlaybackControls = () => {
+