move all colors to :root, add activity small image and hover text, add support for streaming indicator, #2

This commit is contained in:
creations 2025-04-07 18:58:54 -04:00
parent d91e832eab
commit 66744ddd10
Signed by: creations
GPG key ID: 8F553AA4320FC711
5 changed files with 205 additions and 67 deletions

View file

@ -31,10 +31,18 @@ async function handler(request: ExtendedRequest): Promise<Response> {
const presence: LanyardData = data.data;
const readme: string | Promise<string> | null = await handleReadMe(presence);
let status: string;
if (presence.activities.some((activity) => activity.type === 1)) {
status = "streaming";
} else {
status = presence.discord_status;
}
const ejsTemplateData: EjsTemplateData = {
title: `${presence.discord_user.username || "Unknown"}`,
username: presence.discord_user.username,
status: presence.discord_status,
title: presence.discord_user.global_name || presence.discord_user.username,
username:
presence.discord_user.global_name || presence.discord_user.username,
status: status,
activities: presence.activities,
user: presence.discord_user,
platform: {

View file

@ -30,11 +30,18 @@ async function handler(): Promise<Response> {
const presence: LanyardData = data.data;
const readme: string | Promise<string> | null = await handleReadMe(presence);
let status: string;
if (presence.activities.some((activity) => activity.type === 1)) {
status = "streaming";
} else {
status = presence.discord_status;
}
const ejsTemplateData: EjsTemplateData = {
title: presence.discord_user.global_name || presence.discord_user.username,
username:
presence.discord_user.global_name || presence.discord_user.username,
status: presence.discord_status,
status: status,
activities: presence.activities,
user: presence.discord_user,
platform: {

View file

@ -76,20 +76,32 @@
const total = (start && end) ? end - start : null;
const progress = (total && elapsed > 0) ? Math.min(100, Math.floor((elapsed / total) * 100)) : null;
const img = activity.assets?.large_image;
let art = null;
let smallArt = null;
if (img?.startsWith("mp:external/")) {
art = `https://media.discordapp.net/external/${img.slice("mp:external/".length)}`;
} else if (img?.includes("/https/")) {
const clean = img.split("/https/")[1];
if (clean) art = `https://${clean}`;
} else if (img?.startsWith("spotify:")) {
art = `https://i.scdn.co/image/${img.split(":")[1]}`;
} else if (img) {
art = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`;
function resolveActivityImage(img, applicationId) {
if (!img) return null;
if (img.startsWith("mp:external/")) {
return `https://media.discordapp.net/external/${img.slice("mp:external/".length)}`;
}
if (img.includes("/https/")) {
const clean = img.split("/https/")[1];
return clean ? `https://${clean}` : null;
}
if (img.startsWith("spotify:")) {
return `https://i.scdn.co/image/${img.split(":")[1]}`;
}
return `https://cdn.discordapp.com/app-assets/${applicationId}/${img}.png`;
}
if (activity.assets) {
art = resolveActivityImage(activity.assets.large_image, activity.application_id);
smallArt = resolveActivityImage(activity.assets.small_image, activity.application_id);
}
const activityTypeMap = {
0: "Playing",
@ -124,7 +136,12 @@
<div class="activity-wrapper-inner">
<% if (art) { %>
<img class="activity-art" src="<%= art %>" alt="Art">
<div class="activity-image-wrapper">
<img class="activity-image" src="<%= art %>" alt="Art" <% activity.assets?.large_text ? `title="${activity.assets.large_text}"` : '' %>>
<% if (smallArt) { %>
<img class="activity-image-small" src="<%= smallArt %>" alt="Small Art" <% activity.assets?.small_text ? `title="${activity.assets.small_text}"` : '' %>>
<% } %>
</div>
<% } %>
<div class="activity-content">