openvibers/openvibe.mediahub Commits

Watch pages: the player's glow is no longer cut beside it, the navbar is solid over it at the top, the full network footer sits at the bottom of the window (#144)

OP OpenVibers committed 17 days ago · a8afabee7c · 2 files, +16 −2

Changes

ddiff --git a/public/css/video.css b/public/css/video.css
iindex f86b5fd..05f715a 100644
---- a/public/css/video.css
++++ b/public/css/video.css
@@@ -96,6 +96,18 @@
.ovv-main, .ovv-side { min-width: 0; }
.ovv-side { display: grid; gap: 18px; }
.ovv-player-wrap { position: relative; border-radius: 14px; background: #000; border: 1px solid var(--ovv-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
++/* The page around the watch pages (owner, 2026-10-27, on a screenshot: the glow "gets clipped on the left side", the
++ navbar's links sit on the glow, and the footer floated mid-screen):
++ - The glow spills out to the window's edges: the page clips sideways at the window, not at the grid (which cut it
++ beside the player), so it still never makes the page scroll sideways.
++ - At the top of the page the navbar is the page's own colour instead of see-through, so its links never sit on the
++ glow, whatever colour the picture is; the glow also starts a little below the player's top edge.
++ - The footer sits at the bottom of the window on a short page (the body is a column and the page grows). */
++html:has(main.ovv-page) { overflow-x: clip; }
++body:has(> main.ovv-page) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
++body:has(> main.ovv-page) > main.ovv-page { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
++body:has(> main.ovv-page) .openvibe-navbar.ovnav-top { background-color: var(--bg-primary, #0b1120); }
++.ovv-player-wrap > .ov-player-ambient { top: 24px; }
/* The player clips itself to the corners, so the wrapper can let the ambient glow (shared player.js) spill around it. */
.ovv-player-wrap > .ov-player, .ovv-player-wrap > video { border-radius: inherit; overflow: hidden; }
.ovv-player-wrap.ov-player-host { box-shadow: none; border-color: transparent; }
@@@ -308,7 +320,7 @@ a.ovv-channel-name:hover { text-decoration: underline; }
then up next and the stream's clips. One column on a narrower screen, in the order people use them: the player and
its actions, the tabs, up next, About, clips, comments (.ovv-col becomes display: contents and the pieces take an
order). Server-rendered and complete without JavaScript: the tabs then list one after another. */
--.ovv-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 28px; align-items: start; overflow-x: clip; } /* the player's glow and a closed menu's box never widen the page */
++.ovv-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px 28px; align-items: start; }
.ovv-watch--clip:not(:has(.ovv-col--side > *)) { grid-template-columns: minmax(0, 960px); justify-content: center; }
.ovv-col { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ovv-col > .ovv-panel, .ovv-col > .ovv-about { margin-top: 0; }
ddiff --git a/server/video/layout.js b/server/video/layout.js
iindex ffbf2d8..36f3b20 100644
---- a/server/video/layout.js
++++ b/server/video/layout.js
@@@ -86,7 +86,9 @@ ${render(o.body)}
logoutUrl: '/auth/logout?next={path}',
silentLogin: `${String(o.baseUrl).replace(/\/+$/, '')}/auth/login?silent=1&next={url}`,
},
-- footer: { service: 'media-hub', variant: 'compact', brandName: SITE_NAME, updates: '/updates' },
++ // The full footer (the network's sites, its legal links), as every browse page has (owner, 2026-10-27: "where are
++ // all those cool SEO links that … interconnect all our platforms"); the quiet line only where someone is mid-task.
++ footer: { service: 'media-hub', variant: /^\/(upload|record)(\/|$)/.test(String(o.path || '')) ? 'compact' : 'full', brandName: SITE_NAME, updates: '/updates' },
head,
body,
});