fix avatar

neos.config.json

@@ -23,7 +23,7 @@
    "profileUrl":"https://accounts.moecube.com/profiles",
    "athleticWatchUrl":"wss://tiramisu.moecube.com:8923",
    "entertainWatchUrl":"wss://tiramisu.moecube.com:7923",
-   "avatarApi":"https://sapi.moecube.com:444/avatar/avatar/{username}/120/1.png",
+   "userApi":"https://sapi.moecube.com:444/accounts/users/{username}.json",
    "streamInterval":20,
    "startDelay":1000,
    "ui":{

neos.config.prod.json

@@ -23,7 +23,7 @@
    "profileUrl":"https://accounts.moecube.com/profiles",
    "athleticWatchUrl":"wss://tiramisu.moecube.com:8923",
    "entertainWatchUrl":"wss://tiramisu.moecube.com:7923",
-   "avatarApi":"https://sapi.moecube.com:444/avatar/avatar/{username}/120/1.png",
+   "userApi":"https://sapi.moecube.com:444/accounts/users/{username}.json",
    "streamInterval":20,
    "startDelay":1000,
    "ui":{

src/api/mycard/index.ts

 // Collection of APIs provided by MyCard
 export * from "./account";
 export * from "./match";
+export * from "./user";

src/api/mycard/user.ts

+import { useConfig } from "@/config";
+const { userApi } = useConfig();
+
+interface WrappedUserInfo {
+  user: UserInfo;
+}
+
+export interface UserInfo {
+  id: number;
+  username: string;
+  name: string;
+  email: string;
+  active: boolean;
+  admin: boolean;
+  avatar: string;
+  locale: string;
+}
+
+export async function getUserInfo(
+  username: string,
+): Promise<UserInfo | undefined> {
+  const resp = await fetch(userApi.replace("{username}", username));
+
+  if (resp.ok) {
+    return ((await resp.json()) as WrappedUserInfo).user;
+  } else {
+    console.error(`get ${username} info error`);
+    return undefined;
+  }
+}

src/ui/Match/WatchContent.tsx

@@ -5,12 +5,13 @@ import React, { useState } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { proxy, useSnapshot } from "valtio";
 
+import { getUserInfo } from "@/api";
 import { useConfig } from "@/config";
 
 import { ScrollableArea } from "../Shared";
 import styles from "./WatchContent.module.scss";
 
-const { athleticWatchUrl, avatarApi } = useConfig();
+const { athleticWatchUrl } = useConfig();
 
 interface Info {
   event: "init" | "create" | "update" | "delete";
@@ -20,7 +21,7 @@ interface Info {
 interface Room {
   id?: string;
   title?: string;
-  users?: { username: string; position: number }[];
+  users?: { username: string; position: number; avatar?: string }[];
   options: Options;
 }
 
@@ -61,18 +62,34 @@ export const WatchContent: React.FC = () => {
         case "init": {
           //@ts-ignore
           const rooms: Room[] = info.data;
+          rooms.forEach(
+            (room) =>
+              room.users?.forEach(
+                async (user) =>
+                  (user.avatar = (await getUserInfo(user.username))?.avatar),
+              ),
+          );
           setRooms(rooms);
           break;
         }
         case "create": {
           //@ts-ignore
           const room: Room = info.data;
+
+          room.users?.forEach(
+            async (user) =>
+              (user.avatar = (await getUserInfo(user.username))?.avatar),
+          );
           setRooms((prev) => prev.concat(room));
           break;
         }
         case "update": {
           //@ts-ignore
           const room: Room = info.data;
+          room.users?.forEach(
+            async (user) =>
+              (user.avatar = (await getUserInfo(user.username))?.avatar),
+          );
           setRooms((prev) => {
             const target = prev.find((item) => item.id === room.id);
             if (target) {
@@ -130,18 +147,8 @@ export const WatchContent: React.FC = () => {
                   onClick={() => (watchStore.watchID = room.id)}
                 >
                   <div className={styles.avatar}>
-                    <Avatar
-                      src={avatarApi.replace(
-                        "{username}",
-                        room.users?.at(0)?.username ?? "?",
-                      )}
-                    />
-                    <Avatar
-                      src={avatarApi.replace(
-                        "{username}",
-                        room.users?.at(1)?.username ?? "?",
-                      )}
-                    />
+                    <Avatar src={room.users?.at(0)?.avatar} />
+                    <Avatar src={room.users?.at(1)?.avatar} />
                   </div>
                   <div className={styles.title}>
                     {`${room.users?.at(0)?.username} 与 ${room.users?.at(1)