openvibers/openvibe.chat Commits

Party start: tappable choices, an honest disabled On OpenVibe, Link named (#417)

OP OpenVibers committed 5 days ago · aac22e098b · 3 files, +9 −3

Changes

ddiff --git a/public/web/party-home.css b/public/web/party-home.css
iindex a19f62a..3ac1512 100644
---- a/public/web/party-home.css
++++ b/public/web/party-home.css
@@@ -71,5 +71,11 @@
.pty-host { display: grid; gap: 4px; text-align: left; padding: 14px 16px; min-height: 72px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 14px; background: var(--bg-secondary, transparent); color: inherit; font: inherit; cursor: pointer; }
.pty-host strong { font-size: 1.02rem; }
.pty-host span { font-size: .86rem; color: var(--text-secondary, #9aa3b2); }
++.pty-host { position: relative; padding-right: 44px; cursor: pointer; color: inherit; font: inherit; }
++.pty-host::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .7; }
.pty-host:hover, .pty-host:focus-visible { border-color: var(--accent, #6d5dfc); }
++.pty-host:active { transform: scale(.99); }
++.pty-host:disabled { cursor: default; opacity: .6; transform: none; }
++.pty-host:disabled::after { display: none; }
++.pty-host:disabled:hover { border-color: var(--border, rgba(255,255,255,.14)); }
@media (max-width: 520px) { .pty-host-choice { grid-template-columns: minmax(0, 1fr); } }
ddiff --git a/server/web/party-pages.js b/server/web/party-pages.js
iindex 8dad4c0..3cd721d 100644
---- a/server/web/party-pages.js
++++ b/server/web/party-pages.js
@@@ -157,9 +157,8 @@ function createPartyRoutes({ config }) {
<h2 class="pty-start-h">Start a shared computer</h2>
<div class="pty-host-choice">
<button type="submit" name="desktop" value="link" class="pty-host"><strong>On my computer</strong><span>Free. Runs in the Link app on your computer.</span></button>
--<button type="submit" name="desktop" value="openvibe" class="pty-host"><strong>On OpenVibe</strong><span id="pty-openvibe-availability">No OpenVibe machine is free right now.</span></button>
++<button type="submit" name="desktop" value="openvibe" class="pty-host" disabled aria-describedby="pty-openvibe-availability"><strong>On OpenVibe</strong><span id="pty-openvibe-availability">No OpenVibe machine is free right now.</span></button>
</div>
--<p class="pty-hint">Open a browser or a music service together. One person has the remote.</p>
</form>` : `<p class="pty-cta"><a class="oc-button" href="/auth/login?next=%2F">Sign in to start a shared computer</a></p>`;
const start = signedIn
? `<form class="pty-paste" method="get" action="/new">
@@@ -215,7 +214,7 @@ ${grid}
if (hosting === 'openvibe') return page(req, res, 503, { actor, title: 'No OpenVibe computer is free', path: '/new', robots: 'noindex, nofollow', footer: 'compact', partyHome: true,
body: '<section class="oc-party-confirm pty-confirm"><h1>No OpenVibe machine is free right now</h1><p>You can host this party on your own computer with Link.</p><p><a class="oc-button" href="/new?desktop=link">Host it on my computer</a></p></section>' });
return page(req, res, 200, { actor, title: 'Start a shared computer', path: '/new', robots: 'noindex, nofollow', footer: 'compact', partyHome: true,
-- body: `<section class="oc-party-confirm pty-confirm"><h1>Start a shared computer?</h1><p>Link runs a temporary browser in a container on your computer. People you invite can watch, and you can pass the remote.</p><form method="post" action="/new"><input type="hidden" name="desktop_hosting" value="link"><button class="oc-button" type="submit">Start the party</button></form></section>` });
++ body: `<section class="oc-party-confirm pty-confirm"><h1>Start a shared computer?</h1><p>Link runs a temporary browser in a container on your computer. People you invite can watch, and you can pass the remote.</p><p class="oc-muted">It needs the OpenVibe Link app on this computer. <a href="https://openvibe.link">Get Link</a></p><form method="post" action="/new"><input type="hidden" name="desktop_hosting" value="link"><button class="oc-button" type="submit">Start the party</button> <a href="/" class="oc-muted">Not now</a></form></section>` });
}
if (req.query.radio) {
let chosen;
ddiff --git a/test/party-media.test.js b/test/party-media.test.js
iindex 030dce3..1947e16 100644
---- a/test/party-media.test.js
++++ b/test/party-media.test.js
@@@ -316,6 +316,7 @@ t('the home offers OpenVibe.Video\'s latest, and a pasted watch page plays its f
assert.match(home.text, /How it works/);
assert.match(home.text, /No OpenVibe machine is free right now/);
assert.match(home.text, /name="desktop" value="link" class="pty-host"><strong>On my computer<\/strong>/, 'hosting on my computer is one of two plain choices');
++ assert.match(home.text, /value="openvibe" class="pty-host" disabled aria-describedby="pty-openvibe-availability"/, 'On OpenVibe cannot be chosen while no OpenVibe machine is free');
// A pasted watch page: the confirmation names it, and the party plays its file with the page as its source.
const asks = await raw('GET', `/new?media=${encodeURIComponent(PAGE)}`, { cookie: cookieOf(ann) });