feat(player): new selector tailwind plugin option

Author: mihar-22

packages/vidstack/src/tailwind.test.ts

@@ -36,14 +36,16 @@ async function run(content: string, options?: PluginOptions) {
       corePlugins: { preflight: false },
       plugins: [vidstackPlugin(options)],
     }),
-  ]).process(['@tailwind components;', '@tailwind utilities;'].join('\n'), {
-    from: `${path.resolve(__filename)}?test=${'should create variants'}`,
-  }).css;
+  ])
+    .process(['@tailwind components;', '@tailwind utilities;'].join('\n'), {
+      from: `${path.resolve(__filename)}?test=${'should create variants'}`,
+    })
+    .then((c) => c.css);
 }
 
 it('should create media variants', async () => {
-  const content = mediaAttributes.map((name) => `media-${name}:hidden`).join(' ');
-  const css = await run(content);
+  const content = mediaAttributes.map((name) => `media-${name}:hidden`).join(' '),
+    css = await run(content);
   expect(css).toMatchInlineSnapshot(`
     "div[data-autoplay] .media-autoplay\\\\:hidden {
         display: none
@@ -109,8 +111,8 @@ it('should create media variants', async () => {
 });
 
 it('should create _not_ media variants', async () => {
-  const content = mediaAttributes.map((name) => `not-media-${name}:hidden`).join(' ');
-  const css = await run(content);
+  const content = mediaAttributes.map((name) => `not-media-${name}:hidden`).join(' '),
+    css = await run(content);
   expect(css).toMatchInlineSnapshot(`
     "div:not([data-autoplay]) .not-media-autoplay\\\\:hidden {
         display: none
@@ -176,67 +178,20 @@ it('should create _not_ media variants', async () => {
 });
 
 it('should use web components option', async () => {
-  const content = mediaAttributes.map((name) => `media-${name}:hidden`).join(' ');
-  const css = await run(content, { webComponents: true });
+  const content = 'media-playing:hidden',
+    css = await run(content, { webComponents: true });
   expect(css).toMatchInlineSnapshot(`
-    "media-player[data-autoplay] .media-autoplay\\\\:hidden {
+    "media-player[data-playing] .media-playing\\\\:hidden {
         display: none
-    }
-    media-player[data-autoplay-error] .media-autoplay-error\\\\:hidden {
-        display: none
-    }
-    media-player[data-buffering] .media-buffering\\\\:hidden {
-        display: none
-    }
-    media-player[data-can-fullscreen] .media-can-fullscreen\\\\:hidden {
-        display: none
-    }
-    media-player[data-can-load] .media-can-load\\\\:hidden {
-        display: none
-    }
-    media-player[data-can-play] .media-can-play\\\\:hidden {
-        display: none
-    }
-    media-player[data-ended] .media-ended\\\\:hidden {
-        display: none
-    }
-    media-player[data-error] .media-error\\\\:hidden {
-        display: none
-    }
-    media-player[data-fullscreen] .media-fullscreen\\\\:hidden {
-        display: none
-    }
-    media-player[data-controls] .media-controls\\\\:hidden {
-        display: none
-    }
-    media-player[data-loop] .media-loop\\\\:hidden {
-        display: none
-    }
-    media-player[data-live] .media-live\\\\:hidden {
-        display: none
-    }
-    media-player[data-live-edge] .media-live-edge\\\\:hidden {
-        display: none
-    }
-    media-player[data-muted] .media-muted\\\\:hidden {
-        display: none
-    }
-    media-player[data-paused] .media-paused\\\\:hidden {
-        display: none
-    }
-    media-player[data-playing] .media-playing\\\\:hidden {
-        display: none
-    }
-    media-player[data-playsinline] .media-playsinline\\\\:hidden {
-        display: none
-    }
-    media-player[data-seeking] .media-seeking\\\\:hidden {
-        display: none
-    }
-    media-player[data-started] .media-started\\\\:hidden {
-        display: none
-    }
-    media-player[data-waiting] .media-waiting\\\\:hidden {
+    }"
+  `);
+});
+
+it('should use player class option', async () => {
+  const content = 'media-playing:hidden',
+    css = await run(content, { selector: '.media-player' });
+  expect(css).toMatchInlineSnapshot(`
+    ".media-player[data-playing] .media-playing\\\\:hidden {
         display: none
     }"
   `);

packages/vidstack/src/utils/time.test.ts

@@ -68,13 +68,13 @@ describe(formatTime.name, function () {
   });
 
   it('formats hours correctly if seconds >= 3600', function () {
-    expect(formatTime(3600)).to.equal('1:0:00');
+    expect(formatTime(3600)).to.equal('1:00:00');
     expect(formatTime(5025)).to.equal('1:23:45');
     expect(formatTime(45296)).to.equal('12:34:56');
   });
 
   it('it should pad hours if `shouldPadHours` is true', function () {
-    expect(formatTime(3600, true)).to.equal('01:0:00');
+    expect(formatTime(3600, true)).to.equal('01:00:00');
   });
 
   it('it should display hours if `shouldAlwaysShowHours` is true', function () {

packages/vidstack/tailwind.cjs

@@ -30,14 +30,14 @@ const mediaAttributes = [
 ];
 
 module.exports = createPlugin.withOptions(function (options) {
-  const playerId = options?.webComponents ? 'media-player' : 'div',
+  const selector = options?.selector ?? (options?.webComponents ? 'media-player' : 'div'),
     prefixOpt = options?.prefix ?? options?.mediaPrefix,
     prefix = prefixOpt ? `${prefixOpt}-` : 'media-';
 
   return function ({ addVariant }) {
     mediaAttributes.forEach((name) => {
-      addVariant(`${prefix}${name}`, `${playerId}[data-${name}] &`);
-      addVariant(`not-${prefix}${name}`, `${playerId}:not([data-${name}]) &`);
+      addVariant(`${prefix}${name}`, `${selector}[data-${name}] &`);
+      addVariant(`not-${prefix}${name}`, `${selector}:not([data-${name}]) &`);
     });
   };
 });

packages/vidstack/tailwind.d.cts

@@ -9,6 +9,7 @@ declare namespace plugin {
 export = plugin;
 
 export interface PluginOptions {
+  selector?: string;
   prefix?: string;
   webComponents?: boolean;
 }