tweakings

webui/src/components/DriverVideoPanel/index.jsx

@@ -82,19 +82,13 @@ export default function DriverVideoPanel({ layoutFormat = 'desktop' }) {
       ? Math.max(0, Math.ceil(msUntilIdleSkip / 1000))
       : null;
   const turnTimerText = useMemo(() => {
-    if (!isTurnsMode) return null;
-    if (isActiveDriver) {
-      return turnSeconds != null ? `${turnSeconds}s left` : 'Your turn';
-    }
-    const parts = ['Not your turn'];
-    if (isNextDriver && turnSeconds != null) {
-      parts.push(`your turn in ${turnSeconds}s`);
-    }
-    if (shouldUsePreview) {
-      parts.push('preview to save upload bandwidth');
-    }
-    return parts.join(' • ');
-  }, [isTurnsMode, isActiveDriver, isNextDriver, turnSeconds, shouldUsePreview]);
+    if (!isTurnsMode || !isActiveDriver) return null;
+    return turnSeconds != null ? `${turnSeconds}s left` : 'Your turn';
+  }, [isTurnsMode, isActiveDriver, turnSeconds]);
+  const notTurnCountdownText = useMemo(() => {
+    if (!isNotYourTurn || !isNextDriver || turnSeconds == null) return null;
+    return `${turnSeconds} seconds until your turn.`;
+  }, [isNotYourTurn, isNextDriver, turnSeconds]);
   const entries = roverId
     ? [
         ...(shouldShowVideo ? [{ type: 'rover', id: roverId, key: roverId }] : []),
@@ -177,6 +171,8 @@ export default function DriverVideoPanel({ layoutFormat = 'desktop' }) {
           isActiveDriver={isActiveDriver}
           idleSkipSeconds={idleSkipSeconds}
           showNotTurnNotice={isNotYourTurn}
+          notTurnCountdownText={notTurnCountdownText}
+          showPreviewReason={shouldUsePreview}
           notTurnFlashAt={notTurnFlashAt}
         />
       ) : (

webui/src/components/VideoTile/HudOverlay.jsx

@@ -148,8 +148,10 @@ function HudOverlay({
       </div>
       {turnTimerText ? (
         <div
-          className={`absolute left-1/2 top-0.5 -translate-x-1/2 rounded transition-colors ${
-            turnTimerFlashActive ? 'bg-red-900/80 text-red-100' : 'bg-black/70 text-slate-100'
+          className={`absolute right-1 top-1 rounded border transition-colors ${
+            turnTimerFlashActive
+              ? 'border-red-300/90 bg-red-900/80 text-red-100'
+              : 'border-amber-300/80 bg-black/75 text-amber-200'
           } ${timerPadClass} ${timerTextClass}`}
         >
           {turnTimerText}

webui/src/components/VideoTile/index.jsx

@@ -48,6 +48,8 @@ export default function VideoTile({
   isActiveDriver = false,
   idleSkipSeconds = null,
   showNotTurnNotice = false,
+  notTurnCountdownText = null,
+  showPreviewReason = false,
   notTurnFlashAt = 0,
 }) {
   const discordUrl = useSessionSelector((state) => {
@@ -687,6 +689,28 @@ export default function VideoTile({
             </div>
           </div>
         ) : null}
+        {!noHud && showNotTurnNotice ? (
+          <div className="pointer-events-none absolute right-1 top-1 z-40">
+            <div
+              className={`max-w-[18rem] rounded border ${
+                noticeFlashActive
+                  ? 'border-red-300/90 bg-red-900/80 text-red-100'
+                  : 'border-amber-300/80 bg-black/75 text-amber-200'
+              } ${mobileHud ? 'px-2 py-1 text-[0.6rem]' : 'px-2.5 py-1.5 text-[0.72rem]'}`}
+            >
+              <div className="font-semibold">Not your turn to drive!</div>
+              {notTurnCountdownText ? <div>{notTurnCountdownText}</div> : null}
+              {showPreviewReason ? <div>Video switched to preview mode to save bandwidth.</div> : null}
+              <div className="pointer-events-auto mt-0.5">
+                <SocialButton
+                  id="discord"
+                  label="Join our Discord while you wait!"
+                  url={discordUrl}
+                />
+              </div>
+            </div>
+          </div>
+        ) : null}
       </div>
       {!noHud && !showVerticalBattery && (
         <div className="space-y-0.5">