fix: revert theme render flicker (breakpoints) (#1055)

related #960

from feedback via next-video we heard there is a split second empty
flicker now when using a slotted poster image.
first the blurhash appears, after the thumbnail then nothing (seeing
background of page), then the poster and player UI.

the reason is that the theme visibility is hidden until the breakpoints
are available.
after reconsideration this solution doesn't feel like the correct way to
handle this.

better is to be more precise in the theme itself and require breakpoints
to render any control variants.
this will require some changes in some themes where we don't default to
the smallest size variant for example but still require a small
breakpoint width. could be even zero.

package.json

@@ -126,8 +126,8 @@
     "@types/mocha": "^10.0.6",
     "@types/react": "^18.2.65",
     "@web/dev-server-esbuild": "^1.0.2",
-    "@web/test-runner": "^0.15.0",
-    "@web/test-runner-playwright": "^0.9.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "cem-plugin-vs-code-custom-data-generator": "^1.4.1",
     "esbuild": "^0.20.0",
     "eslint": "^8.56.0",

src/js/media-theme-element.ts

@@ -1,6 +1,5 @@
 import { MediaStateChangeEvents } from './constants.js';
 import MediaController from './media-controller.js';
-import { getOrInsertCSSRule } from './utils/element-utils.js';
 import { globalThis, document } from './utils/server-safe-globals.js';
 import { TemplateInstance } from './utils/template-parts.js';
 import { processor } from './utils/template-processor.js';
@@ -14,20 +13,13 @@ const observedMediaAttributes = {
   mediastreamtype: 'streamtype',
 };
 
-// For hiding the media-theme element until the breakpoints are available
-// display: none can't be used because it would prevent the element or its
-// children (media-controller) from getting dimensions.
-
 const prependTemplate = document.createElement('template');
 
 prependTemplate.innerHTML = /*html*/ `
   <style>
     :host {
       display: inline-block;
       line-height: 0;
-
-      /* Hide theme element until the breakpoints are available to avoid flicker. */
-      visibility: hidden;
     }
 
     media-controller {
@@ -250,14 +242,6 @@ export class MediaThemeElement extends globalThis.HTMLElement {
 
   render(): void {
     this.renderer?.update(this.props);
-
-    // The style tag must be connected to the DOM before it has a sheet.
-    if (this.renderRoot.isConnected) {
-      const { style } = getOrInsertCSSRule(this.renderRoot, ':host');
-      if (style.visibility === 'hidden') {
-        style.removeProperty('visibility');
-      }
-    }
   }
 }
 

test/unit/media-theme.spec.ts

@@ -1,4 +1,4 @@
-import { assert, fixture, waitUntil } from '@open-wc/testing';
+import { assert, fixture, waitUntil, aTimeout } from '@open-wc/testing';
 import { MediaUIAttributes } from '../../src/js/constants.js';
 import '../../src/js/index.js';
 import '../../src/js/media-theme-element.js';
@@ -67,6 +67,8 @@ describe('<media-theme>', () => {
       </media-theme>
     `);
 
+    await aTimeout(100);
+
     const media = theme1.querySelector('[slot="media"]') as HTMLVideoElement;
     await media.play();
 

test/web-test-runner.config.js

@@ -16,7 +16,7 @@ const config = {
   /** Amount of test files per browser to test concurrently */
   // concurrency: 1,
 
-  browsers: [chromeLauncher({ launchOptions: { args: ['--headless=old'] } })],
+  browsers: [chromeLauncher({ launchOptions: { args: ['--headless'] } })],
 };
 
 if (process.argv.some((arg) => arg.includes('--all'))) {