You can now share your Discord activity to Nerimity users.

Author: SupertigerDev

src/chat-api/events/connectionEvents.ts

@@ -14,6 +14,7 @@ import { localRPC } from "@/common/LocalRPC";
 import { reactNativeAPI } from "@/common/ReactNative";
 import { useWindowProperties } from "@/common/useWindowProperties";
 import useChannelProperties from "../store/useChannelProperties";
+import { useDiscordActivityTracker } from "@/common/useDiscordActivityTracker";
 
 export const onConnect = (socket: Socket, token?: string) => {
   const account = useAccount();
@@ -96,6 +97,11 @@ electronWindowAPI()?.rpcChanged((data) => {
 localRPC.onUpdateRPC = (data) => {
   if (!data) {
     emitActivityStatus(null);
+    const programs = getStorageObject<ProgramWithExtras[]>(
+      StorageKeys.PROGRAM_ACTIVITY_STATUS,
+      []
+    );
+    electronWindowAPI()?.restartActivityStatus(programs);
   }
   emitActivityStatus({ startedAt: Date.now(), ...data });
 };
@@ -227,4 +233,5 @@ export const onAuthenticated = (payload: AuthenticatedPayload) => {
 
   electronWindowAPI()?.restartRPCServer();
   localRPC.start();
+  useDiscordActivityTracker().restart();
 };

src/common/LocalRPC.ts

@@ -29,7 +29,7 @@ export class LocalRPC {
     this.onUpdateRPC(firstRPC.data);
   }
 
-  updateRPC(id: string, data: RPC) {
+  updateRPC(id: string, data?: RPC) {
     if (!data) return this.removeRPC(id);
     const index = this.RPCs.findIndex((rpc) => rpc.id === id);
     if (index === -1) {

src/common/localStorage.ts

@@ -24,6 +24,7 @@ export enum StorageKeys {
   voiceInputMode = "voiceInputMode",
   PTTBoundKeys = "pttBoundKeys",
   USE_TWITTER_EMBED = "useTwitterEmbed",
+  DISCORD_USER_ID = "discordUserId",
 }
 
 export function getStorageBoolean(

src/common/useDiscordActivityTracker.ts

@@ -0,0 +1,151 @@
+import { createSignal } from "solid-js";
+import {
+  getStorageString,
+  setStorageString,
+  StorageKeys,
+} from "./localStorage";
+import { localRPC } from "./LocalRPC";
+
+const URL = "https://supertiger.nerimity.com/trackdispresence";
+const NERIMITY_APP_ID = "1630300334100500480";
+
+let ws: WebSocket | null = null;
+
+interface FormattedPresence {
+  status: string;
+  activities: FormattedActivity[];
+}
+export interface FormattedActivity {
+  name: string;
+  createdTimestamp: number | null;
+  details: string | null;
+  state: string | null;
+  syncId: string | null;
+  url?: string | null;
+  type: number;
+  assets?: {
+    largeText?: string | null;
+    smallText?: string | null;
+    largeImageUrl: string | null;
+    smallImageUrl: string | null;
+    largeImage?: string | null;
+    smallImage?: string | null;
+  };
+  timestamps?: {
+    start: number | null;
+    end: number | null;
+  } | null;
+}
+
+const ActivityType = {
+  PLAYING: 0,
+  STREAMING: 1,
+  LISTENING: 2,
+  WATCHING: 3,
+  CUSTOM: 4,
+  COMPETING: 5,
+};
+const ActivityTypeToNameAndAction = (activity: FormattedActivity) => {
+  switch (activity.type) {
+    case ActivityType.PLAYING:
+      return { name: activity.name || "Unknown", action: "Playing" };
+    case ActivityType.STREAMING:
+      return { name: activity.name || "Unknown", action: "Streaming" };
+    case ActivityType.LISTENING:
+      return { name: activity.name || "Unknown", action: "Listening to" };
+    case ActivityType.WATCHING:
+      return { name: activity.name || "Unknown", action: "Watching" };
+    case ActivityType.CUSTOM:
+      return { name: activity.state || "Unknown", action: "Custom" };
+    case ActivityType.COMPETING:
+      return { name: activity.name || "Unknown", action: "Competing in" };
+    default:
+      return { name: activity.name || "Unknown", action: "Playing" };
+  }
+};
+export const useDiscordActivityTracker = () => {
+  let intervalId: NodeJS.Timeout;
+
+  const start = () => {
+    const userId = getStorageString(StorageKeys.DISCORD_USER_ID, "");
+    if (!userId) return;
+    if (ws) return;
+    clearInterval(intervalId);
+    ws = new WebSocket(URL + "/" + userId);
+    ws.onopen = () => {
+      console.log("discord activity tracker connected");
+      startPingInterval();
+    };
+    ws.onmessage = (event) => {
+      const rawData = event.data;
+      const data = JSON.parse(rawData as string);
+      if (data.error) {
+        console.error(data.error);
+        setStorageString(StorageKeys.DISCORD_USER_ID, "");
+        return;
+      }
+      const activity = (data.activities as FormattedActivity[]).sort((a, b) => {
+        const isASpotify = !!a.assets?.largeImage?.startsWith("spotify:");
+        const isBSpotify = !!b.assets?.largeImage?.startsWith("spotify:");
+
+        // Ensure Spotify activities are placed at the end of the list
+        if (isASpotify && !isBSpotify) {
+          return 1; // a comes after b
+        }
+        if (!isASpotify && isBSpotify) {
+          return -1; // a comes before b
+        }
+
+        // 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:");
+
+      if (isSpotify && activity.syncId) {
+        url = `https://open.spotify.com/track/${activity.syncId}`;
+      }
+
+      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,
+        ...ActivityTypeToNameAndAction(activity),
+      });
+    };
+    ws.onclose = () => {
+      localRPC.updateRPC(NERIMITY_APP_ID);
+      clearInterval(intervalId);
+      setTimeout(() => {
+        restart();
+      }, 5000);
+    };
+  };
+
+  const startPingInterval = () => {
+    intervalId = setInterval(() => {
+      ws?.send("ping");
+    }, 30000);
+  };
+
+  const restart = () => {
+    localRPC.updateRPC(NERIMITY_APP_ID);
+    clearInterval(intervalId);
+    if (ws) ws.close();
+    ws = null;
+    start();
+  };
+  return { start, restart };
+};

src/components/settings/ActivityStatus.tsx

@@ -25,6 +25,8 @@ import DropDown, { DropDownItem } from "../ui/drop-down/DropDown";
 import Block from "../ui/settings-block/Block";
 import {
   getStorageObject,
+  getStorageString,
+  setStorageString,
   StorageKeys,
   useReactiveLocalStorage,
 } from "@/common/localStorage";
@@ -39,6 +41,7 @@ import { EmojiPicker } from "../ui/emoji-picker/EmojiPicker";
 import { Modal } from "../ui/modal";
 import { emojiShortcodeToUnicode } from "@/emoji";
 import { emojiToUrl } from "@/common/emojiToUrl";
+import { useDiscordActivityTracker } from "@/common/useDiscordActivityTracker";
 
 const Container = styled("div")`
   display: flex;
@@ -74,7 +77,7 @@ const RPCAdContainer = styled("div")`
   border-radius: 8px;
   padding: 10px;
 
-  margin-bottom: 16px;
+  margin-bottom: 6px;
 `;
 
 const ExampleActivityContainer = styled("div")`
@@ -194,6 +197,7 @@ export default function WindowSettings() {
           </CustomLink>
         </FlexRow>
       </RPCAdContainer>
+      <DiscordActivity />
 
       <Show when={!isElectron}>
         <Notice
@@ -455,3 +459,94 @@ const EditActivityStatusModal = (props: {
     </Modal.Root>
   );
 };
+
+const DiscordActivity = () => {
+  const { createPortal } = useCustomPortal();
+  const discordActivityTracker = useDiscordActivityTracker();
+  const [userId, setUserId] = createSignal<string>(
+    getStorageString(StorageKeys.DISCORD_USER_ID, "")
+  );
+
+  const onBlur = () => {
+    const id = userId()?.trim();
+    if (!id) {
+      setStorageString(StorageKeys.DISCORD_USER_ID, "");
+      discordActivityTracker.restart();
+      return;
+    }
+    createPortal((close) => {
+      const onCloseClick = () => {
+        setStorageString(StorageKeys.DISCORD_USER_ID, "");
+        setUserId("");
+        discordActivityTracker.restart();
+        close();
+      };
+      const onJoinedClick = () => {
+        setStorageString(StorageKeys.DISCORD_USER_ID, id);
+        setUserId(id);
+        discordActivityTracker.restart();
+        close();
+      };
+      return (
+        <DiscordServerJoinedConfirmModal
+          close={onCloseClick}
+          onJoinedClick={onJoinedClick}
+        />
+      );
+    });
+  };
+  return (
+    <SettingsBlock
+      label="Discord Activity"
+      description="Share your Discord activity with users on Nerimity!"
+    >
+      <Input
+        placeholder="Discord User Id"
+        onText={setUserId}
+        value={userId()}
+        onBlur={onBlur}
+      />
+    </SettingsBlock>
+  );
+};
+
+const DiscordServerJoinedConfirmModal = (props: {
+  close: () => void;
+  onJoinedClick: () => void;
+}) => {
+  return (
+    <Modal.Root
+      close={props.close}
+      doNotCloseOnBackgroundClick
+      desktopMaxWidth={500}
+    >
+      <Modal.Header title="Discord Activity" icon="edit" />
+      <Modal.Body>
+        <FlexColumn padding={6} gap={6}>
+          <Text>
+            Please join the Discord server to enable Activity Sharing.
+            <div>
+              <a target="_blank" href="https://discord.gg/ggrd2wr4pe">
+                https://discord.gg/ggrd2wr4pe
+              </a>
+            </div>
+          </Text>
+        </FlexColumn>
+      </Modal.Body>
+      <Modal.Footer>
+        <Modal.Button
+          label="Cancel"
+          alert
+          onClick={props.close}
+          iconName="close"
+        />
+        <Modal.Button
+          label="I have joined"
+          onClick={props.onJoinedClick}
+          primary
+          iconName="check"
+        />
+      </Modal.Footer>
+    </Modal.Root>
+  );
+};