Skip to content

Commit

Permalink
feat(player): add podcast support
Browse files Browse the repository at this point in the history 
fixes #47
  • Loading branch information
@brandonsaldan
brandonsaldan committed Dec 19, 2024
1 parent cbcb09a commit 31fb589
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 58 deletions.
117 changes: 82 additions & 35 deletions src/pages/_app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,11 +345,14 @@ export default function App({ Component, pageProps }) {
const fetchCurrentPlayback = async () => {
if (accessToken) {
try {
const response = await fetch("https://api.spotify.com/v1/me/player", {
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
const response = await fetch(
"https://api.spotify.com/v1/me/player?type=episode,track",
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);

if (response.status === 204) {
setCurrentPlayback(null);
Expand Down Expand Up @@ -381,33 +384,66 @@ export default function App({ Component, pageProps }) {
setCurrentRepeat(data.repeat_state);

if (data && data.item) {
const currentAlbum = data.item.album;
const currentTrackUri = data.item.uri;
setCurrentlyPlayingTrackUri(currentTrackUri);
if (
!currentlyPlayingAlbum ||
currentlyPlayingAlbum.id !== currentAlbum.id
) {
if (!router.pathname.includes("album")) {
setCurrentlyPlayingAlbum(currentAlbum);
setAlbumsQueue((prevQueue) => {
const updatedQueue = prevQueue.filter(
(album) => album.id !== currentAlbum.id
);
return [currentAlbum, ...updatedQueue];
});
if (data && data.item) {
const currentTrackUri = data.item.uri;
setCurrentlyPlayingTrackUri(currentTrackUri);

if (data.item.type === "track") {
const currentAlbum = data.item.album;
if (
!currentlyPlayingAlbum ||
currentlyPlayingAlbum.id !== currentAlbum.id
) {
if (!router.pathname.includes("album")) {
setCurrentlyPlayingAlbum(currentAlbum);
setAlbumsQueue((prevQueue) => {
const updatedQueue = prevQueue.filter(
(album) => album.id !== currentAlbum.id
);
return [currentAlbum, ...updatedQueue];
});

const imageUrl = currentAlbum.images[0]?.url;
if (imageUrl !== albumImage) {
localStorage.setItem("albumImage", imageUrl);
setAlbumImage(imageUrl);
setAlbumName(currentAlbum.name);
setArtistName(
currentAlbum.artists
.map((artist) => artist.name)
.join(", ")
);

const imageUrl = currentAlbum.images[0].url;
if (imageUrl !== albumImage) {
localStorage.setItem("albumImage", imageUrl);
setAlbumImage(imageUrl);
setAlbumName(currentAlbum.name);
setArtistName(
currentAlbum.artists.map((artist) => artist.name).join(", ")
);
if (activeSection === "recents") {
updateGradientColors(imageUrl);
}
}
}
}
} else if (data.item.type === "episode") {
const currentShow = data.item.show;
if (
!currentlyPlayingAlbum ||
currentlyPlayingAlbum.id !== currentShow.id
) {
setCurrentlyPlayingAlbum(currentShow);
setAlbumsQueue((prevQueue) => {
const updatedQueue = prevQueue.filter(
(album) => album.id !== currentShow.id
);
return [currentShow, ...updatedQueue];
});

if (activeSection === "recents") {
updateGradientColors(imageUrl);
const imageUrl = currentShow.images[0]?.url;
if (imageUrl !== albumImage) {
localStorage.setItem("albumImage", imageUrl);
setAlbumImage(imageUrl);
setAlbumName(currentShow.name);
setArtistName(currentShow.publisher);

if (activeSection === "recents") {
updateGradientColors(imageUrl);
}
}
}
}
Expand Down Expand Up @@ -1367,11 +1403,22 @@ export default function App({ Component, pageProps }) {
setTargetColor3("#191414");
setTargetColor4("#191414");
} else {
if (currentPlayback.item && currentPlayback.item.album.images[0]) {
updateGradientColors(
currentPlayback.item.album.images[0].url,
"nowPlaying"
);
const albumImages = currentPlayback?.item?.album?.images;
const podcastImages = currentPlayback?.item?.images;

if (albumImages && albumImages.length > 0 && albumImages[0]?.url) {
updateGradientColors(albumImages[0].url, "nowPlaying");
} else if (
podcastImages &&
podcastImages.length > 0 &&
podcastImages[0]?.url
) {
updateGradientColors(podcastImages[0].url, "nowPlaying");
} else {
setTargetColor1("#191414");
setTargetColor2("#191414");
setTargetColor3("#191414");
setTargetColor4("#191414");
}
}
}
Expand Down
24 changes: 15 additions & 9 deletions src/pages/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,17 +207,23 @@ export default function Home({
{album.name}
</h4>
</LongPressLink>
<LongPressLink
href={`/artist/${album.artists[0].id}`}
spotifyUrl={album.artists[0]?.external_urls?.spotify}
accessToken={accessToken}
>
{album.artists?.[0] ? (
<LongPressLink
href={`/artist/${album.artists[0].id}`}
spotifyUrl={album.artists[0]?.external_urls?.spotify}
accessToken={accessToken}
>
<h4 className="text-[32px] font-[560] text-white truncate tracking-tight max-w-[280px]">
{album.artists
.map((artist) => artist.name)
.join(", ")}
</h4>
</LongPressLink>
) : album.type === "show" && album.name ? (
<h4 className="text-[32px] font-[560] text-white truncate tracking-tight max-w-[280px]">
{album.artists
.map((artist) => artist.name)
.join(", ")}
{album.publisher}
</h4>
</LongPressLink>
) : null}
</div>
))}
</>
Expand Down
62 changes: 48 additions & 14 deletions src/pages/now-playing.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,15 +598,21 @@ const NowPlaying = ({

const trackName =
currentPlayback && currentPlayback.item
? currentPlayback.item.name
? currentPlayback.item.type === "episode"
? currentPlayback.item.name
: currentPlayback.item.name || "Not Playing"
: "Not Playing";
const artistName =
currentPlayback && currentPlayback.item
? currentPlayback.item.artists.map((artist) => artist.name).join(", ")
? currentPlayback.item.type === "episode"
? currentPlayback.item.show.name
: currentPlayback.item.artists.map((artist) => artist.name).join(", ")
: "";
const albumArt =
currentPlayback?.item?.album?.images?.[0]?.url ||
"/images/not-playing.webp";
const albumArt = currentPlayback?.item
? currentPlayback.item.type === "episode"
? currentPlayback.item.show.images[0]?.url
: currentPlayback.item?.album?.images?.[0]?.url
: "/images/not-playing.webp";
const isPlaying = currentPlayback ? currentPlayback.is_playing : false;
const progress =
currentPlayback && currentPlayback.item
Expand Down Expand Up @@ -936,13 +942,25 @@ const NowPlaying = ({
<div className="md:w-1/3 flex flex-row items-center px-12 pt-10">
<div className="min-w-[280px] mr-8">
<LongPressLink
href={`/album/${currentPlayback?.item?.album?.id}`}
spotifyUrl={currentPlayback?.item?.album?.external_urls?.spotify}
href={
currentPlayback?.item?.type === "episode"
? `/show/${currentPlayback.item.show.id}`
: `/album/${currentPlayback?.item?.album?.id}`
}
spotifyUrl={
currentPlayback?.item?.type === "episode"
? currentPlayback.item.show.external_urls?.spotify
: currentPlayback?.item?.album?.external_urls?.spotify
}
accessToken={accessToken}
>
<Image
src={albumArt || "/images/not-playing.webp"}
alt="Album Art"
src={albumArt}
alt={
currentPlayback?.item?.type === "episode"
? "Podcast Cover"
: "Album Art"
}
width={280}
height={280}
priority
Expand All @@ -953,8 +971,16 @@ const NowPlaying = ({
{!showLyrics || !currentPlayback?.item ? (
<div className="flex-1 text-center md:text-left">
<LongPressLink
href={`/album/${currentPlayback?.item?.album?.id}`}
spotifyUrl={currentPlayback?.item?.external_urls?.spotify}
href={
currentPlayback?.item?.type === "episode"
? `/show/${currentPlayback.item.show.id}`
: `/album/${currentPlayback?.item?.album?.id}`
}
spotifyUrl={
currentPlayback?.item?.type === "episode"
? currentPlayback.item.show.external_urls?.spotify
: currentPlayback?.item?.album?.external_urls?.spotify
}
accessToken={accessToken}
>
{trackNameScrollingEnabled ? (
Expand All @@ -978,14 +1004,22 @@ const NowPlaying = ({
)}
</LongPressLink>
<LongPressLink
href={`/artist/${currentPlayback?.item?.artists[0]?.id}`}
href={
currentPlayback?.item?.type === "episode"
? `/show/${currentPlayback.item.show.id}`
: `/artist/${currentPlayback?.item?.artists[0]?.id}`
}
spotifyUrl={
currentPlayback?.item?.artists[0]?.external_urls?.spotify
currentPlayback?.item?.type === "episode"
? currentPlayback.item.show.external_urls?.spotify
: currentPlayback?.item?.artists[0]?.external_urls?.spotify
}
accessToken={accessToken}
>
<h4 className="text-[36px] font-[560] text-white/60 truncate tracking-tight max-w-[380px]">
{artistName}
{currentPlayback?.item?.type === "episode"
? currentPlayback.item.show.name
: artistName}
</h4>
</LongPressLink>
</div>
Expand Down

0 comments on commit 31fb589

Please sign in to comment.