From d4cd99df1fdecb28d60c10c87f72a93634128db8 Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Sat, 3 Oct 2026 13:59:44 +0200
Subject: Player: remote control while casting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows the receiver's position with play/pause, ±30 s and a scrubber;
a seek restarts the relay where asked.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../meshbay-hub/src/meshbay_hub/static/style.css   | 73 ++++++++++++++++++++++
 1 file changed, 73 insertions(+)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 23013a4..dc121ab 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2084,6 +2084,79 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   outline: none;
 }
 
+/* The player as a remote while a television plays the film. Opaque, over
+   the local picture, which keeps running underneath only to pace the
+   download. */
+.video-remote {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  padding: 16px;
+  background: #0b1222;
+  border-radius: 4px;
+  color: #e2e8f0;
+  min-height: 260px;
+}
+
+.video-remote-device {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 1.05rem;
+  text-align: center;
+}
+
+.video-remote-time {
+  font-variant-numeric: tabular-nums;
+  color: #94a3b8;
+}
+
+.video-remote-seek {
+  width: min(100%, 640px);
+}
+
+.video-remote-buttons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.video-remote-btn {
+  min-width: 64px;
+  min-height: 44px;
+  padding: 8px 14px;
+  border: 1px solid #334155;
+  border-radius: 999px;
+  background: #1e293b;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.video-remote-btn:disabled { opacity: 0.4; cursor: default; }
+
+.video-remote-main {
+  min-width: 56px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-remote-stop {
+  border: 0;
+  background: none;
+  color: #fca5a5;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 /* Where the film was picked up again. Sits over the picture rather than
    pushing it down, and clears itself once the viewer is watching. */
 .video-container { position: relative; }
-- 
cgit v1.2.3