调整控制器结构

docs/docs/README.md

@@ -756,6 +756,13 @@ The unique index, used for the priority level
 
 The dom element
 
+### style
+
+- Type: `Object`
+- Default: `{}`
+
+The style object
+
 ### click
 
 - Type: `Function`
@@ -796,55 +803,27 @@ var art = new Artplayer({
 
 Custom controls, The type of controls is an object or function
 
-### option
+### disable
-
-- Type: `Object`
-- Default: `{}`
-
-An object property if instantiated 
-
-#### disable
 
 - Type: `Boolean`
 - Default: `false`
 
 Whether to disable
 
-#### name
+### name
 
 - Type: `String`
-- Default: `control${id}`
+- Default: `layer${id}`
 
 The unique name , used for the class name
 
-#### click
+### index
-
-- Type: `function`
-- Default: `undefined`
-
-Click event
-
-#### index
 
 - Type: `Number`
-- Default: `undefined`
+- Default: `${id}`
 
 The unique index, used for the priority level
 
-#### position
-
-- Type: `String`
-- Default: `undefined`
-
-The position where the controller appears: top, left, right
-
-### mounted
-
-- Type: `Function`
-- Default: `undefined`
-
-Callback after mounted
-
 ### html
 
 - Type: `String`、`Element`
@@ -852,6 +831,27 @@ Callback after mounted
 
 The dom element
 
+### style
+
+- Type: `Object`
+- Default: `{}`
+
+The style object
+
+### click
+
+- Type: `Function`
+- Default: `undefined`
+
+Click event
+
+### mounted
+
+- Type: `Function`
+- Default: `undefined`
+
+Callback after mounted
+
 [Run Code](/)
 
 ```js

docs/lab/css/artplayer.css

@@ -1,11 +1,11 @@
 .artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
 .artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
-.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
+.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}.artplayer-video-player .art-hide{display:none!important}
 .artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
 .artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:60;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}
 .artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-icon-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
 .artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:70;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px}
-.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:Line truncated
+.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.art-show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume:Line truncated
 .artplayer-video-player .artplayer-contextmenu{display:none;position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
 .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
 .artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}

docs/lab/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/utils/componentMethod.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../.Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/utils/componentMethod.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../.Line truncated

packages/artplayer/src/controls/fullscreen.js

@@ -1,32 +1,31 @@
 import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
-export default class Fullscreen {
+export default function fullscreen(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 i18n,
                 player,
             } = art;
-        this.$fullscreen = append($control, icons.fullscreen);
+            const $fullscreen = append($control, icons.fullscreen);
-        tooltip(this.$fullscreen, i18n.get('Fullscreen'));
+            tooltip($fullscreen, i18n.get('Fullscreen'));
 
             proxy($control, 'click', () => {
                 player.fullscreenToggle();
             });
 
             art.on('fullscreen:enabled', () => {
-            setStyle(this.$fullscreen, 'opacity', '0.8');
+                setStyle($fullscreen, 'opacity', '0.8');
-            tooltip(this.$fullscreen, i18n.get('Exit fullscreen'));
+                tooltip($fullscreen, i18n.get('Exit fullscreen'));
             });
 
             art.on('fullscreen:exit', () => {
-            setStyle(this.$fullscreen, 'opacity', '1');
+                setStyle($fullscreen, 'opacity', '1');
-            tooltip(this.$fullscreen, i18n.get('Fullscreen'));
+                tooltip($fullscreen, i18n.get('Fullscreen'));
+            });
+        },
     });
 }
-}

packages/artplayer/src/controls/fullscreenWeb.js

@@ -1,32 +1,31 @@
 import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
-export default class FullscreenWeb {
+export default function fullscreenWeb(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 i18n,
                 player,
             } = art;
-        this.$fullscreenWeb = append($control, icons.fullscreenWeb);
+            const $fullscreenWeb = append($control, icons.fullscreenWeb);
-        tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
+            tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
 
             proxy($control, 'click', () => {
                 player.fullscreenWebToggle();
             });
 
             art.on('fullscreenWeb:enabled', () => {
-            setStyle(this.$fullscreenWeb, 'opacity', '0.8');
+                setStyle($fullscreenWeb, 'opacity', '0.8');
-            tooltip(this.$fullscreenWeb, i18n.get('Exit web fullscreen'));
+                tooltip($fullscreenWeb, i18n.get('Exit web fullscreen'));
             });
 
             art.on('fullscreenWeb:exit', () => {
-            setStyle(this.$fullscreenWeb, 'opacity', '1');
+                setStyle($fullscreenWeb, 'opacity', '1');
-            tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
+                tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
+            });
+        },
     });
 }
-}

packages/artplayer/src/controls/index.js

@@ -1,21 +1,20 @@
-import { insertByIndex, setStyle, append } from '../utils';
+import componentMethod from '../utils/componentMethod';
-import Fullscreen from './fullscreen';
+import fullscreen from './fullscreen';
-import FullscreenWeb from './fullscreenWeb';
+import fullscreenWeb from './fullscreenWeb';
-import Pip from './pip';
+import pip from './pip';
-import PlayAndPause from './playAndPause';
+import playAndPause from './playAndPause';
-import Progress from './progress';
+import progress from './progress';
-import Subtitle from './subtitle';
+import subtitle from './subtitle';
-import Time from './time';
+import time from './time';
-import Volume from './volume';
+import volume from './volume';
-import Setting from './setting';
+import setting from './setting';
-import Thumbnails from './thumbnails';
+import thumbnails from './thumbnails';
-import Screenshot from './screenshot';
+import screenshot from './screenshot';
-import Quality from './quality';
+import quality from './quality';
 
-let id = 0;
 export default class Controls {
     constructor(art) {
-        id = 0;
+        this.id = 0;
         this.art = art;
         this.art.on('firstCanplay', () => {
             this.init();
@@ -24,8 +23,9 @@ export default class Controls {
 
     init() {
         const { option } = this.art;
+
         this.add(
-            new Progress({
+            progress({
                 name: 'progress',
                 disable: false,
                 position: 'top',
@@ -34,7 +34,7 @@ export default class Controls {
         );
 
         this.add(
-            new Thumbnails({
+            thumbnails({
                 name: 'thumbnails',
                 disable: !option.thumbnails.url,
                 position: 'top',
@@ -43,7 +43,7 @@ export default class Controls {
         );
 
         this.add(
-            new PlayAndPause({
+            playAndPause({
                 name: 'playAndPause',
                 disable: false,
                 position: 'left',
@@ -52,7 +52,7 @@ export default class Controls {
         );
 
         this.add(
-            new Volume({
+            volume({
                 name: 'volume',
                 disable: false,
                 position: 'left',
@@ -61,7 +61,7 @@ export default class Controls {
         );
 
         this.add(
-            new Time({
+            time({
                 name: 'time',
                 disable: false,
                 position: 'left',
@@ -70,7 +70,7 @@ export default class Controls {
         );
 
         this.add(
-            new Quality({
+            quality({
                 name: 'quality',
                 disable: option.quality.length === 0,
                 position: 'right',
@@ -79,7 +79,7 @@ export default class Controls {
         );
 
         this.add(
-            new Screenshot({
+            screenshot({
                 name: 'screenshot',
                 disable: !option.screenshot,
                 position: 'right',
@@ -88,7 +88,7 @@ export default class Controls {
         );
 
         this.add(
-            new Subtitle({
+            subtitle({
                 name: 'subtitle',
                 disable: !option.subtitle.url,
                 position: 'right',
@@ -97,7 +97,7 @@ export default class Controls {
         );
 
         this.add(
-            new Setting({
+            setting({
                 name: 'setting',
                 disable: !option.setting,
                 position: 'right',
@@ -106,7 +106,7 @@ export default class Controls {
         );
 
         this.add(
-            new Pip({
+            pip({
                 name: 'pip',
                 disable: !option.pip,
                 position: 'right',
@@ -115,7 +115,7 @@ export default class Controls {
         );
 
         this.add(
-            new FullscreenWeb({
+            fullscreenWeb({
                 name: 'fullscreenWeb',
                 disable: !option.fullscreenWeb,
                 position: 'right',
@@ -124,7 +124,7 @@ export default class Controls {
         );
 
         this.add(
-            new Fullscreen({
+            fullscreen({
                 name: 'fullscreen',
                 disable: !option.fullscreen,
                 position: 'right',
@@ -138,76 +138,26 @@ export default class Controls {
     }
 
     add(item, callback) {
-        const control = typeof item === 'function' ? item(this.art) : item.option;
+        const option = typeof item === 'function' ? item(this.art) : item;
-        if (control && !control.disable) {
-            const {
-                events: { proxy },
-            } = this.art;
-            id += 1;
-            const name = control.name || `control${id}`;
-            const $control = document.createElement('div');
-            $control.classList.value = `art-control art-control-${name}`;
-            if (control.html) {
-                append($control, control.html);
-            }
-            if (control.click) {
-                proxy($control, 'click', event => {
-                    event.preventDefault();
-                    control.click.call(this, event);
-                    this.art.emit('control:click', $control);
-                });
-            }
-            if (item.apply) {
-                item.apply(this.art, $control);
-            }
-            this.mount(control.position, $control, control.index || id);
-            if (control.mounted) {
-                control.mounted($control);
-            }
-            if (callback) {
-                callback($control);
-            }
-            this.commonMethod(control, $control);
-            this[name] = control;
-            this.art.emit('control:add', $control);
-        }
-    }
-
-    mount(position, $control, index) {
         const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
-        switch (position) {
+        let parent;
+        switch (option.position) {
             case 'top':
-                insertByIndex($progress, $control, index);
+                parent = $progress;
                 break;
             case 'left':
-                insertByIndex($controlsLeft, $control, index);
+                parent = $controlsLeft;
                 break;
             case 'right':
-                insertByIndex($controlsRight, $control, index);
+                parent = $controlsRight;
                 break;
             default:
                 break;
         }
+
+        if (parent) {
+            componentMethod(this.art, this, parent, option, callback, 'control');
         }
-
-    commonMethod(control, $control) {
-        Object.defineProperty(control, '$ref', {
-            get: () => $control,
-        });
-
-        Object.defineProperty(control, 'hide', {
-            value: () => {
-                setStyle($control, 'display', 'none');
-                this.art.emit('control:hide', $control);
-            },
-        });
-
-        Object.defineProperty(control, 'show', {
-            value: () => {
-                setStyle($control, 'display', 'block');
-                this.art.emit('control:show', $control);
-            },
-        });
     }
 
     show() {

packages/artplayer/src/controls/pip.js

@@ -1,21 +1,20 @@
 import { append, tooltip } from '../utils';
 import icons from '../icons';
 
-export default class Pip {
+export default function pip(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 i18n,
                 player,
             } = art;
-        this.$pip = append($control, icons.pip);
+            const $pip = append($control, icons.pip);
-        tooltip(this.$pip, i18n.get('Mini player'));
+            tooltip($pip, i18n.get('Mini player'));
             proxy($control, 'click', () => {
                 player.pipEnabled();
             });
-    }
+        },
+    });
 }

packages/artplayer/src/controls/playAndPause.js

@@ -1,39 +1,38 @@
 import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
-export default class PlayAndPause {
+export default function playAndPause(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 player,
                 i18n,
             } = art;
-        this.$play = append($control, icons.play);
+            const $play = append($control, icons.play);
-        this.$pause = append($control, icons.pause);
+            const $pause = append($control, icons.pause);
-        tooltip(this.$play, i18n.get('Play'));
+            tooltip($play, i18n.get('Play'));
-        tooltip(this.$pause, i18n.get('Pause'));
+            tooltip($pause, i18n.get('Pause'));
-        setStyle(this.$pause, 'display', 'none');
+            setStyle($pause, 'display', 'none');
 
-        proxy(this.$play, 'click', () => {
+            proxy($play, 'click', () => {
                 player.play();
             });
 
-        proxy(this.$pause, 'click', () => {
+            proxy($pause, 'click', () => {
                 player.pause();
             });
 
             art.on('video:playing', () => {
-            setStyle(this.$play, 'display', 'none');
+                setStyle($play, 'display', 'none');
-            setStyle(this.$pause, 'display', 'flex');
+                setStyle($pause, 'display', 'flex');
             });
 
             art.on('video:pause', () => {
-            setStyle(this.$play, 'display', 'flex');
+                setStyle($play, 'display', 'flex');
-            setStyle(this.$pause, 'display', 'none');
+                setStyle($pause, 'display', 'none');
+            });
+        },
     });
 }
-}

packages/artplayer/src/controls/progress.js

@@ -1,132 +1,10 @@
 import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
 
-export default class Progress {
+export function getPosFromEvent(art, event) {
-    constructor(option) {
-        this.option = option;
-        this.isDroging = false;
-        this.set = this.set.bind(this);
-    }
-
-    apply(art, $control) {
-        this.art = art;
-        this.$control = $control;
     const {
-            option: { highlight, theme },
+        refs: { $progress },
-            events: { proxy },
         player,
     } = art;
-
-        append(
-            $control,
-            `
-              <div class="art-control-progress-inner">
-                <div class="art-progress-loaded"></div>
-                <div class="art-progress-played" style="background: ${theme}"></div>
-                <div class="art-progress-highlight"></div>
-                <div class="art-progress-indicator" style="background: ${theme}"></div>
-                <div class="art-progress-tip art-tip"></div>
-              </div>
-            `,
-        );
-
-        this.$loaded = $control.querySelector('.art-progress-loaded');
-        this.$played = $control.querySelector('.art-progress-played');
-        this.$highlight = $control.querySelector('.art-progress-highlight');
-        this.$indicator = $control.querySelector('.art-progress-indicator');
-        this.$tip = $control.querySelector('.art-progress-tip');
-
-        highlight.forEach(item => {
-            const left = (clamp(item.time, 0, player.duration) / player.duration) * 100;
-            append(
-                this.$highlight,
-                `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
-            );
-        });
-
-        this.set('loaded', player.loaded);
-
-        this.art.on('video:progress', () => {
-            this.set('loaded', player.loaded);
-        });
-
-        this.art.on('video:timeupdate', () => {
-            this.set('played', player.played);
-        });
-
-        this.art.on('video:ended', () => {
-            this.set('played', 1);
-        });
-
-        proxy($control, 'mousemove', event => {
-            setStyle(this.$tip, 'display', 'block');
-            if (event.composedPath().indexOf(this.$highlight) > -1) {
-                this.showHighlight(event);
-            } else {
-                this.showTime(event);
-            }
-        });
-
-        proxy($control, 'mouseout', () => {
-            setStyle(this.$tip, 'display', 'none');
-        });
-
-        proxy($control, 'click', event => {
-            if (event.target !== this.$indicator) {
-                const { second, percentage } = this.getPosFromEvent(event);
-                this.set('played', percentage);
-                player.seek(second);
-            }
-        });
-
-        proxy(this.$indicator, 'mousedown', () => {
-            this.isDroging = true;
-        });
-
-        proxy(document, 'mousemove', event => {
-            if (this.isDroging) {
-                const { second, percentage } = this.getPosFromEvent(event);
-                this.$indicator.classList.add('art-show-indicator');
-                this.set('played', percentage);
-                player.seek(second);
-            }
-        });
-
-        proxy(document, 'mouseup', () => {
-            if (this.isDroging) {
-                this.isDroging = false;
-                this.$indicator.classList.remove('art-show-indicator');
-            }
-        });
-    }
-
-    showHighlight(event) {
-        const { text, time } = event.target.dataset;
-        this.$tip.innerHTML = text;
-        const left =
-            (Number(time) / this.art.player.duration) * this.$control.clientWidth +
-            event.target.clientWidth / 2 -
-            this.$tip.clientWidth / 2;
-        setStyle(this.$tip, 'left', `${left}px`);
-    }
-
-    showTime(event) {
-        const { width, time } = this.getPosFromEvent(event);
-        const tipWidth = this.$tip.clientWidth;
-        this.$tip.innerHTML = time;
-        if (width <= tipWidth / 2) {
-            setStyle(this.$tip, 'left', 0);
-        } else if (width > this.$control.clientWidth - tipWidth / 2) {
-            setStyle(this.$tip, 'left', `${this.$control.clientWidth - tipWidth}px`);
-        } else {
-            setStyle(this.$tip, 'left', `${width - tipWidth / 2}px`);
-        }
-    }
-
-    getPosFromEvent(event) {
-        const {
-            player,
-            refs: { $progress },
-        } = this.art;
     const { left } = $progress.getBoundingClientRect();
     const width = clamp(event.x - left, 0, $progress.clientWidth);
     const second = (width / $progress.clientWidth) * player.duration;
@@ -135,14 +13,133 @@ export default class Progress {
     return { second, time, width, percentage };
 }
 
-    set(type, percentage) {
+export default function progress(controlOption) {
-        setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
+    return art => {
+        const {
+            option: { highlight, theme },
+            events: { proxy },
+            player,
+        } = art;
+        return {
+            ...controlOption,
+            html: `
+                <div class="art-control-progress-inner">
+                    <div class="art-progress-loaded"></div>
+                    <div class="art-progress-played" style="background: ${theme}"></div>
+                    <div class="art-progress-highlight"></div>
+                    <div class="art-progress-indicator" style="background: ${theme}"></div>
+                    <div class="art-progress-tip art-tip"></div>
+                </div>
+            `,
+            mounted: $control => {
+                let isDroging = false;
+                const $loaded = $control.querySelector('.art-progress-loaded');
+                const $played = $control.querySelector('.art-progress-played');
+                const $highlight = $control.querySelector('.art-progress-highlight');
+                const $indicator = $control.querySelector('.art-progress-indicator');
+                const $tip = $control.querySelector('.art-progress-tip');
+
+                function showHighlight(event) {
+                    const { text, time } = event.target.dataset;
+                    $tip.innerHTML = text;
+                    const left =
+                        (Number(time) / art.player.duration) * $control.clientWidth +
+                        event.target.clientWidth / 2 -
+                        $tip.clientWidth / 2;
+                    setStyle($tip, 'left', `${left}px`);
+                }
+
+                function showTime(event) {
+                    const { width, time } = getPosFromEvent(art, event);
+                    const tipWidth = $tip.clientWidth;
+                    $tip.innerHTML = time;
+                    if (width <= tipWidth / 2) {
+                        setStyle($tip, 'left', 0);
+                    } else if (width > $control.clientWidth - tipWidth / 2) {
+                        setStyle($tip, 'left', `${$control.clientWidth - tipWidth}px`);
+                    } else {
+                        setStyle($tip, 'left', `${width - tipWidth / 2}px`);
+                    }
+                }
+
+                function setBar(type, percentage) {
+                    if (type === 'loaded') {
+                        setStyle($loaded, 'width', `${percentage * 100}%`);
+                    }
+
                     if (type === 'played') {
+                        setStyle($played, 'width', `${percentage * 100}%`);
                         setStyle(
-                this.$indicator,
+                            $indicator,
                             'left',
-                `calc(${percentage * 100}% - ${getStyle(this.$indicator, 'width') / 2}px)`,
+                            `calc(${percentage * 100}% - ${getStyle($indicator, 'width') / 2}px)`,
                         );
                     }
                 }
+
+                highlight.forEach(item => {
+                    const left = (clamp(item.time, 0, player.duration) / player.duration) * 100;
+                    append(
+                        $highlight,
+                        `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
+                    );
+                });
+
+                setBar('loaded', player.loaded);
+
+                art.on('video:progress', () => {
+                    setBar('loaded', player.loaded);
+                });
+
+                art.on('video:timeupdate', () => {
+                    setBar('played', player.played);
+                });
+
+                art.on('video:ended', () => {
+                    setBar('played', 1);
+                });
+
+                proxy($control, 'mousemove', event => {
+                    setStyle($tip, 'display', 'block');
+                    if (event.composedPath().indexOf($highlight) > -1) {
+                        showHighlight(event);
+                    } else {
+                        showTime(event);
+                    }
+                });
+
+                proxy($control, 'mouseout', () => {
+                    setStyle($tip, 'display', 'none');
+                });
+
+                proxy($control, 'click', event => {
+                    if (event.target !== $indicator) {
+                        const { second, percentage } = getPosFromEvent(art, event);
+                        setBar('played', percentage);
+                        player.seek(second);
+                    }
+                });
+
+                proxy($indicator, 'mousedown', () => {
+                    isDroging = true;
+                });
+
+                proxy(document, 'mousemove', event => {
+                    if (isDroging) {
+                        const { second, percentage } = getPosFromEvent(art, event);
+                        $indicator.classList.add('art-show-indicator');
+                        setBar('played', percentage);
+                        player.seek(second);
+                    }
+                });
+
+                proxy(document, 'mouseup', () => {
+                    if (isDroging) {
+                        isDroging = false;
+                        $indicator.classList.remove('art-show-indicator');
+                    }
+                });
+            },
+        };
+    };
 }

packages/artplayer/src/controls/quality.js

@@ -1,43 +1,32 @@
 import { append } from '../utils';
 
-export default class Quality {
+export default function quality(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-        this.playIndex = -1;
+        mounted: $control => {
-    }
-
-    apply(art, $control) {
             const {
                 option,
-            events: { proxy, hover },
+                events: { proxy },
                 player,
             } = art;
+            let playIndex = -1;
             const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
-        this.playIndex = option.quality.indexOf(defaultQuality);
+            playIndex = option.quality.indexOf(defaultQuality);
             const $qualityName = append($control, `<div class="art-quality-name">${defaultQuality.name}</div>`);
             const qualityList = option.quality
                 .map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`)
                 .join('');
             const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
 
-        hover(
-            $control,
-            () => {
-                $control.classList.add('art-quality-hover');
-            },
-            () => {
-                $control.classList.remove('art-quality-hover');
-            },
-        );
-
             proxy($qualitys, 'click', event => {
                 const index = Number(event.target.dataset.index);
                 const { url, name } = option.quality[index];
-            if (url && name && this.playIndex !== index) {
+                if (url && name && playIndex !== index) {
                     player.switchQuality(url, name);
                     $qualityName.innerHTML = name;
-                this.playIndex = index;
+                    playIndex = index;
                 }
             });
-    }
+        },
+    });
 }

packages/artplayer/src/controls/screenshot.js

@@ -1,21 +1,20 @@
 import { append, tooltip } from '../utils';
 import icons from '../icons';
 
-export default class Screenshot {
+export default function screenshot(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 i18n,
                 player,
             } = art;
-        this.$screenshot = append($control, icons.screenshot);
+            const $screenshot = append($control, icons.screenshot);
-        tooltip(this.$screenshot, i18n.get('Screenshot'));
+            tooltip($screenshot, i18n.get('Screenshot'));
-        proxy(this.$screenshot, 'click', () => {
+            proxy($screenshot, 'click', () => {
                 player.screenshot();
             });
-    }
+        },
+    });
 }

packages/artplayer/src/controls/setting.js

@@ -1,32 +1,31 @@
 import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
-export default class Setting {
+export default function setting(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 i18n,
                 setting,
             } = art;
-        this.$setting = append($control, icons.setting);
+            const $setting = append($control, icons.setting);
-        tooltip(this.$setting, i18n.get('Show setting'));
+            tooltip($setting, i18n.get('Show setting'));
 
             proxy($control, 'click', () => {
                 setting.toggle();
             });
 
             art.on('setting:show', () => {
-            setStyle(this.$setting, 'opacity', '0.8');
+                setStyle($setting, 'opacity', '0.8');
-            tooltip(this.$setting, i18n.get('Hide setting'));
+                tooltip($setting, i18n.get('Hide setting'));
             });
 
             art.on('setting:hide', () => {
-            setStyle(this.$setting, 'opacity', '1');
+                setStyle($setting, 'opacity', '1');
-            tooltip(this.$setting, i18n.get('Show setting'));
+                tooltip($setting, i18n.get('Show setting'));
+            });
+        },
     });
 }
