132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { DicordActivityStyle } from "./discord-activity.style";
|
|
import { useLanyard } from "react-use-lanyard";
|
|
import { discord_id } from "config";
|
|
import DiscordParser from "../libs/discord-parser"
|
|
|
|
/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
|
|
|
|
const customStatus = [
|
|
"Searching for Cat Girls",
|
|
"Watching Anime",
|
|
"Sleeping",
|
|
"Studying",
|
|
];
|
|
|
|
export default function DiscordActivity() {
|
|
const statusPicker = () => {
|
|
return customStatus[Math.floor(Math.random() * customStatus.length)];
|
|
};
|
|
const { loading, status } = useLanyard({
|
|
userId: discord_id,
|
|
socket: true,
|
|
});
|
|
const [time, setTime] = useState("00:00:00 elapsed");
|
|
const [pickedStatus] = useState(statusPicker());
|
|
const padTo2Digits = (num) => {
|
|
return num.toString().padStart(2, "0");
|
|
};
|
|
|
|
const convertMsToHM = (milliseconds) => {
|
|
let seconds = Math.floor(milliseconds / 1000);
|
|
let minutes = Math.floor(seconds / 60);
|
|
let hours = Math.floor(minutes / 60);
|
|
seconds = seconds % 60;
|
|
minutes = seconds >= 30 ? minutes + 1 : minutes;
|
|
minutes = minutes % 60;
|
|
hours = hours % 24;
|
|
return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(
|
|
seconds
|
|
)} elapsed`;
|
|
};
|
|
|
|
const [currentTs, setCurrentTs] = useState(Date.now());
|
|
const [parsedStatus, setParsedStatus] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if(!loading){
|
|
setParsedStatus(DiscordParser(status));
|
|
}
|
|
}, [status, loading])
|
|
|
|
useEffect(() => {
|
|
let interval = setInterval(() => {
|
|
if (!loading) {
|
|
setCurrentTs(Date.now());
|
|
let timeElapsed = convertMsToHM(
|
|
currentTs - new Date(parsedStatus?.activity?.timestamps.start)
|
|
);
|
|
setTime(timeElapsed);
|
|
}
|
|
}, 1000);
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, [currentTs, loading, convertMsToHM, parsedStatus]);
|
|
|
|
if (
|
|
!loading && parsedStatus
|
|
) {
|
|
return (
|
|
<DicordActivityStyle>
|
|
<div className="discord-icons">
|
|
<div className="discord-large-icon">
|
|
<img src={parsedStatus.activity.assets.large_image} />
|
|
</div>
|
|
<div className="discord-small-icon">
|
|
<img src={parsedStatus.activity.assets.small_image} alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="discord-messageBox">
|
|
<div className="discord-message-application">
|
|
<b>{parsedStatus.discord.username + "#" + parsedStatus.discord.discriminator}</b>
|
|
</div>
|
|
<div className="discord-message-activity">
|
|
<b>{parsedStatus.activity.details}</b>
|
|
</div>
|
|
<br />
|
|
<div className="discord-message-files">
|
|
<b>{parsedStatus.activity.state}</b>
|
|
</div>
|
|
<div className="time-elapsed">{time}</div>
|
|
</div>
|
|
</DicordActivityStyle>
|
|
);
|
|
}
|
|
else {
|
|
let restData = {
|
|
username: "Bravo68-DF_Techs",
|
|
public_flags: 64,
|
|
id: "457039372009865226",
|
|
discriminator: "6429",
|
|
avatar: "08a8937664b3b165805965244d6f095f",
|
|
};
|
|
|
|
return (
|
|
<DicordActivityStyle>
|
|
<div className="discord-icons">
|
|
<div className="discord-large-icon">
|
|
<img src={"/images/default_game.jpg"} />
|
|
</div>
|
|
<div className="discord-small-icon">
|
|
<img src={"/images/" + "offline" + ".png"} alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="discord-messageBox">
|
|
<div className="discord-message-application">
|
|
<b>{restData.username + "#" + restData.discriminator}</b>
|
|
</div>
|
|
<div className="discord-message-activity">
|
|
<b>is Offline</b>
|
|
</div>
|
|
<br />
|
|
<div className="discord-message-files">
|
|
<b>{pickedStatus}</b>
|
|
</div>
|
|
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
|
|
</div>
|
|
</DicordActivityStyle>
|
|
);
|
|
}
|
|
}
|