extra.txt

          {/* <div className="col-lg-12 pt-1 d-flex justify-content-between">
            <div className="col-lg-10 float-start">
              <h5 className="audio-title">{he.decode(audioTitle)}</h5>
              <h6 className="audio-src">{he.decode(channelName)}</h6>
            </div>
            <div className="col-lg-2">
              <button onClick={handlePlayPause} className="btn-play float-end">
                {isPlaying ? (
                  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" className="bi bi-pause" viewBox="0 0 16 16">
                    <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5" />
                  </svg>
                ) : (
                  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" className="bi bi-play-fill" viewBox="0 0 16 16">
                    <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393" />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>
        <div className="col-lg-12 col-md-6">
          <div className="player-slide">
            <p>{formatTime(currentTime)}</p>
            <input
              type="range"
              className="form-range"
              min="0"
              max={duration}
              value={currentTime}
              onChange={(e) => {
                const newTime = e.target.value;
                setCurrentTime(newTime);
                playerRef.current && playerRef.current.seekTo(newTime);
              }}
            />
            <p>{formatTime(duration)}</p>
          </div>
          <div id="ytplayer" className="d-none"></div> */}

// const response = await fetch(`https://synapse-backend.vercel.app/random-videos?category=${category}`);
// const response = await fetch('https://synapse-backend.vercel.app/search', {