Merge pull request #21 from LeonardSSH/feat/state-timestamp-party

Implement state, timestamp and party

pages/api/[...id].ts

@@ -12,6 +12,7 @@ type Parameters = {
     theme?: string;
     bg?: string;
     hideStatus?: string;
+    hideTimestamp?: string;
     hideDiscrim?: string;
     borderRadius?: string;
     animated?: string;

src/renderCard.tsx

@@ -13,9 +13,33 @@ type Parameters = {
     animated?: string;
     hideDiscrim?: string;
     hideStatus?: string;
+    hideTimestamp?: string;
     borderRadius?: string;
 };
 
+const elapsedTime = (timestamp: any) => {
+    let startTime = timestamp;
+    let endTime = Number(new Date());
+    let difference = (endTime - startTime) / 1000;
+
+    // we only calculate them, but we don't display them.
+    // this fixes a bug in the Discord API that does not send the correct timestamp to presence.
+    let daysDifference = Math.floor(difference / 60 / 60 / 24);
+    difference -= daysDifference * 60 * 60 * 24;
+
+    let hoursDifference = Math.floor(difference / 60 / 60);
+    difference -= hoursDifference * 60 * 60;
+
+    let minutesDifference = Math.floor(difference / 60);
+    difference -= minutesDifference * 60;
+
+    let secondsDifference = Math.floor(difference);
+
+    return `${hoursDifference >= 1 ? ("0" + hoursDifference).slice(-2) + ":" : ""}${("0" + minutesDifference).slice(
+        -2
+    )}:${("0" + secondsDifference).slice(-2)}`;
+};
+
 const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => {
     let avatarBorderColor: string = "#747F8D",
         userStatus: string = "",
@@ -26,17 +50,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
         theme = "dark",
         discrim = "show",
         hideStatus = "false",
+        hideTimestamp = "false",
         borderRadius = "10px";
 
     if (body.data.activities[0]?.emoji?.animated) statusExtension = "gif";
     if (body.data.discord_user.avatar && body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
-    if (
-        body.data.activities.length > 0 &&
-        body.data.activities[Object.keys(body.data.activities).length - 1].type === 0
-    )
-        activity = body.data.activities[Object.keys(body.data.activities).length - 1];
     if (params.animated === "false") avatarExtension = "webp";
     if (params.hideStatus === "true") hideStatus = "true";
+    if (params.hideTimestamp === "true") hideTimestamp = "true";
     if (params.hideDiscrim === "true") discrim = "hide";
     if (params.theme === "light") {
         backgroundColor = "#eee";
@@ -48,7 +69,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     let avatar: String;
     if (body.data.discord_user.avatar) {
         avatar = await encodeBase64(
-            `https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=${avatarExtension === "gif" ? "128" : "256"}`
+            `https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${
+                body.data.discord_user.avatar
+            }.${avatarExtension}?size=${avatarExtension === "gif" ? "128" : "256"}`
         );
     } else {
         let lastDigit = Number(body.data.discord_user.discriminator.substr(-1));
@@ -94,6 +117,15 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     if (body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4)
         userStatus = body.data.activities[0].state;
 
+    if (body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4)
+        userStatus = body.data.activities[0].state;
+
+    // filter only type 0
+    const activities = body.data.activities.filter(activity => activity.type === 0);
+
+    // take the highest one
+    activity = Array.isArray(activities) ? activities[0] : activities;
+
     return `
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="218px">
                 <foreignObject x="0" y="0" width="410" height="218">
@@ -276,13 +308,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                 </div>
                                 <div style="
                                     color: #999;
-                                    margin-top: -3px;
+                                    margin-top: ${
+                                        activity.timestamps && activity.timestamps.start && hideTimestamp !== "true"
+                                            ? "-6px"
+                                            : "5px"
+                                    };
                                     line-height: 1;
                                     width: 279px;
                                 ">
-                                    <p style="font-size: 0.75rem; font-weight: bold; color: ${
-                                        theme === "dark" ? "#7289DA" : "#334da6"
-                                    }; margin-bottom: 15px;">PLAYING A GAME...</p> 
                                     <p style="
                                         color: ${theme === "dark" ? "#fff" : "#000"};
                                         font-size: 0.85rem;
@@ -307,6 +340,38 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         ">${activity.details}</p>`
                                             : ``
                                     }
+                                    ${
+                                        activity.state
+                                            ? `
+                                        <p style="
+                                            color: ${theme === "dark" ? "#ccc" : "#777"};
+                                            overflow: hidden;
+                                            white-space: nowrap;
+                                            font-size: 0.85rem;
+                                            text-overflow: ellipsis;
+                                            height: 15px;
+                                            margin: 7px 0;
+                                        ">${activity.state}${
+                                                  activity.party && activity.party.size
+                                                      ? ` (${activity.party.size[0]} of ${activity.party.size[1]})`
+                                                      : ""
+                                              }</p>`
+                                            : ``
+                                    }
+                                    ${
+                                        activity.timestamps && activity.timestamps.start && hideTimestamp !== "true"
+                                            ? `
+                                        <p style="
+                                            color: ${theme === "dark" ? "#ccc" : "#777"};
+                                            overflow: hidden;
+                                            white-space: nowrap;
+                                            font-size: 0.85rem;
+                                            text-overflow: ellipsis;
+                                            height: 15px;
+                                            margin: 7px 0;
+                                        ">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>`
+                                            : ``
+                                    }
                                 </div>
                             </div>
                             `