@mattebox/player 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
<h1>
|
|
2
|
+
<img src="https://raw.githubusercontent.com/jboix/mattebox-player/main/docs/logo.svg" width="44" height="44" align="absmiddle" alt="">
|
|
3
|
+
@mattebox/player
|
|
4
|
+
</h1>
|
|
2
5
|
|
|
3
6
|
The `<mattebox-player>` custom element of the
|
|
4
7
|
[Mattebox player](https://github.com/jboix/mattebox-player): a real
|
|
@@ -298,7 +298,7 @@ mattebox-player[subtitle-background="solid"] > ${Xe} { background-color: #000; }
|
|
|
298
298
|
font: 400 13px/1.4 var(--mbx-font);
|
|
299
299
|
}
|
|
300
300
|
:host([hidden]) { display: none; }
|
|
301
|
-
`),document.createElement(`slot`))}empty(){return![...this.children].some(e=>!e.hidden)}attach(){let e=()=>{let e=this.empty();this.hidden!==e&&(this.hidden=e)},t=new MutationObserver(e);t.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`hidden`]}),this.keep(()=>{t.disconnect()}),e()}};customElements.get(`mbx-panels`)===void 0&&customElements.define(D,kt);function At(e,t){return n=>{for(let r of t)e.addEventListener(r,n);return()=>{for(let r of t)e.removeEventListener(r,n)}}}function jt(e){var t;let n=e;return typeof e.requestPictureInPicture==`function`&&document.pictureInPictureEnabled?{supported:!0,active:()=>document.pictureInPictureElement===e,toggle(){(document.pictureInPictureElement===e?document.exitPictureInPicture():e.requestPictureInPicture()).catch(()=>void 0)},watch:At(e,[`enterpictureinpicture`,`leavepictureinpicture`])}:typeof n.webkitSetPresentationMode==`function`&&((t=n.webkitSupportsPresentationMode)==null?void 0:t.call(n,`picture-in-picture`))===!0?{supported:!0,active:()=>n.webkitPresentationMode===`picture-in-picture`,toggle(){var e;let t=n.webkitPresentationMode===`picture-in-picture`?`inline`:`picture-in-picture`;(e=n.webkitSetPresentationMode)==null||e.call(n,t)},watch:At(e,[`webkitpresentationmodechanged`])}:{supported:!1,active:()=>!1,toggle(){},watch:()=>()=>{}}}let Mt=[`enter`,`exit`];var Nt=class extends L{static get observedAttributes(){return[`label-enter`,`label-exit`]}constructor(){super(),this.api=null;let e=this.attachShadow({mode:`open`});this.button=document.createElement(`button`),this.button.type=`button`,this.button.setAttribute(`part`,`button`),this.slots=H(Mt,e=>F(e===`enter`?`picture-in-picture`:`picture-in-picture-exit`));for(let e of Mt)this.button.append(this.slots[e]);this.button.addEventListener(`click`,()=>{var e;(e=this.api)==null||e.toggle()}),e.append(V(R),this.button)}attach(e){let t=jt(e.video);this.api=t,this.hidden=!t.supported,this.keep(t.watch(()=>{this.render()})),this.render()}detach(e){this.api=null,e.removeAttribute(`pip`)}render(){var e,t;let n=this.player;if(n===null||this.api===null)return;let r=this.api.active();U(this.slots,r?`exit`:`enter`),this.button.setAttribute(`aria-label`,r?(e=this.getAttribute(`label-exit`))==null?`Leave picture in picture`:e:(t=this.getAttribute(`label-enter`))==null?`Picture in picture`:t),n.toggleAttribute(`pip`,r)}};customElements.get(`mbx-pip-button`)===void 0&&customElements.define(S,Nt);let Pt=[`play`,`pause`,`replay`],Ft={play:`Play`,pause:`Pause`,replay:`Replay`};var It=class extends L{static get observedAttributes(){return Pt.map(e=>`label-${e}`)}constructor(){super();let e=this.attachShadow({mode:`open`});this.button=document.createElement(`button`),this.button.type=`button`,this.button.setAttribute(`part`,`button`),this.slots=H(Pt,F);for(let e of Pt)this.button.append(this.slots[e]);this.button.addEventListener(`click`,()=>{this.toggle()}),e.append(V(R),this.button)}toggle(){var e;let t=(e=this.player)==null?void 0:e.video;t!==void 0&&(t.paused?t.play().catch(()=>void 0):t.pause())}attach(e){this.listen(e.video,[`play`,`pause`,`ended`,`emptied`],()=>{this.render()}),this.render()}render(){var e,t;let n=(e=this.player)==null?void 0:e.video;if(n===void 0)return;let r=n.ended?`replay`:n.paused?`play`:`pause`;U(this.slots,r),this.button.setAttribute(`aria-label`,(t=this.getAttribute(`label-${r}`))==null?Ft[r]:t)}};customElements.get(`mbx-play-button`)===void 0&&customElements.define(oe,It);let Lt=`auto`;function Rt(e){return e.height===void 0?`${Math.round(e.bitrate/1e3)} kbps`:`${e.height}p`}var zt=class extends W{static get observedAttributes(){return[`label`,`label-auto`,`label-back`]}constructor(){super(...G(`settings`)),this.engine=null,U(this.slots,`default`)}name(){return`Quality`}attach(e){this.follow(e,e=>{if(this.engine=e,this.render(),e===null)return;let t=()=>{this.render()},n=[e.on(`tracks:changed`,t),e.on(`quality:constraints-unsatisfiable`,t),e.on(`quality:pin-unsatisfiable`,t)];return()=>{for(let e of n)e()}})}render(){var e,t;super.render();let n=this.engine;if(n===null){this.hidden=!0;return}let r=n.quality,i=[[Lt,(e=this.getAttribute(`label-auto`))==null?`Auto`:e]];for(let e of r.renditions)i.push([e.id,Rt(e)]);this.menu.fill([{name:`rendition`,items:i,value:(t=r.pinned)==null?Lt:t,onSelect:e=>{e===Lt?r.auto():r.pin(e),this.render()}}]),this.hidden=r.renditions.length===0}};customElements.get(`mbx-quality-menu`)===void 0&&customElements.define(w,zt);var Bt=class extends vt{constructor(){super(`:host { text-align: right; }`)}render(){let e=this.player;if(e===null)return;let t=e.video,n=e.engine,r=X(n)!==void 0;this.hidden=r,r||(this.text.data=`-${q(Math.max(0,Z(t,n).end-t.currentTime))}`)}};customElements.get(`mbx-remaining-time`)===void 0&&customElements.define(`mbx-remaining-time`,Bt);function Vt(e,t,n){return Math.min(n,Math.max(t,e))}function Ht(e){let{onInput:t}=e,n=N(`div`,`slider`);n.setAttribute(`role`,`slider`),n.tabIndex=0;let r=N(`div`,`rail`),i=N(`div`,`track`),a=N(`div`,`fill`),o=N(`div`,`thumb`);i.append(a),r.append(i,o),n.append(r);let s=0,c=1,l=0,u=!1;function d(){let e=`${(c>s?(l-s)/(c-s):0)*100}%`;a.style.width=e,o.style.left=e}function f(e){let t=r.getBoundingClientRect();return t.width===0?s:s+Vt((e-t.left)/t.width,0,1)*(c-s)}function p(t){u=t,e.onDrag(t)}function m(e){if(e.button===0){e.preventDefault(),p(!0);try{n.setPointerCapture(e.pointerId)}catch(e){}t(f(e.clientX))}}function h(e){u
|
|
301
|
+
`),document.createElement(`slot`))}empty(){return![...this.children].some(e=>!e.hidden)}attach(){let e=()=>{let e=this.empty();this.hidden!==e&&(this.hidden=e)},t=new MutationObserver(e);t.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`hidden`]}),this.keep(()=>{t.disconnect()}),e()}};customElements.get(`mbx-panels`)===void 0&&customElements.define(D,kt);function At(e,t){return n=>{for(let r of t)e.addEventListener(r,n);return()=>{for(let r of t)e.removeEventListener(r,n)}}}function jt(e){var t;let n=e;return typeof e.requestPictureInPicture==`function`&&document.pictureInPictureEnabled?{supported:!0,active:()=>document.pictureInPictureElement===e,toggle(){(document.pictureInPictureElement===e?document.exitPictureInPicture():e.requestPictureInPicture()).catch(()=>void 0)},watch:At(e,[`enterpictureinpicture`,`leavepictureinpicture`])}:typeof n.webkitSetPresentationMode==`function`&&((t=n.webkitSupportsPresentationMode)==null?void 0:t.call(n,`picture-in-picture`))===!0?{supported:!0,active:()=>n.webkitPresentationMode===`picture-in-picture`,toggle(){var e;let t=n.webkitPresentationMode===`picture-in-picture`?`inline`:`picture-in-picture`;(e=n.webkitSetPresentationMode)==null||e.call(n,t)},watch:At(e,[`webkitpresentationmodechanged`])}:{supported:!1,active:()=>!1,toggle(){},watch:()=>()=>{}}}let Mt=[`enter`,`exit`];var Nt=class extends L{static get observedAttributes(){return[`label-enter`,`label-exit`]}constructor(){super(),this.api=null;let e=this.attachShadow({mode:`open`});this.button=document.createElement(`button`),this.button.type=`button`,this.button.setAttribute(`part`,`button`),this.slots=H(Mt,e=>F(e===`enter`?`picture-in-picture`:`picture-in-picture-exit`));for(let e of Mt)this.button.append(this.slots[e]);this.button.addEventListener(`click`,()=>{var e;(e=this.api)==null||e.toggle()}),e.append(V(R),this.button)}attach(e){let t=jt(e.video);this.api=t,this.hidden=!t.supported,this.keep(t.watch(()=>{this.render()})),this.render()}detach(e){this.api=null,e.removeAttribute(`pip`)}render(){var e,t;let n=this.player;if(n===null||this.api===null)return;let r=this.api.active();U(this.slots,r?`exit`:`enter`),this.button.setAttribute(`aria-label`,r?(e=this.getAttribute(`label-exit`))==null?`Leave picture in picture`:e:(t=this.getAttribute(`label-enter`))==null?`Picture in picture`:t),n.toggleAttribute(`pip`,r)}};customElements.get(`mbx-pip-button`)===void 0&&customElements.define(S,Nt);let Pt=[`play`,`pause`,`replay`],Ft={play:`Play`,pause:`Pause`,replay:`Replay`};var It=class extends L{static get observedAttributes(){return Pt.map(e=>`label-${e}`)}constructor(){super();let e=this.attachShadow({mode:`open`});this.button=document.createElement(`button`),this.button.type=`button`,this.button.setAttribute(`part`,`button`),this.slots=H(Pt,F);for(let e of Pt)this.button.append(this.slots[e]);this.button.addEventListener(`click`,()=>{this.toggle()}),e.append(V(R),this.button)}toggle(){var e;let t=(e=this.player)==null?void 0:e.video;t!==void 0&&(t.paused?t.play().catch(()=>void 0):t.pause())}attach(e){this.listen(e.video,[`play`,`pause`,`ended`,`emptied`],()=>{this.render()}),this.render()}render(){var e,t;let n=(e=this.player)==null?void 0:e.video;if(n===void 0)return;let r=n.ended?`replay`:n.paused?`play`:`pause`;U(this.slots,r),this.button.setAttribute(`aria-label`,(t=this.getAttribute(`label-${r}`))==null?Ft[r]:t)}};customElements.get(`mbx-play-button`)===void 0&&customElements.define(oe,It);let Lt=`auto`;function Rt(e){return e.height===void 0?`${Math.round(e.bitrate/1e3)} kbps`:`${e.height}p`}var zt=class extends W{static get observedAttributes(){return[`label`,`label-auto`,`label-back`]}constructor(){super(...G(`settings`)),this.engine=null,U(this.slots,`default`)}name(){return`Quality`}attach(e){this.follow(e,e=>{if(this.engine=e,this.render(),e===null)return;let t=()=>{this.render()},n=[e.on(`tracks:changed`,t),e.on(`quality:constraints-unsatisfiable`,t),e.on(`quality:pin-unsatisfiable`,t)];return()=>{for(let e of n)e()}})}render(){var e,t;super.render();let n=this.engine;if(n===null){this.hidden=!0;return}let r=n.quality,i=[[Lt,(e=this.getAttribute(`label-auto`))==null?`Auto`:e]];for(let e of r.renditions)i.push([e.id,Rt(e)]);this.menu.fill([{name:`rendition`,items:i,value:(t=r.pinned)==null?Lt:t,onSelect:e=>{e===Lt?r.auto():r.pin(e),this.render()}}]),this.hidden=r.renditions.length===0}};customElements.get(`mbx-quality-menu`)===void 0&&customElements.define(w,zt);var Bt=class extends vt{constructor(){super(`:host { text-align: right; }`)}render(){let e=this.player;if(e===null)return;let t=e.video,n=e.engine,r=X(n)!==void 0;this.hidden=r,r||(this.text.data=`-${q(Math.max(0,Z(t,n).end-t.currentTime))}`)}};customElements.get(`mbx-remaining-time`)===void 0&&customElements.define(`mbx-remaining-time`,Bt);function Vt(e,t,n){return Math.min(n,Math.max(t,e))}function Ht(e){let{onInput:t}=e,n=N(`div`,`slider`);n.setAttribute(`role`,`slider`),n.tabIndex=0;let r=N(`div`,`rail`),i=N(`div`,`track`),a=N(`div`,`fill`),o=N(`div`,`thumb`);i.append(a),r.append(i,o),n.append(r);let s=0,c=1,l=0,u=!1;function d(){let e=`${(c>s?(l-s)/(c-s):0)*100}%`;a.style.width=e,o.style.left=e}function f(e){let t=r.getBoundingClientRect();return t.width===0?s:s+Vt((e-t.left)/t.width,0,1)*(c-s)}function p(t){u=t,e.onDrag(t)}function m(e){if(e.button===0){e.preventDefault(),p(!0);try{n.setPointerCapture(e.pointerId)}catch(e){}t(f(e.clientX))}}function h(e){if(u){if(e.buttons===0){g(e);return}t(f(e.clientX))}}function g(e){u&&(p(!1),t(f(e.clientX)))}function _(){u&&p(!1)}function v(n){let r;switch(n.key){case`ArrowRight`:case`ArrowUp`:r=l+e.step();break;case`ArrowLeft`:case`ArrowDown`:r=l-e.step();break;case`PageUp`:r=l+e.page();break;case`PageDown`:r=l-e.page();break;case`Home`:r=s;break;case`End`:r=c;break;default:return}n.preventDefault(),t(Vt(r,s,c))}return n.addEventListener(`pointerdown`,m),n.addEventListener(`pointermove`,h),n.addEventListener(`pointerup`,g),n.addEventListener(`pointercancel`,_),n.addEventListener(`lostpointercapture`,_),n.addEventListener(`keydown`,v),{root:n,track:i,rail:r,label(e){n.setAttribute(`aria-label`,e)},dragging(){return u},range(e,t){s=e,c=t,n.setAttribute(`aria-valuemin`,String(e)),n.setAttribute(`aria-valuemax`,String(t)),d()},set(e,t){l=Vt(e,s,c),n.setAttribute(`aria-valuenow`,String(l)),n.setAttribute(`aria-valuetext`,t),d()},dispose(){n.removeEventListener(`pointerdown`,m),n.removeEventListener(`pointermove`,h),n.removeEventListener(`pointerup`,g),n.removeEventListener(`pointercancel`,_),n.removeEventListener(`lostpointercapture`,_),n.removeEventListener(`keydown`,v)}}}let Ut=[`timeupdate`,`progress`,`durationchange`,`loadedmetadata`,`seeking`,`seeked`,`emptied`],Wt=`${Le}
|
|
302
302
|
:host { flex: 1; }
|
|
303
303
|
[part~="slider"] { flex: 1; }
|
|
304
304
|
[part~="thumb"] { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/controls/slider.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/controls/slider.ts"],"names":[],"mappings":"AAyBA,MAAM,WAAW,aAAa;IAC5B,4CAA4C;IAC5C,QAAQ,CAAC,IAAI,EAAE,MAAM,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,EAAE,MAAM,MAAM,CAAC;IAC5B,sEAAsE;IACtE,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,oFAAoF;IACpF,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,2BAA2B;IAC3B,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,oFAAoF;IACpF,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,+FAA+F;IAC/F,QAAQ,IAAI,OAAO,CAAC;IACpB,qCAAqC;IACrC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,4DAA4D;IAC5D,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CA4IrD"}
|
package/dist/controls/slider.js
CHANGED
|
@@ -15,6 +15,11 @@
|
|
|
15
15
|
*
|
|
16
16
|
* The steps are read on every key, so an element can take them from its
|
|
17
17
|
* attributes as they change.
|
|
18
|
+
*
|
|
19
|
+
* A drag ends on `pointerup`, and also on a move that reports no button
|
|
20
|
+
* held: the button went up where no `pointerup` reached the slider, such
|
|
21
|
+
* as outside the window, and the thumb must not stay on the pointer. A
|
|
22
|
+
* lost capture ends it too.
|
|
18
23
|
*/
|
|
19
24
|
import { el } from '../dom.js';
|
|
20
25
|
function clamp(value, min, max) {
|
|
@@ -68,8 +73,15 @@ export function slider(options) {
|
|
|
68
73
|
onInput(at(event.clientX));
|
|
69
74
|
}
|
|
70
75
|
function move(event) {
|
|
71
|
-
if (held)
|
|
72
|
-
|
|
76
|
+
if (!held)
|
|
77
|
+
return;
|
|
78
|
+
// A mouse that moves with no button down has let go; a touch or a pen
|
|
79
|
+
// in contact reports one.
|
|
80
|
+
if (event.buttons === 0) {
|
|
81
|
+
up(event);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
onInput(at(event.clientX));
|
|
73
85
|
}
|
|
74
86
|
function up(event) {
|
|
75
87
|
if (!held)
|
|
@@ -114,6 +126,7 @@ export function slider(options) {
|
|
|
114
126
|
root.addEventListener('pointermove', move);
|
|
115
127
|
root.addEventListener('pointerup', up);
|
|
116
128
|
root.addEventListener('pointercancel', cancel);
|
|
129
|
+
root.addEventListener('lostpointercapture', cancel);
|
|
117
130
|
root.addEventListener('keydown', key);
|
|
118
131
|
return {
|
|
119
132
|
root,
|
|
@@ -143,6 +156,7 @@ export function slider(options) {
|
|
|
143
156
|
root.removeEventListener('pointermove', move);
|
|
144
157
|
root.removeEventListener('pointerup', up);
|
|
145
158
|
root.removeEventListener('pointercancel', cancel);
|
|
159
|
+
root.removeEventListener('lostpointercapture', cancel);
|
|
146
160
|
root.removeEventListener('keydown', key);
|
|
147
161
|
},
|
|
148
162
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/controls/slider.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/controls/slider.ts"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,11 @@ import { el } from "../dom.js";
|
|
|
17
17
|
*
|
|
18
18
|
* The steps are read on every key, so an element can take them from its
|
|
19
19
|
* attributes as they change.
|
|
20
|
+
*
|
|
21
|
+
* A drag ends on `pointerup`, and also on a move that reports no button
|
|
22
|
+
* held: the button went up where no `pointerup` reached the slider, such
|
|
23
|
+
* as outside the window, and the thumb must not stay on the pointer. A
|
|
24
|
+
* lost capture ends it too.
|
|
20
25
|
*/
|
|
21
26
|
function clamp(value, min, max) {
|
|
22
27
|
return Math.min(max, Math.max(min, value));
|
|
@@ -62,7 +67,12 @@ function slider(options) {
|
|
|
62
67
|
onInput(at(event.clientX));
|
|
63
68
|
}
|
|
64
69
|
function move(event) {
|
|
65
|
-
if (held)
|
|
70
|
+
if (!held) return;
|
|
71
|
+
if (event.buttons === 0) {
|
|
72
|
+
up(event);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
onInput(at(event.clientX));
|
|
66
76
|
}
|
|
67
77
|
function up(event) {
|
|
68
78
|
if (!held) return;
|
|
@@ -104,6 +114,7 @@ function slider(options) {
|
|
|
104
114
|
root.addEventListener("pointermove", move);
|
|
105
115
|
root.addEventListener("pointerup", up);
|
|
106
116
|
root.addEventListener("pointercancel", cancel);
|
|
117
|
+
root.addEventListener("lostpointercapture", cancel);
|
|
107
118
|
root.addEventListener("keydown", key);
|
|
108
119
|
return {
|
|
109
120
|
root,
|
|
@@ -133,6 +144,7 @@ function slider(options) {
|
|
|
133
144
|
root.removeEventListener("pointermove", move);
|
|
134
145
|
root.removeEventListener("pointerup", up);
|
|
135
146
|
root.removeEventListener("pointercancel", cancel);
|
|
147
|
+
root.removeEventListener("lostpointercapture", cancel);
|
|
136
148
|
root.removeEventListener("keydown", key);
|
|
137
149
|
}
|
|
138
150
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mattebox/player",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "A <mattebox-player> custom element over @mattebox/player-core.",
|
|
5
5
|
"author": "Josep Boix Requesens",
|
|
6
6
|
"repository": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"url": "git+https://github.com/jboix/mattebox-player.git",
|
|
9
9
|
"directory": "packages/player"
|
|
10
10
|
},
|
|
11
|
-
"homepage": "https://github.
|
|
11
|
+
"homepage": "https://jboix.github.io/mattebox-player/",
|
|
12
12
|
"bugs": {
|
|
13
13
|
"url": "https://github.com/jboix/mattebox-player/issues"
|
|
14
14
|
},
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"release:ci": "semantic-release"
|
|
71
71
|
},
|
|
72
72
|
"dependencies": {
|
|
73
|
-
"@mattebox/player-core": "^0.1.
|
|
73
|
+
"@mattebox/player-core": "^0.1.1"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"mattebox": "^0.3.0"
|