media-chrome - npm Package Compare versions

Comparing version 4.2.3-canary.0 to 4.2.3

dist/cjs/media-tooltip.js

@@ -151,2 +151,4 @@ var __defProp = Object.defineProperty;
       var _a;
+      if (!(0, import_element_utils.isElementVisible)(this, { checkOpacity: false, checkVisibilityCSS: false }))
+        return;
       const placement = this.placement;
@@ -153,0 +155,0 @@ if (placement === "left" || placement === "right") {

dist/cjs/utils/element-utils.js

@@ -108,7 +108,7 @@ var __defProp = Object.defineProperty;
 }
-function isElementVisible(element, depth = 3) {
+function isElementVisible(element, { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}) {
   if (element.checkVisibility) {
     return element.checkVisibility({
-      checkOpacity: true,
-      checkVisibilityCSS: true
+      checkOpacity,
+      checkVisibilityCSS
     });
@@ -119,3 +119,3 @@ }
     const style = getComputedStyle(el);
-    if (style.opacity === "0" || style.visibility === "hidden" || style.display === "none") {
+    if (checkOpacity && style.opacity === "0" || checkVisibilityCSS && style.visibility === "hidden" || style.display === "none") {
       return false;
@@ -122,0 +122,0 @@ }

dist/media-tooltip.js

@@ -5,2 +5,3 @@ import {
   getStringAttr,
+  isElementVisible,
   setStringAttr
@@ -134,2 +135,4 @@ } from "./utils/element-utils.js";
       var _a;
+      if (!isElementVisible(this, { checkOpacity: false, checkVisibilityCSS: false }))
+        return;
       const placement = this.placement;
@@ -136,0 +139,0 @@ if (placement === "left" || placement === "right") {

dist/utils/element-utils.d.ts

@@ -39,3 +39,7 @@ import type MediaController from '../media-controller.js';
  */
-export declare function isElementVisible(element: HTMLElement, depth?: number): boolean;
+export declare function isElementVisible(element: HTMLElement, { depth, checkOpacity, checkVisibilityCSS }?: {
+    depth?: number;
+    checkOpacity?: boolean;
+    checkVisibilityCSS?: boolean;
+}): boolean;
 export type Point = {
@@ -42,0 +46,0 @@ x: number;

dist/utils/element-utils.js

@@ -66,7 +66,7 @@ import { MediaStateReceiverAttributes } from "../constants.js";
 }
-function isElementVisible(element, depth = 3) {
+function isElementVisible(element, { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}) {
   if (element.checkVisibility) {
     return element.checkVisibility({
-      checkOpacity: true,
-      checkVisibilityCSS: true
+      checkOpacity,
+      checkVisibilityCSS
     });
@@ -77,3 +77,3 @@ }
     const style = getComputedStyle(el);
-    if (style.opacity === "0" || style.visibility === "hidden" || style.display === "none") {
+    if (checkOpacity && style.opacity === "0" || checkVisibilityCSS && style.visibility === "hidden" || style.display === "none") {
       return false;
@@ -80,0 +80,0 @@ }

package.json

 {
   "name": "media-chrome",
-  "version": "4.2.3-canary.0",
+  "version": "4.2.3",
   "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-tooltip.ts

@@ -5,2 +5,3 @@ import {
   getStringAttr,
+  isElementVisible,
   setStringAttr,
@@ -194,2 +195,6 @@ } from './utils/element-utils.js';
   updateXOffset = () => {
+    // If the tooltip is hidden don't offset the tooltip because it could be
+    // positioned offscreen causing scrollbars to appear.
+    if (!isElementVisible(this, { checkOpacity: false, checkVisibilityCSS: false })) return;
+
     const placement = this.placement;
@@ -196,0 +201,0 @@

src/js/utils/element-utils.ts

@@ -124,3 +124,3 @@ import { MediaStateReceiverAttributes } from '../constants.js';
   element: HTMLElement,
-  depth: number = 3
+  { depth = 3, checkOpacity = true, checkVisibilityCSS = true } = {}
 ): boolean {
@@ -133,4 +133,4 @@ // Supported by Chrome and Firefox https://caniuse.com/mdn-api_element_checkvisibility
     return element.checkVisibility({
-      checkOpacity: true,
-      checkVisibilityCSS: true,
+      checkOpacity,
+      checkVisibilityCSS,
     });
@@ -143,4 +143,4 @@ }
     if (
-      style.opacity === '0' ||
-      style.visibility === 'hidden' ||
+      (checkOpacity && style.opacity === '0') ||
+      (checkVisibilityCSS && style.visibility === 'hidden') ||
       style.display === 'none'
@@ -147,0 +147,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

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

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

Improved metrics

Total package byte prevSize

4260458

increased by0.05%

Lines of code

74174

increased by0.02%

Number of low quality alerts

0

decreased by-100%

No dependency changes