oguz3 / spotify-web-player

A front-end clone project of the Spotify Web Player. The project was created using React. Preview Link in Readme.

Spotify Web Player Clone

A front-end clone project of the Spotify Web Player. The project was created using React. This is my first big React.js project.

Preview Link

• Spotify Web Player Clone

Tech/Framework Used

• React
• CSS

spotify-web-player's Issues

Unresponsive Page after 5 mins!

Hi oguz your react project is insane!❤❤ but there is an issue in mobile browsers which the website becomes unresponsive. How can i fix this problem?

Time conversion optimizations.

Problems with convertTime():

• Using Math.floor() is redundant, so ~~ will convert all values to the closest integer. see
• Doing check with isNaN() is too late after doing calculations.
• Writing minutes without padding is not correct.
• Extra parentheses are not needed for minutes.

Source: https://github.com/oguz3/spotify-web-player/blob/master/src/functions/convertTime.js#L5

// Current function could be updated like this:
function convertTime(time) {
  if (isNaN(time)) {
    return '00:00';
  }

  let minutes = ~~(time % 3600 / 60);
  let seconds = ~~(time % 60);
  
  if (minutes < 10) {
    minutes = `0${minutes}`;
  }
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}

// Or it is possible to rewrite this function optimizing like this:
function convertTime2(time) {
  let ret = [0, 0];

  // Do calculations if have time (also !NaN = true).
  if (time) {
    ret = [
      ~~(time % 3600 / 60), // Minutes.
      ~~(time % 60)         // Seconds.
    ];
  }

  // Add item's paddings converting to string.
  ret = ret.map(re => `${re}`.padStart(2, '0'));

  return ret.join(':');
}

console.log(convertTime(60))  // 01:00
console.log(convertTime2(60)) // 01:00