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

回放主题

/*
*
* @ezuikit/theme-plugin-playback-rate v0.1.0
* Copyright (c) 2024-3-23 Ezviz-OpenBiz
* Released under MIT the License.
*
*/
"use strict";var e=require("@ezuikit/utils-dom"),t=require("@ezuikit/theme-plugin-footer");function a(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))}}a(":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}");a(':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 o=[.5,1,2,4,8],i=`${e.PREFIX_CLASS_NAME}-playbackRate-panel`,n={open:!1,rates:[{rate:4,text:"4倍"},{rate:2,text:"2倍"},{rate:1,text:"1倍（正常播放）",isDefault:!0},{rate:.5,text:"0.5倍"}]};class r{get current(){return this._current}constructor(e,t={}){this.$container=e,this.options=Object.assign({},n,t),0===this.options.rates.length&&(this.options.rates=n.rates),this._current=this._getDefaultCurrent(),this.$panelContainer=this.render()}_getDefaultCurrent(){var e;if(o.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(`${i}-fullscreen-mobile`)||this.$panelContainer.classList.add(`${i}-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(`${i}-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,n;this._current=e||this._current;const r=`${i}-item-selected`;if(null===(a=null===(t=this.$panelContainer.querySelector(`.${r}`))||void 0===t?void 0:t.classList)||void 0===a||a.remove(r),null===(o=this.$panelContainer.querySelector(`.${i}-item[data-rate="${this._current}"]`))||void 0===o||o.classList.add(r),"function"==typeof this.options.onChange){const e=this.options.rates.find((e=>e.rate===this._current));e&&(null===(n=this.options)||void 0===n||n.onChange(e))}this.hide()}render(){var e;const t=document.createElement("div");if(t.classList.add(i),t.style.display="none",t.innerHTML=`\n        <ul class="${i}-list">\n            ${(null!==(e=this.options.rates)&&void 0!==e?e:[]).map((e=>`<li class="${i}-item ${this._current===e.rate?`${i}-item-selected`:""}" data-rate="${e.rate}">${e.text||e.rate}</li>`)).join("")}\n        </ul>`,this.options.isMobile){t.classList.add(`${i}-mobile`),this.options.theme.mobileFullScreen&&t.classList.add(`${i}-fullscreen-mobile`);const e=document.createElement("div");e.classList.add(`${i}-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,`${i}-item`,(e=>{const t=e.getAttribute("data-rate");if(null!==t&&+t>0){const e=+t;o.includes(e)&&this._current!==e&&(this._current=e,this.selectedCurrent()),this.hide()}})),t}}module.exports=function(a){return function(o){const i=o;let n=!1;const l=document.createElement("div");e.addClass(l,`${t.FOOTER_PREFIX_CLS}-item`,`${e.PREFIX_CLASS_NAME}-playbackRate`),l.innerHTML=`<button class="${e.PREFIX_CLASS_NAME}-btn ${e.PREFIX_CLASS_NAME}-btn-default">倍速</button>`;const c=i.$container.querySelector(`.${t.FOOTER_RIGHT_CLS}`);if(c){c.appendChild(l);const t=l.getElementsByClassName(`${e.PREFIX_CLASS_NAME}-btn`)[0];e.addClass(t,`${e.PREFIX_CLASS_NAME}-disable`);const o=new r(l,{theme:i,rates:(null==a?void 0:a.list)||[],isMobile:i.options.isMobile,open:!1,onOpenChange:a=>{t&&!a&&e.removeClass(t,`${e.PREFIX_CLASS_NAME}-active`),n=!!a},onChange:a=>{t&&(t.innerHTML=1===(null==a?void 0:a.rate)?"倍速":(null==a?void 0:a.text)||""),i.setPlaybackRate(null==a?void 0:a.rate),e.removeClass(t,`${e.PREFIX_CLASS_NAME}-active`),n=!1}});t.addEventListener("click",(a=>{t.classList.contains(`${e.PREFIX_CLASS_NAME}-disable`)||(n?(o.hide(),n=!1,e.removeClass(t,`${e.PREFIX_CLASS_NAME}-active`)):(o.show(),n=!0,e.addClass(t,`${e.PREFIX_CLASS_NAME}-active`)),a.stopPropagation(),a.preventDefault())})),i.event.on("EVENT_CALLBACK",(a=>{"appearFirstFrameCallback"===a.data.type&&(e.removeClass(t,`${e.PREFIX_CLASS_NAME}-disable`),o.current>1&&i.setPlaybackRate(o.current||1))})),["urlChange","pause","stop"].forEach((a=>{i.event.on(a,(()=>{e.addClass(t,`${e.PREFIX_CLASS_NAME}-disable`)}))})),i.event.on("urlChange",(()=>{o.selectedCurrent(1)})),i.event.on("seek",(()=>{o.selectedCurrent(o.current||1)}))}return l}};