media-chrome - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1-canary.0

dist/cjs/media-theme-element.js

@@ -47,2 +47,3 @@ var __defProp = Object.defineProperty;
 var import_constants = require("./constants.js");
+var import_element_utils = require("./utils/element-utils.js");
 var import_server_safe_globals = require("./utils/server-safe-globals.js");
@@ -65,2 +66,5 @@ var import_template_parts = require("./utils/template-parts.js");
       line-height: 0;
+
+      /* Hide theme element until the breakpoints are available to avoid flicker. */
+      visibility: hidden;
     }
@@ -198,2 +202,6 @@
     (_a = this.renderer) == null ? void 0 : _a.update(this.props);
+    const { style } = (0, import_element_utils.getOrInsertCSSRule)(this.renderRoot, ":host");
+    if (style.visibility === "hidden") {
+      style.removeProperty("visibility");
+    }
   }
@@ -200,0 +208,0 @@ }

dist/media-theme-element.js

@@ -25,2 +25,3 @@ var __accessCheck = (obj, member, msg) => {
 import { MediaStateChangeEvents } from "./constants.js";
+import { getOrInsertCSSRule } from "./utils/element-utils.js";
 import { globalThis, document } from "./utils/server-safe-globals.js";
@@ -42,2 +43,5 @@ import { TemplateInstance } from "./utils/template-parts.js";
       line-height: 0;
+
+      /* Hide theme element until the breakpoints are available to avoid flicker. */
+      visibility: hidden;
     }
@@ -175,2 +179,6 @@
     (_a = this.renderer) == null ? void 0 : _a.update(this.props);
+    const { style } = getOrInsertCSSRule(this.renderRoot, ":host");
+    if (style.visibility === "hidden") {
+      style.removeProperty("visibility");
+    }
   }
@@ -177,0 +185,0 @@ }

package.json

 {
   "name": "media-chrome",
-  "version": "4.0.0",
+  "version": "4.0.1-canary.0",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -5,0 +5,0 @@ "author": "@muxinc",

src/js/media-theme-element.ts

 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';
@@ -16,2 +17,6 @@ import { TemplateInstance } from './utils/template-parts.js';
 
+// 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');
@@ -24,2 +29,5 @@
       line-height: 0;
+
+      /* Hide theme element until the breakpoints are available to avoid flicker. */
+      visibility: hidden;
     }
@@ -247,2 +255,7 @@
     this.renderer?.update(this.props);
+
+    const { style } = getOrInsertCSSRule(this.renderRoot, ':host');
+    if (style.visibility === 'hidden') {
+      style.removeProperty('visibility');
+    }
   }
@@ -249,0 +262,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4472948

increased by0.05%

Lines of code

79549

increased by0.03%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes