custom-media-element
Advanced tools
custom-media-element - npm Package Compare versions
Comparing version 1.0.2-canary.1 to 1.0.2-canary.2
@@ -55,7 +55,14 @@ /** | ||
| #container { | ||
| min-height: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: end; | ||
| } | ||
| audio { | ||
| max-width: 100%; | ||
| min-width: 100%; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| <div id="container"></div> | ||
| <slot></slot> | ||
@@ -71,12 +78,17 @@ `; | ||
| :host { | ||
| ${/* Use inline-flex to expand video to full height of custom element. */''} | ||
| display: inline-flex; | ||
| display: inline-block; | ||
| line-height: 0; | ||
| } | ||
| #container { | ||
| min-height: 100%; | ||
| } | ||
| video { | ||
| max-width: 100%; | ||
| min-width: 100%; | ||
| ${/* max-height: 100%; causes the custom element to collapse if its container has no height. */''} | ||
| ${/* min-height: 100%; causes a Safari glitch and expands the custom element height incorrectly. */''} | ||
| max-height: 100%; | ||
| ${/* min-height: 100%; without a container causes a Safari glitch making the video higher | ||
| than 100% but it is needed to expand the video element when no content is loaded yet. */''} | ||
| min-height: 100%; | ||
| object-fit: var(--media-object-fit, contain); | ||
@@ -91,2 +103,3 @@ object-position: var(--media-object-position, 50% 50%); | ||
| </style> | ||
| <div id="container"></div> | ||
| <slot></slot> | ||
@@ -265,3 +278,3 @@ `; | ||
| nativeEl.part = tag; | ||
| this.shadowRoot.append(nativeEl); | ||
| this.shadowRoot.querySelector('#container')?.append(nativeEl); | ||
| } | ||
@@ -305,9 +318,11 @@ | ||
| for (let type of this.constructor.Events) { | ||
| this.shadowRoot.addEventListener?.(type, (evt) => { | ||
| if (evt.target !== this.nativeEl) return; | ||
| this.dispatchEvent(new CustomEvent(evt.type, { detail: evt.detail })); | ||
| }, true); | ||
| this.shadowRoot.addEventListener?.(type, this, true); | ||
| } | ||
| } | ||
| handleEvent(evt) { | ||
| if (evt.target !== this.nativeEl) return; | ||
| this.dispatchEvent(new CustomEvent(evt.type, { detail: evt.detail })); | ||
| } | ||
| #upgradeProperty(prop) { | ||
@@ -314,0 +329,0 @@ // Sets properties that are set before the custom element is upgraded. |
| { | ||
| "name": "custom-media-element", | ||
| "version": "1.0.2-canary.1", | ||
| "version": "1.0.2-canary.2", | ||
| "description": "A custom element for extending the native media elements (<audio> or <video>)", | ||
@@ -19,7 +19,6 @@ "type": "module", | ||
| "scripts": { | ||
| "lint": "npx eslint *.js", | ||
| "lint": "npx eslint *.js -c ./node_modules/wet-run/.eslintrc.json", | ||
| "pretest": "esbuild custom-media-element.js --target=es2019 --bundle --outdir=dist", | ||
| "test": "web-test-runner --config test/web-test-runner.config.js", | ||
| "dev": "esbuild custom-media-element.js --bundle --outdir=dist --servedir=.", | ||
| "build": "rm -rf dist && esbuild custom-media-element.js --target=es2019 --format=esm --bundle --outdir=dist" | ||
| "dev": "wet serve --redirect :examples/" | ||
| }, | ||
@@ -29,23 +28,5 @@ "devDependencies": { | ||
| "@web/test-runner": "^0.16.1", | ||
| "esbuild": "^0.17.19" | ||
| "esbuild": "^0.17.19", | ||
| "wet-run": "^0.5.1" | ||
| }, | ||
| "eslintConfig": { | ||
| "root": true, | ||
| "globals": { | ||
| "globalThis": "writable" | ||
| }, | ||
| "env": { | ||
| "browser": true, | ||
| "es6": true, | ||
| "node": true, | ||
| "mocha": true | ||
| }, | ||
| "extends": [ | ||
| "eslint:recommended" | ||
| ], | ||
| "parserOptions": { | ||
| "ecmaVersion": 2022, | ||
| "sourceType": "module" | ||
| } | ||
| }, | ||
| "keywords": [ | ||
@@ -52,0 +33,0 @@ "custom", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by3.47%
358
Worsened metrics
- Total package byte prevSize
- decreased by-1.11%
18639
- Dev dependency count
- increased by33.33%
4