msc-any-pip - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

mjs/wc-msc-any-pip.js

@@ -6,2 +6,3 @@ import { _wcl } from './common-lib.js';
  reference:
+ - documentPictureInPicture min-size: 300 x 300
  - https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
@@ -11,3 +12,6 @@ */
 
-const defaults = {};
+const defaults = {
+  width: 0,
+  height: 0
+};
 const booleanAttrs = []; // booleanAttrs default should be false
@@ -131,4 +135,4 @@ const objectAttrs = [];
   async connectedCallback() {
-   const { config, error } = await _wcl.getWCConfig(this);
-   const { main, trigger } = this.#nodes;
+    const { config, error } = await _wcl.getWCConfig(this);
+    const { main, trigger } = this.#nodes;
 
@@ -149,2 +153,5 @@ if (error) {
 
+    // remove script[type=application/json]
+    Array.from(this.querySelectorAll('script[type="application/json"]')).forEach((script) => script.remove());
+
     // not suppout
@@ -178,3 +185,5 @@ if (!window?.documentPictureInPicture) {
       switch (attrName) {
-        default:
+        case 'width':
+        case 'height':
+          this.#config[attrName] = _wcl.isNumeric(newValue) ? parseFloat(newValue) : defaults[attrName];
           break;
@@ -231,2 +240,28 @@ }
 
+  set width(value) {
+    if (value) {
+      this.setAttribute('width', value);
+    } else {
+      this.removeAttribute('width');
+    }
+  }
+
+  get width() {
+    const { width } = this.getBoundingClientRect();
+    return this.#config.width !== 0 ? this.#config.width : width;
+  }
+
+  set height(value) {
+    if (value) {
+      this.setAttribute('height', value);
+    } else {
+      this.removeAttribute('height');
+    }
+  }
+
+  get height() {
+    const { height } = this.getBoundingClientRect();
+    return this.#config.height !== 0 ? this.#config.height : height;
+  }
+
   #fireEvent(evtName, detail) {
@@ -249,3 +284,2 @@ this.dispatchEvent(new CustomEvent(evtName,
 
-    const { width, height } = this.getBoundingClientRect();
     const clones = children.map(
@@ -263,4 +297,4 @@ (element) => {
     const pipWindow = await window?.documentPictureInPicture.requestWindow({
-      width,
-      height: height + delta
+      width: this.width,
+      height: this.height + delta
     });
@@ -267,0 +301,0 @@ _wcl.cloneStyleSheetsToDocument(pipWindow.document);

package.json

 {
   "name": "msc-any-pip",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Imaging what if we can let anything Picture-in-Picture (not only <video />) ?! Here comes <msc-any-pip /> to let it dream comes true. <msc-any-pip /> apply Document Picture-in-Picture API to given elements have Picture-in-Picture feature.",
@@ -5,0 +5,0 @@ "main": "index.html",

README.md

@@ -28,2 +28,9 @@ # msc-any-pip
 <msc-any-pip>
+  <script type="application/json">
+    {
+      "width": 450,
+      "height": 300
+    }
+  </script>
+
   <!-- Put any HTML element you like -->
@@ -33,3 +40,3 @@ <div class="element-i-like-to-have-pip">
     ...
-    ..
+    ...
   </div>
@@ -39,2 +46,11 @@ </msc-any-pip>
 
+Otherwise, developers could also choose `remoteconfig` to fetch config for &lt;msc-any-pip /&gt;.
+
+```html
+<msc-any-pip
+  remoteconfig="https://your-domain/api-path"
+  ...
+></msc-any-pip>
+```
+
 ## JavaScript Instantiation
@@ -59,2 +75,13 @@
 nodeB.appendChild(template.content.cloneNode(true));
+nodeB.width = 450;
+nodeB.height = 300;
+
+// new instance with Class & default config
+const config = {
+  width: 450,
+  height: 300
+};
+const nodeC = new MscAnyPip(config);
+document.body.appendChild(nodeC);
+nodeC.appendChild(template.content.cloneNode(true));
 </script>
@@ -77,2 +104,33 @@ ```
 
+## Attributes
+
+&lt;msc-any-pip /> supports some attributes to let it become more convenience & useful.
+
+- **width**
+
+Set Picture-in-Picture window width. Default is &lt;msc-any-pip />'s `width`. （Picture-in-Picture's min window width is 300）
+
+```html
+<msc-any-pip width="450">
+  ...
+</msc-any-pip>
+```
+
+- **height**
+
+Set Picture-in-Picture window height. Default is &lt;msc-any-pip />'s `height`. （Picture-in-Picture's min window height is 300）
+
+```html
+<msc-any-pip height="300">
+  ...
+</msc-any-pip>
+```
+
+## Properties
+
+| Property Name | Type | Description |
+| ----------- | ----------- | ----------- |
+| width | Number | Getter / Setter for &lt;msc-any-pip />'s width. This will affect Picture-in-Picture window width. Default is &lt;msc-any-pip />'s width. |
+| height | Number | Getter / Setter for &lt;msc-any-pip />'s height. This will affect Picture-in-Picture window height. Default is &lt;msc-any-pip />'s height. |
+
 ## Events
@@ -79,0 +137,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

Improved metrics

Total package byte prevSize

57715

increased by4.28%

Lines of code

1213

increased by2.45%

Number of lines in readme file

144

increased by67.44%

No dependency changes