@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
1 lines • 7.58 kB
JavaScript
import{r as t,c as o,h as i,g as n}from"./p-aa8acb66.js";import{D as s,c as r,e,f as a,l as h,x as c,h as l}from"./p-b018976f.js";import{w as u}from"./p-cbbce638.js";import{w as d,g as v}from"./p-300f1f01.js";import"./p-152748b8.js";var p=function(t,o,i,n){return new(i||(i=Promise))((function(s,r){function e(t){try{h(n.next(t))}catch(t){r(t)}}function a(t){try{h(n.throw(t))}catch(t){r(t)}}function h(t){var o;t.done?s(t.value):(o=t.value,o instanceof i?o:new i((function(t){t(o)}))).then(e,a)}h((n=n.apply(t,o||[])).next())}))};const m=class{constructor(i){t(this,i),this.vmInteractionChange=o(this,"vmInteractionChange",7),this.vmFocus=o(this,"vmFocus",7),this.vmBlur=o(this,"vmBlur",7),this.keyboardDisposal=new s,this.showTapHighlight=!1,this.hidden=!1,this.isTouch=!1,r(this),u(this,["isTouch"])}onKeysChange(){return p(this,void 0,void 0,(function*(){if(this.keyboardDisposal.empty(),e(this.keys))return;const t=yield a(this),o=this.keys.split("/");e(t)||this.keyboardDisposal.add(h(t,"keydown",(t=>{o.includes(t.key)&&this.button.click()})))}))}connectedCallback(){this.findTooltip(),this.onKeysChange()}componentWillLoad(){this.findTooltip()}disconnectedCallback(){this.keyboardDisposal.empty()}focusControl(){var t;return p(this,void 0,void 0,(function*(){null===(t=this.button)||void 0===t||t.focus()}))}blurControl(){var t;return p(this,void 0,void 0,(function*(){null===(t=this.button)||void 0===t||t.blur()}))}onTouchStart(){this.showTapHighlight=!0}onTouchEnd(){setTimeout((()=>{this.showTapHighlight=!1}),100)}findTooltip(){const t=this.host.querySelector("vm-tooltip");return c(t)||(this.describedBy=t.id),t}onShowTooltip(){const t=this.findTooltip();c(t)||(t.active=!0),this.vmInteractionChange.emit(!0)}onHideTooltip(){const t=this.findTooltip();c(t)||(t.active=!1),this.button.blur(),this.vmInteractionChange.emit(!1)}onFocus(){this.vmFocus.emit(),this.onShowTooltip()}onBlur(){this.vmBlur.emit(),this.onHideTooltip()}onMouseEnter(){this.onShowTooltip()}onMouseLeave(){this.onHideTooltip()}render(){const t=this.expanded?"true":"false",o=this.pressed?"true":"false";return i("button",{class:{hidden:this.hidden,notTouch:!this.isTouch,tapHighlight:this.showTapHighlight},id:this.identifier,type:"button","aria-label":this.label,"aria-haspopup":e(this.menu)?void 0:"true","aria-controls":this.menu,"aria-expanded":e(this.menu)?void 0:t,"aria-pressed":e(this.pressed)?void 0:o,"aria-hidden":this.hidden?"true":"false","aria-describedby":this.describedBy,onTouchStart:this.onTouchStart.bind(this),onTouchEnd:this.onTouchEnd.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),onMouseEnter:this.onMouseEnter.bind(this),onMouseLeave:this.onMouseLeave.bind(this),ref:t=>{this.button=t}},i("slot",null))}get host(){return n(this)}static get watchers(){return{keys:["onKeysChange"]}}};m.style="button{display:flex;align-items:center;flex-direction:row;border:var(--vm-control-border);cursor:pointer;flex-shrink:0;font-size:var(--vm-control-icon-size);color:var(--vm-control-color);background:var(--vm-control-bg, transparent);border-radius:var(--vm-control-border-radius);padding:var(--vm-control-padding);position:relative;pointer-events:auto;transition:all 0.3s ease;transform:scale(var(--vm-control-scale, 1));touch-action:manipulation;box-sizing:border-box}button.hidden{display:none}button:focus{outline:0}button.tapHighlight{background:var(--vm-control-tap-highlight)}button.notTouch:focus,button.notTouch:hover,button.notTouch[aria-expanded='true']{background:var(--vm-control-focus-bg);color:var(--vm-control-focus-color);transform:scale(calc(var(--vm-control-scale, 1) + 0.06))}";const f=new Map;var g=function(t,o,i,n){return new(i||(i=Promise))((function(s,r){function e(t){try{h(n.next(t))}catch(t){r(t)}}function a(t){try{h(n.throw(t))}catch(t){r(t)}}function h(t){var o;t.done?s(t.value):(o=t.value,o instanceof i?o:new i((function(t){t(o)}))).then(e,a)}h((n=n.apply(t,o||[])).next())}))};const b=new DOMParser,y=class{constructor(i){t(this,i),this.vmLoad=o(this,"vmLoad",7),this.vmError=o(this,"vmError",7),this.icons="material",r(this),d(this)}handleChange(){this.setIcon()}connectedCallback(){u(this,["icons"])}componentDidLoad(){this.setIcon()}redraw(){return g(this,void 0,void 0,(function*(){this.setIcon()}))}getLabel(){let t="";return this.label?t=this.label:this.name?t=this.name.replace(/-/g," "):this.src&&(t=this.src.replace(/.*\//,"").replace(/-/g," ").replace(/\.svg/i,"")),t}setIcon(){var t;return g(this,void 0,void 0,(function*(){const o=v(null!==(t=this.library)&&void 0!==t?t:this.icons);let i=this.src;if(this.name&&o&&(i=o(this.name)),i)try{const t=yield(t=>{if(f.has(t))return f.get(t);const o=fetch(t).then((t=>{return o=void 0,i=void 0,s=function*(){if(t.ok){const o=document.createElement("div");o.innerHTML=yield t.text();const i=o.firstElementChild;return{ok:t.ok,status:t.status,svg:i&&"svg"===i.tagName.toLowerCase()?i.outerHTML:""}}return{ok:t.ok,status:t.status}},new((n=void 0)||(n=Promise))((function(t,r){function e(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s.throw(t))}catch(t){r(t)}}function h(o){var i;o.done?t(o.value):(i=o.value,i instanceof n?i:new n((function(t){t(i)}))).then(e,a)}h((s=s.apply(o,i||[])).next())}));var o,i,n,s}));return f.set(t,o),o})(i);if(t.ok){const o=b.parseFromString(t.svg,"text/html").body.querySelector("svg");o?(this.svg=o.outerHTML,this.vmLoad.emit()):(this.svg="",this.vmError.emit({status:t.status}))}}catch(t){this.vmError.emit()}}))}render(){return i("div",{class:"icon",role:"img","aria-label":this.getLabel(),innerHTML:this.svg})}static get watchers(){return{name:["handleChange"],src:["handleChange"],library:["handleChange"],icons:["handleChange"]}}};y.style=":host{display:inline-block;width:1em;height:1em;contain:strict;box-sizing:content-box !important}.icon,svg{display:block;height:100%;width:100%;transition:var(--vm-icon-transition);transform:var(--vm-icon-transform);fill:var(--vm-icon-fill, currentColor);stroke:var(--vm-icon-stroke)}";let w=0;const x=class{constructor(o){t(this,o),this.hasLoaded=!1,this.hidden=!1,this.active=!1,this.position="top",this.isTouch=!1,this.isMobile=!1,r(this),u(this,["isTouch","isMobile"])}componentDidLoad(){this.hasLoaded=!0}getId(){const t=this.host.id;return l(t)&&t.length>0?t:(w+=1,`vm-tooltip-${w}`)}render(){return i("div",{id:this.getId(),role:"tooltip","aria-hidden":!this.active||this.isTouch||this.isMobile?"true":"false",class:{tooltip:!0,hidden:!this.hasLoaded||this.hidden,onTop:"top"===this.position,onBottom:"bottom"===this.position,growLeft:"left"===this.direction,growRight:"right"===this.direction}},i("slot",null))}get host(){return n(this)}};x.style=":host{display:contents;z-index:var(--vm-tooltip-z-index)}.tooltip{left:var(--vm-tooltip-left, 50%);transform:translateX(-50%);line-height:1.3;pointer-events:none;position:absolute;opacity:0;white-space:nowrap;visibility:hidden;background:var(--vm-tooltip-bg);border-radius:var(--vm-tooltip-border-radius);box-sizing:border-box;box-shadow:var(--vm-tooltip-box-shadow);color:var(--vm-tooltip-color);font-size:var(--vm-tooltip-font-size);padding:var(--vm-tooltip-padding);transition:opacity var(--vm-tooltip-fade-duration)\n var(--vm-tooltip-fade-timing-func)}.tooltip[aria-hidden='false']{opacity:1;visibility:visible}.tooltip.hidden{display:none}.tooltip.onTop{bottom:100%;margin-bottom:var(--vm-tooltip-spacing)}.tooltip.onBottom{top:100%;margin-top:var(--vm-tooltip-spacing)}.tooltip.growLeft{left:auto;right:0;transform:none}.tooltip.growRight{left:0;transform:none}";export{m as vm_control,y as vm_icon,x as vm_tooltip}