-}

packages/artplayer/src/controls/subtitle.js

@@ -1,32 +1,31 @@
 import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 
-export default class Subtitle {
+export default function subtitle(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             const {
                 events: { proxy },
                 i18n,
                 subtitle,
             } = art;
-        this.$subtitle = append($control, icons.subtitle);
+            const $subtitle = append($control, icons.subtitle);
-        tooltip(this.$subtitle, i18n.get('Hide subtitle'));
+            tooltip($subtitle, i18n.get('Hide subtitle'));
 
             proxy($control, 'click', () => {
                 subtitle.toggle();
             });
 
             art.on('subtitle:show', () => {
-            setStyle(this.$subtitle, 'opacity', '1');
+                setStyle($subtitle, 'opacity', '1');
-            tooltip(this.$subtitle, i18n.get('Hide subtitle'));
+                tooltip($subtitle, i18n.get('Hide subtitle'));
             });
 
             art.on('subtitle:hide', () => {
-            setStyle(this.$subtitle, 'opacity', '0.8');
+                setStyle($subtitle, 'opacity', '0.8');
-            tooltip(this.$subtitle, i18n.get('Show subtitle'));
+                tooltip($subtitle, i18n.get('Show subtitle'));
+            });
+        },
     });
 }
-}

packages/artplayer/src/controls/thumbnails.js

