/* ============================================================ wuld.ink - ambient background player Fixed-bottom-bar chrome (2.5rem). Streams a curated YouTube playlist via youtube-nocookie.com. localStorage state persists across navigation; first-interaction listener works around browser autoplay policy hard-block (Chrome 66+ / Safari 11+ / Firefox 66+ all require user interaction before audio plays). Sealed surfaces (/_/*) and template files do not load this component; injection is site-wide except where explicitly skipped. K24k extension: - [loop off]/[loop one] toggle button (between volume + onoff) - [v] dismiss button (rightmost in bar) - dismissed state collapses bar to 8px accent hairline sliver; click anywhere on sliver to restore (also Enter/Space when focused via Tab) K24n extension: - seek slider (between track name + play button) for in-track skip/replay; wired to polling loop reading getCurrentTime / getDuration - MM:SS / MM:SS time readout (tabular-nums) right of slider; hides at 480px - loop-one fix: ENDED event never fires per-video in playlist mode (only at playlist-end), so loop detection moves to the polling loop near-end check at currentTime >= duration - 0.5s Markup (injected before on each surface): ============================================================ */ /* Add padding to so the fixed bar never overlays scroll-end content. When dismissed, the body class is added by JS to release the reserved space (sliver only needs ~8px). */ body { padding-bottom: 2.5rem; } body.ambient-dismissed { padding-bottom: 8px; } .ambient-player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; } .ambient-player[hidden] { display: none; } .ambient-iframe-wrap { position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .ambient-bar { display: flex; align-items: center; gap: var(--s-3); height: 2.5rem; padding-inline: var(--s-3); background-color: var(--c-bg); border-top: var(--bw-thin) solid var(--c-border); font-family: var(--font-mono); font-size: var(--t-xs, 0.75rem); color: var(--c-fg-muted); user-select: none; } /* Track name truncates with ellipsis; widest element steals leftover space. */ .ambient-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--ls-normal, 0); } /* Mono "button" register matches mode-toggle idiom. */ .ambient-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s-2); height: 1.5rem; background-color: transparent; border: var(--bw-thin) solid transparent; color: var(--c-fg-muted); font-family: var(--font-mono); font-size: var(--t-xs, 0.75rem); font-weight: 500; letter-spacing: var(--ls-normal, 0); line-height: 1; cursor: pointer; transition: color var(--t-fast, 120ms) var(--ease, ease), border-color var(--t-fast, 120ms) var(--ease, ease), background-color var(--t-fast, 120ms) var(--ease, ease); } .ambient-btn:hover { color: var(--c-fg); border-color: var(--c-border); } .ambient-btn:focus-visible { outline: var(--bw-base) solid var(--c-focus); outline-offset: 2px; color: var(--c-fg); } .ambient-btn[aria-pressed="true"] { color: var(--c-accent); border-color: var(--c-accent); } .ambient-btn[aria-pressed="true"]:hover { color: var(--c-accent-hover); border-color: var(--c-accent-hover); } /* Dismiss button is narrower (single glyph) and uses muted register so it doesn't compete with semantic toggles for attention. */ .ambient-dismiss { padding: 0 var(--s-1); min-width: 1.25rem; } /* "Tap to start" CTA pulse when autoplay is blocked but state.on is true. */ .ambient-btn.ambient-needs-tap { color: var(--c-accent); border-color: var(--c-accent); animation: ambient-pulse 1.4s ease-in-out infinite; } @keyframes ambient-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Brutalist range slider. */ .ambient-volume { flex-shrink: 0; width: 5rem; height: 1rem; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; } .ambient-volume::-webkit-slider-runnable-track { width: 100%; height: var(--bw-thick, 4px); background-color: var(--c-border); border: none; } .ambient-volume::-moz-range-track { width: 100%; height: var(--bw-thick, 4px); background-color: var(--c-border); border: none; } .ambient-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 0.6rem; height: 0.9rem; margin-top: -2px; background-color: var(--c-accent); border: var(--bw-thin) solid var(--c-accent); border-radius: 0; cursor: pointer; } .ambient-volume::-moz-range-thumb { width: 0.6rem; height: 0.9rem; background-color: var(--c-accent); border: var(--bw-thin) solid var(--c-accent); border-radius: 0; cursor: pointer; } .ambient-volume:focus-visible::-webkit-slider-thumb { outline: var(--bw-base) solid var(--c-focus); outline-offset: 2px; } .ambient-volume:focus-visible::-moz-range-thumb { outline: var(--bw-base) solid var(--c-focus); outline-offset: 2px; } /* ---------- K24n: seek slider + time readout ---------- */ /* Brutalist seek slider matching .ambient-volume register; wider (~6rem) because the track length is the load-bearing affordance. Polling loop updates the value on each tick when not being dragged. */ .ambient-seek { flex-shrink: 0; width: 6rem; height: 1rem; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; } .ambient-seek::-webkit-slider-runnable-track { width: 100%; height: var(--bw-thick, 4px); background-color: var(--c-border); border: none; } .ambient-seek::-moz-range-track { width: 100%; height: var(--bw-thick, 4px); background-color: var(--c-border); border: none; } .ambient-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 0.6rem; height: 0.9rem; margin-top: -2px; background-color: var(--c-accent); border: var(--bw-thin) solid var(--c-accent); border-radius: 0; cursor: pointer; } .ambient-seek::-moz-range-thumb { width: 0.6rem; height: 0.9rem; background-color: var(--c-accent); border: var(--bw-thin) solid var(--c-accent); border-radius: 0; cursor: pointer; } .ambient-seek:focus-visible::-webkit-slider-thumb { outline: var(--bw-base) solid var(--c-focus); outline-offset: 2px; } .ambient-seek:focus-visible::-moz-range-thumb { outline: var(--bw-base) solid var(--c-focus); outline-offset: 2px; } /* Mono tabular-nums readout so digits don't shift width as time advances. */ .ambient-time { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--t-xs, 0.75rem); font-variant-numeric: tabular-nums; color: var(--c-fg-muted); white-space: nowrap; } /* ---------- Sliver (dismissed state) ---------- */ /* Hidden by default; shown when data-dismissed="true". */ .ambient-sliver { display: none; width: 100%; height: 8px; background-color: var(--c-accent); border: none; cursor: pointer; transition: opacity var(--t-fast, 120ms) var(--ease, ease); } .ambient-sliver:hover { opacity: 0.7; } .ambient-sliver:focus-visible { outline: var(--bw-base) solid var(--c-focus); outline-offset: -2px; } /* When dismissed: bar disappears, sliver appears. */ .ambient-player[data-dismissed="true"] .ambient-bar { display: none; } .ambient-player[data-dismissed="true"] .ambient-sliver { display: block; } /* ---------- State-driven hide for [off] ---------- */ .ambient-player[data-state="off"] .ambient-btn:not(#ambient-onoff):not(#ambient-dismiss), .ambient-player[data-state="off"] .ambient-volume, .ambient-player[data-state="off"] .ambient-seek { opacity: 0.4; pointer-events: none; } .ambient-player[data-state="off"] .ambient-track, .ambient-player[data-state="off"] .ambient-time { opacity: 0.5; } /* ---------- Reader-mode + HC scoping ---------- */ [data-mode="reader"] .ambient-bar, body.legible .ambient-bar { background-color: var(--c-bg); border-top-color: var(--c-border); color: var(--c-fg-muted); } [data-mode="hc"] .ambient-bar, body.high-contrast .ambient-bar { border-top-width: var(--bw-base); background-color: var(--c-bg); } [data-mode="hc"] .ambient-sliver, body.high-contrast .ambient-sliver { height: 10px; border-top: var(--bw-base) solid var(--c-fg); } /* ---------- Reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { .ambient-btn.ambient-needs-tap { animation: none; } .ambient-btn { transition: none; } .ambient-sliver { transition: none; } } /* ---------- Mobile (<= 480px): collapse volume slider, tighten ---------- */ @media (max-width: 480px) { .ambient-bar { gap: var(--s-2); padding-inline: var(--s-2); font-size: 0.6875rem; } .ambient-track { max-width: 4rem; } .ambient-seek { width: 2.5rem; } .ambient-time { display: none; } .ambient-volume { width: 2.5rem; } .ambient-btn { padding: 0 var(--s-1); } .ambient-dismiss { min-width: 1rem; } }