Skip to content

Commit 69a7768

Browse files
tejas-git64tejas-git64
committed
fixed playback on desktop + minor tidyups
1 parent b54ade6 commit 69a7768

File tree

9 files changed

+133
-671
lines changed

9 files changed

+133
-671
lines changed

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap"
1414
rel="stylesheet" crossorigin>
1515
<title>Lowkey Music</title>
16+
<!-- <script src="https://cdn.jsdelivr.net/npm/react-render-tracker"></script> -->
1617
</head>
1718

1819
<body>

‎src/components/Nowplaying/NowPlaying.tsx

+28-18
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { useState, useEffect, useRef } from "react";
12
import { useBoundStore } from "../../store/store";
3+
import { ArtistInSong, TrackDetails } from "../../types/GlobalTypes";
24
import songfallback from "../../assets/icons8-song-fallback.png";
35
import speaker from "../../assets/speaker-svgrepo.svg";
46
import favorite from "../../assets/icons8-heart.svg";
@@ -14,12 +16,10 @@ import previous from "../../assets/previous.svg";
1416
import next from "../../assets/next.svg";
1517
import play from "../../assets/icons8-play.svg";
1618
import pause from "../../assets/icons8-pause.svg";
17-
import { useState, useEffect, useRef } from "react";
1819
import WaveSurfer from "wavesurfer.js";
1920
import secondsToHMS from "../../utils/utils";
2021
import tick from "../../assets/icons8-tick.svg";
2122
import "../../App.css";
22-
import { ArtistInSong, TrackDetails } from "../../types/GlobalTypes";
2323

