feature: Home Page & Footer Mobile Friendly

DeepDrftPublic/Interop/layout/spacer.ts

@@ -0,0 +1,46 @@
+/**
+ * Player-height spacer observer.
+ *
+ * The audio player docks `position: fixed` to the viewport bottom, so it sits
+ * outside normal flow and would overlap page content. A spacer div in the layout
+ * reserves the equivalent space — but the player's height is not constant: it
+ * reflows across the four breakpoints and grows when an error banner appears. A
+ * static height can't track that, so we mirror the player's live border-box
+ * height into the `--player-height` custom property on :root and let the spacer
+ * read it. One observer at a time, re-pointed on each `observe` call; the var
+ * resets to 0 on `unobserve` (player minimized / disposed) so the spacer
+ * collapses.
+ */
+
+const HEIGHT_VAR = '--player-height';
+let observer: ResizeObserver | null = null;
+
+function writeHeight(px: number): void {
+    // Round up so sub-pixel heights never leave a hairline of overlap.
+    document.documentElement.style.setProperty(HEIGHT_VAR, `${Math.ceil(px)}px`);
+}
+
+export function observe(element: Element): void {
+    unobserve();
+    if (!element) return;
+
+    observer = new ResizeObserver(entries => {
+        const entry = entries[0];
+        if (!entry) return;
+        // Prefer the border-box measurement; fall back to contentRect on the
+        // (older) engines that don't populate borderBoxSize.
+        const box = entry.borderBoxSize?.[0];
+        writeHeight(box ? box.blockSize : entry.contentRect.height);
+    });
+    observer.observe(element);
+
+    // Seed synchronously so the spacer is correct on this frame, before the
+    // first ResizeObserver callback fires.
+    writeHeight(element.getBoundingClientRect().height);
+}
+
+export function unobserve(): void {
+    observer?.disconnect();
+    observer = null;
+    writeHeight(0);
+}