msc-any-pip - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

mjs/common-lib.js

@@ -170,2 +170,43 @@ export const _wcl = {};
   },
+  checkVisibility: {
+    configurable: true,
+    enumerable: true,
+    value: function(element) {
+      let result = true;
+
+      if (element.checkVisibility) {
+        result = element.checkVisibility({ contentVisibilityAuto:true, opacityProperty:true, visibilityProperty:true });
+      } else if (element.computedStyleMap) {
+        const allComputedStyles = element.computedStyleMap();
+        const { value: display } = allComputedStyles.get('display');
+        const { value: opacity } = allComputedStyles.get('opacity');
+        const { value: visibility } = allComputedStyles.get('visibility');
+        const { value: contentVisibility } = allComputedStyles.get('content-visibility');
+
+        result =
+          opacity === 0 || 
+          ['none', 'contents'].includes(display) ||
+          visibility === 'hidden' || 
+          contentVisibility === 'auto'
+            ? false
+            : true;
+      } else if (window.getComputedStyle) {
+        const allComputedStyles = window.getComputedStyle(element);
+        const display = allComputedStyles.getPropertyValue('display');
+        const opacity = allComputedStyles.getPropertyValue('opacity');
+        const visibility = allComputedStyles.getPropertyValue('visibility');
+        const contentVisibility = allComputedStyles.getPropertyValue('content-visibility');
+
+        result =
+          +opacity === 0 || 
+          ['none', 'contents'].includes(display) ||
+          visibility === 'hidden' || 
+          contentVisibility === 'auto'
+            ? false
+            : true;
+      }
+
+      return result;
+    }
+  },
   rgbToHex: {
@@ -780,2 +821,11 @@ configurable: true,
   },
