feat: add dark mode and style baking support for Samsung TV compatibility

src/server.ts

@@ -25,6 +25,7 @@ const CONFIG = {
 interface URLItem {
   url: string;
   durationSec: number;
+  forceDarkMode?: boolean;
 }
 
 interface View {
@@ -36,6 +37,7 @@ interface View {
   cacheTtlSec: number;
   viewportWidth: number;
   viewportHeight: number;
+  bakeStyles: boolean;
   createdAt: number;
 }
 
@@ -48,6 +50,7 @@ interface ViewRow {
   cache_ttl_sec: number;
   viewport_width: number;
   viewport_height: number;
+  bake_styles: number;
   created_at: number;
 }
 
@@ -59,6 +62,7 @@ interface CreateViewBody {
   cacheTtlSec?: number;
   viewportWidth?: number;
   viewportHeight?: number;
+  bakeStyles?: boolean;
 }
 type UpdateViewBody = Partial<CreateViewBody>;
 
@@ -96,7 +100,7 @@ interface DeviceEntry {
 // DATABASE
 // ═══════════════════════════════════════════════════════════════
 
-const db = new Database("views.db", { create: true });
+const db = new Database("/app/data/views.db", { create: true });
 
 db.run(`
   CREATE TABLE IF NOT EXISTS views (
@@ -108,6 +112,7 @@ db.run(`
     cache_ttl_sec         INTEGER NOT NULL DEFAULT 60,
     viewport_width        INTEGER NOT NULL DEFAULT 1920,
     viewport_height       INTEGER NOT NULL DEFAULT 1080,
+    bake_styles           INTEGER NOT NULL DEFAULT 0,
     created_at            INTEGER NOT NULL DEFAULT (unixepoch())
   )
 `);
@@ -122,6 +127,9 @@ try {
 try {
   db.run("ALTER TABLE views ADD COLUMN viewport_height INTEGER NOT NULL DEFAULT 1080");
 } catch {}
+try {
+  db.run("ALTER TABLE views ADD COLUMN bake_styles INTEGER NOT NULL DEFAULT 0");
+} catch {}
 
 function rowToView(row: ViewRow): View {
   return {
@@ -133,6 +141,7 @@ function rowToView(row: ViewRow): View {
     cacheTtlSec: row.cache_ttl_sec ?? 60,
     viewportWidth: row.viewport_width ?? 1920,
     viewportHeight: row.viewport_height ?? 1080,
+    bakeStyles: row.bake_styles === 1,
     createdAt: row.created_at,
   };
 }
@@ -150,8 +159,8 @@ function dbLoad(id: string): View | null {
 
 function dbInsert(v: View): void {
   db.run(
-    `INSERT INTO views (id,name,urls,method,meta_refresh_enabled,cache_ttl_sec,viewport_width,viewport_height,created_at)
-     VALUES (?,?,?,?,?,?,?,?,?)`,
+    `INSERT INTO views (id,name,urls,method,meta_refresh_enabled,cache_ttl_sec,viewport_width,viewport_height,bake_styles,created_at)
+     VALUES (?,?,?,?,?,?,?,?,?,?)`,
     [
       v.id,
       v.name,
@@ -161,6 +170,7 @@ function dbInsert(v: View): void {
       v.cacheTtlSec,
       v.viewportWidth,
       v.viewportHeight,
+      v.bakeStyles ? 1 : 0,
       v.createdAt,
     ],
   );
@@ -168,7 +178,7 @@ function dbInsert(v: View): void {
 
 function dbUpdate(v: View): void {
   db.run(
-    "UPDATE views SET name=?,urls=?,method=?,meta_refresh_enabled=?,cache_ttl_sec=?,viewport_width=?,viewport_height=? WHERE id=?",
+    "UPDATE views SET name=?,urls=?,method=?,meta_refresh_enabled=?,cache_ttl_sec=?,viewport_width=?,viewport_height=?,bake_styles=? WHERE id=?",
     [
       v.name,
       JSON.stringify(v.urls),
@@ -177,6 +187,7 @@ function dbUpdate(v: View): void {
       v.cacheTtlSec,
       v.viewportWidth,
       v.viewportHeight,
+      v.bakeStyles ? 1 : 0,
       v.id,
     ],
   );
@@ -345,6 +356,7 @@ class PagePool {
   async resetPage(page: Page): Promise<boolean> {
     try {
       await page.goto("about:blank", { waitUntil: "domcontentloaded", timeout: 5000 });
+      await page.emulateMediaFeatures([]);
 
       // Clear storage via CDP — avoids opaque-origin SecurityError
       const client = await page.createCDPSession();
@@ -520,13 +532,19 @@ function drainRenderQueue(): void {
 
 async function renderViewToCache(view: View, urlIndex: number, key: string): Promise<string> {
   const urlItem = view.urls[urlIndex];
+  const forceDarkMode = urlItem.forceDarkMode ?? false;
+  const bakeStyles = view.bakeStyles ?? false;
 
   let body: string;
   if (view.method === "mjpeg") {
-    const jpeg = await renderScreenshotFrame(urlItem.url, view.viewportWidth, view.viewportHeight);
+    const jpeg = await renderScreenshotFrame(
+      urlItem.url, view.viewportWidth, view.viewportHeight, forceDarkMode,
+    );
     body = jpeg.toString("base64");
   } else {
-    body = await renderSSR(urlItem.url, view.viewportWidth, view.viewportHeight);
+    body = await renderSSR(
+      urlItem.url, view.viewportWidth, view.viewportHeight, forceDarkMode, bakeStyles,
+    );
   }
 
   const now = Date.now();
@@ -704,6 +722,94 @@ async function resolveCSSImports(cssText: string, baseUrl: string, depth = 0): P
   return cssText;
 }
 
+// ═══════════════════════════════════════════════════════════════
+// COMPUTED STYLE BAKING
+// ═══════════════════════════════════════════════════════════════
+
+/**
+ * Bake computed styles into inline style attributes.
+ * This ensures styles work on browsers with limited CSS support (e.g., Samsung TV).
+ * Only bakes styles that differ from the element's default computed styles.
+ */
+async function bakeComputedStyles(page: Page): Promise<void> {
+  await page.evaluate((): void => {
+    // Create a dummy element to get default styles for comparison
+    const dummy = document.createElement("div");
+    dummy.style.cssText = "position:absolute;visibility:hidden;";
+    document.body.appendChild(dummy);
+
+    const computedProperties = [
+      // Layout
+      "display", "position", "top", "right", "bottom", "left",
+      "width", "height", "min-width", "min-height", "max-width", "max-height",
+      "margin", "margin-top", "margin-right", "margin-bottom", "margin-left",
+      "padding", "padding-top", "padding-right", "padding-bottom", "padding-left",
+      // Flex/Grid
+      "flex", "flex-direction", "flex-wrap", "flex-flow", "flex-grow", "flex-shrink", "flex-basis",
+      "justify-content", "align-items", "align-content", "align-self", "gap", "row-gap", "column-gap",
+      "grid", "grid-template", "grid-template-columns", "grid-template-rows", "grid-area",
+      // Box model
+      "box-sizing", "border", "border-radius", "border-top", "border-right", "border-bottom", "border-left",
+      "border-width", "border-style", "border-color",
+      // Colors & Background
+      "color", "background", "background-color", "background-image", "background-size", "background-position",
+      "background-repeat", "background-attachment",
+      // Typography
+      "font", "font-family", "font-size", "font-weight", "font-style", "font-variant",
+      "line-height", "text-align", "text-decoration", "text-transform", "letter-spacing", "word-spacing",
+      "white-space", "overflow-wrap", "word-break",
+      // Visual
+      "opacity", "visibility", "z-index", "overflow", "overflow-x", "overflow-y",
+      "box-shadow", "text-shadow", "transform", "transform-origin",
+      // List/Table
+      "list-style", "border-collapse", "border-spacing",
+    ];
+
+    function getDefaultValue(prop: string): string {
+      return window.getComputedStyle(dummy).getPropertyValue(prop);
+    }
+
+    function shouldBake(prop: string, value: string): boolean {
+      if (!value || value === "none" || value === "auto" || value === "normal") return false;
+      if (value === "0px" || value === "0" || value === "rgba(0, 0, 0, 0)") return false;
+      if (value.includes("initial") || value.includes("inherit")) return false;
+      return value !== getDefaultValue(prop);
+    }
+
+    // Walk all elements and bake computed styles
+    const elements = document.querySelectorAll<HTMLElement>("*");
+    for (const el of elements) {
+      // Skip script, style, meta, link tags
+      const tag = el.tagName.toLowerCase();
+      if (["script", "style", "meta", "link", "noscript", "template"].includes(tag)) continue;
+
+      const computed = window.getComputedStyle(el);
+      const stylesToBake: string[] = [];
+
+      for (const prop of computedProperties) {
+        const value = computed.getPropertyValue(prop);
+        if (shouldBake(prop, value)) {
+          stylesToBake.push(`${prop}:${value}`);
+        }
+      }
+
+      if (stylesToBake.length > 0) {
+        // Merge with existing inline styles, preserving user-set inline styles
+        const existingInline = el.getAttribute("style") || "";
+        const bakedStyles = stylesToBake.join(";");
+        if (existingInline) {
+          // User inline styles take precedence - put them last
+          el.setAttribute("style", `${bakedStyles};${existingInline}`);
+        } else {
+          el.setAttribute("style", bakedStyles);
+        }
+      }
+    }
+
+    dummy.remove();
+  });
+}
+
 async function inlineAllResources(page: Page, html: string): Promise<string> {
   interface InlinePayload {
     css: Array<{ url: string; text: string }>;
@@ -865,10 +971,15 @@ async function renderSSR(
   url: string,
   viewportWidth = 1920,
   viewportHeight = 1080,
+  forceDarkMode = false,
+  bakeStyles = false,
 ): Promise<string> {
   const page = await pagePool.acquire();
   try {
     await page.setViewport({ width: viewportWidth, height: viewportHeight });
+    if (forceDarkMode) {
+      await page.emulateMediaFeatures([{ name: "prefers-color-scheme", value: "dark" }]);
+    }
 
     // Try networkidle0 first; fall back to whatever we have on timeout
     try {
@@ -883,6 +994,13 @@ async function renderSSR(
 
     let html = await page.content();
     html = await inlineAllResources(page, html);
+
+    // Bake computed styles into inline attributes (for Samsung TV compatibility)
+    if (bakeStyles) {
+      await bakeComputedStyles(page);
+      html = await page.content();
+    }
+
     html = stripScriptTags(html);
     return html;
   } finally {
@@ -898,10 +1016,14 @@ async function renderScreenshotFrame(
   url: string,
   viewportWidth = 1920,
   viewportHeight = 1080,
+  forceDarkMode = false,
 ): Promise<Buffer> {
   const page = await pagePool.acquire();
   try {
     await page.setViewport({ width: viewportWidth, height: viewportHeight });
+    if (forceDarkMode) {
+      await page.emulateMediaFeatures([{ name: "prefers-color-scheme", value: "dark" }]);
+    }
 
     try {
       await page.goto(url, { waitUntil: "networkidle0", timeout: CONFIG.RENDER_TIMEOUT_MS });
@@ -1046,12 +1168,14 @@ async function handleAPI(req: Request, path: string): Promise<Response> {
         urls: body.urls.map((u) => ({
           url: u.url.trim(),
           durationSec: Math.max(1, Math.round(u.durationSec)),
+          forceDarkMode: u.forceDarkMode ?? false,
         })),
         method: body.method,
         metaRefreshEnabled: body.metaRefreshEnabled ?? false,
         cacheTtlSec: Math.max(0, body.cacheTtlSec ?? 60),
         viewportWidth: Math.max(320, Math.min(7680, body.viewportWidth ?? 1920)),
         viewportHeight: Math.max(240, Math.min(4320, body.viewportHeight ?? 1080)),
+        bakeStyles: body.bakeStyles ?? false,
         createdAt: Math.floor(Date.now() / 1000),
       };
 
@@ -1087,6 +1211,7 @@ async function handleAPI(req: Request, path: string): Promise<Response> {
           view.urls = body.urls.map((u) => ({
             url: u.url.trim(),
             durationSec: Math.max(1, Math.round(u.durationSec)),
+            forceDarkMode: u.forceDarkMode ?? false,
           }));
         }
         if (body.method !== undefined) {
@@ -1101,6 +1226,7 @@ async function handleAPI(req: Request, path: string): Promise<Response> {
           view.viewportWidth = Math.max(320, Math.min(7680, body.viewportWidth));
         if (body.viewportHeight !== undefined)
           view.viewportHeight = Math.max(240, Math.min(4320, body.viewportHeight));
+        if (body.bakeStyles !== undefined) view.bakeStyles = body.bakeStyles;
 
         dbUpdate(view);
         cacheInvalidate(viewId);