Skip to content

Commit

Permalink
progress bar fix (#236)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcoMadera
MarcoMadera committed Dec 16, 2023
1 parent 01d3750 commit a6f9f14
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 77 deletions.
114 changes: 57 additions & 57 deletions components/CardTrackContextMenu/CardTrackContextMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface ICardTrackContextMenu {

export default function CardTrackContextMenu({
track,
}: ICardTrackContextMenu): ReactElement {
}: Readonly<ICardTrackContextMenu>): ReactElement {
const { addToast } = useToast();
const { deviceId, playlists } = useSpotify();
const { accessToken } = useAuth();
Expand Down Expand Up @@ -100,8 +100,8 @@ export default function CardTrackContextMenu({
</button>
</li>
)}
<li>
{userPlaylists.length > 0 && (
{userPlaylists.length > 0 && (
<li>
<div
onMouseEnter={() => {
setShowAddPlaylistPopup(true);
Expand All @@ -115,61 +115,61 @@ export default function CardTrackContextMenu({
>
Add to playlist
</div>
)}
{showAddPlaylistPopup && (
<div
ref={playlistsRef}
className="playlists-container"
onMouseEnter={() => {
setShowAddPlaylistPopup(true);
}}
onMouseLeave={() => {
setShowAddPlaylistPopup(false);
}}
>
<ul>
{userPlaylists?.map((playlist) => {
return (
<li key={playlist.id}>
<button
type="button"
onClick={() => {
if (track?.uri && deviceId) {
addItemsToPlaylist(playlist.id, [track.uri]).then(
(res) => {
if (res) {
addToast({
variant: "success",
message: templateReplace(
translations[ToastMessage.AddedTo],
[translations[ContentType.Playlist]]
),
});
} else {
addToast({
variant: "error",
message: templateReplace(
translations[ToastMessage.CouldNotAddTo],
[translations[ContentType.Playlist]]
),
});
{showAddPlaylistPopup && (
<div
ref={playlistsRef}
className="playlists-container"
onMouseEnter={() => {
setShowAddPlaylistPopup(true);
}}
onMouseLeave={() => {
setShowAddPlaylistPopup(false);
}}
>
<ul>
{userPlaylists?.map((playlist) => {
return (
<li key={playlist.id}>
<button
type="button"
onClick={() => {
if (track?.uri && deviceId) {
addItemsToPlaylist(playlist.id, [track.uri]).then(
(res) => {
if (res) {
addToast({
variant: "success",
message: templateReplace(
translations[ToastMessage.AddedTo],
[translations[ContentType.Playlist]]
),
});
} else {
addToast({
variant: "error",
message: templateReplace(
translations[ToastMessage.CouldNotAddTo],
[translations[ContentType.Playlist]]
),
});
}
setShowAddPlaylistPopup(false);
removeContextMenu();
}
setShowAddPlaylistPopup(false);
removeContextMenu();
}
);
}
}}
>
{playlist.name}
</button>
</li>
);
})}
</ul>
</div>
)}
</li>
);
}
}}
>
{playlist.name}
</button>
</li>
);
})}
</ul>
</div>
)}
</li>
)}
{isStationAvailable && (
<li>
<Link
Expand Down
9 changes: 7 additions & 2 deletions components/ProgressBar/ProgressBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,12 @@ export default function ProgressBar(): ReactElement {
}, [currentlyPlayingDuration, isPremium, progressSeconds]);

useEffect(() => {
if (isPremium || !currentlyPlayingPosition || !currentlyPlayingDuration)
if (
isPremium ||
currentlyPlayingPosition === undefined ||
!currentlyPlayingDuration ||
(player as AudioPlayer).sliderBusy
)
return;
setProgressFromSpotify(
(currentlyPlayingPosition / currentlyPlayingDuration) * 100
Expand All @@ -67,7 +72,7 @@ export default function ProgressBar(): ReactElement {
? currentlyPlayingDuration
: currentlyPlayingPosition
);
}, [currentlyPlayingDuration, currentlyPlayingPosition, isPremium]);
}, [currentlyPlayingDuration, currentlyPlayingPosition, isPremium, player]);

useEffect(() => {
setLabelSeconds(progressSeconds);
Expand Down
10 changes: 4 additions & 6 deletions hooks/useSpotifyPlayer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ export function useSpotifyPlayer({ name }: { name: string }): {
if (!isPremium) {
audioPlayer.current = new Audio() as AudioPlayer;

audioPlayer.current.ondurationchange = function () {
setCurrentlyPlayingDuration(audioPlayer.current?.duration);
};

audioPlayer.current.seek = function (seek: number) {
if (audioPlayer.current) {
audioPlayer.current.currentTime = seek;
Expand Down Expand Up @@ -166,13 +162,15 @@ export function useSpotifyPlayer({ name }: { name: string }): {
audioPlayer.current.ontimeupdate = () => {
if (!audioPlayer.current?.sliderBusy) {
setCurrentlyPlayingPosition(
Math.floor(audioPlayer.current?.currentTime ?? 0)
Math.round(audioPlayer.current?.currentTime ?? 0)
);
}
};

audioPlayer.current.ondurationchange = () => {
setCurrentlyPlayingDuration(audioPlayer.current?.duration);
setCurrentlyPlayingDuration(
Math.round(audioPlayer.current?.duration ?? 0)
);
};

setPlayer(audioPlayer.current);
Expand Down
24 changes: 12 additions & 12 deletions pages/dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ const Dashboard: NextPage<DashboardProps> = ({
images={images}
title={name}
subTitle={
decode(description) ||
decode(description) ??
`${translations.by} ${ownerDisplayName ?? ""}`
}
id={id}
Expand Down Expand Up @@ -274,7 +274,7 @@ const Dashboard: NextPage<DashboardProps> = ({
images={images}
title={name}
subTitle={
decode(description) ||
decode(description) ??
`${translations.by} ${ownerDisplayName ?? ""}`
}
id={id}
Expand Down Expand Up @@ -356,7 +356,7 @@ export async function getServerSideProps({
}): Promise<{
props: Partial<DashboardProps>;
}> {
const country = (query.country || "US") as string;
const country = (query.country ?? "US") as string;
const translations = getTranslations(country, Page.Dashboard);
const cookies = req?.headers?.cookie ?? "";
const lastFMAPIKey = process.env.LAST_FM_API_KEY as string;
Expand Down Expand Up @@ -397,7 +397,7 @@ export async function getServerSideProps({
]);
}

const { accessToken, user } = (await getAuth(res, cookies, tokens)) || {};
const { accessToken, user } = (await getAuth(res, cookies, tokens)) ?? {};
const artistsOfTheWeekProm = getArtistsOfTheWeek(lastFMAPIKey);
const tracksOfTheWeekProm = getTracksOfTheWeek(lastFMAPIKey);

Expand Down Expand Up @@ -573,7 +573,7 @@ export async function getServerSideProps({
});

const recommendedTracksIds =
tracksRecommendations?.map((item) => item.id) || [];
tracksRecommendations?.map((item) => item.id) ?? [];

const tracksInLibrary = await checkTracksInLibrary(
recommendedTracksIds,
Expand Down Expand Up @@ -621,7 +621,7 @@ export async function getServerSideProps({
type: artist.type,
uri: artist.uri,
};
}) || [],
}) ?? [],
album: track.album,
duration_ms: track.duration_ms,
uri: track.uri,
Expand All @@ -635,20 +635,20 @@ export async function getServerSideProps({

return {
props: {
user: user || null,
user: user ?? null,
accessToken: accessToken ?? null,
featuredPlaylists:
mappedFeaturedPlaylists(fullFilledValue(featuredPlaylists)) || null,
mappedFeaturedPlaylists(fullFilledValue(featuredPlaylists)) ?? null,
newReleases: fullFilledValue(newReleases),
categories: fullFilledValue(categories),
topTracks:
deserialize(mappedTracksData(fullFilledValue(topTracks)?.items)) || [],
deserialize(mappedTracksData(fullFilledValue(topTracks)?.items)) ?? [],
topArtists: fullFilledValue(topArtists),
artistOfTheWeek: artistResult,
tracksOfTheWeek: deserialize(mappedTracksData(tracksResult)) || [],
thisPlaylists: deserialize(mappedPlaylistData(thisPlaylistsResult)) || [],
tracksOfTheWeek: deserialize(mappedTracksData(tracksResult)) ?? [],
thisPlaylists: deserialize(mappedPlaylistData(thisPlaylistsResult)) ?? [],
tracksRecommendations:
deserialize(mappedTracksData(tracksRecommendations)) || [],
deserialize(mappedTracksData(tracksRecommendations)) ?? [],
tracksInLibrary,
translations,
},
Expand Down

1 comment on commit a6f9f14

@vercel
Copy link

@vercel vercel bot commented on a6f9f14 Dec 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

rindu – ./

spotify-playlists-cleaner.vercel.app
rindu-git-main-marcomadera.vercel.app
rindu-marcomadera.vercel.app
rindu.marcomadera.com

Please sign in to comment.