msc-any-pip
v1.0.10
Published
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.
Downloads
458
Maintainers
Readme
msc-any-pip
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.
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,
"disallowreturntoopener": false,
"preferinitialwindowplacement": false
}
</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,
disallowreturntoopener: false,
preferinitialwindowplacement: true
};
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>
Otherwise delevelopers could also add className - align-container-size
to make <msc-any-pip />'s size same as container's size.(default is inline-size: 100%
only)
<msc-any-pip class="align-container-size">
...
</msc-any-pip>
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>
- disallowreturntoopener
Hides the "back to tab" button in the Picture-in-Picture window if true. It is false by default (not set).
<msc-any-pip disallowreturntoopener>
...
</msc-any-pip>
- preferinitialwindowplacement
Open the Picture-in-Picture window in its default position and size if true. It is false by default (not set).
<msc-any-pip preferinitialwindowplacement>
...
</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. | | disallowreturntoopener | Boolean | Getter / Setter for disallowreturntoopener. Hides the "back to tab" button in the Picture-in-Picture window if true. It is false by default. | | 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. |
Mathod
| Mathod Signature | Description | | ----------- | ----------- | | requestPictureInPicture | Request <msc-any-pip /> turn in Document Picture-in-Picture mode. |
Events
| Event Signature | Description | | ----------- | ----------- | | msc-any-pip-piping | Fired when user press confirm. | | msc-any-pip-pip-end | Fired when Picture-in-Picture end. |