feat: playback

components/Sidebar/icons/index.tsx

@@ -82,6 +82,10 @@ const SidebarIcons = ({
       selected={currentSelection === "friends"}
       onClick={() => onChange("friends")}
     />
+    <PlaybackIcon
+      selected={currentSelection === "playback"}
+      onClick={() => onChange("playback")}
+    />
   </>
 );
 

components/Sidebar/panels/BasePanel.tsx

@@ -17,7 +17,7 @@ const BasePanel = ({
 
   if (sidebar !== sidebarId) return null;
   return (
-    <div className="w-full md:w-64 min-h-screen h-100% md:p-4 md:bg-gray-200 md:text-black">
+    <div className="w-full md:w-64 max-h-screen h-screen overflow-y-scroll md:p-4 md:bg-gray-200 md:text-black">
       {title && (
         <>
           <h2 className="normal-case font-bold">{title}</h2>

components/Sidebar/panels/FriendItem.tsx → components/Sidebar/panels/Friends/FriendItem.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import ArtistLinks from "@/components/ui/ArtistLinks";
 
-const FriendItem = ({ track }: { track: SpotifyApi.TrackObjectFull }) => (
+const FriendItem = ({ track }: { track: SpotifyApi.TrackObjectSimplified }) => (
   <li>
     <div className="flex flex-row justify-start content-center max-w-[224px]">
       <h5 className="text-xs truncate max-w-[112px]">

components/Sidebar/panels/Friends.tsx → components/Sidebar/panels/Friends/index.tsx

@@ -1,8 +1,7 @@
-import "server-only";
-
 import getFollowedUsers from "@/lib/followers/getFollowedUsers";
 
-import BasePanel from "./BasePanel";
+import BasePanel from "../BasePanel";
+
 import Friend from "./Friend";
 
 const Friends = async () => {

components/Sidebar/panels/Playback/PlaybackPanel.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useSidebar } from "@/components/Sidebar/SidebarContext";
+
+import Player from "./Player";
+
+const PlaybackPanel = ({ accessToken }: { accessToken: string }) => {
+  const [sidebar] = useSidebar();
+  const isCurrentSidebar = sidebar === "playback";
+
+  return (
+    <div
+      className={`w-full md:w-64 max-h-screen h-screen flex flex-col md:p-4 md:bg-gray-200 md:text-black ${
+        isCurrentSidebar ? "" : "hidden"
+      }`}
+    >
+      <div>
+        <h2 className="normal-case font-bold">Playback</h2>
+        <div className="divider" />
+      </div>
+      <div className="flex-grow flex flex-col justify-center">
+        <Player accessToken={accessToken} />
+      </div>
+    </div>
+  );
+};
+
+export default PlaybackPanel;

components/Sidebar/panels/Playback/Player.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import SpotifyPlayer from "react-spotify-web-playback";
+
+const Player = ({ accessToken }: { accessToken: string }) => {
+  const [isVisible, toggleVisibility] = useState(false);
+  const router = useRouter();
+  if (!isVisible) {
+    return (
+      <button
+        className="btn btn-ghost bg-spotify text-white btn-block"
+        onClick={() => toggleVisibility(true)}
+        type="button"
+      >
+        Connect to Spotify
+      </button>
+    );
+  }
+  return (
+    <>
+      {/* @see https://github.com/gilbarbara/react-spotify-web-playback/issues/154 */}
+      {/* @ts-expect-error SpotifyPlayer type error */}
+      <SpotifyPlayer
+        updateSavedStatus={() => router.refresh()}
+        syncExternalDevice
+        syncExternalDeviceInterval={5}
+        name="DKMS"
+        token={accessToken}
+        layout="compact"
+        showSaveIcon
+        persistDeviceSelection
+        hideAttribution
+      />
+    </>
+  );
+};
+
+export default Player;

components/Sidebar/panels/Playback/index.tsx

@@ -0,0 +1,10 @@
+import getServerAccessToken from "@/lib/getServerAccessToken";
+
+import PlaybackPanel from "./PlaybackPanel";
+
+const Playback = async () => {
+  const accessToken = await getServerAccessToken();
+  return <PlaybackPanel accessToken={accessToken} />;
+};
+
+export default Playback;

components/Sidebar/panels/index.tsx

@@ -1,12 +1,15 @@
 import Friends from "./Friends";
 import Notifications from "./Notifications";
+import Playback from "./Playback";
 
 const SidebarPanels = ({ isDesktop }: { isDesktop?: boolean }) => (
   <div className={isDesktop ? "hidden md:block" : "md:hidden"}>
     {/* @ts-expect-error Next 13 handles async components */}
     <Friends />
     {/* @ts-expect-error Next 13 handles async components */}
     <Notifications />
+    {/* @ts-expect-error Next 13 handles async components */}
+    <Playback />
   </div>
 );
 

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-loading-skeleton": "^3.1.1",
+    "react-spotify-web-playback": "^0.13.4",
     "server-only": "^0.0.1",
     "sharp": "0.31.1",
     "v8": "^0.1.0"

pages/api/auth/[...nextauth].ts

@@ -111,13 +111,13 @@ const SCOPES = [
   // "playlist-modify-public",
   "user-follow-modify",
   "user-follow-read",
-  // "user-read-playback-position",
+  "user-read-playback-position",
   "user-top-read",
   "user-read-recently-played",
   "user-library-modify",
   "user-library-read",
-  // "user-read-email",
-  // "user-read-private",
+  "user-read-email",
+  "user-read-private",
 ] as const;
 
 export const authOptions: NextAuthOptions = {