feat: add dj support

Author: brandonsaldan

src/App.jsx

@@ -13,6 +13,7 @@ import { useNetwork } from "./hooks/useNetwork";
 import { useGradientState } from "./hooks/useGradientState";
 import { useSpotifyData } from "./hooks/useSpotifyData";
 import { useSpotifyPlayerState } from "./hooks/useSpotifyPlayerState";
+import { useSpotifyPlayerControls } from "./hooks/useSpotifyPlayerControls";
 import { useBluetooth } from "./hooks/useBluetooth";
 
 function App() {
@@ -21,6 +22,7 @@ function App() {
     return localStorage.getItem("lastActiveSection") || "recents";
   });
   const [viewingContent, setViewingContent] = useState(null);
+  const playerControls = useSpotifyPlayerControls();
 
   const { isAuthenticated, accessToken, isLoading: authIsLoading } = useAuth();
   const { isConnected, showNoNetwork, checkNetwork } = useNetwork();
@@ -33,7 +35,7 @@ function App() {
     denyPairing,
     setDiscoverable,
     disconnectDevice,
-    enableNetworking
+    enableNetworking,
   } = useBluetooth();
 
   const {
@@ -204,6 +206,7 @@ function App() {
         currentlyPlayingTrackUri={currentPlayback?.item?.uri}
         radioMixes={radioMixes}
         updateGradientColors={updateGradientColors}
+        playerControls={playerControls}
       />
     );
   } else {

src/components/player/NowPlaying.jsx

@@ -14,6 +14,7 @@ import {
   ForwardIcon,
   MenuIcon,
   LyricsIcon,
+  DJIcon,
 } from "../common/icons";
 
 const NowPlaying = ({ accessToken, currentPlayback, onClose }) => {
@@ -25,6 +26,8 @@ const NowPlaying = ({ accessToken, currentPlayback, onClose }) => {
   const lastUpdateTimeRef = useRef(Date.now());
   const currentTrackIdRef = useRef(null);
   const containerRef = useRef(null);
+  const isDJPlaylist =
+    currentPlayback?.context?.uri === "spotify:playlist:37i9dQZF1EYkqdzj48dyYq";
   const { updateGradientColors } = useGradientState();
 
   const {
@@ -36,6 +39,7 @@ const NowPlaying = ({ accessToken, currentPlayback, onClose }) => {
     checkIsTrackLiked,
     likeTrack,
     unlikeTrack,
+    sendDJSignal,
   } = useSpotifyPlayerControls(accessToken);
 
   const handlePlayPause = async () => {
@@ -325,6 +329,11 @@ const NowPlaying = ({ accessToken, currentPlayback, onClose }) => {
         </div>
 
         <div className="flex items-center">
+          {isDJPlaylist && (
+            <div onClick={sendDJSignal}>
+              <DJIcon className="w-14 h-14 fill-white/60 mr-4 mb-1" />
+            </div>
+          )}
           <Menu as="div" className="relative inline-block text-left">
             <MenuButton className="focus:outline-none">
               <MenuIcon className="w-14 h-14 fill-white/60" />

src/hooks/useSpotifyPlayerControls.js

@@ -447,6 +447,108 @@ export function useSpotifyPlayerControls(accessToken) {
     [accessToken]
   );
 
+  const playDJMix = useCallback(async () => {
+    if (!accessToken) return false;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const deviceResponse = await fetch(
+        "https://api.spotify.com/v1/me/player",
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+
+      let deviceId = null;
+      if (deviceResponse.status !== 204) {
+        const deviceData = await deviceResponse.json();
+        deviceId = deviceData.device?.id;
+      }
+
+      const response = await fetch(
+        `https://gue1-spclient.spotify.com/connect-state/v1/player/command/from/${deviceId}/to/${deviceId}`,
+        {
+          method: "POST",
+          headers: {
+            "accept-language": "en",
+            authorization: `Bearer ${accessToken}`,
+            "content-type": "application/x-www-form-urlencoded",
+          },
+          body: '{"command": {"endpoint": "play", "context": {"entity_uri": "spotify:playlist:37i9dQZF1EYkqdzj48dyYq", "uri": "spotify:playlist:37i9dQZF1EYkqdzj48dyYq", "url": "hm:\\/\\/lexicon-session-provider\\/context-resolve\\/v2\\/session?contextUri=spotify:playlist:37i9dQZF1EYkqdzj48dyYq"}}}',
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      return true;
+    } catch (err) {
+      console.error("Error playing DJ mix:", err);
+      setError(err.message);
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [accessToken]);
+
+  const sendDJSignal = useCallback(async () => {
+    if (!accessToken) return false;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const deviceResponse = await fetch(
+        "https://api.spotify.com/v1/me/player",
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+
+      let deviceId = null;
+      if (deviceResponse.status !== 204) {
+        const deviceData = await deviceResponse.json();
+        deviceId = deviceData.device?.id;
+      }
+
+      if (!deviceId) {
+        throw new Error("No active device found");
+      }
+
+      const response = await fetch(
+        `https://gue1-spclient.spotify.com/connect-state/v1/player/command/from/${deviceId}/to/${deviceId}`,
+        {
+          method: "POST",
+          headers: {
+            "accept-language": "en",
+            authorization: `Bearer ${accessToken}`,
+            "content-type": "application/x-www-form-urlencoded",
+          },
+          body: '{"command": {"endpoint": "signal", "signal_id": "jump"}}',
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      return true;
+    } catch (err) {
+      console.error("Error sending DJ signal:", err);
+      setError(err.message);
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [accessToken]);
+
   return {
     playTrack,
     pausePlayback,
@@ -459,6 +561,8 @@ export function useSpotifyPlayerControls(accessToken) {
     checkIsTrackLiked,
     likeTrack,
     unlikeTrack,
+    playDJMix,
+    sendDJSignal,
     isLoading,
     error,
   };

src/pages/Home.jsx

@@ -4,6 +4,7 @@ import HorizontalScroll from "../components/common/navigation/HorizontalScroll";
 import Redirect from "../components/common/navigation/Redirect";
 import { useGradientState } from "../hooks/useGradientState";
 import { useNavigation } from "../hooks/useNavigation";
+import { useSpotifyPlayerControls } from "../hooks/useSpotifyPlayerControls";
 
 export default function Home({
   accessToken,
@@ -26,6 +27,7 @@ export default function Home({
   const hasScrolledToCurrentAlbumRef = useRef(false);
   const itemWidth = 290;
   const [newAlbumAdded, setNewAlbumAdded] = useState(false);
+  const { playDJMix } = useSpotifyPlayerControls(accessToken);
 
   const { scrollByAmount } = useNavigation({
     containerRef: scrollContainerRef,
@@ -511,6 +513,16 @@ export default function Home({
             <div
               className="mt-10 aspect-square rounded-[12px] drop-shadow-[0_8px_5px_rgba(0,0,0,0.25)] bg-white/10 cursor-pointer"
               style={{ width: 280, height: 280 }}
+              onClick={() =>
+                playDJMix().then((success) => {
+                  if (success) {
+                    setTimeout(() => {
+                      refreshPlaybackState();
+                      setActiveSection("nowPlaying");
+                    }, 500);
+                  }
+                })
+              }
             >
               <img
                 src="/images/radio-cover/dj.webp"