Merge pull request #621 from Nerimity/multi-activity

Multi activity

Author: SupertigerDev

src/chat-api/RawData.ts

@@ -21,13 +21,12 @@ export interface RawServer {
   };
 }
 
-
-export const InventoryItemType ={
+export const InventoryItemType = {
   Badge: "badge"
 } as const;
 export interface RawInventoryItem {
   id: string;
-  itemType: typeof InventoryItemType[keyof typeof InventoryItemType];
+  itemType: (typeof InventoryItemType)[keyof typeof InventoryItemType];
   userId: string;
   itemId: string;
   acquiredAt: number;
@@ -342,7 +341,7 @@ export interface RawPresence {
   userId: string;
   custom?: string;
   status: number;
-  activity?: ActivityStatus;
+  activities?: ActivityStatus[];
 }
 
 export interface RawExploreItem {

src/chat-api/emits/userEmits.ts

@@ -6,6 +6,6 @@ export function dismissChannelNotification(channelId: string) {
   socketClient.socket.emit(ClientEvents.NOTIFICATION_DISMISS, { channelId });
 }
 
-export function emitActivityStatus(activity: ActivityStatus | null) {
-  socketClient.socket.emit(ClientEvents.UPDATE_ACTIVITY, activity);
+export function emitActivityStatus(activities: ActivityStatus[] | null) {
+  socketClient.socket.emit(ClientEvents.UPDATE_ACTIVITY, activities);
 }

src/chat-api/events/connectionEvents.ts

@@ -78,8 +78,9 @@ export const onReconnectAttempt = () => {
 };
 
 electronWindowAPI()?.activityStatusChanged((window) => {
+  const id = "electron-activity";
   if (!window) {
-    return emitActivityStatus(null);
+    return localRPC.updateRPC(id);
   }
   const programs = getStorageObject<ProgramWithExtras[]>(
     StorageKeys.PROGRAM_ACTIVITY_STATUS,
@@ -90,39 +91,23 @@ electronWindowAPI()?.activityStatusChanged((window) => {
   );
 
   if (!program) {
-    return emitActivityStatus(null);
+    localRPC.updateRPC(id);
   }
 
-  emitActivityStatus({
-    action: program.action || "Playing",
-    name: program.name,
-    startedAt: window.createdAt,
-    emoji: program.emoji
+  localRPC.updateRPC(id, {
+    action: program?.action || "Playing",
+    name: program?.name || "",
+    startedAt: window?.createdAt,
+    emoji: program?.emoji
   });
 });
 
 electronWindowAPI()?.rpcChanged((data) => {
-  if (!data) {
-    const programs = getStorageObject<ProgramWithExtras[]>(
-      StorageKeys.PROGRAM_ACTIVITY_STATUS,
-      []
-    );
-    electronWindowAPI()?.restartActivityStatus(programs);
-    return;
-  }
-  emitActivityStatus({ startedAt: Date.now(), ...data });
+  localRPC.updateElectronRPCs(data);
 });
 
 localRPC.onUpdateRPC = (data) => {
-  if (!data) {
-    emitActivityStatus(null);
-    const programs = getStorageObject<ProgramWithExtras[]>(
-      StorageKeys.PROGRAM_ACTIVITY_STATUS,
-      []
-    );
-    electronWindowAPI()?.restartActivityStatus(programs);
-  }
-  emitActivityStatus({ startedAt: Date.now(), ...data });
+  emitActivityStatus(data.map((data) => ({ startedAt: Date.now(), ...data })));
 };
 
 export const onAuthenticated = (payload: AuthenticatedPayload) => {
@@ -258,10 +243,10 @@ export const onAuthenticated = (payload: AuthenticatedPayload) => {
     StorageKeys.PROGRAM_ACTIVITY_STATUS,
     []
   );
+  localRPC.start();
   electronWindowAPI()?.restartActivityStatus(programs);
 
   electronWindowAPI()?.restartRPCServer();
-  localRPC.start();
   useDiscordActivityTracker().restart();
   useLastFmActivityTracker().restart();
 

src/chat-api/events/userEvents.ts

@@ -20,7 +20,7 @@ export function onUserPresenceUpdate(payload: {
   userId: string;
   status?: UserStatus;
   custom?: string;
-  activity?: ActivityStatus;
+  activities?: ActivityStatus[];
 }) {
   const users = useUsers();
   const account = useAccount();
@@ -32,8 +32,8 @@ export function onUserPresenceUpdate(payload: {
   users.setPresence(payload.userId, {
     ...(payload.status !== undefined ? { status: payload.status } : undefined),
     ...(payload.custom !== undefined ? { custom: payload.custom } : undefined),
-    ...(payload.activity !== undefined
-      ? { activity: payload.activity }
+    ...(payload.activities !== undefined
+      ? { activities: payload.activities }
       : undefined)
   });
 }

src/chat-api/store/useUsers.ts

@@ -26,7 +26,7 @@ export interface Presence {
   userId: string;
   custom?: string | null;
   status: UserStatus;
-  activity?: ActivityStatus;
+  activities?: ActivityStatus[];
 }
 
 export const avatarUrl = (item: { avatar?: string }): string | null =>
@@ -137,7 +137,7 @@ const setPresence = (userId: string, presence: Partial<Presence>) => {
     return;
   }
   if (presence.custom === null) presence.custom = undefined;
-  if (presence.activity === null) presence.activity = undefined;
+
   setUserPresences(userId, { ...presence, userId });
 };
 

src/common/Electron.ts

@@ -26,6 +26,7 @@ export interface RPC {
   endsAt?: number;
   speed?: number;
   updatedAt?: number;
+  emoji?: string;
 }
 
 export const [spellcheckSuggestions, setSpellcheckSuggestions] = createSignal<
@@ -72,7 +73,7 @@ interface WindowAPI {
   ): void;
 
   restartRPCServer(): void;
-  rpcChanged(callback: (data: RPC | false) => void): void;
+  rpcChanged(callback: (data: { id: string; data: RPC }[]) => void): void;
   relaunchApp(): void;
 
   onSpellcheck(callback: (suggestions: string[]) => void): void;

src/common/LocalRPC.ts

@@ -1,9 +1,11 @@
 import { RPC } from "./Electron";
 
 export class LocalRPC {
-  onUpdateRPC: (data: RPC | false) => void = () => {};
+  onUpdateRPC: (data: RPC[]) => void = () => {};
 
   RPCs: { data: RPC; id: string }[] = [];
+  discordRPCs: { data: RPC; id: string }[] = [];
+  electronRPCs: { data: RPC; id: string }[] = [];
 
   constructor() {
     window.addEventListener(
@@ -22,40 +24,46 @@ export class LocalRPC {
     window.parent.postMessage({ name: "NERIMITY_READY" }, "*");
   }
   emitEvent() {
-    const firstRPC = this.RPCs[0];
-    if (!firstRPC) {
-      return this.onUpdateRPC(false);
-    }
-    this.onUpdateRPC(firstRPC.data);
+    const RPCs = this.RPCs.map((rpc) => rpc.data);
+    const electronRPCs = this.electronRPCs.map((rpc) => rpc.data);
+    const discordRPCs = this.discordRPCs.map((rpc) => rpc.data);
+    this.onUpdateRPC([...electronRPCs, ...discordRPCs, ...RPCs]);
   }
 
+  updateElectronRPCs(data: { id: string; data: RPC }[]) {
+    this.electronRPCs = data;
+    this.emitEvent();
+  }
+  updateDiscordRPCs(data: { id: string; data: RPC }[]) {
+    this.discordRPCs = data;
+    this.emitEvent();
+  }
   updateRPC(id: string, data?: RPC) {
     if (!data) return this.removeRPC(id);
+
     const index = this.RPCs.findIndex((rpc) => rpc.id === id);
     if (index === -1) {
       this.RPCs.push({
         id,
         data: sanitizedData(data)
       });
-      if (this.RPCs.length === 1) this.emitEvent();
+      this.emitEvent();
       return;
     }
 
     if (JSONCompare(this.RPCs?.[index]?.data, sanitizedData(data))) {
       return;
     }
     this.RPCs[index]!.data = sanitizedData(data);
-    if (index === 0) this.emitEvent();
+    this.emitEvent();
   }
   removeRPC(id: string) {
     const index = this.RPCs.findIndex((rpc) => rpc.id === id);
     if (index === -1) {
       return;
     }
     this.RPCs.splice(index, 1);
-    if (index === 0) {
-      this.emitEvent();
-    }
+    this.emitEvent();
   }
 }
 

src/common/useDiscordActivityTracker.ts

@@ -19,6 +19,7 @@ interface FormattedPresence {
 }
 export interface FormattedActivity {
   name: string;
+  applicationId: string | null;
   createdTimestamp: number | null;
   details: string | null;
   state: string | null;
@@ -89,7 +90,7 @@ export const useDiscordActivityTracker = () => {
       handleActivity(data);
     };
     const handleActivity = debounce((data: FormattedPresence) => {
-      const activity = data.activities
+      const activities = data.activities
         .filter((a) => a.type !== ActivityType.CUSTOM)
         .sort((a, b) => {
           const isASpotify = !!a.assets?.largeImage?.startsWith("spotify:");
@@ -105,36 +106,40 @@ export const useDiscordActivityTracker = () => {
 
           // If neither or both are Spotify, maintain the original order (or add another sorting criteria)
           return 0;
-        })[0];
-      if (!activity) {
-        localRPC.updateRPC(NERIMITY_APP_ID);
-        return;
-      }
-      let url = undefined;
+        });
 
-      const isSpotify = !!activity.assets?.largeImage?.startsWith("spotify:");
+      let url: string | undefined = undefined;
 
-      if (isSpotify && activity.syncId) {
-        url = `https://open.spotify.com/track/${activity.syncId}`;
-      }
+      const mapped = activities.map((activity) => {
+        const isSpotify = !!activity.assets?.largeImage?.startsWith("spotify:");
 
-      console.log(`Activity Update: ${activity?.name || null}`);
-      localRPC.updateRPC(NERIMITY_APP_ID, {
-        startedAt: activity.timestamps?.start || undefined,
-        endsAt: activity.timestamps?.end || undefined,
-        imgSrc:
-          activity.assets?.largeImageUrl ||
-          activity.assets?.smallImageUrl ||
-          undefined,
-        title: activity.details || undefined,
-        subtitle: activity.state || undefined,
-        link: url || activity.url || undefined,
-        ...ActivityTypeToNameAndAction(activity)
+        if (isSpotify && activity.syncId) {
+          url = `https://open.spotify.com/track/${activity.syncId}`;
+        }
+
+        console.log(`Activity Update: ${activity?.name || null}`);
+        return {
+          id: activity.syncId || activity.applicationId || NERIMITY_APP_ID,
+          data: {
+            startedAt: activity.timestamps?.start || undefined,
+            endsAt: activity.timestamps?.end || undefined,
+            imgSrc:
+              activity.assets?.largeImageUrl ||
+              activity.assets?.smallImageUrl ||
+              undefined,
+            title: activity.details || undefined,
+            subtitle: activity.state || undefined,
+            link: url || activity.url || undefined,
+            ...ActivityTypeToNameAndAction(activity)
+          }
+        };
       });
+
+      localRPC.updateDiscordRPCs(mapped);
     }, 500);
 
     ws.onclose = () => {
-      localRPC.updateRPC(NERIMITY_APP_ID);
+      localRPC.updateDiscordRPCs([]);
       clearInterval(pingIntervalId);
       clearTimeout(restartDelayTimeoutId);
       restartDelayTimeoutId = setTimeout(() => {

src/components/DashboardPane.tsx

@@ -1,5 +1,5 @@
 import style from "./DashboardPane.module.css";
-import { RawPost } from "@/chat-api/RawData";
+import { ActivityStatus, RawPost } from "@/chat-api/RawData";
 import {
   getAnnouncementPosts,
   getPostNotificationCount,
@@ -296,16 +296,21 @@ const ActivityList = () => {
     activityListEl.scrollLeft += event.deltaX;
   };
 
-  const activities = () => {
+  const presences = () => {
     const presences = store.users.presencesArray();
     return presences
       .filter(
         (p) =>
-          p.activity &&
+          p.activities?.length &&
           !users.get(p.userId)?.bot &&
           !store.friends.hasBeenBlockedByMe(p.userId)
       )
-      .sort((a, b) => b.activity!.startedAt - a.activity!.startedAt);
+      .map((p) => ({
+        ...p,
+        activities: [...(p.activities ?? [])].sort(
+          (a, b) => b!.startedAt - a!.startedAt
+        )
+      }));
   };
 
   const authenticatedInPast = () => account.lastAuthenticatedAt();
@@ -331,28 +336,37 @@ const ActivityList = () => {
         </Skeleton.List>
       </Show>
 
-      <Show when={authenticatedInPast() && !activities().length}>
+      <Show when={authenticatedInPast() && !presences().length}>
         <div class={style.noActivity}>
           <Text size={14} opacity={0.6}>
             {t("dashboard.noActiveUsers")}
           </Text>
         </div>
       </Show>
 
-      <Show when={authenticatedInPast() && activities().length}>
-        <For each={activities()}>
-          {(activity) => <PresenceItem presence={activity} />}
+      <Show when={authenticatedInPast() && presences().length}>
+        <For each={presences()}>
+          {(presence) => (
+            <For each={presence.activities}>
+              {(activity) => (
+                <PresenceItem presence={presence} activity={activity} />
+              )}
+            </For>
+          )}
         </For>
       </Show>
     </div>
   );
 };
 
-const PresenceItem = (props: { presence: Presence }) => {
+const PresenceItem = (props: {
+  presence: Presence;
+  activity: ActivityStatus;
+}) => {
   const navigate = useNavigate();
   const store = useStore();
 
-  const activity = () => props.presence.activity!;
+  const activity = () => props.activity;
 
   const user = () => {
     return store.users.get(props.presence.userId);
@@ -416,7 +430,7 @@ const PresenceItem = (props: { presence: Presence }) => {
           />
           <Text size={14} opacity={0.7}>
             {" "}
-            {props.presence.activity?.name}
+            {props.activity?.name}
           </Text>
         </span>