Fixes: Discord Presence not rendering properly
This commit is contained in:
parent
9d8f437039
commit
f4c34966bc
GPG Key ID:
F5671FD7BCB9917A
|
|
@ -2,7 +2,6 @@ import { LanguagesKnownCategory, description1, description2 } from "config";
|
|||
import { AboutStyle } from "./about.style";
|
||||
|
||||
function about() {
|
||||
// console.log(LanguagesKnown);
|
||||
return (
|
||||
<AboutStyle>
|
||||
<div className="default">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ 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>; */
|
||||
|
||||
|
|
@ -11,10 +12,11 @@ const customStatus = [
|
|||
"Sleeping",
|
||||
"Studying",
|
||||
];
|
||||
const statusPicker = () => {
|
||||
return customStatus[Math.floor(Math.random() * customStatus.length)];
|
||||
};
|
||||
|
||||
export default function DiscordActivity() {
|
||||
const statusPicker = () => {
|
||||
return customStatus[Math.floor(Math.random() * customStatus.length)];
|
||||
};
|
||||
const { loading, status } = useLanyard({
|
||||
userId: discord_id,
|
||||
socket: true,
|
||||
|
|
@ -37,9 +39,16 @@ export default function DiscordActivity() {
|
|||
seconds
|
||||
)} elapsed`;
|
||||
};
|
||||
const baseURL = "https://cdn.discordapp.com/app-assets/";
|
||||
|
||||
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) {
|
||||
|
|
@ -47,257 +56,44 @@ export default function DiscordActivity() {
|
|||
let timeElapsed = convertMsToHM(
|
||||
currentTs - new Date(status?.activities[1]?.timestamps.start)
|
||||
);
|
||||
// console.log(timeElapsed);
|
||||
setTime(timeElapsed);
|
||||
}
|
||||
// console.log("Intervcal");
|
||||
}, 1000);
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [currentTs, loading]);
|
||||
|
||||
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) {
|
||||
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")
|
||||
!loading && parsedStatus
|
||||
) {
|
||||
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"
|
||||
}
|
||||
/>
|
||||
<img src={parsedStatus.activity.assets.large_image} />
|
||||
</div>
|
||||
<div className="discord-small-icon">
|
||||
<img src={"/images/" + status.discord_status + ".png"} alt="" />
|
||||
<img src={parsedStatus.activity.assets.small_image} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="discord-messageBox">
|
||||
<div className="discord-message-application">
|
||||
<b>
|
||||
{status?.discord_user.username +
|
||||
"#" +
|
||||
status?.discord_user.discriminator}
|
||||
</b>
|
||||
<b>{parsedStatus.discord.username + "#" + parsedStatus.discord.discriminator}</b>
|
||||
</div>
|
||||
<div className="discord-message-activity">
|
||||
<b>is Online</b>
|
||||
</div>
|
||||
<div className="discord-message-files">
|
||||
<b>{status?.activities[0]?.state}</b>
|
||||
<b>{parsedStatus.activity.details}</b>
|
||||
</div>
|
||||
<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>
|
||||
</DicordActivityStyle>
|
||||
);
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
let restData = {
|
||||
username: "Bravo68-DF_Techs",
|
||||
public_flags: 64,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
import React from "react";
|
||||
import FooterStyle from "./footer.style";
|
||||
import { name } from "config";
|
||||
import Status from "./status";
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,17 @@ export default styled.div`
|
|||
background: var(--color1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
.main-footer {
|
||||
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";
|
||||
|
||||
function SkillCard({ title, children, image, bannerImage, url }) {
|
||||
// console.log(image);
|
||||
return (
|
||||
<SkillCardStyle>
|
||||
<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(() => {
|
||||
requestAPIS();
|
||||
}, [loading, APISDK]);
|
||||
}, [loading]);
|
||||
let image = skills?.logo?.masto;
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
@ -34,8 +34,6 @@ function Toots () {
|
|||
</SkillsStyle>
|
||||
);
|
||||
} else {
|
||||
|
||||
console.log(skills.data);
|
||||
return (
|
||||
<>
|
||||
<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