msc-any-pip

1.0.6 • Public • Published

msc-any-pip

Published on webcomponents.org DeepScan grade

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.

<msc-any-pip />

Basic Usage

<msc-any-pip /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-any-pip />'s html structure and everything will be all set.

  • Required Script
<script
  type="module"
  src="https://your-domain/wc-msc-any-pip.js">        
</script>
  • Structure

Put <msc-any-pip /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-any-pip>
  <script type="application/json">
    {
      "winwidth": 450,
      "winheight": 300
    }
  </script>

  <!-- Put any HTML element you like -->
  <div class="element-i-like-to-have-pip">
    ...
    ...
    ...
  </div>
</msc-any-pip>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-any-pip />.

<msc-any-pip
  remoteconfig="https://your-domain/api-path"
  ...
></msc-any-pip>

JavaScript Instantiation

<msc-any-pip /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscAnyPip } from 'https://your-domain/wc-msc-any-pip.js';

const template = document.querySelector('.my-template');

// use DOM api
const nodeA = document.createElement('msc-any-pip');
document.body.appendChild(nodeA);
nodeA.appendChild(template.content.cloneNode(true));

// new instance with Class
const nodeB = new MscAnyPip();
document.body.appendChild(nodeB);
nodeB.appendChild(template.content.cloneNode(true));
nodeB.winwidth = 450;
nodeB.winheight = 300;

// new instance with Class & default config
const config = {
  winwidth: 450,
  winheight: 300
};
const nodeC = new MscAnyPip(config);
document.body.appendChild(nodeC);
nodeC.appendChild(template.content.cloneNode(true));
</script>

Style Customization

Developers could apply styles to decorate <msc-any-pip />'s looking.

<style>
msc-any-pip {
  --msc-any-pip-piping-text: 'Playing in Picture-in-Picture.';
  --msc-any-pip-piping-color: #39e75f;
  --msc-any-pip-piping-font-size: 16px;
  --msc-any-pip-button-z-index: 1;
}
</style>

Attributes

<msc-any-pip /> supports some attributes to let it become more convenience & useful.

  • winwidth

Set Picture-in-Picture window width. Default is <msc-any-pip />'s clientWidth. (Picture-in-Picture's min window width is 300)

<msc-any-pip winwidth="450">
  ...
</msc-any-pip>
  • winheight

Set Picture-in-Picture window height. Default is <msc-any-pip />'s clientHeight. (Picture-in-Picture's min window height is 300)

<msc-any-pip winheight="300">
  ...
</msc-any-pip>

Properties

Property Name Type Description
winwidth Number Getter / Setter for Picture-in-Picture window width. Default is <msc-any-pip />'s clientWidth.
winheight Number Getter / Setter for Picture-in-Picture window height. Default is <msc-any-pip />'s clientHeight.

Events

Event Signature Description
msc-any-pip-piping Fired when user press confirm.
msc-any-pip-pip-end Fired when Picture-in-Picture end.

Reference

Package Sidebar

Install

npm i msc-any-pip

Weekly Downloads

8

Version

1.0.6

License

MIT

Unpacked Size

58.3 kB

Total Files

7

Last publish

Collaborators

  • meistudioli