@ezuikit/theme-plugin-playback-rate/dist/index.esm.js

回放主题

/*
*
* @ezuikit/theme-plugin-playback-rate v0.1.0
* Copyright (c) 2024-3-23 Ezviz-OpenBiz
* Released under MIT the License.
*
*/
import{PREFIX_CLASS_NAME as e,addClass as t,removeClass as a}from"@ezuikit/utils-dom";import{FOOTER_PREFIX_CLS as o,FOOTER_RIGHT_CLS as i}from"@ezuikit/theme-plugin-footer";function n(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===a&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}n(":root{--font-size:14px;--color:#fff;--background-color:#000;--active-color:#1890ff;--botton-color:var(--color);--botton-border-color:var(--color);--footer-height:48px;--footer-icon-size:27px;--footer-color:--color;--footer-background-color:var(--background-color,#000);--footer-active-color:var(--active-color,#1890ff);--header-height:var(--footer-height,48px);--header-icon-size:27px;--header-color:var(--footer-color);--header-background-color:var(-footer-bg-color,#000);--header-active-color:var(--footer-active-color,#1890ff);--date-picker-header-height:34px;--date-picker-color:#595959;--date-picker-primary-color:#1890ff;--date-picker-font-size:14px;--date-picker-border-color:rgba(5,5,5,.06);--date-picker-disable-border-color:rgba(0,0,0,.2);--data-picker-scrollbar-width:8px;--data-picker-border-radius:2px}.ezui-playbackRate{position:relative;width:auto!important}.ezui-playbackRate .ezui-btn{border-color:var(--ezui-footer-color,#fff);border-radius:13px;color:var(--ezui-footer-color,#fff);height:26px;line-height:26px;min-width:64px;padding:0 7px;transition:none}.ezui-playbackRate .ezui-active{border-color:var(--ezui-active-color,#1890ff)}.ezui-playbackRate .ezui-disable{border-color:gray}");n(':root{--font-size:14px;--color:#fff;--background-color:#000;--active-color:#1890ff;--botton-color:var(--color);--botton-border-color:var(--color);--footer-height:48px;--footer-icon-size:27px;--footer-color:--color;--footer-background-color:var(--background-color,#000);--footer-active-color:var(--active-color,#1890ff);--header-height:var(--footer-height,48px);--header-icon-size:27px;--header-color:var(--footer-color);--header-background-color:var(-footer-bg-color,#000);--header-active-color:var(--footer-active-color,#1890ff);--date-picker-header-height:34px;--date-picker-color:#595959;--date-picker-primary-color:#1890ff;--date-picker-font-size:14px;--date-picker-border-color:rgba(5,5,5,.06);--date-picker-disable-border-color:rgba(0,0,0,.2);--data-picker-scrollbar-width:8px;--data-picker-border-radius:2px}.ezui-playbackRate-panel{bottom:calc(var(--ezui-footer-height, 48px) + 16px);box-sizing:border-box;display:inline-flex;flex-direction:column;font-size:13px;left:50%;position:absolute;transform:translateX(-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none}.ezui-playbackRate-panel li,.ezui-playbackRate-panel ul{box-sizing:border-box;list-style:none;margin:0;padding:0}.ezui-playbackRate-panel ul.ezui-playbackRate-panel-list{background:#fff;border-radius:2px;box-shadow:0 3px 20px 0 rgba(0,0,0,.1);color:rgba(0,0,0,.85);display:inline-flex;flex-direction:column;padding:10px 0;position:relative;text-align:center;width:120px}.ezui-playbackRate-panel ul.ezui-playbackRate-panel-list:after{border:8px solid transparent;border-top-color:#fff;bottom:-16px;box-sizing:border-box;content:" ";height:16px;left:50%;position:absolute;transform:translateX(-50%);width:16px}.ezui-playbackRate-panel-item{cursor:pointer;font-size:13px;height:45px;line-height:45px;list-style:none;text-align:center}.ezui-playbackRate-panel-item:hover{background-color:rgba(24,144,255,.102)}.ezui-playbackRate-panel-btn-cancel{background:#fff;border-radius:10px;box-shadow:0 3px 20px 0 rgba(0,0,0,.1);display:none;height:45px;line-height:45px;margin-top:30px;text-align:center}.ezui-playbackRate-panel-item-selected{color:var(--primary-color,#648ffc)}.ezui-playbackRate-panel.ezui-playbackRate-panel-mobile{background:rgba(0,0,0,.4);bottom:0;box-sizing:border-box;height:100%;justify-content:flex-end;left:0;padding-bottom:calc(env(safe-area-inset-bottom) + 80px);position:fixed;right:0;top:0;transform:translateX(0);width:100%;z-index:9999}.ezui-playbackRate-panel.ezui-playbackRate-panel-mobile .ezui-playbackRate-panel-list{border-radius:10px;margin:0 5%;width:auto}.ezui-playbackRate-panel.ezui-playbackRate-panel-mobile .ezui-playbackRate-panel-list:after{display:none}.ezui-playbackRate-panel.ezui-playbackRate-panel-mobile .ezui-playbackRate-panel-btn-cancel{cursor:pointer;display:inline-block;height:45px;margin:30px 5% 0}.ezui-playbackRate-panel.ezui-playbackRate-panel-fullscreen-mobile{align-items:end;justify-content:center;padding-bottom:0}.ezui-playbackRate-panel.ezui-playbackRate-panel-fullscreen-mobile ul.ezui-playbackRate-panel-list{align-items:center!important;background-color:transparent!important;background:rgba(0,0,0,.75)!important;border-radius:0!important;color:#fff!important;flex-direction:column!important;height:100vw!important;justify-content:center!important;margin:0!important;padding-bottom:calc(env(safe-area-inset-bottom) + 20px);width:240px!important}.ezui-playbackRate-panel.ezui-playbackRate-panel-fullscreen-mobile ul.ezui-playbackRate-panel-list li{background-color:transparent!important;width:100%}.ezui-playbackRate-panel.ezui-playbackRate-panel-fullscreen-mobile .ezui-playbackRate-panel-btn-cancel{background:transparent;background:none;border-radius:0;box-shadow:none;font-size:0;margin:0;position:absolute;right:200px;top:0;width:40px}.ezui-playbackRate-panel.ezui-playbackRate-panel-fullscreen-mobile .ezui-playbackRate-panel-btn-cancel:before{background:#fff;border:none;content:"";display:block;height:1px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:16px}.ezui-playbackRate-panel.ezui-playbackRate-panel-fullscreen-mobile .ezui-playbackRate-panel-btn-cancel:after{background:#fff;border:none;content:"";display:block;height:16px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:1px}');const r=[.5,1,2,4,8],l=`${e}-playbackRate-panel`,c={open:!1,rates:[{rate:4,text:"4倍"},{rate:2,text:"2倍"},{rate:1,text:"1倍（正常播放）",isDefault:!0},{rate:.5,text:"0.5倍"}]};class s{get current(){return this._current}constructor(e,t={}){this.$container=e,this.options=Object.assign({},c,t),0===this.options.rates.length&&(this.options.rates=c.rates),this._current=this._getDefaultCurrent(),this.$panelContainer=this.render()}_getDefaultCurrent(){var e;if(r.includes(this.options.current))return this.options.current;const t=this.options.rates.find((e=>e.isDefault));return t?t.rate:null===(e=this.options.rates[0])||void 0===e?void 0:e.rate}show(){this.options.theme.mobileFullScreen?(this.$panelContainer.classList.contains(`${l}-fullscreen-mobile`)||this.$panelContainer.classList.add(`${l}-fullscreen-mobile`),function(e,t=9999){new Promise((()=>{const a=document.documentElement.clientWidth,o=document.documentElement.clientHeight,i=e;let n="";n+="width:"+o+"px;",n+="height:"+a+"px;",n+="-webkit-transform: rotate(90.001deg); transform: rotate(90.001deg);",n+="-webkit-transform-origin: "+a/2+"px "+a/2+"px;",n+="transform-origin: "+a/2+"px "+a/2+"px;",n+=`position: fixed;top: 0;left: 0;z-index:${t}`,i.style.cssText=i.style.cssText+n}))}(this.$panelContainer)):(this.$panelContainer.classList.remove(`${l}-fullscreen-mobile`),this.$panelContainer.style.cssText=""),this.$panelContainer.style.display="inline-flex","function"==typeof this.options.onOpenChange&&this.options.onOpenChange(!0)}hide(){this.$panelContainer.style.display="none","function"==typeof this.options.onOpenChange&&this.options.onOpenChange(!1)}selectedCurrent(e){var t,a,o,i;this._current=e||this._current;const n=`${l}-item-selected`;if(null===(a=null===(t=this.$panelContainer.querySelector(`.${n}`))||void 0===t?void 0:t.classList)||void 0===a||a.remove(n),null===(o=this.$panelContainer.querySelector(`.${l}-item[data-rate="${this._current}"]`))||void 0===o||o.classList.add(n),"function"==typeof this.options.onChange){const e=this.options.rates.find((e=>e.rate===this._current));e&&(null===(i=this.options)||void 0===i||i.onChange(e))}this.hide()}render(){var e;const t=document.createElement("div");if(t.classList.add(l),t.style.display="none",t.innerHTML=`\n        <ul class="${l}-list">\n            ${(null!==(e=this.options.rates)&&void 0!==e?e:[]).map((e=>`<li class="${l}-item ${this._current===e.rate?`${l}-item-selected`:""}" data-rate="${e.rate}">${e.text||e.rate}</li>`)).join("")}\n        </ul>`,this.options.isMobile){t.classList.add(`${l}-mobile`),this.options.theme.mobileFullScreen&&t.classList.add(`${l}-fullscreen-mobile`);const e=document.createElement("div");e.classList.add(`${l}-btn-cancel`),e.innerHTML="取消",t.appendChild(e),null==e||e.addEventListener("click",(()=>{this.hide(),"function"==typeof this.options.onOk&&this.options.onOk()})),null==t||t.addEventListener("click",(()=>{this.hide()})),document.body.appendChild(t)}else this.$container.appendChild(t);return t.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),function(e,t,a){e.addEventListener("click",(o=>{let i=o.target||o.srcElement;for(;i!==e;){if(i.classList.contains(t.replace(/^\./,""))){a(i);break}if(!i.parentNode)break;i=i.parentNode}}),!1)}(t,`${l}-item`,(e=>{const t=e.getAttribute("data-rate");if(null!==t&&+t>0){const e=+t;r.includes(e)&&this._current!==e&&(this._current=e,this.selectedCurrent()),this.hide()}})),t}}function p(n){return function(r){const l=r;let c=!1;const p=document.createElement("div");t(p,`${o}-item`,`${e}-playbackRate`),p.innerHTML=`<button class="${e}-btn ${e}-btn-default">倍速</button>`;const d=l.$container.querySelector(`.${i}`);if(d){d.appendChild(p);const o=p.getElementsByClassName(`${e}-btn`)[0];t(o,`${e}-disable`);const i=new s(p,{theme:l,rates:(null==n?void 0:n.list)||[],isMobile:l.options.isMobile,open:!1,onOpenChange:t=>{o&&!t&&a(o,`${e}-active`),c=!!t},onChange:t=>{o&&(o.innerHTML=1===(null==t?void 0:t.rate)?"倍速":(null==t?void 0:t.text)||""),l.setPlaybackRate(null==t?void 0:t.rate),a(o,`${e}-active`),c=!1}});o.addEventListener("click",(n=>{o.classList.contains(`${e}-disable`)||(c?(i.hide(),c=!1,a(o,`${e}-active`)):(i.show(),c=!0,t(o,`${e}-active`)),n.stopPropagation(),n.preventDefault())})),l.event.on("EVENT_CALLBACK",(t=>{"appearFirstFrameCallback"===t.data.type&&(a(o,`${e}-disable`),i.current>1&&l.setPlaybackRate(i.current||1))})),["urlChange","pause","stop"].forEach((a=>{l.event.on(a,(()=>{t(o,`${e}-disable`)}))})),l.event.on("urlChange",(()=>{i.selectedCurrent(1)})),l.event.on("seek",(()=>{i.selectedCurrent(i.current||1)}))}return p}}export{p as default};