2424
export default function NowPlaying() {
2525
const {
@@ -38,7 +38,6 @@ export default function NowPlaying() {
3838
setIsShuffling,
3939
setHistory,
4040
} = useBoundStore();
41-
const [volume, setVolume] = useState<number>(0);
4241
const [currentTime, setCurrentTime] = useState(0);
4342
const wavesurfer = useRef<WaveSurfer | null>(null);
4443
const songIndex = nowPlaying.queue.songs?.findIndex(
@@ -84,7 +83,7 @@ export default function NowPlaying() {
8483
function playOrder() {
8584
if (isShuffling === false) {
8685
setIsPlaying(true);
87-
songIndex && setNowPlaying(nowPlaying.queue.songs[songIndex + 1]);
86+
songIndex && setNowPlaying(nowPlaying.queue.songs[songIndex]);
8887
} else {
8988
const randomIndex = Math.floor(
9089
Math.random() * nowPlaying.queue.songs.length,
@@ -145,12 +144,16 @@ export default function NowPlaying() {
145144
barWidth: 2,
146145
minPxPerSec: 1,
147146
height: 12,
147+
duration: Number(nowPlaying.track?.duration),
148+
url: nowPlaying.track?.downloadUrl[4]?.url,
148149
});
149150
nowPlaying.track &&
150-
wavesurfer.current?.load(nowPlaying.track.downloadUrl[4].url);
151+
wavesurfer.current?.load(nowPlaying.track.downloadUrl[4]?.url);
151152
wavesurfer.current?.seekTo(0);
152-
wavesurfer.current?.setVolume(volume);
153153
}
154+
wavesurfer.current?.on("redrawcomplete", () => {
155+
setIsPlaying(true);
156+
});
154157
wavesurfer.current?.on("seeking", () => {
155158
wavesurfer.current && setCurrentTime(wavesurfer.current.getCurrentTime());
156159
});
@@ -165,9 +168,6 @@ export default function NowPlaying() {
165168
playOrder();
166169
}
167170
});
168-
wavesurfer.current?.on("ready", () => {
169-
setIsPlaying(true);
170-
});
171171
return () => {
172172
wavesurfer.current?.destroy();
173173
wavesurfer.current?.stop();
@@ -180,7 +180,9 @@ export default function NowPlaying() {
180180
<div className="flex h-full w-[30%] max-w-[300px] items-center justify-center p-2.5">
181181
<img
182182
src={
183-
nowPlaying.track ? nowPlaying.track?.image[2]?.url : songfallback
183+
nowPlaying.track && nowPlaying.track.id !== ""
184+
? nowPlaying.track?.image[2]?.url
185+
: songfallback
184186
}
185187
id="songImg"
186188
alt="song-img"
@@ -267,7 +269,7 @@ export default function NowPlaying() {
267269
outline: "none",
268270
}}
269271
className={`h-auto w-auto rounded-full border-none bg-neutral-100 p-1 outline-none disabled:cursor-not-allowed disabled:bg-neutral-600`}
270-
// disabled={isReady === false}
272+
disabled={!nowPlaying.track?.id}
271273
>
272274
<img
273275
src={pause}
@@ -286,7 +288,7 @@ export default function NowPlaying() {
286288
outline: "none",
287289
}}
288290
className={`h-auto w-auto rounded-full border-none bg-neutral-100 p-1 outline-none disabled:cursor-not-allowed disabled:bg-neutral-600`}
289-
// disabled={isReady === false}
291+
disabled={!nowPlaying.track?.id}
290292
>
291293
<img
292294
src={play}
@@ -337,7 +339,7 @@ export default function NowPlaying() {
337339
<p className="h-full w-[50px] text-center text-[12px] text-white">
338340
{nowPlaying.track?.duration
339341
? secondsToHMS(Number(nowPlaying.track?.duration))
340-
: ""}
342+
: "--:--"}
341343
</p>
342344
</div>
343345
</div>
@@ -428,18 +430,26 @@ export default function NowPlaying() {
428430
min={0}
429431
className="h-[3px] w-full appearance-none transition-all ease-linear disabled:cursor-not-allowed"
430432
max={1}
431-
step={0.05}
432-
value={volume}
433-
onChange={(e) => setVolume(Number(e.target.value))}
433+
step={0.1}
434+
value={wavesurfer.current?.getVolume()}
435+
onChange={(e) =>
436+
wavesurfer.current?.setVolume(Number(e.target.value))
437+
}
434438
disabled={nowPlaying.track?.id === ""}
435439
/>
436440
<img
437-
src={volume > 0.1 ? (volume < 0.7 ? vol : high) : mute}
441+
src={
442+
wavesurfer.current && wavesurfer.current?.getVolume() > 0.1
443+
? wavesurfer.current?.getVolume() < 0.7
444+
? vol
445+
: high
446+
: mute
447+
}
438448
alt="volume"
439449
className={`-mr-1 ml-1 h-[28px] w-[28px] bg-transparent ${
440450
nowPlaying.track?.id === "" ? "invert-[0.4]" : ""
441451
} ${
442-
volume === 0 && "invert-[0.5]"
452+
wavesurfer.current?.getVolume() === 0 && "invert-[0.5]"
443453
} disabled:cursor-not-allowed disabled:bg-neutral-900`}
444454
/>
445455
</div>

‎src/components/Recents/Recents.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Recents() {
1414
className="mb-0.5 flex h-[50px] w-full flex-shrink-0 items-center justify-start overflow-hidden rounded-md bg-black"
1515
>
1616
<img
17-
src={image ? image[0].url : songfallback}
17+
src={image ? image[0]?.url : songfallback}
1818
alt="img"
1919
onError={(e) => (e.currentTarget.src = songfallback)}
2020
className="mr-4 h-[50px] w-[50px] border-r border-black"

‎src/components/Section/Section.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { Suspense, useEffect, useRef } from "react";
55
import SectionLoading from "./Loading";
66
import { getPlaylist } from "../../api/requests";
77
export default function Section({ genre }: SectionType) {
8-
const playlist = useBoundStore((state) => state.home.genres[genre]);
98
const options = {
10-
rootMargin: "240px",
11-
threshold: 0,
9+
// rootMargin: "240px",
10+
threshold: 1.0,
1211
};
12+
const playlist = useBoundStore((state) => state.home.genres[genre]);
1313
const sectionRef = useRef(null);
1414

1515
useEffect(() => {
@@ -65,7 +65,7 @@ export default function Section({ genre }: SectionType) {
6565

6666
const DataComponent = () => {
6767
if (!playlist) {
68-
throw new Promise((resolve) => setTimeout(resolve, 100));
68+
throw new Promise((resolve) => setTimeout(resolve, 0));
6969
} else {
7070
return <PlaylistComponent />;
7171
}

‎src/components/Song/Song.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export default function Song(track: TrackDetails) {
130130
style={{
131131
wordSpacing: "2px",
132132
}}
133-
className="2xl:w-50 line-clamp-2 w-32 overflow-hidden whitespace-nowrap font-medium text-neutral-300 sm:flex sm:w-[20%] 2xl:w-56"
133+
className="2xl:w-50 mr-4 line-clamp-2 w-32 overflow-hidden whitespace-nowrap font-medium text-neutral-300 sm:flex sm:w-[20%] 2xl:w-56"
134134
>
135135
{artistIds?.map((id, i) => (
136136
<div
@@ -145,7 +145,7 @@ export default function Song(track: TrackDetails) {
145145
<p className="hidden text-xs font-normal text-white sm:block">
146146
{secondsToHMS(Number(track?.duration))}
147147
</p>
148-
<div className="mx-1 flex w-[60px] items-center justify-between xl:ml-3">
148+
<div className="mx-1 ml-3 flex w-[55px] items-center justify-between xl:ml-6">
149149
{favorites.songs?.some((song) => song.id === track?.id) ? (
150150
<button
151151
style={{

0 commit comments

Comments
 (0)