make watchparty use new nickname instead of account id

This commit is contained in:
Pas 2025-11-17 13:08:58 -07:00
parent 04a08af5e9
commit a76f25fcea
2 changed files with 20 additions and 2 deletions

View file

@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { Button } from "@/components/buttons/Button";
import { Icon, Icons } from "@/components/Icon";
import { useWatchPartySync } from "@/hooks/useWatchPartySync";
import { useAuthStore } from "@/stores/auth";
import { getProgressPercentage } from "@/stores/progress";
import { useWatchPartyStore } from "@/stores/watchParty";
@ -13,6 +14,7 @@ export function WatchPartyStatus() {
const [expanded, setExpanded] = useState(false);
const [showNotification, setShowNotification] = useState(false);
const [lastUserCount, setLastUserCount] = useState(1);
const account = useAuthStore((s) => s.account);
const {
roomUsers,
@ -43,6 +45,14 @@ export function WatchPartyStatus() {
setExpanded(!expanded);
};
// Get display name for a user (nickname if it's the current user, otherwise truncated userId)
const getDisplayName = (userId: string) => {
if (account?.userId === userId && account?.nickname) {
return account.nickname;
}
return `${userId.substring(0, 12)}...`;
};
return (
<div
className={`absolute top-4 right-4 z-50 p-2 bg-mediaCard-shadow bg-opacity-70 backdrop-blur-sm rounded-md text-white text-xs
@ -106,7 +116,7 @@ export function WatchPartyStatus() {
className={`w-3 h-3 ${user.isHost ? "text-onboarding-best" : ""}`}
/>
<span className={user.isHost ? "text-onboarding-best" : ""}>
{user.userId.substring(0, 8)}...
{getDisplayName(user.userId)}
</span>
</span>
<span className="text-type-secondary">

View file

@ -34,6 +34,14 @@ export function WatchPartyView({ id }: { id: string }) {
const [validationError, setValidationError] = useState<string | null>(null);
const account = useAuthStore((s) => s.account);
// Get display name for a user (nickname if it's the current user, otherwise truncated userId)
const getDisplayName = (userId: string) => {
if (account?.userId === userId && account?.nickname) {
return account.nickname;
}
return `${userId.substring(0, 8)}...`;
};
const backendMeta = useAsync(async () => {
if (!backendUrl) return;
return getBackendMeta(backendUrl);
@ -322,7 +330,7 @@ export function WatchPartyView({ id }: { id: string }) {
: "text-type-secondary"
}
>
{user.userId.substring(0, 8)}...
{getDisplayName(user.userId)}
</span>
</span>
<span className="text-type-secondary">