+  getRandomIntInclusive: {
+    configurable: true,
+    enumerable: true,
+    value: (min, max) => {
+      min = Math.ceil(min);
+      max = Math.floor(max);
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+  },
   grabStyleSheet: {
@@ -838,2 +888,41 @@ configurable: true,
 
+  isValidURL: {
+    configurable: true,
+    enumerable: true,
+    value: function(url) {
+      try { 
+        return Boolean(new URL(url)); 
+      }
+      catch(e){ 
+        return false; 
+      }
+    }
+  },
+
+  loadImage: {
+    configurable: true,
+    enumerable: true,
+    value: function(url, crossOrigin) {
+      return new Promise(
+        (resolve, reject) => {
+          const img = new Image();
+          
+          img.onload = () => {
+            resolve(img);
+          };
+
+          img.onerror = (e) => {
+            reject(e);
+          };
+
+          if (typeof crossOrigin !== 'undefined') {
+            img.crossOrigin = crossOrigin;
+          }
+          
+          img.src = url;
+        }
+      );
+    }
+  },
+
   prepareFetch: {
@@ -840,0 +929,0 @@ configurable: true,

mjs/wc-msc-any-pip.js

@@ -14,5 +14,6 @@ import { _wcl } from './common-lib.js';
   preferinitialwindowplacement: false,
-  disallowreturntoopener: false
+  disallowreturntoopener: false,
+  dismisswhenbacktoopener: false
 };
-const booleanAttrs = ['disallowreturntoopener', 'preferinitialwindowplacement']; // booleanAttrs default should be false
+const booleanAttrs = ['disallowreturntoopener', 'preferinitialwindowplacement', 'dismisswhenbacktoopener']; // booleanAttrs default should be false
 const objectAttrs = [];
@@ -211,2 +212,3 @@ const custumEvents = {
         case 'preferinitialwindowplacement':
+        case 'dismisswhenbacktoopener':
           this.#config[attrName] = true;
@@ -306,2 +308,10 @@ break;
 
+  set dismisswhenbacktoopener(value) {
+    this.toggleAttribute('dismisswhenbacktoopener', Boolean(value));
+  }
+
+  get dismisswhenbacktoopener() {
+    return this.#config.dismisswhenbacktoopener;
+  }
+  
   #fireEvent(evtName, detail) {
@@ -320,3 +330,3 @@ this.dispatchEvent(new CustomEvent(evtName,
 
-    if (!children.length || !window?.documentPictureInPicture) {
+    if (!children.length || !window.documentPictureInPicture) {
       return;
@@ -335,3 +345,3 @@ }
     // pip
-    const pipWindow = await window?.documentPictureInPicture.requestWindow({
+    const pipWindow = await window.documentPictureInPicture.requestWindow({
       width: this.winwidth,
@@ -372,2 +382,20 @@ height: this.winheight,
   window.customElements.define(_wcl.classToTagName('MscAnyPip'), MscAnyPip);
-}
+}
+
+// close pipWin which opened by msc-any-pip
+window.customElements.whenDefined('msc-any-pip').then(
+  () => {
+    document.addEventListener('visibilitychange',
+      () => {
+        if (document.hidden) {
+          return;
+        }
+
+        const active = document.querySelector('msc-any-pip[dismisswhenbacktoopener] .msc-any-pip-cloned');
+        if (active && window.documentPictureInPicture?.window) {
+          window.documentPictureInPicture.window.close();
+        }
+      }
+    );
+  }
+);

mjs/wc-msc-any-pip.min.js

@@ -1,2 +0,2 @@
-import{_wcl}from"./common-lib.js";import{_wccss}from"./common-css.js";const defaults={winwidth:0,winheight:0,preferinitialwindowplacement:!1,disallowreturntoopener:!1},booleanAttrs=["disallowreturntoopener","preferinitialwindowplacement"],objectAttrs=[],custumEvents={piping:"msc-any-pip-piping",pipingEnd:"msc-any-pip-pip-end"},template=document.createElement("template");if(template.innerHTML=`
+import{_wcl}from"./common-lib.js";import{_wccss}from"./common-css.js";const defaults={winwidth:0,winheight:0,preferinitialwindowplacement:!1,disallowreturntoopener:!1,dismisswhenbacktoopener:!1},booleanAttrs=["disallowreturntoopener","preferinitialwindowplacement","dismisswhenbacktoopener"],objectAttrs=[],custumEvents={piping:"msc-any-pip-piping",pipingEnd:"msc-any-pip-pip-end"},template=document.createElement("template");if(template.innerHTML=`
 <style>
@@ -67,2 +67,2 @@ ${_wccss}
 </div>
-`,CSS?.registerProperty)try{CSS.registerProperty({name:"--msc-any-pip-piping-font-size",syntax:"<length>",inherits:!0,initialValue:"16px"}),CSS.registerProperty({name:"--msc-any-pip-piping-color",syntax:"<color>",inherits:!0,initialValue:"#39e75f"}),CSS.registerProperty({name:"--msc-any-pip-button-z-index",syntax:"<number>",inherits:!0,initialValue:"1"})}catch(t){console.warn("msc-any-pip: "+t.message)}class MscAnyPip extends HTMLElement{#data;#nodes;#config;constructor(t){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.appendChild(template.content.cloneNode(!0)),this.#data={controller:""},this.#nodes={styleSheet:this.shadowRoot.querySelector("style"),main:this.shadowRoot.querySelector(".main"),trigger:this.shadowRoot.querySelector(".btn-pip")},this.#config={...defaults,...t},this._onClick=this._onClick.bind(this)}async connectedCallback(){var{config:t,error:i}=await _wcl.getWCConfig(this),{main:e,trigger:n}=this.#nodes;i?(console.warn(_wcl.classToTagName(this.constructor.name)+": "+i),this.remove()):(this.#config={...this.#config,...t},Object.keys(defaults).forEach(t=>this.#upgradeProperty(t)),Array.from(this.querySelectorAll(':scope > script[type="application/json"]')).forEach(t=>t.remove()),window?.documentPictureInPicture||e.classList.add("main--active--not-support"),this.#data.controller=new AbortController,i=this.#data.controller.signal,n.addEventListener("click",this._onClick,{signal:i}))}disconnectedCallback(){this.#data?.controller&&this.#data.controller.abort()}#format(t,i,e){if(null!==e)switch(t){case"winwidth":case"winheight":this.#config[t]=_wcl.isNumeric(e)?parseFloat(e):defaults[t];break;case"disallowreturntoopener":case"preferinitialwindowplacement":this.#config[t]=!0}else booleanAttrs.includes(t)?this.#config[t]=!1:this.#config[t]=defaults[t]}attributeChangedCallback(t,i,e){MscAnyPip.observedAttributes.includes(t)&&this.#format(t,i,e)}static get observedAttributes(){return Object.keys(defaults)}static get supportedEvents(){return Object.keys(custumEvents).map(t=>custumEvents[t])}#upgradeProperty(t){let i;MscAnyPip.observedAttributes.includes(t)&&(Object.prototype.hasOwnProperty.call(this,t)?(i=this[t],delete this[t]):i=booleanAttrs.includes(t)?!(!this.hasAttribute(t)&&!this.#config[t]):objectAttrs.includes(t)?this.hasAttribute(t)?this.getAttribute(t):JSON.stringify(this.#config[t]):this.hasAttribute(t)?this.getAttribute(t):this.#config[t],this[t]=i)}set winwidth(t){t?this.setAttribute("winwidth",t):this.removeAttribute("winwidth")}get winwidth(){var t=this.getBoundingClientRect()["width"];return 0!==this.#config.winwidth?this.#config.winwidth:t}set winheight(t){t?this.setAttribute("winheight",t):this.removeAttribute("winheight")}get winheight(){var t=this.getBoundingClientRect()["height"];return 0!==this.#config.winheight?this.#config.winheight:t}set preferinitialwindowplacement(t){this.toggleAttribute("preferinitialwindowplacement",Boolean(t))}get preferinitialwindowplacement(){return this.#config.preferinitialwindowplacement}set disallowreturntoopener(t){this.toggleAttribute("disallowreturntoopener",Boolean(t))}get disallowreturntoopener(){return this.#config.disallowreturntoopener}#fireEvent(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,...i&&{detail:i}}))}async _onClick(){const t=[...this.children];if(t.length&&window?.documentPictureInPicture){const i=t.map(t=>{t=t.cloneNode(!0);return t.classList.add("msc-any-pip-cloned"),t}),e=await window?.documentPictureInPicture.requestWindow({width:this.winwidth,height:this.winheight,disallowReturnToOpener:this.disallowreturntoopener,preferInitialWindowPlacement:this.preferinitialwindowplacement});_wcl.cloneStyleSheetsToDocument(e.document),t.forEach(t=>e.document.body.append(t)),i.forEach(t=>this.append(t)),this.#nodes.main.classList.toggle("main--active",!0),this.#fireEvent(custumEvents.piping),e.addEventListener("pagehide",()=>{i.forEach(t=>t.remove()),t.forEach(t=>this.append(t)),this.#nodes.main.classList.toggle("main--active",!1),this.#fireEvent(custumEvents.pipingEnd)},{once:!0})}}requestPictureInPicture(){this.#nodes.trigger.click()}}const S=_wcl.supports(),T=_wcl.classToTagName("MscAnyPip");S.customElements&&S.shadowDOM&&S.template&&!window.customElements.get(T)&&window.customElements.define(_wcl.classToTagName("MscAnyPip"),MscAnyPip);export{MscAnyPip};
+`,CSS?.registerProperty)try{CSS.registerProperty({name:"--msc-any-pip-piping-font-size",syntax:"<length>",inherits:!0,initialValue:"16px"}),CSS.registerProperty({name:"--msc-any-pip-piping-color",syntax:"<color>",inherits:!0,initialValue:"#39e75f"}),CSS.registerProperty({name:"--msc-any-pip-button-z-index",syntax:"<number>",inherits:!0,initialValue:"1"})}catch(t){console.warn("msc-any-pip: "+t.message)}class MscAnyPip extends HTMLElement{#data;#nodes;#config;constructor(t){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.appendChild(template.content.cloneNode(!0)),this.#data={controller:""},this.#nodes={styleSheet:this.shadowRoot.querySelector("style"),main:this.shadowRoot.querySelector(".main"),trigger:this.shadowRoot.querySelector(".btn-pip")},this.#config={...defaults,...t},this._onClick=this._onClick.bind(this)}async connectedCallback(){var{config:t,error:e}=await _wcl.getWCConfig(this),{main:i,trigger:n}=this.#nodes;e?(console.warn(_wcl.classToTagName(this.constructor.name)+": "+e),this.remove()):(this.#config={...this.#config,...t},Object.keys(defaults).forEach(t=>this.#upgradeProperty(t)),Array.from(this.querySelectorAll(':scope > script[type="application/json"]')).forEach(t=>t.remove()),window?.documentPictureInPicture||i.classList.add("main--active--not-support"),this.#data.controller=new AbortController,e=this.#data.controller.signal,n.addEventListener("click",this._onClick,{signal:e}))}disconnectedCallback(){this.#data?.controller&&this.#data.controller.abort()}#format(t,e,i){if(null!==i)switch(t){case"winwidth":case"winheight":this.#config[t]=_wcl.isNumeric(i)?parseFloat(i):defaults[t];break;case"disallowreturntoopener":case"preferinitialwindowplacement":case"dismisswhenbacktoopener":this.#config[t]=!0}else booleanAttrs.includes(t)?this.#config[t]=!1:this.#config[t]=defaults[t]}attributeChangedCallback(t,e,i){MscAnyPip.observedAttributes.includes(t)&&this.#format(t,e,i)}static get observedAttributes(){return Object.keys(defaults)}static get supportedEvents(){return Object.keys(custumEvents).map(t=>custumEvents[t])}#upgradeProperty(t){let e;MscAnyPip.observedAttributes.includes(t)&&(Object.prototype.hasOwnProperty.call(this,t)?(e=this[t],delete this[t]):e=booleanAttrs.includes(t)?!(!this.hasAttribute(t)&&!this.#config[t]):objectAttrs.includes(t)?this.hasAttribute(t)?this.getAttribute(t):JSON.stringify(this.#config[t]):this.hasAttribute(t)?this.getAttribute(t):this.#config[t],this[t]=e)}set winwidth(t){t?this.setAttribute("winwidth",t):this.removeAttribute("winwidth")}get winwidth(){var t=this.getBoundingClientRect()["width"];return 0!==this.#config.winwidth?this.#config.winwidth:t}set winheight(t){t?this.setAttribute("winheight",t):this.removeAttribute("winheight")}get winheight(){var t=this.getBoundingClientRect()["height"];return 0!==this.#config.winheight?this.#config.winheight:t}set preferinitialwindowplacement(t){this.toggleAttribute("preferinitialwindowplacement",Boolean(t))}get preferinitialwindowplacement(){return this.#config.preferinitialwindowplacement}set disallowreturntoopener(t){this.toggleAttribute("disallowreturntoopener",Boolean(t))}get disallowreturntoopener(){return this.#config.disallowreturntoopener}set dismisswhenbacktoopener(t){this.toggleAttribute("dismisswhenbacktoopener",Boolean(t))}get dismisswhenbacktoopener(){return this.#config.dismisswhenbacktoopener}#fireEvent(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,...e&&{detail:e}}))}async _onClick(){const t=[...this.children];if(t.length&&window.documentPictureInPicture){const e=t.map(t=>{t=t.cloneNode(!0);return t.classList.add("msc-any-pip-cloned"),t}),i=await window.documentPictureInPicture.requestWindow({width:this.winwidth,height:this.winheight,disallowReturnToOpener:this.disallowreturntoopener,preferInitialWindowPlacement:this.preferinitialwindowplacement});_wcl.cloneStyleSheetsToDocument(i.document),t.forEach(t=>i.document.body.append(t)),e.forEach(t=>this.append(t)),this.#nodes.main.classList.toggle("main--active",!0),this.#fireEvent(custumEvents.piping),i.addEventListener("pagehide",()=>{e.forEach(t=>t.remove()),t.forEach(t=>this.append(t)),this.#nodes.main.classList.toggle("main--active",!1),this.#fireEvent(custumEvents.pipingEnd)},{once:!0})}}requestPictureInPicture(){this.#nodes.trigger.click()}}const S=_wcl.supports(),T=_wcl.classToTagName("MscAnyPip");S.customElements&&S.shadowDOM&&S.template&&!window.customElements.get(T)&&window.customElements.define(_wcl.classToTagName("MscAnyPip"),MscAnyPip),window.customElements.whenDefined("msc-any-pip").then(()=>{document.addEventListener("visibilitychange",()=>{document.hidden||document.querySelector("msc-any-pip[dismisswhenbacktoopener] .msc-any-pip-cloned")&&window.documentPictureInPicture?.window&&window.documentPictureInPicture.window.close()})});export{MscAnyPip};

package.json

 {
   "name": "msc-any-pip",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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

@@ -18,3 +18,3 @@ # msc-any-pip
   type="module"
-  src="https://your-domain/wc-msc-any-pip.js">        
+  src="https://unpkg.com/msc-any-pip/mjs/wc-msc-any-pip.js">        
 </script>
@@ -34,3 +34,4 @@ ```
       "disallowreturntoopener": false,
-      "preferinitialwindowplacement": false
+      "preferinitialwindowplacement": false,
+      "dismisswhenbacktoopener": false
     }
@@ -159,2 +160,12 @@ </script>
 
+- **dismisswhenbacktoopener**
+
+Auto dismiss the Picture-in-Picture window when user switch back to the opener window if true. It is false by default (not set)..
+
+```html
+<msc-any-pip dismisswhenbacktoopener>
+  ...
+</msc-any-pip>
+```
+
 ## Properties
@@ -168,2 +179,3 @@
 | preferinitialwindowplacement | Boolean | Getter / Setter for preferinitialwindowplacement. Open the Picture-in-Picture window in its default position and size if true. It is false by default. |
+| dismisswhenbacktoopener | Boolean | Getter / Setter for dismisswhenbacktoopener. Auto dismiss the Picture-in-Picture window when user switch back to the opener window if true. It is false by default. |
 
@@ -170,0 +182,0 @@ ## Mathod

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

72720

increased by6.42%

Lines of code

1414

increased by7.86%

Number of lines in readme file

197

increased by6.49%

No dependency changes