Merge pull request #1653 from PR0M3TH3AN/fix/embed-video-fill-and-logo-accent-9972861085055590695

fix(embed): resolve video letterboxing and wire logo accent color

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));
+  }
+}

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"

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);

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');
+});

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)");
+  });
+});