84 lines
2.9 KiB
JavaScript
84 lines
2.9 KiB
JavaScript
import {Component} from "react";
|
|
|
|
import styles from '../../styles/songInfo.module.css';
|
|
|
|
export default class SongInfo extends Component {
|
|
|
|
constructor(params) {
|
|
super(params);
|
|
this.state = {
|
|
diffColor: undefined
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
const data = this.props.data.songData.status.beatmap;
|
|
this.formatDiff(data.difficulty);
|
|
}
|
|
|
|
/**
|
|
* Update the difficulity color from the given difficulity
|
|
*
|
|
* @param {string} diff
|
|
*/
|
|
formatDiff(diff) {
|
|
if (diff === "Expert+") {
|
|
this.setState({ diffColor: "#8f48db" });
|
|
}
|
|
if (diff === "Expert") {
|
|
this.setState({ diffColor: "#bf2a42" });
|
|
}
|
|
if (diff === "Hard") {
|
|
this.setState({ diffColor: "tomato" });
|
|
}
|
|
if (diff === "Normal") {
|
|
this.setState({ diffColor: "#59b0f4" });
|
|
}
|
|
if (diff === "Easy") {
|
|
this.setState({ diffColor: "MediumSeaGreen" });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Format the given ms
|
|
*
|
|
* @param {Number} millis
|
|
* @returns The formatted time
|
|
*/
|
|
msToMinSeconds(millis) {
|
|
const minutes = Math.floor(millis / 60000);
|
|
const seconds = Number(((millis % 60000) / 1000).toFixed(0));
|
|
return seconds === 60 ? minutes + 1 + ":00" : minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
|
|
}
|
|
|
|
render() {
|
|
const data = this.props.data.songData.status.beatmap;
|
|
const beatSaverData = this.props.data.beatSaverData.data;
|
|
const songArt = beatSaverData.songArt;
|
|
const bsr = beatSaverData.bsr;
|
|
const {
|
|
songName,
|
|
songAuthorName,
|
|
difficulty
|
|
} = data
|
|
// what in the fuck is this?? LMFAO
|
|
const songTimerPercentage = ((this.props.data.currentSongTime / 1000) / (data.length / 1000)) * 100000;
|
|
|
|
return <div className={styles.songInfoContainer}>
|
|
<img src={songArt}/>
|
|
<div className={styles.songInfo}>
|
|
<p className={styles.songInfoSongName}>{songName.length > 35 ? songName.substring(0, 35) + "..." : songName}</p>
|
|
<p className={styles.songInfoSongAuthor}>{songAuthorName}</p>
|
|
<div className={styles.songInfoSongOtherContainer}>
|
|
<p className={styles.songInfoDiff} style={{ backgroundColor: this.state.diffColor }}>{difficulty}</p>
|
|
<p className={styles.songInfoBsr}>!bsr {bsr}</p>
|
|
</div>
|
|
<p className={styles.songTimeText}>{this.msToMinSeconds(this.props.data.currentSongTime * 1000)}/{this.msToMinSeconds(data.length)}</p>
|
|
<div className={styles.songTimeContainer}>
|
|
<div className={styles.songTimeBackground}/>
|
|
<div className={styles.songTime} style={{ width: songTimerPercentage + '%' }}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
} |