UNPKG

@ezuikit/theme-plugin-playback-rate

Version:

回放主题

24 lines (23 loc) • 14.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* * * @ezuikit/theme-plugin-playback-rate v0.1.0 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ThemePluginPlaybackRate=t()}(this,(function(){"use strict";function e(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}e(":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}"); /* * * @ezuikit/utils-dom v1.0.1-alpha.1 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */ var t="ezui";function o(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),i=1;i<t;i++)o[i-1]=arguments[i];var r;e&&(o=o.filter((function(e){return e&&!!e.replace(/ /g,"")})),(r=e.classList).add.apply(r,[].concat(o)))}function i(e){for(var t=arguments.length,o=new Array(t>1?t-1:0),i=1;i<t;i++)o[i-1]=arguments[i];var r;e&&(r=e.classList).remove.apply(r,[].concat(o))} /* * * @ezuikit/theme-plugin-footer v0.1.0 * Copyright (c) 2024-3-23 Ezviz-OpenBiz * Released under MIT the License. * */!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(":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-footer{background-color:#000;bottom:0;box-sizing:border-box;color:var(--ezui-footer-color,#fff);display:flex;flex-direction:column;height:var(--ezui-footer-height,48px);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ezui-footer-top{background-color:var(--ezui-footer-background-color,rgba(0,0,0,.5));bottom:var(--ezui-footer-height,48px);display:flex;flex-direction:row;justify-content:space-between;left:0;opacity:1;pointer-events:all;position:absolute;right:0;transition:opacity .3s ease;z-index:999}.ezui-footer-top-hidden{opacity:0;pointer-events:none}.ezui-footer-bottom .ezui-footer-item,.ezui-footer-left>.ezui-footer-item,.ezui-footer-left>span,.ezui-footer-right>.ezui-footer-item,.ezui-footer-right>span{align-items:center;cursor:pointer;display:inline-flex;font-size:var(--ezui-footer-icon-size,27px);justify-content:center;min-height:var(--ezui-footer-height,48px);width:var(--ezui-footer-height,48px)}.ezui-footer-left,.ezui-footer-right{box-sizing:border-box;display:flex;padding-left:12px;padding-right:12px}.ezui-footer-bottom{background-color:#000;color:#fff;display:flex;flex-direction:row;height:var(--ezui-footer-height,48px);justify-content:space-between}.ezui-footer-bottom .ezui-footer-bottom-item{align-items:center;cursor:pointer;display:inline-flex;font-size:20px;justify-content:center;min-height:var(--ezui-footer-height,48px);width:var(--ezui-footer-height,48px)}.ezui-footer-bottom-left{flex:1 1 auto}.ezui-footer-bottom-right{align-items:center;display:inline-flex;flex-direction:row;font-size:22px;justify-content:flex-end}.ezui-footer-bottom-right .ezui-icon{align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;padding-left:9px;padding-right:9px}.ezui-footer-mobile-extend{background-color:#fff;color:#000;display:flex;flex-direction:column}.ezui-footer-mobile-extend-type{display:flex;justify-content:space-between}.ezui-footer-mobile-extend-type .ezui-icon{color:#000}.ezui-theme-mobile .ezui-footer-top{bottom:0}");const r=`${t}-footer`,a=`${r}-right`;e(':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 n=[.5,1,2,4,8],l=`${t}-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(n.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 o=document.documentElement.clientWidth,i=document.documentElement.clientHeight,r=e;let a="";a+="width:"+i+"px;",a+="height:"+o+"px;",a+="-webkit-transform: rotate(90.001deg); transform: rotate(90.001deg);",a+="-webkit-transform-origin: "+o/2+"px "+o/2+"px;",a+="transform-origin: "+o/2+"px "+o/2+"px;",a+=`position: fixed;top: 0;left: 0;z-index:${t}`,r.style.cssText=r.style.cssText+a}))}(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,o,i,r;this._current=e||this._current;const a=`${l}-item-selected`;if(null===(o=null===(t=this.$panelContainer.querySelector(`.${a}`))||void 0===t?void 0:t.classList)||void 0===o||o.remove(a),null===(i=this.$panelContainer.querySelector(`.${l}-item[data-rate="${this._current}"]`))||void 0===i||i.classList.add(a),"function"==typeof this.options.onChange){const e=this.options.rates.find((e=>e.rate===this._current));e&&(null===(r=this.options)||void 0===r||r.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,o){e.addEventListener("click",(i=>{let r=i.target||i.srcElement;for(;r!==e;){if(r.classList.contains(t.replace(/^\./,""))){o(r);break}if(!r.parentNode)break;r=r.parentNode}}),!1)}(t,`${l}-item`,(e=>{const t=e.getAttribute("data-rate");if(null!==t&&+t>0){const e=+t;n.includes(e)&&this._current!==e&&(this._current=e,this.selectedCurrent()),this.hide()}})),t}}return function(e){return function(n){const l=n;let c=!1;const p=document.createElement("div");o(p,`${r}-item`,`${t}-playbackRate`),p.innerHTML=`<button class="${t}-btn ${t}-btn-default">倍速</button>`;const d=l.$container.querySelector(`.${a}`);if(d){d.appendChild(p);const r=p.getElementsByClassName(`${t}-btn`)[0];o(r,`${t}-disable`);const a=new s(p,{theme:l,rates:(null==e?void 0:e.list)||[],isMobile:l.options.isMobile,open:!1,onOpenChange:e=>{r&&!e&&i(r,`${t}-active`),c=!!e},onChange:e=>{r&&(r.innerHTML=1===(null==e?void 0:e.rate)?"倍速":(null==e?void 0:e.text)||""),l.setPlaybackRate(null==e?void 0:e.rate),i(r,`${t}-active`),c=!1}});r.addEventListener("click",(e=>{r.classList.contains(`${t}-disable`)||(c?(a.hide(),c=!1,i(r,`${t}-active`)):(a.show(),c=!0,o(r,`${t}-active`)),e.stopPropagation(),e.preventDefault())})),l.event.on("EVENT_CALLBACK",(e=>{"appearFirstFrameCallback"===e.data.type&&(i(r,`${t}-disable`),a.current>1&&l.setPlaybackRate(a.current||1))})),["urlChange","pause","stop"].forEach((e=>{l.event.on(e,(()=>{o(r,`${t}-disable`)}))})),l.event.on("urlChange",(()=>{a.selectedCurrent(1)})),l.event.on("seek",(()=>{a.selectedCurrent(a.current||1)}))}return p}}}));