@@ -1,63 +1,54 @@
-import { errorHandle, setStyle } from '../utils';
+import { setStyle } from '../utils';
+import { getPosFromEvent } from './progress';
 
-export default class Thumbnails {
+export default function thumbnails(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-        this.loading = false;
+        mounted: $control => {
-        this.isLoad = false;
-    }
-
-    apply(art, $control) {
-        this.art = art;
-        errorHandle(art.controls.progress, "'thumbnails' control dependent on 'progress' control");
             const {
                 refs: { $progress },
                 events: { proxy, loadImg },
             } = art;
-        this.$control = $control;
+            let loading = false;
+            let isLoad = false;
+
+            function showThumbnails(event) {
+                const { width: posWidth } = getPosFromEvent(art, event);
+                const { url, height, width, number, column } = art.option.thumbnails;
+                const perWidth = $progress.clientWidth / number;
+                const perIndex = Math.ceil(posWidth / perWidth);
+                const yIndex = Math.ceil(perIndex / column) - 1;
+                const xIndex = perIndex % column || column - 1;
+                setStyle($control, 'backgroundImage', `url(${url})`);
+                setStyle($control, 'height', `${height}px`);
+                setStyle($control, 'width', `${width}px`);
+                setStyle($control, 'backgroundPosition', `-${xIndex * width}px -${yIndex * height}px`);
+                if (posWidth <= width / 2) {
+                    setStyle($control, 'left', 0);
+                } else if (posWidth > $progress.clientWidth - width / 2) {
+                    setStyle($control, 'left', `${$progress.clientWidth - width}px`);
+                } else {
+                    setStyle($control, 'left', `${posWidth - width / 2}px`);
+                }
+            }
 
             proxy($progress, 'mousemove', event => {
-            if (!this.loading) {
+                if (!loading) {
-                this.loading = true;
+                    loading = true;
-                loadImg(this.art.option.thumbnails.url).then(() => {
+                    loadImg(art.option.thumbnails.url).then(() => {
-                    this.isLoad = true;
+                        isLoad = true;
                     });
                 }
 
-            if (this.isLoad) {
+                if (isLoad) {
                     setStyle($control, 'display', 'block');
-                this.showThumbnails(event);
+                    showThumbnails(event);
                 }
             });
 
             proxy($progress, 'mouseout', () => {
                 setStyle($control, 'display', 'none');
             });
-    }
+        },
-
+    });
-    showThumbnails(event) {
-        const {
-            refs: { $progress },
-            controls,
-        } = this.art;
-        const { width: posWidth } = controls.progress.getPosFromEvent(event);
-        const { url, height, width, number, column } = this.art.option.thumbnails;
-        const perWidth = $progress.clientWidth / number;
-        const perIndex = Math.ceil(posWidth / perWidth);
-        const yIndex = Math.ceil(perIndex / column) - 1;
-        const xIndex = perIndex % column || column - 1;
-
-        setStyle(this.$control, 'backgroundImage', `url(${url})`);
-        setStyle(this.$control, 'height', `${height}px`);
-        setStyle(this.$control, 'width', `${width}px`);
-        setStyle(this.$control, 'backgroundPosition', `-${xIndex * width}px -${yIndex * height}px`);
-
-        if (posWidth <= width / 2) {
-            setStyle(this.$control, 'left', 0);
-        } else if (posWidth > $progress.clientWidth - width / 2) {
-            setStyle(this.$control, 'left', `${$progress.clientWidth - width}px`);
-        } else {
-            setStyle(this.$control, 'left', `${posWidth - width / 2}px`);
-        }
-    }
 }

packages/artplayer/src/controls/time.js

@@ -1,11 +1,9 @@
 import { secondToTime } from '../utils';
 
-export default class Time {
+export default function time(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-    }
+        mounted: $control => {
-
-    apply(art, $control) {
             function getTime() {
                 const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
                 if (newTime !== $control.innerHTML) {
@@ -17,5 +15,6 @@ export default class Time {
             ['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
                 art.on(event, getTime);
             });
-    }
+        },
+    });
 }

packages/artplayer/src/controls/volume.js

@@ -1,85 +1,82 @@
 import { append, clamp, tooltip, setStyle, getStyle } from '../utils';
 import icons from '../icons';
 
-export default class Volume {
+export default function volume(controlOption) {
-    constructor(option) {
+    return art => ({
-        this.option = option;
+        ...controlOption,
-        this.isDroging = false;
+        mounted: $control => {
-    }
-
-    apply(art, $control) {
-        this.art = art;
             const {
                 events: { proxy },
                 player,
                 i18n,
             } = art;
+            let isDroging = false;
+            const $volume = append($control, icons.volume);
+            const $volumeClose = append($control, icons.volumeClose);
+            const $volumePanel = append($control, '<div class="art-volume-panel"></div>');
+            const $volumeHandle = append($volumePanel, '<div class="art-volume-slider-handle"></div>');
+            tooltip($volume, i18n.get('Mute'));
+            setStyle($volumeClose, 'display', 'none');
 
-        this.$volume = append($control, icons.volume);
+            function volumeChangeFromEvent(event) {
-        this.$volumeClose = append($control, icons.volumeClose);
+                const { left: panelLeft, width: panelWidth } = $volumePanel.getBoundingClientRect();
-        this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
+                const { width: handleWidth } = $volumeHandle.getBoundingClientRect();
-        this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
+                const percentage =
-        tooltip(this.$volume, i18n.get('Mute'));
+                    clamp(event.x - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) /
-        setStyle(this.$volumeClose, 'display', 'none');
+                    (panelWidth - handleWidth);
+                return percentage;
+            }
 
-        this.setVolumeHandle(player.volume);
+            function setVolumeHandle(percentage = 0.7) {
+                if (player.muted || percentage === 0) {
+                    setStyle($volume, 'display', 'none');
+                    setStyle($volumeClose, 'display', 'flex');
+                    setStyle($volumeHandle, 'left', '0');
+                } else {
+                    // TODO...
+                    const panelWidth = getStyle($volumePanel, 'width') || 60;
+                    const handleWidth = getStyle($volumeHandle, 'width');
+                    const width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
+                    setStyle($volume, 'display', 'flex');
+                    setStyle($volumeClose, 'display', 'none');
+                    setStyle($volumeHandle, 'left', `${width}px`);
+                }
+            }
+
+            setVolumeHandle(player.volume);
             art.on('video:volumechange', () => {
-            this.setVolumeHandle(player.volume);
+                setVolumeHandle(player.volume);
             });
 
-        proxy(this.$volume, 'click', () => {
+            proxy($volume, 'click', () => {
                 player.muted = true;
             });
 
-        proxy(this.$volumeClose, 'click', () => {
+            proxy($volumeClose, 'click', () => {
                 player.muted = false;
             });
 
-        proxy(this.$volumePanel, 'click', event => {
+            proxy($volumePanel, 'click', event => {
                 player.muted = false;
-            player.volume = this.volumeChangeFromEvent(event);
+                player.volume = volumeChangeFromEvent(event);
             });
 
-        proxy(this.$volumeHandle, 'mousedown', () => {
+            proxy($volumeHandle, 'mousedown', () => {
-            this.isDroging = true;
+                isDroging = true;
             });
 
-        proxy(this.$volumeHandle, 'mousemove', event => {
+            proxy($volumeHandle, 'mousemove', event => {
-            if (this.isDroging) {
+                if (isDroging) {
                     player.muted = false;
-                player.volume = this.volumeChangeFromEvent(event);
+                    player.volume = volumeChangeFromEvent(event);
                 }
             });
 
             proxy(document, 'mouseup', () => {
-            if (this.isDroging) {
+                if (isDroging) {
-                this.isDroging = false;
+                    isDroging = false;
                 }
             });
-    }
+        },
-
+    });
-    volumeChangeFromEvent(event) {
-        const { left: panelLeft, width: panelWidth } = this.$volumePanel.getBoundingClientRect();
-        const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
-        const percentage =
-            clamp(event.x - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) / (panelWidth - handleWidth);
-        return percentage;
-    }
-
-    setVolumeHandle(percentage = 0.7) {
-        const { player } = this.art;
-        if (player.muted || percentage === 0) {
-            setStyle(this.$volume, 'display', 'none');
-            setStyle(this.$volumeClose, 'display', 'flex');
-            setStyle(this.$volumeHandle, 'left', '0');
-        } else {
-            // TODO...
-            const panelWidth = getStyle(this.$volumePanel, 'width') || 60;
-            const handleWidth = getStyle(this.$volumeHandle, 'width');
-            const width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
-            setStyle(this.$volume, 'display', 'flex');
-            setStyle(this.$volumeClose, 'display', 'none');
-            setStyle(this.$volumeHandle, 'left', `${width}px`);
-        }
-    }
 }

packages/artplayer/src/style/artplayer.scss

@@ -26,4 +26,8 @@
             fill: #fff;
         }
     }
+
+    .art-hide {
+        display: none !important;
+    }
 }

packages/artplayer/src/style/bottom.scss

@@ -228,7 +228,7 @@
                         }
                     }
                 }
-                &.art-quality-hover .art-qualitys{
+                &:hover .art-qualitys{
                     display: block;
                 }
             }

packages/artplayer/src/utils/componentMethod.js

@@ -24,6 +24,9 @@ export default function componentMethod(art, parent, target, component, callback
     const { proxy } = art.events;
     const option = typeof component === 'function' ? component(art) : component;
     if (!option.disable) {
+        if (parent.id === undefined) {
+            parent.id = 0;
+        }
         parent.id += 1;
         const name = option.name || `${title}${parent.id}`;
         const $element = document.createElement('div');

packages/artplayer/src/utils/index.js

@@ -118,3 +118,14 @@ export function debounce(func, wait, context) {
 
     return fn;
 }
+
+export function show(target, display) {
+    target.classList.remove('art-hide');
+    if (display) {
+        target.style.display = display;
+    }
+}
+
+export function hide(target) {
+    target.classList.add('art-hide');
+}