itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(orbit): symmetric host-presence badge — green online / yellow offline

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-24 16:37:44 +02:00
parent 81d16183b7
commit cf6fbe527a
4 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OrbitQueueHead.tsx
+10 -8
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Users, WifiOff } from 'lucide-react'; import { Users, Wifi, WifiOff } from 'lucide-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useOrbitStore } from '../store/orbitStore'; import { useOrbitStore } from '../store/orbitStore';
import type { OrbitState } from '../api/orbit'; import type { OrbitState } from '../api/orbit';
@@ -34,18 +34,20 @@ export default function OrbitQueueHead({ state }: Props) {
}, [role]); }, [role]);
const names = [state.host, ...state.participants.map(p => p.user)]; const names = [state.host, ...state.participants.map(p => p.user)];
const hostAway = role === 'guest' const showPresence = role === 'guest' && state.positionAt > 0;
&& state.positionAt > 0 const hostAway = showPresence && (nowMs - state.positionAt) > HOST_AWAY_THRESHOLD_MS;
&& (nowMs - state.positionAt) > HOST_AWAY_THRESHOLD_MS;
return ( return (
<div className="orbit-queue-head"> <div className="orbit-queue-head">
<div className="orbit-queue-head__title-row"> <div className="orbit-queue-head__title-row">
<h2 className="orbit-queue-head__title">{state.name}</h2> <h2 className="orbit-queue-head__title">{state.name}</h2>
{hostAway && ( {showPresence && (
<span className="orbit-queue-head__presence" role="status"> <span
<WifiOff size={11} /> className={`orbit-queue-head__presence orbit-queue-head__presence--${hostAway ? 'away' : 'online'}`}
<span>{t('orbit.hostAway')}</span> role="status"
>
{hostAway ? <WifiOff size={11} /> : <Wifi size={11} />}
<span>{t(hostAway ? 'orbit.hostAway' : 'orbit.hostOnline')}</span>
</span> </span>
)} )}
</div> </div>
src/locales/de.ts
+1
View File
@@ -1485,6 +1485,7 @@ export const deTranslation = {
catchUpLabel: 'aufholen', catchUpLabel: 'aufholen',
catchUpTooltip: 'Zur aktuellen Host-Position springen', catchUpTooltip: 'Zur aktuellen Host-Position springen',
hostAway: 'Host offline', hostAway: 'Host offline',
hostOnline: 'Host online',
endTooltip: 'Session beenden', endTooltip: 'Session beenden',
leaveTooltip: 'Session verlassen', leaveTooltip: 'Session verlassen',
participantsInviteLabel: 'Einladungslink', participantsInviteLabel: 'Einladungslink',
src/locales/en.ts
+1
View File
@@ -1488,6 +1488,7 @@ export const enTranslation = {
catchUpLabel: 'catch up', catchUpLabel: 'catch up',
catchUpTooltip: "Jump to the host's current position", catchUpTooltip: "Jump to the host's current position",
hostAway: 'Host offline', hostAway: 'Host offline',
hostOnline: 'Host online',
endTooltip: 'End session', endTooltip: 'End session',
leaveTooltip: 'Leave session', leaveTooltip: 'Leave session',
participantsInviteLabel: 'Invite link', participantsInviteLabel: 'Invite link',
src/styles/components.css
+15 -3
View File
@@ -12299,12 +12299,24 @@ html[data-psy-native-hidden="true"] *::after {
font-size: 10.5px; font-size: 10.5px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
border-radius: 999px;
border-width: 1px;
border-style: solid;
}
.orbit-queue-head__presence--online {
color: var(--ctp-green, #a6e3a1);
background: color-mix(in srgb, var(--ctp-green, #a6e3a1) 14%, transparent);
border-color: color-mix(in srgb, var(--ctp-green, #a6e3a1) 40%, transparent);
}
.orbit-queue-head__presence--online svg {
color: var(--ctp-green, #a6e3a1);
}
.orbit-queue-head__presence--away {
color: var(--ctp-yellow, #f9e2af); color: var(--ctp-yellow, #f9e2af);
background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 14%, transparent); background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ctp-yellow, #f9e2af) 40%, transparent); border-color: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 40%, transparent);
border-radius: 999px;
} }
.orbit-queue-head__presence svg { .orbit-queue-head__presence--away svg {
color: var(--ctp-yellow, #f9e2af); color: var(--ctp-yellow, #f9e2af);
} }
.orbit-queue-head__meta { .orbit-queue-head__meta {