openvibers/openvibe.chat Commits
Party start: tappable choices, an honest disabled On OpenVibe, Link named (#417)
Changes
@@@ -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); } }@@@ -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;@@@ -316,6 +316,7 @@ t('the home offers OpenVibe.Video\'s latest, and a pasted watch page plays its fassert.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) });
@@ -71,5 +71,11 @@
@@ -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 { 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 strong { font-size: 1.02rem; }
.pty-host span { font-size: .86rem; color: var(--text-secondary, #9aa3b2); }
.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: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); } }
@media (max-width: 520px) { .pty-host-choice { grid-template-columns: minmax(0, 1fr); } }
@@ -157,9 +157,8 @@ function createPartyRoutes({ config }) {
@@ -157,9 +157,8 @@ function createPartyRoutes({ config }) {
<h2 class="pty-start-h">Start a shared computer</h2>
<h2 class="pty-start-h">Start a shared computer</h2>
<div class="pty-host-choice">
<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="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>
</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>`;
</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
const start = signedIn
? `<form class="pty-paste" method="get" action="/new">
? `<form class="pty-paste" method="get" action="/new">
@@ -215,7 +214,7 @@ ${grid}
@@ -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,
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>' });
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,
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) {
if (req.query.radio) {
let chosen;
let chosen;
@@ -316,6 +316,7 @@ t('the home offers OpenVibe.Video\'s latest, and a pasted watch page plays its f
@@ -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, /How it works/);
assert.match(home.text, /No OpenVibe machine is free right now/);
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, /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.
// 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) });
const asks = await raw('GET', `/new?media=${encodeURIComponent(PAGE)}`, { cookie: cookieOf(ann) });