From 156f7864488b5a7704b6f62cdda3915cfd096b5a Mon Sep 17 00:00:00 2001 From: LeRatierBretonnier Date: Wed, 27 May 2026 11:57:34 +0200 Subject: [PATCH] Spotlight: double focused participant size (2x widget width + window) - _prepareContext doubles widgetWidth when _focusedUserId is set - _onRender multiplies strip window dimensions by 2 in spotlight mode - --sp-widget-width CSS var uses doubled value so tile renders at 2x --- src/ui/gm/ScryingPoolStrip.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/ui/gm/ScryingPoolStrip.js b/src/ui/gm/ScryingPoolStrip.js index abfe83e..ccf9073 100644 --- a/src/ui/gm/ScryingPoolStrip.js +++ b/src/ui/gm/ScryingPoolStrip.js @@ -274,6 +274,8 @@ export class ScryingPoolStrip extends _AppBase { const widgetWidthMd = this._adapter.settings?.get?.('widgetWidthMd') ?? '150'; const isLarge = effectiveSize === 'md'; const effectiveWidth = isLarge ? widgetWidthMd : widgetWidthSm; + const isSpotlightActive = !!this._focusedUserId; + const widgetWidth = isSpotlightActive ? String(parseInt(effectiveWidth, 10) * 2) : effectiveWidth; const isGM = this._adapter.users.isGM?.() ?? false; @@ -294,7 +296,8 @@ export class ScryingPoolStrip extends _AppBase { hasStreamAccess, isGM, // Story 5.2: Video widget width customization - widgetWidth: effectiveWidth, + isSpotlightActive, + widgetWidth, // Tile shape tileShape, // Tile border @@ -436,12 +439,15 @@ export class ScryingPoolStrip extends _AppBase { setVar('--sp-tile-border-active', bw > 0 ? '1' : '0'); // Sync the outer Application window width with the selected dock layout. + // Spotlight mode doubles the strip window to fit the enlarged tile. if (typeof this.setPosition === 'function') { const layout = context?.dockLayout ?? 'vertical-sm'; const n = context?.participants?.length ?? 0; - const width = this._computeStripWidth(layout, n); + const spotlightMultiplier = context?.isSpotlightActive ? 2 : 1; + const width = this._computeStripWidth(layout, n) * spotlightMultiplier; const height = this._computeStripHeight(layout, n); - this.setPosition(height === 'auto' ? { width, height: 'auto' } : { width, height }); + const adjustedHeight = height === 'auto' ? 'auto' : height * spotlightMultiplier; + this.setPosition(adjustedHeight === 'auto' ? { width, height: 'auto' } : { width, height: adjustedHeight }); } }