From a708883abbcb5d4233454908d10209d2e147dc03 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 24 Jan 2026 23:57:29 +0000
Subject: [PATCH] fix(embed): video sizing letterbox and logo accent

- Changed embed video sizing to `object-fit: cover` and `width: 100%` to eliminate black bars/letterboxing.
- Updated `embed.html` and `css/tailwind.source.css` to enforce these styles on `.video-modal__media`, `.video-modal__video`, and `#embedVideo`.
- Wired the embed logo accent color to use the instance configuration (`THEME_ACCENT_OVERRIDES` from `config/instance-config.js`) via a `--bitvid-accent` CSS variable injected in `js/embed.js`.
- Added unit and visual tests to verify styling and configuration logic.
---
 css/tailwind.source.css           | 47 +++++++++++++++++++++++++++++++
 embed.html                        |  2 +-
 js/embed.js                       | 10 +++++++
 tests/unit/embed-accent.test.mjs  | 10 +++++++
 tests/visual/embed-layout.spec.ts | 41 +++++++++++++++++++++++++++
 5 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 tests/unit/embed-accent.test.mjs
 create mode 100644 tests/visual/embed-layout.spec.ts

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index f025a372..a8b1c781 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -6099,3 +6099,50 @@
 .no-scrollbar::-webkit-scrollbar {
   display: none !important;
 }
+
+/* Embed & Video Modal Fixes */
+@layer components {
+  /* ensure the video fills the stage and doesn't show a black strip */
+  #embedVideo,
+  .video-modal__video,
+  .video-modal__video > .video-modal__media,
+  .video-modal__video video#modalVideo,
+  .video-modal__video .video-modal__media {
+    display: block;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: center center;
+    background: transparent !important;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  /* make sure the stage wrapper doesn’t add bottom padding/space */
+  .video-modal__stage,
+  .video-modal__video {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+  }
+
+  /* if there is an ambient canvas or overlay, ensure it doesn't change layout */
+  .video-modal__ambient,
+  .video-modal__ambient-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  /* Logo accent wiring */
+  .bv-logo__accent {
+    fill: var(--bitvid-accent, var(--logo-accent-color));
+  }
+}
diff --git a/embed.html b/embed.html
index b314547f..52634365 100644
--- a/embed.html
+++ b/embed.html
@@ -79,7 +79,7 @@
       >
         <video
           id="embedVideo"
-          class="h-full w-full object-contain bg-transparent"
+          class="h-full w-full object-cover bg-transparent"
           controls
           playsinline
           preload="metadata"
diff --git a/js/embed.js b/js/embed.js
index c374cd9f..9cdcbec3 100644
--- a/js/embed.js
+++ b/js/embed.js
@@ -4,6 +4,16 @@ import { convertEventToVideo, getDTagValueFromTags } from "./nostr/index.js";
 import { resolveVideoPointer } from "./utils/videoPointer.js";
 import { devLogger, userLogger } from "./utils/logger.js";
 import { nostrToolsReady } from "./nostrToolsBootstrap.js";
+import { THEME_ACCENT_OVERRIDES } from "../config/instance-config.js";
+
+// Set accent color from instance config
+try {
+  const accent = THEME_ACCENT_OVERRIDES?.light?.accent || "#ff6b6b";
+  document.documentElement.style.setProperty("--bitvid-accent", accent);
+} catch (e) {
+  // Fallback if config is missing or malformed
+  document.documentElement.style.setProperty("--bitvid-accent", "#ff6b6b");
+}
 
 // early in embed bootstrap (insert before any heavy init)
 const urlParams = new URLSearchParams(window.location.search);
diff --git a/tests/unit/embed-accent.test.mjs b/tests/unit/embed-accent.test.mjs
new file mode 100644
index 00000000..42f99f01
--- /dev/null
+++ b/tests/unit/embed-accent.test.mjs
@@ -0,0 +1,10 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { THEME_ACCENT_OVERRIDES } from '../../config/instance-config.js';
+
+test('embed accent color configuration', () => {
+  // Verify the config is readable and has the expected structure
+  assert.ok(THEME_ACCENT_OVERRIDES, 'THEME_ACCENT_OVERRIDES should be defined');
+  assert.ok(THEME_ACCENT_OVERRIDES.light, 'light theme overrides should be defined');
+  assert.equal(THEME_ACCENT_OVERRIDES.light.accent, '#540011', 'accent color should match requirement');
+});
diff --git a/tests/visual/embed-layout.spec.ts b/tests/visual/embed-layout.spec.ts
new file mode 100644
index 00000000..ae0a2e9b
--- /dev/null
+++ b/tests/visual/embed-layout.spec.ts
@@ -0,0 +1,41 @@
+import { expect, test } from "@playwright/test";
+import { THEME_ACCENT_OVERRIDES } from "../../config/instance-config.js";
+
+test.describe("embed layout and styling", () => {
+  test("embed video fills container and uses accent color", async ({ page }) => {
+    // Navigate to embed.html with a dummy pointer to trigger logic
+    await page.goto("/embed.html?pointer=nevent123", { waitUntil: "domcontentloaded" });
+
+    // 1. Verify CSS Variable
+    const accentColor = await page.evaluate(() => {
+      return getComputedStyle(document.documentElement).getPropertyValue("--bitvid-accent").trim();
+    });
+    // The configured color is #540011 (from config/instance-config.js)
+    const expectedAccent = THEME_ACCENT_OVERRIDES?.light?.accent || "#ff6b6b";
+    expect(accentColor).toBe(expectedAccent);
+
+    // 2. Verify Video Element Styling
+    const video = page.locator("#embedVideo");
+    await expect(video).toBeVisible();
+
+    const objectFit = await video.evaluate((el) => {
+      return window.getComputedStyle(el).objectFit;
+    });
+    expect(objectFit).toBe("cover");
+
+    const backgroundColor = await video.evaluate((el) => {
+      return window.getComputedStyle(el).backgroundColor;
+    });
+    // Transparent is typically rgba(0, 0, 0, 0)
+    expect(backgroundColor).toMatch(/rgba\(0,\s*0,\s*0,\s*0\)|transparent/);
+
+    // 3. Verify Logo Styling
+    const logoAccent = page.locator(".bv-logo__accent");
+    const fill = await logoAccent.evaluate((el) => {
+      return window.getComputedStyle(el).fill;
+    });
+
+    // #540011 in rgb is rgb(84, 0, 17)
+    expect(fill).toBe("rgb(84, 0, 17)");
+  });
+});