/* ============================================================================= MajiMedia 2.63 — Chat Container Width Override chat_container.css Sizes the live chat rail so Chat v3 message rows fit beside the video. The upstream file sized the rail at 597px, derived from 50x50px badges: 7 badges x 50px (350px) + gaps + 125px username + 36px timestamp + 32px avatar + padding ~= 597px Measured in a headless browser, that took 41-43% of the row on a 1366-1536px laptop, which is what "chat too wide / video too small" was. chat_shell.css now renders in-message badges at 32px instead, which brings the same content down to ~460px, so the rail is 470px here. Loaded from class.generate.php on live watch pages only (gated on ?l=), which is why the selectors below are NOT page-scoped. ============================================================================= */ /* ── Why these selectors are unscoped ───────────────────────────────────────── * * Not because `.tpl_view` is unavailable — an earlier revision of this file * claimed that, and it was wrong. `tpl_view` is absent from (tpl_body.tpl * only ever adds tpl_files_edit / tpl_files) but IS present on `#wrapper`, so * the theme's `.tpl_view …` rules do apply. They are simply unnecessary here: * this stylesheet is emitted only on live watch pages (class.generate.php gates * the on ?l=), so its presence is already the scope. * * The base declarations these override are: * * .page_holder_left { width: calc(70% - 10px); float: left } * .page_holder_right { width: 30%; float: right } * #vs-chat-wrap { width: 30%; float: right } (custom.min.css) * * The chat and "up next" both float right, so they stack into one right-hand * rail beside the video. Note that custom.min.css's own `#vs-chat-wrap` media * queries are NOT .tpl_view-scoped and therefore DO fire — which means that * between 700px and 1200px the row was already 70% + 320px + 30%, i.e. * overflowing, and the chat dropped below the video before any of this file was * involved. The rules below fix that case too by sizing all three together. * * ─────────────────────────────────────────────────────────────────────────── */ /* ── Desktop / tablet: one coherent rail ───────────────────────────────────── * * min(470px, 32%) rather than a flat 597px. The rail's real estate is not the * viewport: .page_holder sits inside .inner-block.with-menu, which is * calc(100% - 300px) with the left nav pushed open and calc(100% - 60px) when * collapsed, less 18px padding each side. A fixed 597px consumes wildly * different fractions depending on nav state and zoom — on a 1200-1400px window * it left the video around 250px wide. * * Capping at 32% resolves to the full 470px whenever the row can spare it * (container >= ~1470px) and shrinks proportionally when it cannot, so the video * always keeps ~68%. Measured result: 1920 -> 1374px video / 470px chat; * 1536 -> ~990/470; 1366 -> ~872/418. Where the rail is narrower than the badge * strip needs, the strip collapses into .vs-badge-overflow-pill — which is what * that pill in chat_message_renderer.css exists for. * * The same expression appears three times — the rail, the rail's second row, and * what the video column gives back. Keep them in sync. */ @media (min-width: 881px) { #vs-chat-wrap { width: min(470px, 32%) !important; min-width: 0 !important; max-width: 470px !important; flex-shrink: 0; /* Explicit height is required, not cosmetic. custom.min.css gives the * wrapper `min-height:300px` and no height, while class.view.php builds the * iframe with height="100%". A percentage height against an auto-height * parent is circular, so the browser falls back to the 300px minimum and the * panel renders as a stub beside a full-size video — the message list ends up * a few rows tall with the composer crammed under it. * Viewport-relative so it still fits a 768px-tall laptop; tune freely. */ height: min(72vh, 780px) !important; min-height: 420px !important; } /* The video column gives back exactly what the rail takes, plus a 16px gutter. */ .page_holder_left { width: calc(100% - min(470px, 32%) - 16px) !important; } /* Keep the rail a single column so "up next" lines up underneath the chat panel instead of stepping in at 30% and dropping below it. */ .page_holder_right { width: min(470px, 32%) !important; } /* ── Related-streams block under the chat ──────────────────────────── * This holds the Related streams / From / tabs and the * "no results" panel. Two problems on the watch page: * * 1. It began at exactly the pixel the chat ended — zero gap — so the * tab strip read as part of the chat box rather than a separate * section. * 2. .page_holder_right carries 15px of horizontal padding, so its * contents sat 15px inside the chat on BOTH sides: the strip spanned * 1024-1455 against the chat's 1009-1470. Every row below the chat * was visibly narrower than the chat above it. * * Dropping the padding lines the block up with the chat/viewer column, and * the margin gives it room to breathe. Scoped to the watch page (.tpl_view * is on #wrapper) because .page_holder_right is a shared layout class used * on other pages that still want the stock inset. */ #wrapper.tpl_view .page_holder_right { margin-top: 20px; padding-left: 0 !important; padding-right: 0 !important; } } /* ── Mobile (<=880px): chat drops below the video, everything full width ───── * custom.min.css already sets #vs-chat-wrap to 100% here. The theme's matching * column rules live at max-width:880px too, but its unscoped fallback does not * arrive until 700px, so the columns are restated here to cover the 700-880px * band consistently. */ @media (max-width: 880px) { #vs-chat-wrap { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .page_holder_left, .page_holder_right { width: 100% !important; } /* Same alignment fix as the desktop block above — stacked, the related block still sat 15px inside the full-width chat and flush against it. */ #wrapper.tpl_view .page_holder_right { margin-top: 20px; padding-left: 0 !important; padding-right: 0 !important; } } /* ── Stream window height cap ───────────────────────────────────────────────── The player takes its height from an aspect-ratio padding hack: #view-player is padding-top:56.25% of its own width, so on a wide screen the height is whatever 16:9 of the full content column happens to be. At 1920x1080 that is 773px, and on a wide-but-short window (1920x800, or any laptop with browser chrome) the player alone runs past the fold — the stream title, the Follow/Subscribe buttons and the description all start below the visible area, so the page opens looking like nothing but video. Capping the WIDTH is what caps the height here: constraining the width feeds straight back through the 56.25% padding, so the box shrinks while staying exactly 16:9. Setting max-height instead would leave the width alone and just letterbox more black inside a box that is no longer 16:9. 70vh is the budget for the player itself, leaving room for the header (76px) plus the title and action row beneath it. 70vh * 16/9 = the matching width. Deliberately NOT centred: left-aligned keeps the player's left edge lined up with the title, channel avatar and buttons directly below it. On screens where 16:9 of the column is already under 70vh (most laptops at 1366x768) max-width never binds and nothing changes at all. #vs-chat-wrap follows automatically — vsAlignChat() in class.view.php reads the player's rendered height on load, on resize and from a ResizeObserver. */ /* 92vh, not 70vh. The cap exists to stop a pathologically short window from producing a player taller than the screen — it is NOT meant to shape the normal layout. At 70vh it bound at ordinary sizes and shrank the player's WIDTH (the cap is a max-width feeding the aspect box), which pulled it away from the chat rail: 110px of dead space at 2560x1440, 190px at 1920x900 and 323px at 1920x800, against a natural 16px gutter when the player fills its column. At 92vh it no longer binds at any realistic window size, so the player stretches to the full column and the gap settles at that 16px. */ .video_player_holder.local { max-width: calc(92vh * var(--vs-player-ar, 1.77778)); } /* ── Stream window shape ────────────────────────────────────────────────────── init0.min.css shapes the player with `.vjs-hd{padding-top:56.25%}` — a hard-coded 16:9 box, regardless of what the broadcaster actually sends. This stream publishes 1920x1008 (DAR 40:21, 1.905:1), and ffmpeg cropdetect over the recording puts real picture across ~1850 of the 1920 columns, so the frame is full — nothing is pillarboxed at the source. Forcing that 1.905:1 picture into a 1.778:1 box is what made video.js letterbox it. The shape now comes from --vs-player-ar (width/height), which vsFitPlayer() in class.view.php sets from the video element's real videoWidth/videoHeight once metadata arrives. Driving both the padding hack and the height cap from the same variable keeps them consistent: a 40:21 stream gets a 40:21 window and a 16:9 stream still gets 16:9, with no per-stream configuration. The 1.77778 fallback is the stock 16:9, used until metadata loads and for any player where dimensions never become available. */ #view-player.vjs-hd { padding-top: calc(100% / var(--vs-player-ar, 1.77778)); } /* ── Fullscreen control: shiny gold icon ────────────────────────────────────── video.js already ships a working fullscreen button as the last child of .vjs-control-bar, which `justify-content:flex-end` parks in the bottom-right corner of the stream window — so this restyles that control rather than adding a second button beside it. The behaviour (player.requestFullscreen(), keyboard, and the exit path) stays exactly as video.js implements it. The stock glyph is an icon-font character on :before; it is switched off and replaced with the gold PNG drawn to match the chat toolbar set. The control is 40x34, so the artwork is drawn at 22px and centred, the same size the toolbar icons render at. .vjs-fullscreen is the class video.js puts on the player while it IS fullscreen — that state gets the inward-facing "exit" variant, mirroring the stock skin's two-icon behaviour. */ .video-js .vjs-fullscreen-control, .vjs-default-skin .vjs-fullscreen-control { background-image: url("/f_scripts/fe/img/chat/gold_fullscreen_50x50.png"); background-repeat: no-repeat; background-position: center center; background-size: 22px 22px; cursor: pointer; } .video-js .vjs-fullscreen-control:before, .vjs-default-skin .vjs-fullscreen-control:before { content: "" !important; display: none !important; } .video-js.vjs-fullscreen .vjs-fullscreen-control, .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control { background-image: url("/f_scripts/fe/img/chat/gold_fullscreen_exit_50x50.png"); } /* Matches the lift the gold chat buttons get on hover. */ .video-js .vjs-fullscreen-control:hover, .vjs-default-skin .vjs-fullscreen-control:hover { filter: brightness(1.12); }