mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 10:31:20 -08:00
调整控制器结构
This commit is contained in:
Harvey Zack committed
1 parent
cce1eda7eb
commit
a380836d75
21 files changed
+1152
-1422
No files matched your search
+34
-34
@@ -756,6 +756,13 @@ The unique index, used for the priority level
|
|||||||
|
|
||||||
The dom element
|
The dom element
|
||||||
|
|
||||||
|
### style
|
||||||
|
|
||||||
|
- Type: `Object`
|
||||||
|
- Default: `{}`
|
||||||
|
|
||||||
|
The style object
|
||||||
|
|
||||||
### click
|
### click
|
||||||
|
|
||||||
- Type: `Function`
|
- Type: `Function`
|
||||||
@@ -796,55 +803,27 @@ var art = new Artplayer({
|
|||||||
|
|
||||||
Custom controls, The type of controls is an object or function
|
Custom controls, The type of controls is an object or function
|
||||||
|
|
||||||
### option
|
### disable
|
||||||
|
|
||||||
- Type: `Object`
|
|
||||||
- Default: `{}`
|
|
||||||
|
|
||||||
An object property if instantiated
|
|
||||||
|
|
||||||
#### disable
|
|
||||||
|
|
||||||
- Type: `Boolean`
|
- Type: `Boolean`
|
||||||
- Default: `false`
|
- Default: `false`
|
||||||
|
|
||||||
Whether to disable
|
Whether to disable
|
||||||
|
|
||||||
#### name
|
### name
|
||||||
|
|
||||||
- Type: `String`
|
- Type: `String`
|
||||||
- Default: `control${id}`
|
- Default: `layer${id}`
|
||||||
|
|
||||||
The unique name, used for the class name
|
The unique name , used for the class name
|
||||||
|
|
||||||
#### click
|
### index
|
||||||
|
|
||||||
- Type: `function`
|
|
||||||
- Default: `undefined`
|
|
||||||
|
|
||||||
Click event
|
|
||||||
|
|
||||||
#### index
|
|
||||||
|
|
||||||
- Type: `Number`
|
- Type: `Number`
|
||||||
- Default: `undefined`
|
- Default: `${id}`
|
||||||
|
|
||||||
The unique index, used for the priority level
|
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
|
### html
|
||||||
|
|
||||||
- Type: `String`、`Element`
|
- Type: `String`、`Element`
|
||||||
@@ -852,6 +831,27 @@ Callback after mounted
|
|||||||
|
|
||||||
The dom element
|
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](/)
|
[Run Code](/)
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
@@ -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-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 .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-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-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-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-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-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-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}
|
.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}
|
||||||
|
|||||||
+623
-827
File diff suppressed because it is too large.
Load diff
@@ -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
|
||||||
@@ -1,32 +1,31 @@
|
|||||||
import { append, tooltip, setStyle } from '../utils';
|
import { append, tooltip, setStyle } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class Fullscreen {
|
export default function fullscreen(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
|
events: { proxy },
|
||||||
|
i18n,
|
||||||
|
player,
|
||||||
|
} = art;
|
||||||
|
const $fullscreen = append($control, icons.fullscreen);
|
||||||
|
tooltip($fullscreen, i18n.get('Fullscreen'));
|
||||||
|
|
||||||
apply(art, $control) {
|
proxy($control, 'click', () => {
|
||||||
const {
|
player.fullscreenToggle();
|
||||||
events: { proxy },
|
});
|
||||||
i18n,
|
|
||||||
player,
|
|
||||||
} = art;
|
|
||||||
this.$fullscreen = append($control, icons.fullscreen);
|
|
||||||
tooltip(this.$fullscreen, i18n.get('Fullscreen'));
|
|
||||||
|
|
||||||
proxy($control, 'click', () => {
|
art.on('fullscreen:enabled', () => {
|
||||||
player.fullscreenToggle();
|
setStyle($fullscreen, 'opacity', '0.8');
|
||||||
});
|
tooltip($fullscreen, i18n.get('Exit fullscreen'));
|
||||||
|
});
|
||||||
|
|
||||||
art.on('fullscreen:enabled', () => {
|
art.on('fullscreen:exit', () => {
|
||||||
setStyle(this.$fullscreen, 'opacity', '0.8');
|
setStyle($fullscreen, 'opacity', '1');
|
||||||
tooltip(this.$fullscreen, i18n.get('Exit fullscreen'));
|
tooltip($fullscreen, i18n.get('Fullscreen'));
|
||||||
});
|
});
|
||||||
|
},
|
||||||
art.on('fullscreen:exit', () => {
|
});
|
||||||
setStyle(this.$fullscreen, 'opacity', '1');
|
|
||||||
tooltip(this.$fullscreen, i18n.get('Fullscreen'));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,32 +1,31 @@
|
|||||||
import { append, tooltip, setStyle } from '../utils';
|
import { append, tooltip, setStyle } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class FullscreenWeb {
|
export default function fullscreenWeb(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
|
events: { proxy },
|
||||||
|
i18n,
|
||||||
|
player,
|
||||||
|
} = art;
|
||||||
|
const $fullscreenWeb = append($control, icons.fullscreenWeb);
|
||||||
|
tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
|
||||||
|
|
||||||
apply(art, $control) {
|
proxy($control, 'click', () => {
|
||||||
const {
|
player.fullscreenWebToggle();
|
||||||
events: { proxy },
|
});
|
||||||
i18n,
|
|
||||||
player,
|
|
||||||
} = art;
|
|
||||||
this.$fullscreenWeb = append($control, icons.fullscreenWeb);
|
|
||||||
tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
|
|
||||||
|
|
||||||
proxy($control, 'click', () => {
|
art.on('fullscreenWeb:enabled', () => {
|
||||||
player.fullscreenWebToggle();
|
setStyle($fullscreenWeb, 'opacity', '0.8');
|
||||||
});
|
tooltip($fullscreenWeb, i18n.get('Exit web fullscreen'));
|
||||||
|
});
|
||||||
|
|
||||||
art.on('fullscreenWeb:enabled', () => {
|
art.on('fullscreenWeb:exit', () => {
|
||||||
setStyle(this.$fullscreenWeb, 'opacity', '0.8');
|
setStyle($fullscreenWeb, 'opacity', '1');
|
||||||
tooltip(this.$fullscreenWeb, i18n.get('Exit web fullscreen'));
|
tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
|
||||||
});
|
});
|
||||||
|
},
|
||||||
art.on('fullscreenWeb:exit', () => {
|
});
|
||||||
setStyle(this.$fullscreenWeb, 'opacity', '1');
|
|
||||||
tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -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 {
|
export default class Controls {
|
||||||
constructor(art) {
|
constructor(art) {
|
||||||
id = 0;
|
this.id = 0;
|
||||||
this.art = art;
|
this.art = art;
|
||||||
this.art.on('firstCanplay', () => {
|
this.art.on('firstCanplay', () => {
|
||||||
this.init();
|
this.init();
|
||||||
@@ -24,8 +23,9 @@ export default class Controls {
|
|||||||
|
|
||||||
init() {
|
init() {
|
||||||
const { option } = this.art;
|
const { option } = this.art;
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Progress({
|
progress({
|
||||||
name: 'progress',
|
name: 'progress',
|
||||||
disable: false,
|
disable: false,
|
||||||
position: 'top',
|
position: 'top',
|
||||||
@@ -34,7 +34,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Thumbnails({
|
thumbnails({
|
||||||
name: 'thumbnails',
|
name: 'thumbnails',
|
||||||
disable: !option.thumbnails.url,
|
disable: !option.thumbnails.url,
|
||||||
position: 'top',
|
position: 'top',
|
||||||
@@ -43,7 +43,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new PlayAndPause({
|
playAndPause({
|
||||||
name: 'playAndPause',
|
name: 'playAndPause',
|
||||||
disable: false,
|
disable: false,
|
||||||
position: 'left',
|
position: 'left',
|
||||||
@@ -52,7 +52,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Volume({
|
volume({
|
||||||
name: 'volume',
|
name: 'volume',
|
||||||
disable: false,
|
disable: false,
|
||||||
position: 'left',
|
position: 'left',
|
||||||
@@ -61,7 +61,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Time({
|
time({
|
||||||
name: 'time',
|
name: 'time',
|
||||||
disable: false,
|
disable: false,
|
||||||
position: 'left',
|
position: 'left',
|
||||||
@@ -70,7 +70,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Quality({
|
quality({
|
||||||
name: 'quality',
|
name: 'quality',
|
||||||
disable: option.quality.length === 0,
|
disable: option.quality.length === 0,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -79,7 +79,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Screenshot({
|
screenshot({
|
||||||
name: 'screenshot',
|
name: 'screenshot',
|
||||||
disable: !option.screenshot,
|
disable: !option.screenshot,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -88,7 +88,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Subtitle({
|
subtitle({
|
||||||
name: 'subtitle',
|
name: 'subtitle',
|
||||||
disable: !option.subtitle.url,
|
disable: !option.subtitle.url,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -97,7 +97,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Setting({
|
setting({
|
||||||
name: 'setting',
|
name: 'setting',
|
||||||
disable: !option.setting,
|
disable: !option.setting,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -106,7 +106,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Pip({
|
pip({
|
||||||
name: 'pip',
|
name: 'pip',
|
||||||
disable: !option.pip,
|
disable: !option.pip,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -115,7 +115,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new FullscreenWeb({
|
fullscreenWeb({
|
||||||
name: 'fullscreenWeb',
|
name: 'fullscreenWeb',
|
||||||
disable: !option.fullscreenWeb,
|
disable: !option.fullscreenWeb,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -124,7 +124,7 @@ export default class Controls {
|
|||||||
);
|
);
|
||||||
|
|
||||||
this.add(
|
this.add(
|
||||||
new Fullscreen({
|
fullscreen({
|
||||||
name: 'fullscreen',
|
name: 'fullscreen',
|
||||||
disable: !option.fullscreen,
|
disable: !option.fullscreen,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@@ -138,76 +138,26 @@ export default class Controls {
|
|||||||
}
|
}
|
||||||
|
|
||||||
add(item, callback) {
|
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;
|
const { $progress, $controlsLeft, $controlsRight } = this.art.refs;
|
||||||
switch (position) {
|
let parent;
|
||||||
|
switch (option.position) {
|
||||||
case 'top':
|
case 'top':
|
||||||
insertByIndex($progress, $control, index);
|
parent = $progress;
|
||||||
break;
|
break;
|
||||||
case 'left':
|
case 'left':
|
||||||
insertByIndex($controlsLeft, $control, index);
|
parent = $controlsLeft;
|
||||||
break;
|
break;
|
||||||
case 'right':
|
case 'right':
|
||||||
insertByIndex($controlsRight, $control, index);
|
parent = $controlsRight;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
commonMethod(control, $control) {
|
if (parent) {
|
||||||
Object.defineProperty(control, '$ref', {
|
componentMethod(this.art, this, parent, option, callback, 'control');
|
||||||
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() {
|
show() {
|
||||||
|
|||||||
@@ -1,21 +1,20 @@
|
|||||||
import { append, tooltip } from '../utils';
|
import { append, tooltip } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class Pip {
|
export default function pip(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
apply(art, $control) {
|
events: { proxy },
|
||||||
const {
|
i18n,
|
||||||
events: { proxy },
|
player,
|
||||||
i18n,
|
} = art;
|
||||||
player,
|
const $pip = append($control, icons.pip);
|
||||||
} = art;
|
tooltip($pip, i18n.get('Mini player'));
|
||||||
this.$pip = append($control, icons.pip);
|
proxy($control, 'click', () => {
|
||||||
tooltip(this.$pip, i18n.get('Mini player'));
|
player.pipEnabled();
|
||||||
proxy($control, 'click', () => {
|
});
|
||||||
player.pipEnabled();
|
},
|
||||||
});
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,39 +1,38 @@
|
|||||||
import { append, tooltip, setStyle } from '../utils';
|
import { append, tooltip, setStyle } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class PlayAndPause {
|
export default function playAndPause(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
|
events: { proxy },
|
||||||
|
player,
|
||||||
|
i18n,
|
||||||
|
} = art;
|
||||||
|
const $play = append($control, icons.play);
|
||||||
|
const $pause = append($control, icons.pause);
|
||||||
|
tooltip($play, i18n.get('Play'));
|
||||||
|
tooltip($pause, i18n.get('Pause'));
|
||||||
|
setStyle($pause, 'display', 'none');
|
||||||
|
|
||||||
apply(art, $control) {
|
proxy($play, 'click', () => {
|
||||||
const {
|
player.play();
|
||||||
events: { proxy },
|
});
|
||||||
player,
|
|
||||||
i18n,
|
|
||||||
} = art;
|
|
||||||
this.$play = append($control, icons.play);
|
|
||||||
this.$pause = append($control, icons.pause);
|
|
||||||
tooltip(this.$play, i18n.get('Play'));
|
|
||||||
tooltip(this.$pause, i18n.get('Pause'));
|
|
||||||
setStyle(this.$pause, 'display', 'none');
|
|
||||||
|
|
||||||
proxy(this.$play, 'click', () => {
|
proxy($pause, 'click', () => {
|
||||||
player.play();
|
player.pause();
|
||||||
});
|
});
|
||||||
|
|
||||||
proxy(this.$pause, 'click', () => {
|
art.on('video:playing', () => {
|
||||||
player.pause();
|
setStyle($play, 'display', 'none');
|
||||||
});
|
setStyle($pause, 'display', 'flex');
|
||||||
|
});
|
||||||
|
|
||||||
art.on('video:playing', () => {
|
art.on('video:pause', () => {
|
||||||
setStyle(this.$play, 'display', 'none');
|
setStyle($play, 'display', 'flex');
|
||||||
setStyle(this.$pause, 'display', 'flex');
|
setStyle($pause, 'display', 'none');
|
||||||
});
|
});
|
||||||
|
},
|
||||||
art.on('video:pause', () => {
|
});
|
||||||
setStyle(this.$play, 'display', 'flex');
|
|
||||||
setStyle(this.$pause, 'display', 'none');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,148 +1,145 @@
|
|||||||
import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
|
import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
|
||||||
|
|
||||||
export default class Progress {
|
export function getPosFromEvent(art, event) {
|
||||||
constructor(option) {
|
const {
|
||||||
this.option = option;
|
refs: { $progress },
|
||||||
this.isDroging = false;
|
player,
|
||||||
this.set = this.set.bind(this);
|
} = art;
|
||||||
}
|
const { left } = $progress.getBoundingClientRect();
|
||||||
|
const width = clamp(event.x - left, 0, $progress.clientWidth);
|
||||||
|
const second = (width / $progress.clientWidth) * player.duration;
|
||||||
|
const time = secondToTime(second);
|
||||||
|
const percentage = clamp(width / $progress.clientWidth, 0, 1);
|
||||||
|
return { second, time, width, percentage };
|
||||||
|
}
|
||||||
|
|
||||||
apply(art, $control) {
|
export default function progress(controlOption) {
|
||||||
this.art = art;
|
return art => {
|
||||||
this.$control = $control;
|
|
||||||
const {
|
const {
|
||||||
option: { highlight, theme },
|
option: { highlight, theme },
|
||||||
events: { proxy },
|
events: { proxy },
|
||||||
player,
|
player,
|
||||||
} = art;
|
} = art;
|
||||||
|
return {
|
||||||
append(
|
...controlOption,
|
||||||
$control,
|
html: `
|
||||||
`
|
<div class="art-control-progress-inner">
|
||||||
<div class="art-control-progress-inner">
|
<div class="art-progress-loaded"></div>
|
||||||
<div class="art-progress-loaded"></div>
|
<div class="art-progress-played" style="background: ${theme}"></div>
|
||||||
<div class="art-progress-played" style="background: ${theme}"></div>
|
<div class="art-progress-highlight"></div>
|
||||||
<div class="art-progress-highlight"></div>
|
<div class="art-progress-indicator" style="background: ${theme}"></div>
|
||||||
<div class="art-progress-indicator" style="background: ${theme}"></div>
|
<div class="art-progress-tip art-tip"></div>
|
||||||
<div class="art-progress-tip art-tip"></div>
|
</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');
|
||||||
|
|
||||||
this.$loaded = $control.querySelector('.art-progress-loaded');
|
function showHighlight(event) {
|
||||||
this.$played = $control.querySelector('.art-progress-played');
|
const { text, time } = event.target.dataset;
|
||||||
this.$highlight = $control.querySelector('.art-progress-highlight');
|
$tip.innerHTML = text;
|
||||||
this.$indicator = $control.querySelector('.art-progress-indicator');
|
const left =
|
||||||
this.$tip = $control.querySelector('.art-progress-tip');
|
(Number(time) / art.player.duration) * $control.clientWidth +
|
||||||
|
event.target.clientWidth / 2 -
|
||||||
|
$tip.clientWidth / 2;
|
||||||
|
setStyle($tip, 'left', `${left}px`);
|
||||||
|
}
|
||||||
|
|
||||||
highlight.forEach(item => {
|
function showTime(event) {
|
||||||
const left = (clamp(item.time, 0, player.duration) / player.duration) * 100;
|
const { width, time } = getPosFromEvent(art, event);
|
||||||
append(
|
const tipWidth = $tip.clientWidth;
|
||||||
this.$highlight,
|
$tip.innerHTML = time;
|
||||||
`<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
|
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`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.set('loaded', player.loaded);
|
function setBar(type, percentage) {
|
||||||
|
if (type === 'loaded') {
|
||||||
|
setStyle($loaded, 'width', `${percentage * 100}%`);
|
||||||
|
}
|
||||||
|
|
||||||
this.art.on('video:progress', () => {
|
if (type === 'played') {
|
||||||
this.set('loaded', player.loaded);
|
setStyle($played, 'width', `${percentage * 100}%`);
|
||||||
});
|
setStyle(
|
||||||
|
$indicator,
|
||||||
|
'left',
|
||||||
|
`calc(${percentage * 100}% - ${getStyle($indicator, 'width') / 2}px)`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.art.on('video:timeupdate', () => {
|
highlight.forEach(item => {
|
||||||
this.set('played', player.played);
|
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>`,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
this.art.on('video:ended', () => {
|
setBar('loaded', player.loaded);
|
||||||
this.set('played', 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy($control, 'mousemove', event => {
|
art.on('video:progress', () => {
|
||||||
setStyle(this.$tip, 'display', 'block');
|
setBar('loaded', player.loaded);
|
||||||
if (event.composedPath().indexOf(this.$highlight) > -1) {
|
});
|
||||||
this.showHighlight(event);
|
|
||||||
} else {
|
|
||||||
this.showTime(event);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy($control, 'mouseout', () => {
|
art.on('video:timeupdate', () => {
|
||||||
setStyle(this.$tip, 'display', 'none');
|
setBar('played', player.played);
|
||||||
});
|
});
|
||||||
|
|
||||||
proxy($control, 'click', event => {
|
art.on('video:ended', () => {
|
||||||
if (event.target !== this.$indicator) {
|
setBar('played', 1);
|
||||||
const { second, percentage } = this.getPosFromEvent(event);
|
});
|
||||||
this.set('played', percentage);
|
|
||||||
player.seek(second);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy(this.$indicator, 'mousedown', () => {
|
proxy($control, 'mousemove', event => {
|
||||||
this.isDroging = true;
|
setStyle($tip, 'display', 'block');
|
||||||
});
|
if (event.composedPath().indexOf($highlight) > -1) {
|
||||||
|
showHighlight(event);
|
||||||
|
} else {
|
||||||
|
showTime(event);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
proxy(document, 'mousemove', event => {
|
proxy($control, 'mouseout', () => {
|
||||||
if (this.isDroging) {
|
setStyle($tip, 'display', 'none');
|
||||||
const { second, percentage } = this.getPosFromEvent(event);
|
});
|
||||||
this.$indicator.classList.add('art-show-indicator');
|
|
||||||
this.set('played', percentage);
|
|
||||||
player.seek(second);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy(document, 'mouseup', () => {
|
proxy($control, 'click', event => {
|
||||||
if (this.isDroging) {
|
if (event.target !== $indicator) {
|
||||||
this.isDroging = false;
|
const { second, percentage } = getPosFromEvent(art, event);
|
||||||
this.$indicator.classList.remove('art-show-indicator');
|
setBar('played', percentage);
|
||||||
}
|
player.seek(second);
|
||||||
});
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
showHighlight(event) {
|
proxy($indicator, 'mousedown', () => {
|
||||||
const { text, time } = event.target.dataset;
|
isDroging = true;
|
||||||
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) {
|
proxy(document, 'mousemove', event => {
|
||||||
const { width, time } = this.getPosFromEvent(event);
|
if (isDroging) {
|
||||||
const tipWidth = this.$tip.clientWidth;
|
const { second, percentage } = getPosFromEvent(art, event);
|
||||||
this.$tip.innerHTML = time;
|
$indicator.classList.add('art-show-indicator');
|
||||||
if (width <= tipWidth / 2) {
|
setBar('played', percentage);
|
||||||
setStyle(this.$tip, 'left', 0);
|
player.seek(second);
|
||||||
} 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) {
|
proxy(document, 'mouseup', () => {
|
||||||
const {
|
if (isDroging) {
|
||||||
player,
|
isDroging = false;
|
||||||
refs: { $progress },
|
$indicator.classList.remove('art-show-indicator');
|
||||||
} = this.art;
|
}
|
||||||
const { left } = $progress.getBoundingClientRect();
|
});
|
||||||
const width = clamp(event.x - left, 0, $progress.clientWidth);
|
},
|
||||||
const second = (width / $progress.clientWidth) * player.duration;
|
};
|
||||||
const time = secondToTime(second);
|
};
|
||||||
const percentage = clamp(width / $progress.clientWidth, 0, 1);
|
|
||||||
return { second, time, width, percentage };
|
|
||||||
}
|
|
||||||
|
|
||||||
set(type, percentage) {
|
|
||||||
setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
|
|
||||||
if (type === 'played') {
|
|
||||||
setStyle(
|
|
||||||
this.$indicator,
|
|
||||||
'left',
|
|
||||||
`calc(${percentage * 100}% - ${getStyle(this.$indicator, 'width') / 2}px)`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,43 +1,32 @@
|
|||||||
import { append } from '../utils';
|
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 => {
|
||||||
}
|
const {
|
||||||
|
option,
|
||||||
|
events: { proxy },
|
||||||
|
player,
|
||||||
|
} = art;
|
||||||
|
let playIndex = -1;
|
||||||
|
const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
|
||||||
|
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>`);
|
||||||
|
|
||||||
apply(art, $control) {
|
proxy($qualitys, 'click', event => {
|
||||||
const {
|
const index = Number(event.target.dataset.index);
|
||||||
option,
|
const { url, name } = option.quality[index];
|
||||||
events: { proxy, hover },
|
if (url && name && playIndex !== index) {
|
||||||
player,
|
player.switchQuality(url, name);
|
||||||
} = art;
|
$qualityName.innerHTML = name;
|
||||||
const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
|
playIndex = index;
|
||||||
this.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) {
|
|
||||||
player.switchQuality(url, name);
|
|
||||||
$qualityName.innerHTML = name;
|
|
||||||
this.playIndex = index;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,21 +1,20 @@
|
|||||||
import { append, tooltip } from '../utils';
|
import { append, tooltip } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class Screenshot {
|
export default function screenshot(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
apply(art, $control) {
|
events: { proxy },
|
||||||
const {
|
i18n,
|
||||||
events: { proxy },
|
player,
|
||||||
i18n,
|
} = art;
|
||||||
player,
|
const $screenshot = append($control, icons.screenshot);
|
||||||
} = art;
|
tooltip($screenshot, i18n.get('Screenshot'));
|
||||||
this.$screenshot = append($control, icons.screenshot);
|
proxy($screenshot, 'click', () => {
|
||||||
tooltip(this.$screenshot, i18n.get('Screenshot'));
|
player.screenshot();
|
||||||
proxy(this.$screenshot, 'click', () => {
|
});
|
||||||
player.screenshot();
|
},
|
||||||
});
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,32 +1,31 @@
|
|||||||
import { append, tooltip, setStyle } from '../utils';
|
import { append, tooltip, setStyle } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class Setting {
|
export default function setting(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
|
events: { proxy },
|
||||||
|
i18n,
|
||||||
|
setting,
|
||||||
|
} = art;
|
||||||
|
const $setting = append($control, icons.setting);
|
||||||
|
tooltip($setting, i18n.get('Show setting'));
|
||||||
|
|
||||||
apply(art, $control) {
|
proxy($control, 'click', () => {
|
||||||
const {
|
setting.toggle();
|
||||||
events: { proxy },
|
});
|
||||||
i18n,
|
|
||||||
setting,
|
|
||||||
} = art;
|
|
||||||
this.$setting = append($control, icons.setting);
|
|
||||||
tooltip(this.$setting, i18n.get('Show setting'));
|
|
||||||
|
|
||||||
proxy($control, 'click', () => {
|
art.on('setting:show', () => {
|
||||||
setting.toggle();
|
setStyle($setting, 'opacity', '0.8');
|
||||||
});
|
tooltip($setting, i18n.get('Hide setting'));
|
||||||
|
});
|
||||||
|
|
||||||
art.on('setting:show', () => {
|
art.on('setting:hide', () => {
|
||||||
setStyle(this.$setting, 'opacity', '0.8');
|
setStyle($setting, 'opacity', '1');
|
||||||
tooltip(this.$setting, i18n.get('Hide setting'));
|
tooltip($setting, i18n.get('Show setting'));
|
||||||
});
|
});
|
||||||
|
},
|
||||||
art.on('setting:hide', () => {
|
});
|
||||||
setStyle(this.$setting, 'opacity', '1');
|
|
||||||
tooltip(this.$setting, i18n.get('Show setting'));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,32 +1,31 @@
|
|||||||
import { append, tooltip, setStyle } from '../utils';
|
import { append, tooltip, setStyle } from '../utils';
|
||||||
import icons from '../icons';
|
import icons from '../icons';
|
||||||
|
|
||||||
export default class Subtitle {
|
export default function subtitle(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
const {
|
||||||
|
events: { proxy },
|
||||||
|
i18n,
|
||||||
|
subtitle,
|
||||||
|
} = art;
|
||||||
|
const $subtitle = append($control, icons.subtitle);
|
||||||
|
tooltip($subtitle, i18n.get('Hide subtitle'));
|
||||||
|
|
||||||
apply(art, $control) {
|
proxy($control, 'click', () => {
|
||||||
const {
|
subtitle.toggle();
|
||||||
events: { proxy },
|
});
|
||||||
i18n,
|
|
||||||
subtitle,
|
|
||||||
} = art;
|
|
||||||
this.$subtitle = append($control, icons.subtitle);
|
|
||||||
tooltip(this.$subtitle, i18n.get('Hide subtitle'));
|
|
||||||
|
|
||||||
proxy($control, 'click', () => {
|
art.on('subtitle:show', () => {
|
||||||
subtitle.toggle();
|
setStyle($subtitle, 'opacity', '1');
|
||||||
});
|
tooltip($subtitle, i18n.get('Hide subtitle'));
|
||||||
|
});
|
||||||
|
|
||||||
art.on('subtitle:show', () => {
|
art.on('subtitle:hide', () => {
|
||||||
setStyle(this.$subtitle, 'opacity', '1');
|
setStyle($subtitle, 'opacity', '0.8');
|
||||||
tooltip(this.$subtitle, i18n.get('Hide subtitle'));
|
tooltip($subtitle, i18n.get('Show subtitle'));
|
||||||
});
|
});
|
||||||
|
},
|
||||||
art.on('subtitle:hide', () => {
|
});
|
||||||
setStyle(this.$subtitle, 'opacity', '0.8');
|
|
||||||
tooltip(this.$subtitle, i18n.get('Show subtitle'));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -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;
|
const {
|
||||||
}
|
refs: { $progress },
|
||||||
|
events: { proxy, loadImg },
|
||||||
|
} = art;
|
||||||
|
let loading = false;
|
||||||
|
let isLoad = false;
|
||||||
|
|
||||||
apply(art, $control) {
|
function showThumbnails(event) {
|
||||||
this.art = art;
|
const { width: posWidth } = getPosFromEvent(art, event);
|
||||||
errorHandle(art.controls.progress, "'thumbnails' control dependent on 'progress' control");
|
const { url, height, width, number, column } = art.option.thumbnails;
|
||||||
const {
|
const perWidth = $progress.clientWidth / number;
|
||||||
refs: { $progress },
|
const perIndex = Math.ceil(posWidth / perWidth);
|
||||||
events: { proxy, loadImg },
|
const yIndex = Math.ceil(perIndex / column) - 1;
|
||||||
} = art;
|
const xIndex = perIndex % column || column - 1;
|
||||||
this.$control = $control;
|
setStyle($control, 'backgroundImage', `url(${url})`);
|
||||||
|
setStyle($control, 'height', `${height}px`);
|
||||||
proxy($progress, 'mousemove', event => {
|
setStyle($control, 'width', `${width}px`);
|
||||||
if (!this.loading) {
|
setStyle($control, 'backgroundPosition', `-${xIndex * width}px -${yIndex * height}px`);
|
||||||
this.loading = true;
|
if (posWidth <= width / 2) {
|
||||||
loadImg(this.art.option.thumbnails.url).then(() => {
|
setStyle($control, 'left', 0);
|
||||||
this.isLoad = true;
|
} else if (posWidth > $progress.clientWidth - width / 2) {
|
||||||
});
|
setStyle($control, 'left', `${$progress.clientWidth - width}px`);
|
||||||
|
} else {
|
||||||
|
setStyle($control, 'left', `${posWidth - width / 2}px`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isLoad) {
|
proxy($progress, 'mousemove', event => {
|
||||||
setStyle($control, 'display', 'block');
|
if (!loading) {
|
||||||
this.showThumbnails(event);
|
loading = true;
|
||||||
}
|
loadImg(art.option.thumbnails.url).then(() => {
|
||||||
});
|
isLoad = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
proxy($progress, 'mouseout', () => {
|
if (isLoad) {
|
||||||
setStyle($control, 'display', 'none');
|
setStyle($control, 'display', 'block');
|
||||||
});
|
showThumbnails(event);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
showThumbnails(event) {
|
proxy($progress, 'mouseout', () => {
|
||||||
const {
|
setStyle($control, 'display', 'none');
|
||||||
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`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,21 +1,20 @@
|
|||||||
import { secondToTime } from '../utils';
|
import { secondToTime } from '../utils';
|
||||||
|
|
||||||
export default class Time {
|
export default function time(controlOption) {
|
||||||
constructor(option) {
|
return art => ({
|
||||||
this.option = option;
|
...controlOption,
|
||||||
}
|
mounted: $control => {
|
||||||
|
function getTime() {
|
||||||
apply(art, $control) {
|
const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
|
||||||
function getTime() {
|
if (newTime !== $control.innerHTML) {
|
||||||
const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
|
$control.innerHTML = newTime;
|
||||||
if (newTime !== $control.innerHTML) {
|
}
|
||||||
$control.innerHTML = newTime;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
getTime();
|
getTime();
|
||||||
['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
|
['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
|
||||||
art.on(event, getTime);
|
art.on(event, getTime);
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
@@ -1,85 +1,82 @@
|
|||||||
import { append, clamp, tooltip, setStyle, getStyle } from '../utils';
|
import { append, clamp, tooltip, setStyle, getStyle } from '../utils';
|
||||||
import icons from '../icons';
|
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 => {
|
||||||
}
|
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');
|
||||||
|
|
||||||
apply(art, $control) {
|
function volumeChangeFromEvent(event) {
|
||||||
this.art = art;
|
const { left: panelLeft, width: panelWidth } = $volumePanel.getBoundingClientRect();
|
||||||
const {
|
const { width: handleWidth } = $volumeHandle.getBoundingClientRect();
|
||||||
events: { proxy },
|
const percentage =
|
||||||
player,
|
clamp(event.x - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) /
|
||||||
i18n,
|
(panelWidth - handleWidth);
|
||||||
} = art;
|
return percentage;
|
||||||
|
}
|
||||||
|
|
||||||
this.$volume = append($control, icons.volume);
|
function setVolumeHandle(percentage = 0.7) {
|
||||||
this.$volumeClose = append($control, icons.volumeClose);
|
if (player.muted || percentage === 0) {
|
||||||
this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
|
setStyle($volume, 'display', 'none');
|
||||||
this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
|
setStyle($volumeClose, 'display', 'flex');
|
||||||
tooltip(this.$volume, i18n.get('Mute'));
|
setStyle($volumeHandle, 'left', '0');
|
||||||
setStyle(this.$volumeClose, 'display', 'none');
|
} 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`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.setVolumeHandle(player.volume);
|
setVolumeHandle(player.volume);
|
||||||
art.on('video:volumechange', () => {
|
art.on('video:volumechange', () => {
|
||||||
this.setVolumeHandle(player.volume);
|
setVolumeHandle(player.volume);
|
||||||
});
|
});
|
||||||
|
|
||||||
proxy(this.$volume, 'click', () => {
|
proxy($volume, 'click', () => {
|
||||||
player.muted = true;
|
player.muted = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
proxy(this.$volumeClose, 'click', () => {
|
proxy($volumeClose, 'click', () => {
|
||||||
player.muted = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy(this.$volumePanel, 'click', event => {
|
|
||||||
player.muted = false;
|
|
||||||
player.volume = this.volumeChangeFromEvent(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy(this.$volumeHandle, 'mousedown', () => {
|
|
||||||
this.isDroging = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy(this.$volumeHandle, 'mousemove', event => {
|
|
||||||
if (this.isDroging) {
|
|
||||||
player.muted = false;
|
player.muted = false;
|
||||||
player.volume = this.volumeChangeFromEvent(event);
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy(document, 'mouseup', () => {
|
proxy($volumePanel, 'click', event => {
|
||||||
if (this.isDroging) {
|
player.muted = false;
|
||||||
this.isDroging = false;
|
player.volume = volumeChangeFromEvent(event);
|
||||||
}
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
volumeChangeFromEvent(event) {
|
proxy($volumeHandle, 'mousedown', () => {
|
||||||
const { left: panelLeft, width: panelWidth } = this.$volumePanel.getBoundingClientRect();
|
isDroging = true;
|
||||||
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) {
|
proxy($volumeHandle, 'mousemove', event => {
|
||||||
const { player } = this.art;
|
if (isDroging) {
|
||||||
if (player.muted || percentage === 0) {
|
player.muted = false;
|
||||||
setStyle(this.$volume, 'display', 'none');
|
player.volume = volumeChangeFromEvent(event);
|
||||||
setStyle(this.$volumeClose, 'display', 'flex');
|
}
|
||||||
setStyle(this.$volumeHandle, 'left', '0');
|
});
|
||||||
} else {
|
|
||||||
// TODO...
|
proxy(document, 'mouseup', () => {
|
||||||
const panelWidth = getStyle(this.$volumePanel, 'width') || 60;
|
if (isDroging) {
|
||||||
const handleWidth = getStyle(this.$volumeHandle, 'width');
|
isDroging = false;
|
||||||
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`);
|
});
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -26,4 +26,8 @@
|
|||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.art-hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -228,7 +228,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.art-quality-hover .art-qualitys{
|
&:hover .art-qualitys{
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,6 +24,9 @@ export default function componentMethod(art, parent, target, component, callback
|
|||||||
const { proxy } = art.events;
|
const { proxy } = art.events;
|
||||||
const option = typeof component === 'function' ? component(art) : component;
|
const option = typeof component === 'function' ? component(art) : component;
|
||||||
if (!option.disable) {
|
if (!option.disable) {
|
||||||
|
if (parent.id === undefined) {
|
||||||
|
parent.id = 0;
|
||||||
|
}
|
||||||
parent.id += 1;
|
parent.id += 1;
|
||||||
const name = option.name || `${title}${parent.id}`;
|
const name = option.name || `${title}${parent.id}`;
|
||||||
const $element = document.createElement('div');
|
const $element = document.createElement('div');
|
||||||
|
|||||||
@@ -118,3 +118,14 @@ export function debounce(func, wait, context) {
|
|||||||
|
|
||||||
return fn;
|
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');
|
||||||
|
}
|
||||||
Reference in new issue
Block a user