openvibers/openvibe.live Commits

Go live on a phone: the Dock's pill no longer covers the Go live button (#711)

OP OpenVibers committed 4 days ago · 022732941f · 2 files, +25 −0

The Dock's pill (Shared dock.js, "Needs you" or "Working", bottom right) sat on the right half of the pinned Go
live button at 390 px (4,140 px² of overlap): a tap there opened the Agent panel instead of going live. While the
Go live dock shows, the pill rides above it by the clearance the page already keeps at its foot (104 px plus the
app bar); a pill in a top corner is left alone, and it is never hidden.

Changes

ddiff --git a/public/css/features/broadcast.css b/public/css/features/broadcast.css
iindex b37759f7..553408ce 100644
---- a/public/css/features/broadcast.css
++++ b/public/css/features/broadcast.css
@@@ -2852,6 +2852,11 @@ body.bc-studio-on #bc-chat-messages .chat-conn-status { display: block !importan
  .bcs-golive-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
  .bcs-golive-where { color: var(--text-secondary, #a1a1aa); font-size: 0.76rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.bc-golive-dock-on .messenger-toggle { display: none !important; }
++/* The Dock's pill (openvibe-shared dock.js, in a bottom corner) rides above the Go live dock: it sat on the button's
++   right half, so a tap there opened the Agent panel instead of going live (11-09). Top corners stay where they are. */
++body.bc-golive-dock-on .ovdk-pill:not([data-corner^="top"]) {
++    bottom: calc(104px + var(--ovnav-appbar-h, 0px) + env(safe-area-inset-bottom, 0px));   /* the page's own clearance (below) */
++}
  /* The page keeps room at its foot for the dock, so its last fields are never under it. */
  body.bc-golive-dock-on #page-broadcast { padding-bottom: calc(104px + var(--ovnav-appbar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
  
ddiff --git a/test/golive-dock-clear.test.js b/test/golive-dock-clear.test.js
nnew file mode 100644
iindex 00000000..c2bd7f17
---- /dev/null
++++ b/test/golive-dock-clear.test.js
@@@ -0,0 +1,20 @@
++'use strict';
++/**
++ * On a phone, the Dock's pill (openvibe-shared dock.js, "Needs you" / "Working", bottom right) sat on the right half of
++ * the pinned Go live button: a tap there opened the Agent panel instead of going live (11-09, measured 4,140 px² of
++ * overlap at 390 px). While the Go live dock shows (body.bc-golive-dock-on) the pill rides above it, by the same
++ * clearance the page keeps at its foot; a pill moved to a top corner is left alone.
++ *
++ *   node test/golive-dock-clear.test.js
++ */
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++const css = fs.readFileSync(path.join(__dirname, '..', 'public/css/features/broadcast.css'), 'utf8');
++const rule = /body\.bc-golive-dock-on \.ovdk-pill:not\(\[data-corner\^="top"\]\) \{\s*bottom: calc\(104px \+ var\(--ovnav-appbar-h, 0px\) \+ env\(safe-area-inset-bottom, 0px\)\);/;
++assert.ok(rule.test(css), 'the pill clears the Go live dock');
++assert.ok(/body\.bc-golive-dock-on #page-broadcast \{ padding-bottom: calc\(104px \+ var\(--ovnav-appbar-h, 0px\) \+ env\(safe-area-inset-bottom, 0px\)\); \}/.test(css),
++    'the same 104 px the page keeps for the dock (change both together)');
++assert.ok(!/body\.bc-golive-dock-on \.ovdk-pill[^{]*\{[^}]*display:\s*none/.test(css), 'the pill moves, it is never hidden');
++console.log('go live dock: the Dock pill rides above it, never on the button');