Fixes: Discord Presence not rendering properly
This commit is contained in:
parent
9d8f437039
commit
f4c34966bc
|
@ -2,7 +2,6 @@ import { LanguagesKnownCategory, description1, description2 } from "config";
|
||||||
import { AboutStyle } from "./about.style";
|
import { AboutStyle } from "./about.style";
|
||||||
|
|
||||||
function about() {
|
function about() {
|
||||||
// console.log(LanguagesKnown);
|
|
||||||
return (
|
return (
|
||||||
<AboutStyle>
|
<AboutStyle>
|
||||||
<div className="default">
|
<div className="default">
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
|
||||||
import { DicordActivityStyle } from "./discord-activity.style";
|
import { DicordActivityStyle } from "./discord-activity.style";
|
||||||
import { useLanyard } from "react-use-lanyard";
|
import { useLanyard } from "react-use-lanyard";
|
||||||
import { discord_id } from "config";
|
import { discord_id } from "config";
|
||||||
|
import DiscordParser from "../libs/discord-parser"
|
||||||
|
|
||||||
/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
|
/* <pre>{!loading && JSON.stringify(status, null, 4)}</pre>; */
|
||||||
|
|
||||||
|
@ -11,10 +12,11 @@ const customStatus = [
|
||||||
"Sleeping",
|
"Sleeping",
|
||||||
"Studying",
|
"Studying",
|
||||||
];
|
];
|
||||||
const statusPicker = () => {
|
|
||||||
return customStatus[Math.floor(Math.random() * customStatus.length)];
|
|
||||||
};
|
|
||||||
export default function DiscordActivity() {
|
export default function DiscordActivity() {
|
||||||
|
const statusPicker = () => {
|
||||||
|
return customStatus[Math.floor(Math.random() * customStatus.length)];
|
||||||
|
};
|
||||||
const { loading, status } = useLanyard({
|
const { loading, status } = useLanyard({
|
||||||
userId: discord_id,
|
userId: discord_id,
|
||||||
socket: true,
|
socket: true,
|
||||||
|
@ -37,9 +39,16 @@ export default function DiscordActivity() {
|
||||||
seconds
|
seconds
|
||||||
)} elapsed`;
|
)} elapsed`;
|
||||||
};
|
};
|
||||||
const baseURL = "https://cdn.discordapp.com/app-assets/";
|
|
||||||
|
|
||||||
const [currentTs, setCurrentTs] = useState(Date.now());
|
const [currentTs, setCurrentTs] = useState(Date.now());
|
||||||
|
const [parsedStatus, setParsedStatus] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if(!loading){
|
||||||
|
setParsedStatus(DiscordParser(status));
|
||||||
|
}
|
||||||
|
}, [status, loading])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let interval = setInterval(() => {
|
let interval = setInterval(() => {
|
||||||
if (!loading) {
|
if (!loading) {
|
||||||
|
@ -47,257 +56,44 @@ export default function DiscordActivity() {
|
||||||
let timeElapsed = convertMsToHM(
|
let timeElapsed = convertMsToHM(
|
||||||
currentTs - new Date(status?.activities[1]?.timestamps.start)
|
currentTs - new Date(status?.activities[1]?.timestamps.start)
|
||||||
);
|
);
|
||||||
// console.log(timeElapsed);
|
|
||||||
setTime(timeElapsed);
|
setTime(timeElapsed);
|
||||||
}
|
}
|
||||||
// console.log("Intervcal");
|
|
||||||
}, 1000);
|
}, 1000);
|
||||||
return () => {
|
return () => {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
};
|
};
|
||||||
}, [currentTs, loading]);
|
}, [currentTs, loading]);
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!loading &&
|
!loading && parsedStatus
|
||||||
(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) {
|
|
||||||
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 {status?.discord_status}</b>
|
|
||||||
</div>
|
|
||||||
<div className="discord-message-files">
|
|
||||||
{status?.activities[0].state}
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
</DicordActivityStyle>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DicordActivityStyle>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// else if (status.activities[0]) {
|
|
||||||
// return (
|
|
||||||
// <DicordActivityStyle>
|
|
||||||
// {!loading && (
|
|
||||||
// <>
|
|
||||||
// <div className="discord-icons">
|
|
||||||
// <div className="discord-large-icon">
|
|
||||||
// {status.activities[0] && (
|
|
||||||
// <img
|
|
||||||
// src={
|
|
||||||
// baseURL +
|
|
||||||
// status.activities[0].application_id +
|
|
||||||
// "/" +
|
|
||||||
// status.activities[0].assets.large_image +
|
|
||||||
// ".png"
|
|
||||||
// }
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// <div className="discord-small-icon">
|
|
||||||
// {status.activities[0] && (
|
|
||||||
// <img
|
|
||||||
// src={
|
|
||||||
// baseURL +
|
|
||||||
// status.activities[0].application_id +
|
|
||||||
// "/" +
|
|
||||||
// status.activities[0].assets.small_image +
|
|
||||||
// ".png"
|
|
||||||
// }
|
|
||||||
// />
|
|
||||||
// )}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// <div className="discord-messageBox">
|
|
||||||
// <div className="discord-message-application">
|
|
||||||
// <b>{status.activities[0].name}</b>
|
|
||||||
// </div>
|
|
||||||
// <div className="discord-message-activity">
|
|
||||||
// {status.activities[0].details}
|
|
||||||
// </div>
|
|
||||||
// <div className="discord-message-files">
|
|
||||||
// {status.activities[0].state
|
|
||||||
// ? status.activities[0].state
|
|
||||||
// : null}
|
|
||||||
// </div>
|
|
||||||
// <br />
|
|
||||||
// <div className="time-elapsed">
|
|
||||||
// {status?.activities[0]?.timestamps?.start && time}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </>
|
|
||||||
// )}
|
|
||||||
// </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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DicordActivityStyle>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (
|
|
||||||
!loading &&
|
|
||||||
status.activities.length === 0 &&
|
|
||||||
(status.discord_status === "online" ||
|
|
||||||
status.discord_status === "idle" ||
|
|
||||||
status.discord_status === "dnd")
|
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<DicordActivityStyle>
|
<DicordActivityStyle>
|
||||||
<div className="discord-icons">
|
<div className="discord-icons">
|
||||||
<div className="discord-large-icon">
|
<div className="discord-large-icon">
|
||||||
<img
|
<img src={parsedStatus.activity.assets.large_image} />
|
||||||
src={
|
|
||||||
"https://cdn.discordapp.com/avatars/" +
|
|
||||||
status.discord_user.id +
|
|
||||||
"/" +
|
|
||||||
status.discord_user.avatar +
|
|
||||||
".png"
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-small-icon">
|
<div className="discord-small-icon">
|
||||||
<img src={"/images/" + status.discord_status + ".png"} alt="" />
|
<img src={parsedStatus.activity.assets.small_image} alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-messageBox">
|
<div className="discord-messageBox">
|
||||||
<div className="discord-message-application">
|
<div className="discord-message-application">
|
||||||
<b>
|
<b>{parsedStatus.discord.username + "#" + parsedStatus.discord.discriminator}</b>
|
||||||
{status?.discord_user.username +
|
|
||||||
"#" +
|
|
||||||
status?.discord_user.discriminator}
|
|
||||||
</b>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="discord-message-activity">
|
<div className="discord-message-activity">
|
||||||
<b>is Online</b>
|
<b>{parsedStatus.activity.details}</b>
|
||||||
</div>
|
|
||||||
<div className="discord-message-files">
|
|
||||||
<b>{status?.activities[0]?.state}</b>
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div className="time-elapsed">{}</div>
|
<div className="discord-message-files">
|
||||||
|
<b>{parsedStatus.activity.state}</b>
|
||||||
|
</div>
|
||||||
|
{/* <div className="time-elapsed">00:00:00 elapsed</div> */}
|
||||||
</div>
|
</div>
|
||||||
</DicordActivityStyle>
|
</DicordActivityStyle>
|
||||||
);
|
);
|
||||||
} else {
|
}
|
||||||
|
else {
|
||||||
let restData = {
|
let restData = {
|
||||||
username: "Bravo68-DF_Techs",
|
username: "Bravo68-DF_Techs",
|
||||||
public_flags: 64,
|
public_flags: 64,
|
||||||
|
|
|
@ -1,9 +1,17 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import FooterStyle from "./footer.style";
|
import FooterStyle from "./footer.style";
|
||||||
import { name } from "config";
|
import { name } from "config";
|
||||||
|
import Status from "./status";
|
||||||
|
|
||||||
function footer() {
|
function footer() {
|
||||||
return <FooterStyle>Build By {name}</FooterStyle>;
|
return <FooterStyle>
|
||||||
|
<div className="main-footer">
|
||||||
|
Build By {name}
|
||||||
|
</div>
|
||||||
|
<div className="api-status">
|
||||||
|
<Status />
|
||||||
|
</div>
|
||||||
|
</FooterStyle>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default footer;
|
export default footer;
|
||||||
|
|
|
@ -9,6 +9,17 @@ export default styled.div`
|
||||||
background: var(--color1);
|
background: var(--color1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
.main-footer {
|
||||||
font-size: 1.2rem;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
.api-status {
|
||||||
|
justify-content: right;
|
||||||
|
align-items: right;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React from "react";
|
||||||
import SkillCardStyle from "./skillCard.styled";
|
import SkillCardStyle from "./skillCard.styled";
|
||||||
|
|
||||||
function SkillCard({ title, children, image, bannerImage, url }) {
|
function SkillCard({ title, children, image, bannerImage, url }) {
|
||||||
// console.log(image);
|
|
||||||
return (
|
return (
|
||||||
<SkillCardStyle>
|
<SkillCardStyle>
|
||||||
<div className="card">
|
<div className="card">
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import axios from "handlers/axios";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
|
import LinearProgress from "@mui/material/LinearProgress";
|
||||||
|
|
||||||
|
export default function Status() {
|
||||||
|
const [status, setStatus] = useState({});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
async function requestStatus() {
|
||||||
|
await axios.get("/health/health").then((res) => {
|
||||||
|
setStatus(res.data);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
requestStatus();
|
||||||
|
}, [loading]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Box sx={{ width: "60%" }}>
|
||||||
|
<LinearProgress />
|
||||||
|
Requesting Live API data...
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{(status.status)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -21,7 +21,7 @@ function Toots () {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
requestAPIS();
|
requestAPIS();
|
||||||
}, [loading, APISDK]);
|
}, [loading]);
|
||||||
let image = skills?.logo?.masto;
|
let image = skills?.logo?.masto;
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
|
@ -34,8 +34,6 @@ function Toots () {
|
||||||
</SkillsStyle>
|
</SkillsStyle>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
console.log(skills.data);
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ArtTitleStyle>
|
<ArtTitleStyle>
|
||||||
|
|
|
@ -0,0 +1,90 @@
|
||||||
|
export default function parse(data) {
|
||||||
|
const output = {};
|
||||||
|
const act = [];
|
||||||
|
|
||||||
|
const PrirorityActivityType = ['Coding', 'Listening to Spotify', 'Playing', 'Custom Status', 'Streaming', 'Watching', 'Competing', 'Unknown'];
|
||||||
|
|
||||||
|
output.discord = {
|
||||||
|
id: data.discord_user.id,
|
||||||
|
username: data.discord_user.username,
|
||||||
|
discriminator: data.discord_user.discriminator,
|
||||||
|
avatar_url: "https://cdn.discordapp.com/avatars/" + data.discord_user.id + "/" + data.discord_user.avatar + ".png",
|
||||||
|
avatar_decoration_url: "https://cdn.discordapp.com/avatar-decoration-presets/" + data.discord_user.avatar_decoration + ".png"
|
||||||
|
}
|
||||||
|
|
||||||
|
output.kv = data.kv;
|
||||||
|
|
||||||
|
if (data.listening_to_spotify) {
|
||||||
|
output.spotify = {
|
||||||
|
album: data.spotify.album,
|
||||||
|
artist: data.spotify.artist,
|
||||||
|
song: data.spotify.song,
|
||||||
|
album_art_url: data.spotify.album_art_url,
|
||||||
|
timestamps: data.spotify.timestamps,
|
||||||
|
track_id: data.spotify.track_id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(const activity of data.activities) {
|
||||||
|
if(activity.name.includes("Visual Studio Code")){
|
||||||
|
act.push({
|
||||||
|
prirority_id: PrirorityActivityType.indexOf('Coding'),
|
||||||
|
...activity
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if(activity.name.includes("Spotify")){
|
||||||
|
act.push({
|
||||||
|
prirority_id: PrirorityActivityType.indexOf('Listening to Spotify'),
|
||||||
|
...activity
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if(activity.name.includes("Custom Status")){
|
||||||
|
act.push({
|
||||||
|
prirority_id: PrirorityActivityType.indexOf('Custom Status'),
|
||||||
|
...activity
|
||||||
|
});
|
||||||
|
output.custom_status = {
|
||||||
|
state: activity.state,
|
||||||
|
emoji: {
|
||||||
|
name: activity.emoji?.name,
|
||||||
|
id: activity.emoji?.id,
|
||||||
|
animated: activity.emoji?.animated,
|
||||||
|
emoji_url: "https://cdn.discordapp.com/emojis/" + activity.emoji?.id + ".webp?size=44&quality=lossless"
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
act.push({
|
||||||
|
prirority_id: PrirorityActivityType.indexOf('Unknown'),
|
||||||
|
...activity
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
act.sort((a, b) => a.prirority_id - b.prirority_id);
|
||||||
|
|
||||||
|
output.activity = act[0];
|
||||||
|
|
||||||
|
if(output.activity.prirority_id == 1){
|
||||||
|
output.activity.assets = {
|
||||||
|
large_image : output.spotify.album_art_url,
|
||||||
|
small_image : "/images/brandlogos/SpotifyLogo.png"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(output.activity.prirority_id == 3){
|
||||||
|
output.activity.assets = {
|
||||||
|
large_image : "/images/anime-profile-pic.png",
|
||||||
|
small_image : output.custom_status.emoji.emoji_url,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
output.activity.assets = {
|
||||||
|
large_image : "https://cdn.discordapp.com/app-assets/"+output.activity.application_id+"/"+output.activity.assets.large_image+".png",
|
||||||
|
small_image : "https://cdn.discordapp.com/app-assets/"+output.activity.application_id+"/"+output.activity.assets.small_image+".png",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return output;
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 8.6 KiB |
Loading…
Reference in New Issue