tweakings

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">