2022-03-30 22:06:22 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
import { DicordActivityStyle } from "./discord-activity.style";
|
|
|
|
import { useLanyard } from "react-use-lanyard";
|
|
|
|
|
|
|
|
/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
|
2022-03-31 07:50:45 +00:00
|
|
|
var pickedStatus = "";
|
2022-03-30 22:06:22 +00:00
|
|
|
|
|
|
|
export default function DiscordActivity() {
|
2022-03-31 07:50:45 +00:00
|
|
|
const { loading, status /*, websocket */ } = useLanyard({
|
|
|
|
userId: "457039372009865226",
|
|
|
|
socket: true,
|
|
|
|
});
|
2022-03-30 22:06:22 +00:00
|
|
|
const [time, setTime] = useState("00:00:00 elapsed");
|
|
|
|
const padTo2Digits = (num) => {
|
|
|
|
return num.toString().padStart(2, "0");
|
|
|
|
};
|
2022-03-31 07:50:45 +00:00
|
|
|
const customStatus = [
|
|
|
|
"Searching for Cat Girls",
|
|
|
|
"Watching Anime",
|
|
|
|
"Sleeping",
|
|
|
|
"Studying",
|
|
|
|
];
|
|
|
|
const statusPicker = () => {
|
|
|
|
if (pickedStatus === "")
|
|
|
|
pickedStatus =
|
|
|
|
customStatus[Math.floor(Math.random() * customStatus.length)];
|
|
|
|
return pickedStatus;
|
|
|
|
};
|
2022-03-30 22:06:22 +00:00
|
|
|
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 baseURL = "https://cdn.discordapp.com/app-assets/";
|
2022-03-31 07:50:45 +00:00
|
|
|
|
2022-03-30 22:06:22 +00:00
|
|
|
const [currentTs, setCurrentTs] = useState(Date.now());
|
|
|
|
useEffect(() => {
|
|
|
|
let interval = setInterval(() => {
|
|
|
|
if (!loading) {
|
|
|
|
setCurrentTs(Date.now());
|
|
|
|
let timeElapsed = convertMsToHM(
|
2022-03-31 07:50:45 +00:00
|
|
|
currentTs - new Date(status?.activities[1]?.timestamps.start)
|
2022-03-30 22:06:22 +00:00
|
|
|
);
|
2022-03-31 07:50:45 +00:00
|
|
|
// console.log(timeElapsed);
|
2022-03-30 22:06:22 +00:00
|
|
|
setTime(timeElapsed);
|
|
|
|
}
|
2022-03-31 07:50:45 +00:00
|
|
|
// console.log("Intervcal");
|
2022-03-30 22:06:22 +00:00
|
|
|
}, 1000);
|
|
|
|
return () => {
|
|
|
|
clearInterval(interval);
|
|
|
|
};
|
|
|
|
}, [currentTs, loading]);
|
2022-03-31 07:50:45 +00:00
|
|
|
// console.log(status?.discord_status);
|
|
|
|
// console.log(status?.activities.length);
|
|
|
|
if (
|
|
|
|
!loading &&
|
|
|
|
(status.discord_status === "online" ||
|
|
|
|
status.discord_status === "idle" ||
|
|
|
|
status.discord_status === "dnd") &&
|
|
|
|
status.activities.length
|
|
|
|
) {
|
|
|
|
if (status.activities[0].id === "custom" && status.activities.length == 1) {
|
|
|
|
console.log(status.activities.length);
|
|
|
|
return (
|
|
|
|
<DicordActivityStyle>
|
2022-03-30 22:06:22 +00:00
|
|
|
<div className="discord-icons">
|
|
|
|
<div className="discord-large-icon">
|
2022-03-31 07:50:45 +00:00
|
|
|
<img
|
|
|
|
src={
|
|
|
|
"https://cdn.discordapp.com/avatars/" +
|
|
|
|
status.discord_user.id +
|
|
|
|
"/" +
|
|
|
|
status.discord_user.avatar +
|
|
|
|
".png"
|
|
|
|
}
|
|
|
|
/>
|
2022-03-30 22:06:22 +00:00
|
|
|
</div>
|
|
|
|
<div className="discord-small-icon">
|
2022-03-31 07:50:45 +00:00
|
|
|
<img src={"/images/" + status?.discord_status + ".png"} alt="" />
|
2022-03-30 22:06:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="discord-messageBox">
|
|
|
|
<div className="discord-message-application">
|
2022-03-31 07:50:45 +00:00
|
|
|
<b>
|
|
|
|
{status?.discord_user.username +
|
|
|
|
"#" +
|
|
|
|
status?.discord_user.discriminator}
|
|
|
|
</b>
|
2022-03-30 22:06:22 +00:00
|
|
|
</div>
|
|
|
|
<div className="discord-message-activity">
|
2022-03-31 07:50:45 +00:00
|
|
|
<b>is {status?.discord_status}</b>
|
2022-03-30 22:06:22 +00:00
|
|
|
</div>
|
|
|
|
<div className="discord-message-files">
|
2022-03-31 07:50:45 +00:00
|
|
|
{status?.activities[0].state}
|
2022-03-30 22:06:22 +00:00
|
|
|
</div>
|
2022-03-31 07:50:45 +00:00
|
|
|
<br />
|
|
|
|
</div>
|
|
|
|
</DicordActivityStyle>
|
|
|
|
);
|
|
|
|
} else {
|
2022-03-31 18:15:12 +00:00
|
|
|
console.log("Hmmm Recv");
|
|
|
|
if (status.activities[1].name === "Spotify") {
|
|
|
|
return (
|
|
|
|
<DicordActivityStyle>
|
|
|
|
{!loading && (
|
|
|
|
<>
|
|
|
|
<div className="discord-icons">
|
|
|
|
<div className="discord-large-icon">
|
|
|
|
{<img src={status.spotify.album_art_url} />}
|
|
|
|
</div>
|
|
|
|
<div className="discord-small-icon">
|
|
|
|
{
|
|
|
|
<img
|
|
|
|
src={
|
|
|
|
"https://www.freepnglogos.com/uploads/spotify-logo-png/spotify-icon-marilyn-scott-0.png"
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
</div>
|
2022-03-31 07:50:45 +00:00
|
|
|
</div>
|
2022-03-31 18:15:12 +00:00
|
|
|
<div className="discord-messageBox">
|
|
|
|
<div className="discord-message-application">
|
|
|
|
<b>{status.activities[1] && status.activities[1].name}</b>
|
|
|
|
</div>
|
|
|
|
<div className="discord-message-activity">
|
|
|
|
{status.activities[1] && status.activities[1].details}
|
|
|
|
</div>
|
|
|
|
<div className="discord-message-files">
|
|
|
|
{status.activities[1] && status.activities[1].state
|
|
|
|
? status.activities[1].state
|
|
|
|
: null}
|
|
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div className="time-elapsed">
|
|
|
|
{status?.activities[1]?.timestamps?.start && time}
|
|
|
|
</div>
|
2022-03-31 07:50:45 +00:00
|
|
|
</div>
|
2022-03-31 18:15:12 +00:00
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</DicordActivityStyle>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<DicordActivityStyle>
|
|
|
|
{!loading && (
|
|
|
|
<>
|
|
|
|
<div className="discord-icons">
|
|
|
|
<div className="discord-large-icon">
|
|
|
|
{status.activities[1] && (
|
|
|
|
<img
|
|
|
|
src={
|
|
|
|
baseURL +
|
|
|
|
status.activities[1].application_id +
|
|
|
|
"/" +
|
|
|
|
status.activities[1].assets.large_image +
|
|
|
|
".png"
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div className="discord-small-icon">
|
|
|
|
{status.activities[1] && (
|
|
|
|
<img
|
|
|
|
src={
|
|
|
|
baseURL +
|
|
|
|
status.activities[1].application_id +
|
|
|
|
"/" +
|
|
|
|
status.activities[1].assets.small_image +
|
|
|
|
".png"
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-03-31 07:50:45 +00:00
|
|
|
</div>
|
2022-03-31 18:15:12 +00:00
|
|
|
<div className="discord-messageBox">
|
|
|
|
<div className="discord-message-application">
|
|
|
|
<b>{status.activities[1] && status.activities[1].name}</b>
|
|
|
|
</div>
|
|
|
|
<div className="discord-message-activity">
|
|
|
|
{status.activities[1] && status.activities[1].details}
|
|
|
|
</div>
|
|
|
|
<div className="discord-message-files">
|
|
|
|
{status.activities[1] && status.activities[1].state
|
|
|
|
? status.activities[1].state
|
|
|
|
: null}
|
|
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div className="time-elapsed">
|
|
|
|
{status?.activities[1]?.timestamps?.start && time}
|
|
|
|
</div>
|
2022-03-31 07:50:45 +00:00
|
|
|
</div>
|
2022-03-31 18:15:12 +00:00
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</DicordActivityStyle>
|
|
|
|
);
|
|
|
|
}
|
2022-03-31 07:50:45 +00:00
|
|
|
}
|
|
|
|
} else if (
|
|
|
|
!loading &&
|
|
|
|
status.activities.length === 0 &&
|
|
|
|
(status.discord_status === "online" ||
|
|
|
|
status.discord_status === "idle" ||
|
|
|
|
status.discord_status === "dnd")
|
|
|
|
) {
|
|
|
|
return (
|
|
|
|
<DicordActivityStyle>
|
|
|
|
<div className="discord-icons">
|
|
|
|
<div className="discord-large-icon">
|
|
|
|
<img
|
|
|
|
src={
|
|
|
|
"https://cdn.discordapp.com/avatars/" +
|
|
|
|
status.discord_user.id +
|
|
|
|
"/" +
|
|
|
|
status.discord_user.avatar +
|
|
|
|
".png"
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="discord-small-icon">
|
|
|
|
<img src={"/images/" + status.discord_status + ".png"} alt="" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="discord-messageBox">
|
|
|
|
<div className="discord-message-application">
|
|
|
|
<b>
|
|
|
|
{status?.discord_user.username +
|
|
|
|
"#" +
|
|
|
|
status?.discord_user.discriminator}
|
|
|
|
</b>
|
|
|
|
</div>
|
|
|
|
<div className="discord-message-activity">
|
|
|
|
<b>is Online</b>
|
|
|
|
</div>
|
|
|
|
<div className="discord-message-files">
|
|
|
|
<b>{status?.activities[0].state}</b>
|
|
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div className="time-elapsed">{}</div>
|
|
|
|
</div>
|
|
|
|
</DicordActivityStyle>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
// console.log(restData);
|
|
|
|
var restData = {
|
|
|
|
username: "Bravo68-DF_Techs",
|
|
|
|
public_flags: 64,
|
|
|
|
id: "457039372009865226",
|
|
|
|
discriminator: "6429",
|
|
|
|
avatar: "c1ef97afea299d1d70e903870da040f6",
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<DicordActivityStyle>
|
|
|
|
<div className="discord-icons">
|
|
|
|
<div className="discord-large-icon">
|
|
|
|
<img
|
|
|
|
src={
|
|
|
|
"https://cdn.discordapp.com/avatars/" +
|
|
|
|
restData.id +
|
|
|
|
"/" +
|
|
|
|
restData.avatar +
|
|
|
|
".png"
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</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>{statusPicker()}</b>
|
2022-03-30 22:06:22 +00:00
|
|
|
</div>
|
2022-03-31 07:50:45 +00:00
|
|
|
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
|
|
|
|
</div>
|
|
|
|
</DicordActivityStyle>
|
|
|
|
);
|
|
|
|
}
|
2022-03-30 22:06:22 +00:00
|
|
|
}
|