openvibers/openvibe.mediahub Commits

openvibe.download's hero is the drive in miniature, not the generic aura (#266)

OP OpenVibers committed 11 days ago · 1ac8ccdfae · 4 files, +66 −3

* openvibe.download's hero is the drive in miniature, not the generic aura (MOTION-1)

A folder and a video in your files, and the video's share link: who may open it, when it ends, how often it was
downloaded, and Take back. Every line is something the drive does. Theme tokens only, the kit's line icons, the link
card over the list the way the share sheet sits; full strength under the hero text on a phone.

* Budgets for the home's own picture: html 53, css 40 (9 brotli)

Changes

ddiff --git a/public/css/app.css b/public/css/app.css
iindex 662e915..554e351 100644
---- a/public/css/app.css
++++ b/public/css/app.css
@@@ -91,3 +91,27 @@ button.sc-btn.sc-primary { border: 0; }
.ovk-label { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
color: var(--text-secondary, #a8b3c7); background: color-mix(in srgb, var(--text-primary, #e6edf7) 7%, transparent); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.ovk-label--adult { color: var(--warning-text, #fbbf24); border-color: color-mix(in srgb, var(--warning-text, #fbbf24) 45%, transparent); background: color-mix(in srgb, var(--warning-text, #fbbf24) 9%, transparent); }
++
++/* ── The home's picture: the drive in miniature (MOTION-1, 2026-11-02) ─────────────────────────────────────────────
++ Theme tokens only, so it reads in every look; a card for the files and one for the share link, the link card
++ overlapping the files a little, the way the share sheet sits over the list. */
++.dl-scene { position: relative; width: min(100%, 360px); margin: 0 auto; padding-bottom: 8px; }
++.dl-scene svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
++.dl-files, .dl-share { border-radius: 16px; border: 1px solid var(--border, rgba(255, 255, 255, .1)); background: var(--bg-card, #141c2a); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
++.dl-files { padding: 14px; display: grid; gap: 8px; }
++.dl-files-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-muted, #93a0b4); }
++.dl-files-head b { font-size: 14px; color: var(--text-primary, #e8ecf3); }
++.dl-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-secondary, #0f1522); color: var(--text-secondary, #b6c0d2); }
++.dl-file > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
++.dl-file b { font-size: 14px; color: var(--text-primary, #e8ecf3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
++.dl-file small { font-size: 12px; color: var(--text-muted, #93a0b4); }
++.dl-file.is-on { outline: 2px solid color-mix(in srgb, var(--accent, #3b82f6) 60%, transparent); outline-offset: -2px; }
++.dl-file.is-on > svg:last-child { color: var(--accent, #3b82f6); }
++.dl-share { position: relative; margin: -14px 0 0 auto; width: 82%; padding: 14px; display: grid; gap: 8px; font-size: 13px; color: var(--text-secondary, #b6c0d2); }
++.dl-share-url { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent); color: var(--text-primary, #e8ecf3); font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 0; }
++.dl-share-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
++.dl-share-row { display: flex; align-items: center; gap: 8px; }
++.dl-share-row svg { color: var(--text-muted, #93a0b4); }
++.dl-share-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border, rgba(255, 255, 255, .1)); }
++.dl-share-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted, #93a0b4); }
++.dl-share-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border, rgba(255, 255, 255, .14)); color: var(--text-primary, #e8ecf3); font-weight: 600; font-size: 12.5px; }
ddiff --git a/server/http/pages.js b/server/http/pages.js
iindex 002b4f1..308a046 100644
---- a/server/http/pages.js
++++ b/server/http/pages.js
@@@ -32,6 +32,7 @@ const { pipeline } = require('stream/promises');
const ovServe = require('openvibe-shared/serve');
const frame = require('openvibe-shared/frame');
const showcase = require('openvibe-shared/showcase');
++const kit = require('openvibe-shared/kit');
const cache = require('openvibe-shared/cache-policy');
const seo = require('openvibe-shared/seo');
const { asyncRouter } = require('./router');
@@@ -59,6 +60,24 @@ const SAFETY_RULES = [
];
const REPORT_NOTE = 'Every share page has a Report form. Three different people reporting a share — or one report of illegal content — suspends it at once and puts it in front of OpenVibe staff.';
++/**
++ * The home's picture (MOTION-1, 2026-11-02: it drew the generic aura): the drive in miniature. A folder and a video in
++ * your files, and the video's share link: who may open it, when it ends, how often it was downloaded, and the button
++ * that takes it back. Every line is something the drive really does.
++ */
++function driveScene() {
++ const ic = (n) => kit.icon(n);
++ return `<div class="dl-scene" aria-hidden="true">
++<div class="dl-files"><div class="dl-files-head"><b>Your files</b><span>25 GB free</span></div>
++<div class="dl-file">${ic('folder')}<span><b>Trip to Lisbon</b><small>12 files</small></span></div>
++<div class="dl-file is-on">${ic('video')}<span><b>holiday-cut.mp4</b><small>1.2 GB</small></span>${ic('link')}</div></div>
++<div class="dl-share"><div class="dl-share-url">${ic('link')}<span>openvibe.download/s/k3x9…</span></div>
++<div class="dl-share-row">${ic('user')}<span>sam, riley</span></div>
++<div class="dl-share-row">${ic('clock')}<span>ends in 7 days</span></div>
++<div class="dl-share-foot"><span>${ic('download')} 3 downloads</span><span class="dl-share-btn">Take back</span></div></div>
++</div>`;
++}
++
function createPageRoutes(ctx) {
const { config, s, drive, uploads, media, syncKeys, drops } = ctx;
const r = asyncRouter();
@@@ -175,6 +194,7 @@ ${notice(p && p.detail ? p.detail : 'You are over the limit for this.', 'warn')}
? [{ label: 'Your files', href: '/files', primary: true }, { label: 'Back up a folder', href: '/sync' }]
: [{ label: 'Sign in with OpenVibe', href: '/auth/login?next=%2Ffiles', primary: true }, { label: 'How backups work', href: '#sc-back-up-a-folder-from-your-computer' }],
note: 'Open source. The bytes live in OpenVibe.Media; this service holds the names, the folders and the share links.',
++ aside: { html: driveScene() },
});
const faq = homeFaq();
page(req, res, {
ddiff --git a/test/home-scene.test.js b/test/home-scene.test.js
nnew file mode 100644
iindex 0000000..111b62c
---- /dev/null
++++ b/test/home-scene.test.js
@@@ -0,0 +1,19 @@
++'use strict';
++// openvibe.download's home draws its own picture (MOTION-1, 2026-11-02): the drive in miniature (a file, its share
++// link, who may open it, when it ends, its downloads, Take back), not the generic aura the showcase draws by default.
++const assert = require('assert');
++const { boot, check, done } = require('./helpers/boot');
++
++(async () => {
++ const t = await boot();
++ try {
++ await check('the home\'s hero is the drive in miniature, hidden from assistive tech, and no aura', async () => {
++ const r = await t.get('/');
++ assert.strictEqual(r.status, 200);
++ assert.match(r.text, /<div class="dl-scene" aria-hidden="true">/);
++ assert.match(r.text, /holiday-cut\.mp4[\s\S]*?Take back/);
++ assert.ok(!/sc-aura-glow/.test(r.text), 'no generic aura');
++ });
++ } finally { await t.close(); }
++ done();
++})().catch((e) => { console.error(e); process.exit(1); });
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex 08eeb61..eb114d2 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -14,15 +14,15 @@ const { measure, check, format } = require('openvibe-shared/perf-budget');
// Budgets are set from the numbers measured on 2026-10-08 (the real ones, fresh database), rounded up with about 10%
// headroom; file counts are the measured counts and external files stay at 0.
const BUDGETS = {
-- htmlRawKB: 51, // 50.3 with openvibe-shared 4.66.0: the mark with depth and motion, ov-fx loaded on request (2026-10-31); 49.4 with openvibe-shared 4.53.0: the footer's columns fold on phones (2026-10-30); 44.2 with the Part of OpenVibe section (Shared 4.13, 2026-10-26); measured 39.4 on 10-22: the home gained the backup command, the limits table, six questions (and their
++ htmlRawKB: 53, // 52.5 (2026-11-02: the home's own picture, the drive in miniature, MOTION-1); 50.3 with openvibe-shared 4.66.0: the mark with depth and motion, ov-fx loaded on request (2026-10-31); 49.4 with openvibe-shared 4.53.0: the footer's columns fold on phones (2026-10-30); 44.2 with the Part of OpenVibe section (Shared 4.13, 2026-10-26); measured 39.4 on 10-22: the home gained the backup command, the limits table, six questions (and their
// FAQPage JSON-LD) and next steps on the network; was 29.7 at 27.5
htmlBrotliKB: 12, // 10.6 openvibe-shared 4.22.0: the navbar's magnifier search button and More dropdown (search.js and loading.js load only when used); 9.4 on 10-22 (the same sections); was 7.7 at 7.1
jsFiles: 6, // 6: /shared/ov-glyphs.js in place of Font Awesome's stylesheet (2026-11-01, plan L54 K4); was: 5 (theme-loader, web-runtime, navbar, footer, boost: openvibe-shared/shell)
jsRawKB: 401, // 400.5 with openvibe-shared 4.80.0: 33 more solid glyphs in ov-glyphs.js (2026-11-01); 393.9 with openvibe-shared 4.77.0: the navbar loads the glyphs when a page first shows an icon (2026-11-01); 393: 393: /shared/ov-glyphs.js in place of Font Awesome (2026-11-01, plan L54 K4; Font Awesome's CSS and font were external, uncounted, and heavier); 328.2 openvibe-shared 4.70.0 (2026-11-01: the app bar, busy(), skeletons, view transitions); 324.8 with openvibe-shared 4.66.0: the mark with depth and motion, ov-fx loaded on request (2026-10-31); 323.2 with openvibe-shared 4.59.0: the Pair mark beside the name, set in the brand face (2026-10-31); 321.1 with openvibe-shared 4.53.0: the footer's columns fold on phones (2026-10-30); 318.1 with openvibe-shared 4.52.0: the Dock's loader and its Chats tab (2026-10-30); 315.6 with openvibe-shared 4.48.0 (the site switcher on the mark, the menu's Start tab and quick tools; Kit's touch hit areas and the phone navbar fix, 4.44-4.47.3); 307.8 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 300.5 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 293 openvibe-shared 4.22.0: the navbar's magnifier search button and More dropdown (search.js and loading.js load only when used); 287.2 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 273.2 with Shared 4.15.0 (2026-10-27: the compact footer opens into the whole one, the pulse line); 264.3 with Shared 4.13.0; 239.8
jsBrotliKB: 98, // 97.6 with openvibe-shared 4.80.0 (2026-11-01); 96.1 with openvibe-shared 4.77.0 (2026-11-01); 96: 96: /shared/ov-glyphs.js in place of Font Awesome (2026-11-01, plan L54 K4); 80.2 openvibe-shared 4.70.0 (2026-11-01: the app bar, busy(), skeletons, view transitions); 79.5 with openvibe-shared 4.59.0: the Pair mark beside the name, set in the brand face (2026-10-31); 78.2 with openvibe-shared 4.52.0: the Dock's loader and its Chats tab (2026-10-30); 77.6 with openvibe-shared 4.48.0 (the site switcher on the mark, the menu's Start tab and quick tools; Kit's touch hit areas and the phone navbar fix, 4.44-4.47.3); 76.1 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 74.2 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 70.5 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 67.9 Shared 4.15.0; 65.3 Shared 4.12.0: the light/dark switch, the seasonal mark and the theme pairs; 56.5
cssFiles: 2, // 2 (app.css + the cached /shared/showcase.css)
-- cssRawKB: 37, // 36.3 (2026-11-02: content label chips on cards, watch pages and pictures, L1; the owners' picker is its own sheet, css/labels.css); 34.9 with 2026-11-01: phone table cards (2026-11-01); 33.5 with openvibe-shared 4.48.0 (the site switcher on the mark, the menu's Start tab and quick tools; Kit's touch hit areas and the phone navbar fix, 4.44-4.47.3); 29 openvibe-shared 4.26.1 (hero visual); 23.6 with Shared 4.13.0 (2026-10-26: account links); measured 16.6 (shared 4.1.8: four steps two by two); was 16.5 at 15.0
-- cssBrotliKB: 8, // 7.5 with 2026-11-01: phone table cards (2026-11-01); 7.2 with openvibe-shared 4.48.0 (the site switcher on the mark, the menu's Start tab and quick tools; Kit's touch hit areas and the phone navbar fix, 4.44-4.47.3); 5.4 with Shared 4.13.0 (2026-10-26: account links); 3.7; 4.2 with the drive previews (10-15)
++ cssRawKB: 40, // 39.1 (2026-11-02: the drive scene's styles, MOTION-1); 36.3 (2026-11-02: content label chips on cards, watch pages and pictures, L1; the owners' picker is its own sheet, css/labels.css); 34.9 with 2026-11-01: phone table cards (2026-11-01); 33.5 with openvibe-shared 4.48.0 (the site switcher on the mark, the menu's Start tab and quick tools; Kit's touch hit areas and the phone navbar fix, 4.44-4.47.3); 29 openvibe-shared 4.26.1 (hero visual); 23.6 with Shared 4.13.0 (2026-10-26: account links); measured 16.6 (shared 4.1.8: four steps two by two); was 16.5 at 15.0
++ cssBrotliKB: 9, // 8.4 (2026-11-02: the drive scene, MOTION-1); 7.5 with 2026-11-01: phone table cards (2026-11-01); 7.2 with openvibe-shared 4.48.0 (the site switcher on the mark, the menu's Start tab and quick tools; Kit's touch hit areas and the phone navbar fix, 4.44-4.47.3); 5.4 with Shared 4.13.0 (2026-10-26: account links); 3.7; 4.2 with the drive previews (10-15)
externalFiles: 0, // 0
};