Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 03:52:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make watchparty use new nickname instead of account id

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/player/atoms/WatchPartyStatus.tsx
View file

@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { Button } from "@/components/buttons/Button"; import { Button } from "@/components/buttons/Button";
import { Icon, Icons } from "@/components/Icon"; import { Icon, Icons } from "@/components/Icon";
import { useWatchPartySync } from "@/hooks/useWatchPartySync"; import { useWatchPartySync } from "@/hooks/useWatchPartySync";
import { useAuthStore } from "@/stores/auth";
import { getProgressPercentage } from "@/stores/progress"; import { getProgressPercentage } from "@/stores/progress";
import { useWatchPartyStore } from "@/stores/watchParty"; import { useWatchPartyStore } from "@/stores/watchParty";
@ -13,6 +14,7 @@ export function WatchPartyStatus() {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const [showNotification, setShowNotification] = useState(false); const [showNotification, setShowNotification] = useState(false);
const [lastUserCount, setLastUserCount] = useState(1); const [lastUserCount, setLastUserCount] = useState(1);
const account = useAuthStore((s) => s.account);
const { const {
roomUsers, roomUsers,
@ -43,6 +45,14 @@ export function WatchPartyStatus() {
setExpanded(!expanded); 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 ( return (
<div <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 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" : ""}`} className={`w-3 h-3 ${user.isHost ? "text-onboarding-best" : ""}`}
/> />
<span className={user.isHost ? "text-onboarding-best" : ""}> <span className={user.isHost ? "text-onboarding-best" : ""}>
{user.userId.substring(0, 8)}... {getDisplayName(user.userId)}
</span> </span>
</span> </span>
<span className="text-type-secondary"> <span className="text-type-secondary">

10
src/components/player/atoms/settings/WatchPartyView.tsx
View file

@ -34,6 +34,14 @@ export function WatchPartyView({ id }: { id: string }) {
const [validationError, setValidationError] = useState<string | null>(null); const [validationError, setValidationError] = useState<string | null>(null);
const account = useAuthStore((s) => s.account); 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 () => { const backendMeta = useAsync(async () => {
if (!backendUrl) return; if (!backendUrl) return;
return getBackendMeta(backendUrl); return getBackendMeta(backendUrl);
@ -322,7 +330,7 @@ export function WatchPartyView({ id }: { id: string }) {
: "text-type-secondary" : "text-type-secondary"
} }
> >
{user.userId.substring(0, 8)}... {getDisplayName(user.userId)}
</span> </span>
</span> </span>
<span className="text-type-secondary"> <span className="text-type-secondary">