whipwhep

webui/src/components/VipPanel.jsx

@@ -2,11 +2,12 @@ import { useMemo, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useSettingsNamespace } from '../settings/index.js';
 import { COOKIE_KEY_REGEX, flowWrapClass } from './vip/constants.js';
+import VipAudioUploadCard from './vip/VipAudioUploadCard.jsx';
 import VipVerificationCard from './vip/VipVerificationCard.jsx';
 import VipIdentityCard from './vip/VipIdentityCard.jsx';
 
 export default function VipPanel() {
-  const { session, identifySession, requestVerification } = useSession();
+  const { session, identifySession, requestVerification, playUploadedAudio, stopUploadedAudio } = useSession();
   const { value: identity, save: saveIdentity } = useSettingsNamespace('identity', { cookieUserId: '' });
   const { value: profile } = useSettingsNamespace('profile', { nickname: '' });
 
@@ -14,6 +15,7 @@ export default function VipPanel() {
   const nickname = (profile?.nickname || '').trim();
   const isVerified = Boolean(session?.isVerified);
   const pendingRequestId = session?.verification?.pendingRequestId || null;
+  const ownRoverId = String(session?.assignment?.roverId || '').trim();
   const [message, setMessage] = useState('');
 
   const applyIdentityKey = async (nextRaw) => {
@@ -32,12 +34,12 @@ export default function VipPanel() {
   return (
     <section className="panel-section space-y-0.5 text-base">
       {isVerified ? (
-        <div className={`surface ${flowWrapClass}`}>
-          <div className="mx-auto flex w-full max-w-md flex-col items-center space-y-0.5 text-center">
-            <p className="text-sm text-slate-300">VIP verified.</p>
-            <p className="text-xs text-slate-500">Audio forwarding is disabled while this stack is being rebuilt.</p>
-          </div>
-        </div>
+        <VipAudioUploadCard
+          ownRoverId={ownRoverId}
+          audioForwardByRover={session?.audioForward || {}}
+          playUploadedAudio={playUploadedAudio}
+          stopUploadedAudio={stopUploadedAudio}
+        />
       ) : (
         <VipVerificationCard
           pendingRequestId={pendingRequestId}