Add Emoji support for activity status.

Nerimity · Dec 14, 2024 · 4df91b8 · 4df91b8
1 parent dd71b53
commit 4df91b8
Show file tree

Hide file tree

Showing 12 changed files with 288 additions and 106 deletions.
diff --git a/src/chat-api/RawData.ts b/src/chat-api/RawData.ts
@@ -282,6 +282,7 @@ export interface ActivityStatus {
   title?: string;
   subtitle?: string;
   link?: string;
+  emoji?: string;
 }
 export interface RawPresence {
   userId: string;

diff --git a/src/chat-api/events/connectionEvents.ts b/src/chat-api/events/connectionEvents.ts
@@ -7,7 +7,7 @@ import useStore from "../store/useStore";
 import { AuthenticatedPayload } from "./connectionEventTypes";
 import useVoiceUsers from "../store/useVoiceUsers";
 import { StorageKeys, getStorageObject } from "@/common/localStorage";
-import { ProgramWithAction, electronWindowAPI } from "@/common/Electron";
+import { ProgramWithExtras, electronWindowAPI } from "@/common/Electron";
 import { emitActivityStatus } from "../emits/userEmits";
 import { isExperimentEnabled, useExperiment } from "@/common/experiments";
 import { localRPC } from "@/common/LocalRPC";
@@ -61,7 +61,7 @@ electronWindowAPI()?.activityStatusChanged((window) => {
   if (!window) {
     return emitActivityStatus(null);
   }
-  const programs = getStorageObject<ProgramWithAction[]>(
+  const programs = getStorageObject<ProgramWithExtras[]>(
     StorageKeys.PROGRAM_ACTIVITY_STATUS,
     []
   );
@@ -77,12 +77,13 @@ electronWindowAPI()?.activityStatusChanged((window) => {
     action: program.action || "Playing",
     name: program.name,
     startedAt: window.createdAt,
+    emoji: program.emoji,
   });
 });
 
 electronWindowAPI()?.rpcChanged((data) => {
   if (!data) {
-    const programs = getStorageObject<ProgramWithAction[]>(
+    const programs = getStorageObject<ProgramWithExtras[]>(
       StorageKeys.PROGRAM_ACTIVITY_STATUS,
       []
     );
@@ -218,7 +219,7 @@ export const onAuthenticated = (payload: AuthenticatedPayload) => {
   const t1 = performance.now();
   console.log(`${t1 - t0} milliseconds.`);
 
-  const programs = getStorageObject<ProgramWithAction[]>(
+  const programs = getStorageObject<ProgramWithExtras[]>(
     StorageKeys.PROGRAM_ACTIVITY_STATUS,
     []
   );

diff --git a/src/chat-api/events/userEvents.ts b/src/chat-api/events/userEvents.ts
@@ -16,7 +16,7 @@ import {
 import useFriends from "../store/useFriends";
 import useAccount from "../store/useAccount";
 import { StorageKeys, getStorageObject } from "@/common/localStorage";
-import { ProgramWithAction, electronWindowAPI } from "@/common/Electron";
+import { ProgramWithExtras, electronWindowAPI } from "@/common/Electron";
 import { isExperimentEnabled } from "@/common/experiments";
 import { userInfo } from "os";
 
@@ -34,7 +34,7 @@ export function onUserPresenceUpdate(payload: {
     const wasOffline =
       !user?.presence()?.status && payload.status !== UserStatus.OFFLINE;
     if (wasOffline) {
-      const programs = getStorageObject<ProgramWithAction[]>(
+      const programs = getStorageObject<ProgramWithExtras[]>(
         StorageKeys.PROGRAM_ACTIVITY_STATUS,
         []
       );

diff --git a/src/common/Electron.ts b/src/common/Electron.ts
@@ -10,8 +10,9 @@ export interface Program {
   name: string;
   filename: string;
 }
-export type ProgramWithAction = Program & {
+export type ProgramWithExtras = Program & {
   action: string;
+  emoji?: string;
 };
 
 export interface RPC {

diff --git a/src/common/emojiToUrl.ts b/src/common/emojiToUrl.ts
@@ -0,0 +1,15 @@
+import { unicodeToTwemojiUrl } from "@/emoji";
+import env from "./env";
+
+export const emojiToUrl = (emoji: string, hovered: boolean, size = 36) => {
+  if (emoji.includes(".")) {
+    const url = new URL(
+      `${env.NERIMITY_CDN}emojis/${emoji}${
+        !hovered && emoji?.endsWith(".gif") ? "?type=webp" : ""
+      }`
+    );
+    url.searchParams.set("size", size.toString());
+    return url.href;
+  }
+  return unicodeToTwemojiUrl(emoji);
+};
diff --git a/src/components/DashboardPane.tsx b/src/components/DashboardPane.tsx
@@ -14,6 +14,7 @@ import RouterEndpoints from "@/common/RouterEndpoints";
 import { A, useNavigate, useSearchParams } from "solid-navigator";
 import {
   createEffect,
+  createMemo,
   createSignal,
   For,
   JSXElement,
@@ -41,6 +42,7 @@ import { MetaTitle } from "@/common/MetaTitle";
 import { MentionUser } from "./markup/MentionUser";
 import { useCustomScrollbar } from "./custom-scrollbar/CustomScrollbar";
 import { Item } from "./ui/Item";
+import { emojiToUrl } from "@/common/emojiToUrl";
 const DashboardPaneContainer = styled(FlexColumn)`
   justify-content: center;
   align-items: center;
@@ -586,12 +588,15 @@ const PresenceItem = (props: { presence: Presence }) => {
     return store.users.get(props.presence.userId);
   };
 
-  const imgSrc = () => {
+  const imgSrc = createMemo(() => {
+    if (activity()?.emoji) {
+      return emojiToUrl(activity()?.emoji!, false);
+    }
     if (!activity()?.imgSrc) return;
     return `${env.NERIMITY_CDN}proxy/${encodeURIComponent(
       activity()?.imgSrc!
     )}/a`;
-  };
+  });
 
   return (
     <PresenceItemContainer

diff --git a/src/components/floating-profile/FloatingProfile.tsx b/src/components/floating-profile/FloatingProfile.tsx
@@ -54,6 +54,7 @@ import average from "@/common/chromaJS";
 import Button from "../ui/Button";
 import { FlexRow } from "../ui/Flexbox";
 import { emitDrawerGoToMain } from "@/common/GlobalEvents";
+import { emojiToUrl } from "@/common/emojiToUrl";
 
 interface Props {
   dmPane?: boolean;
@@ -373,7 +374,9 @@ const DesktopProfileFlyout = (props: {
                     isMe() ||
                     (!details()?.hideFollowers && !details()?.hideFollowing)
                   }
-                >{` | `}</Show>
+                >
+                  {" | "}
+                </Show>
                 <Show when={isMe() || !details()?.hideFollowers}>
                   <CustomLink
                     href={RouterEndpoints.PROFILE(user()!.id + "/followers")}
@@ -671,12 +674,15 @@ export const UserActivity = (props: {
     })
   );
 
-  const imgSrc = () => {
+  const imgSrc = createMemo(() => {
+    if (activity()?.emoji) {
+      return emojiToUrl(activity()?.emoji!, false);
+    }
     if (!activity()?.imgSrc) return;
     return `${env.NERIMITY_CDN}proxy/${encodeURIComponent(
       activity()?.imgSrc!
     )}/a`;
-  };
+  });
 
   return (
     <Show when={activity()}>
@@ -695,15 +701,15 @@ export const UserActivity = (props: {
               {activity()?.name}
             </Text>
           </div>
-          <Show when={activity()?.imgSrc}>
+          <Show when={activity()?.imgSrc || activity()?.emoji}>
             <div class={styles.richPresence}>
               <Show when={imgSrc()}>
                 <div
                   class={styles.backgroundImage}
                   style={{
                     "background-image": `url(${imgSrc()})`,
                   }}
-                ></div>
+                />
               </Show>
               <img
                 src={imgSrc()}
@@ -720,7 +726,7 @@ export const UserActivity = (props: {
                   size={13}
                   opacity={0.9}
                 >
-                  {activity()?.title}
+                  {activity()?.title || activity()?.name}
                 </Text>
                 <Text size={13} opacity={0.6}>
                   {activity()?.subtitle}
@@ -742,7 +748,7 @@ export const UserActivity = (props: {
               </div>
             </div>
           </Show>
-          <Show when={!activity()?.imgSrc}>
+          <Show when={!activity()?.imgSrc && !activity()?.emoji}>
             <Text class={styles.playedFor} size={13}>
               For {playedFor()}
             </Text>

diff --git a/src/components/profile-pane/ProfilePane.tsx b/src/components/profile-pane/ProfilePane.tsx
@@ -65,6 +65,7 @@ import { CreateTicketModal } from "../CreateTicketModal";
 import { MetaTitle } from "@/common/MetaTitle";
 import average from "@/common/chromaJS";
 import { useCustomScrollbar } from "../custom-scrollbar/CustomScrollbar";
+import { emojiToUrl } from "@/common/emojiToUrl";
 
 const ActionButtonsContainer = styled(FlexRow)`
   align-self: center;
@@ -717,12 +718,15 @@ const UserActivity = (props: {
   const isLiveStream = () =>
     !!activity()?.action.startsWith("Watching") && !activity()?.endsAt;
 
-  const imgSrc = () => {
+  const imgSrc = createMemo(() => {
+    if (activity()?.emoji) {
+      return emojiToUrl(activity()?.emoji!, false);
+    }
     if (!activity()?.imgSrc) return;
     return `${env.NERIMITY_CDN}proxy/${encodeURIComponent(
       activity()?.imgSrc!
     )}/a`;
-  };
+  });
 
   createEffect(
     on(activity, () => {
@@ -769,7 +773,7 @@ const UserActivity = (props: {
           </span>
         </FlexRow>
 
-        <Show when={activity()?.imgSrc}>
+        <Show when={activity()?.imgSrc || activity()?.emoji}>
           <div class={styles.richPresence}>
             <Show when={imgSrc()}>
               <div
@@ -794,7 +798,7 @@ const UserActivity = (props: {
                 isDangerousLink
                 newTab
               >
-                {activity()?.title}
+                {activity()?.title || activity()?.name}
               </Text>
 
               <Text size={13} opacity={0.6}>
@@ -818,7 +822,7 @@ const UserActivity = (props: {
           </div>
         </Show>
 
-        <Show when={!activity()?.imgSrc}>
+        <Show when={!activity()?.imgSrc && !activity()?.emoji}>
           <Text
             class={styles.playedFor}
             style={{