fix(vidstack): reapply caption styles on remount (#1817)

Author: mihar-22

packages/vidstack/src/core/font/font-vars.test.ts

@@ -0,0 +1,41 @@
+import { vi } from 'vitest';
+
+let player: { el: HTMLElement };
+
+describe('font vars', function () {
+  beforeEach(function () {
+    vi.resetModules();
+    vi.doMock('../api/media-context', () => ({
+      useMediaContext: () => ({ player }),
+    }));
+
+    localStorage.clear();
+  });
+
+  afterEach(function () {
+    vi.doUnmock('../api/media-context');
+  });
+
+  it('applies stored font vars to players added after the watcher is initialized', async function () {
+    localStorage.setItem('vds-player:font-family', 'capitals');
+    localStorage.setItem('vds-player:text-bg', '#ff0000');
+    localStorage.setItem('vds-player:text-bg-opacity', '50%');
+
+    const [{ createScope, scoped }, { updateFontCssVars }] = await Promise.all([
+      import('maverick.js'),
+      import('./font-vars'),
+    ]);
+
+    player = { el: document.createElement('media-player') };
+    scoped(() => updateFontCssVars(), createScope());
+
+    player = { el: document.createElement('media-player') };
+    scoped(() => updateFontCssVars(), createScope());
+
+    expect(player.el.style.getPropertyValue('--media-user-text-bg').replace(/\s+/g, ' ')).to.equal(
+      'rgb(255 0 0 / var(--media-user-text-bg-opacity, 1))',
+    );
+    expect(player.el.style.getPropertyValue('--media-user-text-bg-opacity')).to.equal('0.5');
+    expect(player.el.style.getPropertyValue('--media-user-font-variant')).to.equal('small-caps');
+  });
+});

packages/vidstack/src/core/font/font-vars.ts

@@ -14,23 +14,22 @@ export function updateFontCssVars() {
 
   const { player } = useMediaContext();
   players.add(player);
+  applyFontCssVars(player);
   onDispose(() => players.delete(player));
 
   if (!isWatchingVars) {
     scoped(() => {
       for (const type of keysOf(FONT_SIGNALS)) {
         const $value = FONT_SIGNALS[type],
           defaultValue = FONT_DEFAULTS[type],
-          varName = `--media-user-${camelToKebabCase(type)}`,
           storageKey = `vds-player:${camelToKebabCase(type)}`;
 
         effect(() => {
           const value = $value(),
-            isDefaultVarValue = value === defaultValue,
-            varValue = !isDefaultVarValue ? getCssVarValue(player, type, value) : null;
+            isDefaultVarValue = value === defaultValue;
 
           for (const player of players) {
-            player.el?.style.setProperty(varName, varValue);
+            setFontCssVar(player, type, value);
           }
 
           if (isDefaultVarValue) {
@@ -46,11 +45,28 @@ export function updateFontCssVars() {
   }
 }
 
-function getCssVarValue(player: MediaPlayer, type: FontSignal, value: string) {
+function applyFontCssVars(player: MediaPlayer) {
+  for (const type of keysOf(FONT_SIGNALS)) {
+    setFontCssVar(player, type, FONT_SIGNALS[type]());
+  }
+}
+
+function setFontCssVar(player: MediaPlayer, type: FontSignal, value: string) {
+  const defaultValue = FONT_DEFAULTS[type],
+    varName = `--media-user-${camelToKebabCase(type)}`,
+    varValue = value !== defaultValue ? getCssVarValue(type, value) : null;
+
+  if (type === 'fontFamily') {
+    const fontVariant = value === 'capitals' ? 'small-caps' : null;
+    player.el?.style.setProperty('--media-user-font-variant', fontVariant);
+  }
+
+  player.el?.style.setProperty(varName, varValue);
+}
+
+function getCssVarValue(type: FontSignal, value: string) {
   switch (type) {
     case 'fontFamily':
-      const fontVariant = value === 'capitals' ? 'small-caps' : '';
-      player.el?.style.setProperty('--media-user-font-variant', fontVariant);
       return getFontFamilyCSSVarValue(value);
     case 'fontSize':
     case 'textOpacity':