v1.0.3

Update README.md
update
2026-10-09 11:56:15 -08:00 · 2018-11-21 18:48:20 +08:00 · 2018-11-21 18:46:50 +08:00 · 2018-11-21 18:40:20 +08:00 · 2018-11-21 18:37:34 +08:00 · 2018-11-21 18:37:25 +08:00
177 changed files with 14601 additions and 2341 deletions
@@ -1,14 +1,10 @@
-# http://editorconfig.org/
+# See editorconfig.org
 root = true

 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 2
+indent_size = 4
 indent_style = space
 insert_final_newline = true
-trim_trailing_whitespace = true
-
-[{**/{actual,fixtures,expected,templates}/**,*.md}]
-trim_trailing_whitespace = false
-insert_final_newline = false
+trim_trailing_whitespace = true
@@ -0,0 +1,5 @@
+/docs
+/dist
+/node_modules
+/packages/**/node_modules
+/packages/**/dist
@@ -1,219 +1,35 @@
 {
-  "root": true,
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "globalReturn": true,
-      "impliedStrict": true
-    }
+  "parser": "babel-eslint",
+  "extends": ["airbnb-base", "prettier"],
+  "env": {
+      "browser": true,
+      "es6": true
  },
  "globals": {
-    "expect": true
-  },
-  "env": {
-    "es6": true,
-    "amd": true,
-    "node": true,
-    "mocha": true,
-    "worker": true,
-    "jquery": true,
-    "browser": true,
-    "commonjs": true,
-    "serviceworker": true,
-    "shared-node-browser": true
+      "Artplayer": false,
+      "jQuery": false
  },
  "rules": {
-    "no-await-in-loop": 2,
-    "no-compare-neg-zero": 2,
-    "no-cond-assign": 2,
-    "no-console": 0,
-    "no-constant-condition": [2, { "checkLoops": false }],
-    "no-debugger": 2,
-    "no-dupe-args": 2,
-    "no-dupe-keys": 2,
-    "no-duplicate-case": 2,
-    "no-empty": 1,
-    "no-empty-character-class": 2,
-    "no-ex-assign": 2,
-    "no-extra-boolean-cast": 2,
-    "no-extra-parens": 2,
-    "no-extra-semi": 2,
-    "no-func-assign": 2,
-    "no-inner-declarations": 2,
-    "no-invalid-regexp": 2,
-    "no-irregular-whitespace": 2,
-    "no-obj-calls": 2,
-    "no-regex-spaces": 1,
-    "no-sparse-arrays": 2,
-    "no-template-curly-in-string": 2,
-    "no-unexpected-multiline": 2,
-    "no-unreachable": 2,
-    "no-unsafe-finally": 2,
-    "no-unsafe-negation": 2,
-    "use-isnan": 2,
-    "valid-jsdoc": [2, { "requireReturn": false }],
-    "valid-typeof": 2,
-
-    "accessor-pairs": 1,
-    "array-callback-return": 1,
-    "block-scoped-var": 1,
-    "class-methods-use-this": 0,
-    "curly": 1,
-    "default-case": 1,
-    "dot-location": [1, "property"],
-    "eqeqeq": [1, "smart"],
-    "guard-for-in": 1,
-    "no-alert": 2,
-    "no-caller": 1,
-    "no-div-regex": 1,
-    "no-else-return": 1,
-    "no-empty-function": 1,
-    "no-empty-pattern": 1,
-    "no-eq-null": 1,
-    "no-eval": 0,
-    "no-extend-native": 2,
-    "no-extra-bind": 1,
-    "no-extra-label": 1,
-    "no-fallthrough": 1,
-    "no-floating-decimal": 1,
-    "no-global-assign": 2,
-    "no-implicit-coercion": 1,
-    "no-implied-eval": 2,
-    "no-invalid-this": 1,
-    "no-iterator": 2,
-    "no-labels": 1,
-    "no-lone-blocks": 1,
-    "no-loop-func": 2,
-    "no-multi-spaces": 1,
-    "no-multi-str": 1,
-    "no-new-func": 0,
-    "no-new-wrappers": 1,
-    "no-octal": 1,
-    "no-octal-escape": 1,
-    "no-param-reassign": 1,
-    "no-proto": 1,
-    "no-redeclare": 1,
-    "no-return-assign": 1,
-    "no-return-await": 1,
-    "no-script-url": 2,
-    "no-self-assign": 1,
-    "no-self-compare": 1,
-    "no-sequences": 1,
-    "no-throw-literal": 1,
-    "no-unmodified-loop-condition": 1,
-    "no-unused-expressions": 0,
-    "no-unused-labels": 1,
-    "no-useless-call": 1,
-    "no-useless-concat": 1,
-    "no-useless-escape": 1,
-    "no-useless-return": 1,
-    "no-void": 1,
-    "no-with": 2,
-    "prefer-promise-reject-errors": 1,
-    "require-await": 2,
-    "vars-on-top": 1,
-    "wrap-iife": [1, "any"],
-    "yoda": 2,
-
-    "strict": 2,
-
-    "no-catch-shadow": 2,
-    "no-delete-var": 2,
-    "no-label-var": 2,
-    "no-shadow": 2,
-    "no-shadow-restricted-names": 2,
-    "no-undef": 2,
-    "no-undef-init": 2,
-    "no-undefined": 0,
-    "no-unused-vars": 2,
-    "no-use-before-define": 2,
-
-    "callback-return": 0,
-    "global-require": 1,
-    "handle-callback-err": 1,
-    "no-mixed-requires": [1, { "allowCall": true }],
-    "no-new-require": 2,
-    "no-path-concat": 2,
-    "no-process-env": 0,
-    "no-process-exit": 2,
-
-    "array-bracket-spacing": 1,
-    "block-spacing": 1,
-    "brace-style": 1,
-    "camelcase": 1,
-    "capitalized-comments": 0,
-    "comma-dangle": 1,
-    "comma-spacing": 1,
-    "comma-style": 1,
-    "computed-property-spacing": 1,
-    "consistent-this": [1, "that", "self"],
-    "eol-last": 1,
-    "func-call-spacing": 1,
-    "func-names": 1,
-    "indent": [1, 2, { "SwitchCase": 1 }],
-    "key-spacing": 1,
-    "keyword-spacing": 1,
-    "linebreak-style": 1,
-    "lines-around-comment": 1,
-    "new-cap": 0,
-    "new-parens": 1,
-    "no-array-constructor": 1,
-    "no-continue": 1,
-    "no-inline-comments": 1,
-    "no-mixed-spaces-and-tabs": 2,
-    "no-multi-assign": 1,
-    "no-multiple-empty-lines": 1,
-    "no-negated-condition": 0,
-    "no-nested-ternary": 2,
-    "no-new-object": 1,
-    "no-tabs": 2,
-    "no-trailing-spaces": 1,
-    "no-unneeded-ternary": 1,
-    "no-whitespace-before-property": 1,
-    "object-curly-spacing": 0,
-    "object-property-newline": [1, { "allowMultiplePropertiesPerLine": true }],
-    "one-var": [1, "never"],
-    "operator-assignment": 1,
-    "operator-linebreak": 1,
-    "padded-blocks": 0,
-    "quotes": [1, "single"],
-    "require-jsdoc": 0,
-    "semi": 1,
-    "semi-spacing": 1,
-    "space-before-blocks": 1,
-    "space-before-function-paren": [1, "never"],
-    "space-in-parens": 1,
-    "space-infix-ops": 1,
-    "space-unary-ops": [1, { "words": true, "nonwords": false }],
-    "spaced-comment": [1, "always"],
-    "wrap-regex": 1,
-
-    "arrow-body-style": 1,
-    "arrow-parens": 0,
-    "arrow-spacing": 1,
-    "constructor-super": 2,
-    "generator-star-spacing": 1,
-    "no-class-assign": 2,
-    "no-confusing-arrow": 0,
-    "no-const-assign": 2,
-    "no-dupe-class-members": 2,
-    "no-duplicate-imports": 2,
-    "no-new-symbol": 1,
-    "no-this-before-super": 2,
-    "no-useless-computed-key": 1,
-    "no-useless-constructor": 1,
-    "no-useless-rename": 1,
-    "no-var": 1,
-    "prefer-const": 1,
-    "prefer-destructuring": 1,
-    "prefer-spread": 0,
-    "prefer-template": 1,
-    "require-yield": 2,
-    "rest-spread-spacing": 1,
-    "symbol-description": 2,
-    "template-curly-spacing": 1,
-    "yield-star-spacing": 1
+      "import/no-cycle": 1,
+      "no-const-assign": 1,
+      "no-shadow": 0,
+      "no-this-before-super": 1,
+      "no-undef": 1,
+      "no-unreachable": 1,
+      "no-unused-vars": 1,
+      "constructor-super": 1,
+      "valid-typeof": 1,
+      "indent": [2, 4, { "SwitchCase": 1 }],
+      "quotes": [2, "single", "avoid-escape"],
+      "semi": [2, "always"],
+      "eqeqeq": [2, "always"],
+      "one-var": [2, "never"],
+      "comma-dangle": [2, "always-multiline"],
+      "spaced-comment": [2, "always"],
+      "no-restricted-globals": 2,
+      "no-param-reassign": [2, { "props": false }]
+  },
+  "parserOptions": {
+      "sourceType": "module"
  }
-}
+}
@@ -0,0 +1,21 @@
+---
+name: Bug report
+about: Report an issue or unexpected behaviour with Artplayer
+---
+
+### Expected behaviour
+
+### Actual behaviour
+
+### Steps to reproduce
+
+### Environment
+
+- Browser:
+- Version:
+- Operating System:
+- Version:
+
+### Console errors (if any)
+
+### Link to where the bug is happening
@@ -0,0 +1,4 @@
+---
+name: New feature
+about: Request new functionality
+---
@@ -0,0 +1,4 @@
+---
+name: Improvement
+about: Request a change that isn't a bug or new feature
+---
@@ -0,0 +1 @@
+PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.
@@ -0,0 +1,7 @@
+{
+    "useTabs": false,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 120
+}
@@ -1,3 +1,10 @@
 language: node_js
+
 node_js:
  - stable
+
+before_script:
+  - npm install
+
+script:
+  - npm run lint
@@ -1,5 +1,73 @@
 # ArtPlayer
-ArtPlayer is a modern HTML5 video player

-## Status
-⚠️ This project is WIP and not ready for production use yet!
+[![Build Status](https://www.travis-ci.org/zhw2590582/ArtPlayer.svg?branch=master)](https://www.travis-ci.org/zhw2590582/ArtPlayer)
+![version](https://badgen.net/npm/v/artplayer)
+![license](https://badgen.net/npm/license/artplayer)
+![size](https://badgen.net/bundlephobia/minzip/artplayer)
+
+> ArtPlayer is a modern HTML5 video player
+
+![Alt text](./screenshot.png)
+
+## Introduction
+
+> TODO...
+
+## Demo
+
+[Checkout the demo](https://blog.zhw-island.com/ArtPlayer/lab)
+
+## Document
+
+[Checkout the Document](https://blog.zhw-island.com/ArtPlayer/docs)
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer
+```
+Or install with `yarn`
+
+```
+$ yarn add artplayer
+```
+
+```js
+import Artplayer from 'artplayer';
+import 'artplayer/dist/artplayer.css';
+```
+
+Or umd builds are also available
+
+```html
+<link rel="stylesheet" href="path/to/artplayer.css" />
+<script src="path/to/artplayer.js"></script>
+```
+
+Will expose the global variable to `window.Artplayer`.
+
+## Usage
+
+```html
+<div class="artplayer-app"></div>
+```
+
+```js
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'path/to/video.mp4'
+});
+```
+
+## Ecosystem
+
+| Project                                                                                                       | Description                |
+| ------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer |
+
+
+## License
+
+MIT © [Harvey Zack](https://www.zhw-island.com/)
@@ -1,8 +0,0 @@
-/*!
- * ArtPlayer.js v1.0.0
- * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2018 Harvey Zack
- * Released under the MIT License.
- */
-
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.artplayer={})}(this,function(t){"use strict";var Ot=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var r=function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t},o="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function e(t,e){return t(e={exports:{}},e.exports),e.exports}var l=e(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=i=function(t){return n(t)}:e.exports=i=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},i(t)}e.exports=i});var a=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var s=function(t,e){return!e||"object"!==l(e)&&"function"!=typeof e?a(t):e},c=e(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),u=e(function(n){function i(t,e){return n.exports=i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},i(t,e)}n.exports=i});var h=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)};var d=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t};var f=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){d(e,t,n[t])})}return e};var n=function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}};var p=function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)};var v=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var y=function(t){return n(t)||p(t)||v()};var m=function(t){return-1!==Function.toString.call(t).indexOf("[native code]")},g=e(function(i){function r(t,e,n){return!function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?i.exports=r=function(t,e,n){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(t,i));return n&&u(r,n.prototype),r}:i.exports=r=Reflect.construct,r.apply(null,arguments)}i.exports=r}),b=function(t){function i(t,e){var n;return Ot(this,i),n=s(this,c(i).call(this,t)),"function"==typeof Error.captureStackTrace&&Error.captureStackTrace(a(a(n)),e||n.constructor),n.name="ArtPlayerError",n}return h(i,t),i}(e(function(e){function i(t){var n="function"==typeof Map?new Map:void 0;return e.exports=i=function(t){if(null===t||!m(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return g(t,arguments,c(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),u(e,t)},i(t)}e.exports=i})(Error));function w(t,e){var n="function"==typeof t;if(n?!n():!t)throw new b(e)}function jt(t,e,n){return Math.max(Math.min(t,Math.max(e,n)),Math.min(e,n))}function x(t){return t.includes("?")?x(t.split("?")[0]):t.includes("#")?x(t.split("#")[0]):t.trim().toLowerCase().split(".").pop()}function At(t,e){return e instanceof Element?t.appendChild(e):t.insertAdjacentHTML("beforeend",e),t.lastElementChild}function $(t,e,n){var i=Array.from(t.children);e.dataset.index=n;var r=i.find(function(t){return Number(t.dataset.index)>=Number(n)});return r?r.insertAdjacentElement("beforebegin",e):At(t,e),e}function Dt(t,e,n){return t.style[e]=n,t}function k(e,n){return Object.keys(n).forEach(function(t){Dt(e,t,n[t])}),e}function Ht(t){var e=Math.floor(t/3600),n=Math.floor((t-3600*e)/60),i=Math.floor(t-3600*e-60*n);return(0<e?[e,n,i]:[n,i]).map(function(t){return t<10?"0".concat(t):String(t)}).join(":")}function E(){for(var t=function(t){return null!==t&&"object"===l(t)},e={},n=arguments.length,Line truncated
@@ -0,0 +1,867 @@
+# Getting started
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer
+```
+Or install with `yarn`
+
+```
+$ yarn add artplayer
+```
+
+```js
+import Artplayer from 'artplayer';
+import 'artplayer/dist/artplayer.css';
+```
+
+Or umd builds are also available
+
+```html
+<link rel="stylesheet" href="path/to/artplayer.css" />
+<script src="path/to/artplayer.js"></script>
+```
+
+Will expose the global variable to `window.Artplayer`.
+
+## Usage
+
+```html
+<div class="artplayer-app"></div>
+```
+
+```js
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'path/to/video.mp4'
+});
+```
+
+# Configuration
+
+## container
+
+- Type: `String、Element`
+- Default: `#artplayer`
+- Required: `true`
+
+DOM container of the player
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  // container: document.querySelector('.artplayer-app'),
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4'
+});
+```
+
+You may need to initialize a size for the container element, like:
+
+```css
+.artplayer-app {
+  width: 400px;
+  height: 300px;
+}
+```
+
+## url
+
+- Type: `String`
+- Default: ``
+- Required: `true`
+
+Video source url, Three video file formats are supported: mp4, ogg, webm
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4'
+  // url: url + '/video/one-more-time-one-more-chance-480p.ogg',
+  // url: url + '/video/one-more-time-one-more-chance-480p.webm',
+});
+```
+
+## poster
+
+- Type: `String`
+- Default: ``
+
+Video poster image url
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  poster: url + '/image/one-more-time-one-more-chance-poster.jpg'
+});
+```
+
+## title
+
+- Type: `String`
+- Default: ``
+
+Video title, will be shown in screenshot file name and pip mode
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  title: '【新海诚动画】『秒速5センチメートル』'
+});
+```
+
+## volume
+
+- Type: `Number`
+- Default: `0.7`
+
+Default volume, player will cache the last volume, which may be overwritten
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  volume: 0.5
+});
+```
+
+## autoplay
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to play automatically, sometimes it doesn't necessarily succeed
+
+More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  autoplay: true
+});
+```
+
+## autoSize
+
+- Type: `Boolean`
+- Default: `false`
+
+Keep the original video aspect ratio and automatically zoom
+
+[Run Code](/)
+
+```js
+// Zoom browser window
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  autoSize: true
+});
+```
+
+## loop
+
+- Type: `Boolean`
+- Default: `false`
+
+Automatic loop playback
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  loop: true
+});
+```
+
+## playbackRate
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show playback rate controller in the contextmenu
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  playbackRate: true
+});
+```
+
+## aspectRatio
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show aspect ratio controller in the contextmenu
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  aspectRatio: true
+});
+```
+
+## screenshot
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show screenshot controller in the bottom
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  screenshot: true
+});
+```
+
+## setting
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show setting controller in the bottom
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  setting: true
+});
+```
+
+## pip
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show pip controller in the bottom, it will give priority to the native picture-in-picture feature.
+
+More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture)
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  pip: true
+});
+```
+
+## fullscreen
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show window fullscreen controller in the bottom
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  fullscreen: true
+});
+```
+
+## fullscreenWeb
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to show web page fullscreen controller in the bottom
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  fullscreenWeb: true
+});
+```
+
+## mutex
+
+- Type: `Boolean`
+- Default: `true`
+
+Player mutually exclusive, only one player can play at a time
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  mutex: true
+});
+```
+
+## hotkey
+
+- Type: `Boolean`
+- Default: `true`
+
+Whether to use hotkey
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  hotkey: true
+});
+```
+
+| Key     | Description     |
+| ------- | --------------- |
+| `↑`     | Increase volume |
+| `↓`     | Decrease volume |
+| `←`     | Seek backward   |
+| `→`     | Seek forward    |
+| `space` | Toggle playback |
+
+## lang
+
+- Type: `String`
+- Default: `navigator.language.toLowerCase()`
+
+Default display language: en, zh-cn, zh-tw
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  lang: 'en'
+});
+```
+
+## theme
+
+- Type: `String`
+- Default: `#f00`
+
+Default display language: en, zh-cn, zh-tw
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  theme: '#ffad00'
+});
+```
+
+## subtitle
+
+- Type: `Object`
+- Default: `{}`
+
+Custom subtitle
+
+### url
+
+- Type: `String`
+- Default: ``
+
+Subtitle url, support vtt and srt format
+
+### style
+
+- Type: `Object`
+- Default: `{}`
+
+Subtitle style
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  subtitle: {
+    url: url + '/subtitle/one-more-time-one-more-chance.srt',
+    style: {
+      color: '#03A9F4'
+    }
+  }
+});
+```
+
+## thumbnails
+
+- Type: `Object`
+- Default: `{}`
+
+Custom thumbnails in the progress bar with lazy load
+
+### style
+
+- Type: `String`
+- Default: ``
+
+Thumbnails image url
+
+### number
+
+- Type: `Number`
+- Default: `60`
+
+Thumbnails number
+
+### width
+
+- Type: `Number`
+- Default: `160`
+
+Thumbnails width
+
+### height
+
+- Type: `Number`
+- Default: `90`
+
+Thumbnails height
+
+### column
+
+- Type: `Number`
+- Default: `10`
+
+Thumbnails column
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  thumbnails: {
+    url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
+    width: 190,
+    height: 107
+  }
+});
+```
+
+## moreVideoAttr
+
+- Type: `Object`
+- Default: `{'controls': false,'preload': 'auto'}`
+
+More video Attributes, these properties will be written directly to the video element
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  moreVideoAttr: {
+    'webkit-playsinline': true,
+    playsinline: true
+  }
+});
+```
+
+## quality
+
+- Type: `Array`
+- Default: `[]`
+
+Custom quality, The type of quality is an object
+
+### default
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether the default quality, if not specified, the first quality will be taken
+
+### name
+
+- Type: `String`
+- Default: ``
+
+Quality name
+
+### url
+
+- Type: `String`
+- Default: ``
+
+Quality url
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  quality: [
+    {
+      default: true,
+      name: 'SD 480P',
+      url: url + '/video/one-more-time-one-more-chance-480p.mp4'
+    },
+    {
+      name: 'HD 720P',
+      url: url + '/video/one-more-time-one-more-chance-720p.mp4'
+    }
+  ]
+});
+```
+
+## highlight
+
+- Type: `Array`
+- Default: `[]`
+
+Custom highlight, The type of highlight is an object
+
+### time
+
+- Type: `Number`
+- Default: `0`
+
+highlight seconds
+
+### text
+
+- Type: `String`
+- Default: ``
+
+highlight text
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  highlight: [
+    {
+      time: 60,
+      text: 'One more chance'
+    },
+    {
+      time: 120,
+      text: '谁でもいいはずなのに'
+    },
+    {
+      time: 180,
+      text: '夏の想い出がまわる'
+    },
+    {
+      time: 240,
+      text: 'こんなとこにあるはずもないのに'
+    },
+    {
+      time: 300,
+      text: '－－终わり－－'
+    }
+  ]
+});
+```
+
+## layers
+
+- Type: `Array`
+- Default: `[]`
+
+Custom layer, The type of layer is an object or function
+
+### disable
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to disable
+
+### name
+
+- Type: `String`
+- Default: `layer${id}`
+
+The unique name , used for the class name
+
+### index
+
+- Type: `Number`
+- Default: `${id}`
+
+The unique index, used for the priority level
+
+### html
+
+- Type: `String`、`Element`
+- Default: ``
+
+The dom element
+
+### style
+
+- Type: `Object`
+- Default: `{}`
+
+The style object
+
+### click
+
+- Type: `Function`
+- Default: `undefined`
+
+Click event
+
+### callback
+
+- Type: `Function`
+- Default: `undefined`
+
+Callback after mounted
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  layers: [
+    {
+      html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
+      style: {
+        position: 'absolute',
+        top: '20px',
+        right: '20px',
+        opacity: '.9'
+      }
+    }
+  ]
+});
+```
+
+## contextmenu
+
+- Type: `Array`
+- Default: `[]`
+
+Custom contextmenu, The type of layer is an object or function
+
+### disable
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to disable
+
+### name
+
+- Type: `String`
+- Default: `layer${id}`
+
+The unique name , used for the class name
+
+### index
+
+- Type: `Number`
+- Default: `${id}`
+
+The unique index, used for the priority level
+
+### html
+
+- Type: `String`、`Element`
+- Default: ``
+
+The dom element
+
+### style
+
+- Type: `Object`
+- Default: `{}`
+
+The style object
+
+### click
+
+- Type: `Function`
+- Default: `undefined`
+
+Click event
+
+### callback
+
+- Type: `Function`
+- Default: `undefined`
+
+Callback after mounted
+
+[Run Code](/)
+
+```js
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  contextmenu: [
+    {
+      html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
+      click: function() {
+        document.querySelector('.video-wrap').classList.toggle('dark');
+        this.hide();
+      }
+    }
+  ]
+});
+```
+
+## controls
+
+- Type: `Array`
+- Default: `[]`
+
+Custom controls, The type of controls is an object
+
+### option
+
+- Type: `Object`
+- Default: `{}`
+
+Instantiated an object property
+
+#### disable
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether to disable
+
+#### name
+
+- Type: `String`
+- Default: `control${id}`
+
+The unique name, used for the class name
+
+#### index
+
+- Type: `Number`
+- Default: `undefined`
+
+The unique index, used for the priority level
+
+#### position
+
+- Type: `String`
+- Default: `undefined`
+
+The position where the controller appears: top, left, right
+
+[Run Code](/)
+
+```js
+function MyController(option) {
+  this.option = option;
+}
+
+MyController.prototype.apply = function(art, dom) {
+  dom.innerHTML = this.option.name;
+};
+
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  controls: [
+    new MyController({
+      name: 'myControllerLeft',
+      position: 'left',
+      index: 40
+    }),
+    new MyController({
+      name: 'myControllerRight',
+      position: 'right',
+      index: 10
+    })
+  ]
+});
+```
+
+# Instance properties
+
+> TODO...
+
+# Class static properties
+
+> TODO...
+
+# Event
+
+> TODO...
+
+# Issue
+
+> TODO...
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ArtPlayer Document</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="ArtPlayer Document">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="./runCode.js"></script>
+  <script>
+    window.$docsify = {
+      name: 'ArtPlayer',
+      repo: 'zhw2590582/ArtPlayer',
+      maxLevel: 4,
+      subMaxLevel: 2,
+      plugins: [window.runCode]
+    }
+  </script>
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+</body>
+</html>
@@ -0,0 +1,23 @@
+window.runCode = function(hook) {
+  hook.ready(function() {
+    Array.from(document.querySelectorAll('.markdown-section a'))
+      .filter(function(item) {
+        return item.innerHTML === 'Run Code';
+      })
+      .forEach(function(item) {
+        item.addEventListener('click', function(event) {
+          event.preventDefault();
+          var codeElement = item.parentElement.nextElementSibling;
+          if (
+            codeElement.tagName === 'PRE' &&
+            codeElement.dataset.lang === 'js'
+          ) {
+            var code = window.encodeURIComponent(codeElement.innerText);
+            window.open(
+              'https://blog.zhw-island.com/ArtPlayer/lab/?code=' + code
+            );
+          }
+        });
+      });
+  });
+};
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <title>ArtPlayer</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
-    <meta name="keywords" content="artplayer,html5,video,player">
-    <meta name="description" content="ArtPlayer is a modern HTML5 video player">
-    <link rel="shortcut icon" href="./img/favicon.ico">
-    <link rel="stylesheet" href="./css/normalize.css">
-    <link rel="stylesheet" href="./css/index.css">
-    <link rel="stylesheet" href="./css/artplayer.css">
-</head>
-
-<body>
-    <div class="app">
-        <div class="artplayer-app"></div>
-    </div>
-    <script src="./js/artplayer.js"></script>
-    <script src="./js/index.js"></script>
-</body>
-
-</html>
@@ -1 +0,0 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/defineProperty.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/objectSpread.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/toConsumableArray.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/_option-validator@1.1.0@option-validator/dist/option-validator.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/_tiny-emitter@2.0.2@tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player/mountUrlMix.js","../../src/player/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/screenshotMix.js","../../node_modules/_screenfull@3.3.3@screenfull/dist/screenfull.js","../../src/player/fullscreenMix.js","../../src/player/fullscreenWebMix.js","../../node_modules/_get-size@2.0.3@get-size/get-size.js","../../node_modules/_ev-emitter@1.1.1@ev-emitter/ev-emitter.js","../../node_modules/_unipointer@2.3.0@unipointer/unipointer.js","../../node_modules/_unidragger@2.3.0@unidragger/unidragger.js","../../node_modules/_draggabilly@2.2.0@draggabilly/draggabilly.js","../../src/player/pipMix.js","../../src/player/index.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/fullscreen.js","../../src/controls/fullscreenWeb.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/setting/common.js","../../src/setting/index.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if Line truncated
@@ -1,16 +1,18 @@
 .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-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{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 .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-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{position:absolute;pointer-events:all}
 .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-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-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-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.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 .art-control{opacity:.9;float:left;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;padding:7px}.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 .art-volume-panel.art-volume-panel-hover{width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-time{padding:0 10px}.artplayer-video-playeLine 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-menu{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-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none}
-.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-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:350px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-x:hidden;overflow-y:auto;width:365px;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 35px 12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}
+.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}
+.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
 .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
 .artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
-.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
+.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
+.artplayer-auto-size{display:flex;align-items:center;justify-content:center}
+.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
 button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated
@@ -0,0 +1,84 @@
+html, body {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+}
+
+.part-left {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  border-right: 1px solid #ddd;
+}
+
+.part-right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.part-left .controls {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 20px;
+  border-bottom: 1px solid #ddd;
+  box-sizing: border-box;
+}
+
+.part-left .controls .left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.part-left .controls .left .logo {
+  padding-right: 30px;
+}
+
+.part-left .controls .run {
+  height: 30px;
+  width: 100px;
+}
+
+.part-left .code {
+  flex: 1;
+  overflow: auto;
+}
+
+.part-left .code .CodeMirror {
+  height: 100%;
+}
+
+.part-left .code .CodeMirror pre {
+  padding-left: 7px;
+  line-height: 1.25;
+}
+
+.part-right .video-wrap {
+  display: flex;
+  height: 70%;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #ddd;
+}
+
+.part-right .video-wrap.dark {
+  background: #000;
+}
+
+.part-right .video-wrap .artplayer-app {
+    width: 90%;
+    height: 60%;
+    border: 1px solid #ddd;
+}
+
+.part-right .console {
+  position: relative;
+  height: 30%;
+}
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ArtPlayer.js Lab</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
+    <meta name="keywords" content="artplayer,html5,video,player">
+    <meta name="description" content="ArtPlayer is a modern HTML5 video player">
+    <link rel="shortcut icon" href="./img/favicon.ico">
+    <link rel="stylesheet" href="./css/normalize.css">
+    <link rel="stylesheet" href="./css/common.css">
+    <link rel="stylesheet" href="./plugins/codemirror.css">
+    <link rel="stylesheet" href="./plugins/consola.css">
+    <link rel="stylesheet" href="./css/artplayer.css">    
+</head>
+
+<body>
+    <div class="container">
+        <div class="part-left">
+            <div class="controls">
+                <div class="left">
+                    <a href="./" class="logo">ArtPlayer.js Lab</a>
+                    <a href="../docs" class="logo">Document</a>
+                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+                </div>
+                <input class="run" type="button" value="Run Code">
+            </div>
+            <div class="code"></div>
+        </div>
+        <div class="part-right">
+            <div class="video-wrap">
+                <div class="artplayer-app"></div>
+            </div>
+            <div class="console"></div>
+        </div>
+    </div>
+    <script src="./plugins/consola.js"></script>
+    <script src="./plugins/codemirror.js"></script>
+    <script src="./plugins/javascript.js"></script>
+    <script src="./js/artplayer.js"></script>
+    <script src="./js/common.js"></script>
+    <script>
+        var _hmt = _hmt || [];
+        (function() {
+          var hm = document.createElement("script");
+          hm.src = "https://hm.baidu.com/hm.js?59d546bcda559725a968939647a0dcae";
+          var s = document.getElementsByTagName("script")[0]; 
+          s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+    <script>
+        loadCode('./js/index.js');
+    </script>
+</body>
+
+</html>
@@ -0,0 +1 @@
+{"version":3,"file":"artplayer.js","sources":["../../../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/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../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/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/node_modules/option-validator/dist/option-validator.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/node_modules/tiny-emitter/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/switchMix.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/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.js","../../../paLine truncated
@@ -0,0 +1,83 @@
+(function(win) {
+  var $code = document.querySelector('.code');
+  var $run = document.querySelector('.run');
+  var fileCode = '';
+
+  consola.creat({
+    target: '.console',
+    size: '100%',
+    zIndex: 99
+  });
+
+  var mirror = CodeMirror($code, {
+    lineNumbers: true,
+    mode: 'javascript',
+    matchBrackets: true,
+    value: ''
+  });
+
+  function initApp(app) {
+    consola.clean();
+    Artplayer.config.video.events.forEach(item => {
+      app.on('video:' + item, event => {
+        console.log('video: ' + event.type);
+      });
+    });
+  }
+
+  function getURLParameters(url) {
+    return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
+      (a, v) => (
+        (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
+      ),
+      {}
+    );
+  }
+
+  function loadCode(url) {
+    const { code } = getURLParameters(window.location.href);
+    if (code) {
+      mirror.setValue(decodeURIComponent(code).trim());
+      runCode();
+    } else {
+      fetch(url)
+        .then(response => {
+          return response.text();
+        })
+        .then(text => {
+          var code = text.trim();
+          mirror.setValue(code);
+          runCode();
+          fileCode = code;
+          return text;
+        })
+        .catch(err => {
+          console.error(err.message);
+        });
+    }
+  }
+
+  function runCode() {
+    Artplayer.instances.forEach(ins => {
+      ins.destroy(true);
+    });
+    var code = mirror.getValue();
+    eval(code);
+    initApp(Artplayer.instances[0]);
+  }
+
+  $run.addEventListener('click', function(e) {
+    runCode();
+    if (fileCode !== mirror.getValue()) {
+      const code = encodeURIComponent(mirror.getValue());
+      const url = window.location.origin + window.location.pathname + '?code=' + code;
+      history.pushState(null, null, url);
+    }
+  });
+
+  win.addEventListener('error', err => {
+    console.error(err.message);
+  });
+
+  win.loadCode = loadCode;
+})(window);
@@ -0,0 +1,115 @@
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+  title: '【新海诚动画】『秒速5センチメートル』',
+  poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
+  volume: 0.5,
+  autoplay: true,
+  pip: true,
+  autoSize: true,
+  screenshot: true,
+  setting: true,
+  loop: true,
+  playbackRate: true,
+  aspectRatio: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  mutex: true,
+  theme: '#ffad00',
+  lang: 'zh-cn',
+  moreVideoAttr: {
+    'webkit-playsinline': true,
+    'playsinline': true
+  },
+  contextmenu: [
+      {
+          html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
+          click: function() {
+            document.querySelector('.video-wrap').classList.toggle('dark');
+            this.hide();
+          }
+      }
+  ],
+  layers: [
+    {
+      html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
+      click: function () {
+        art.destroy(true);
+        art = new Artplayer({
+            autoplay: true,
+            container: '.artplayer-app',
+            url: url + '/video/you-name.mp4'
+        })
+      },
+      style: {
+          'position': 'absolute',
+          'top': '20px',
+          'right': '20px',
+          'opacity': '.9'
+      }
+    }
+  ],
+  quality: [
+    {
+      default: true,
+      name: '标清 480P',
+      url: url + '/video/one-more-time-one-more-chance-480p.mp4'
+    },
+    {
+      name: '高清 720P',
+      url: url + '/video/one-more-time-one-more-chance-720p.mp4'
+    }
+  ],
+  thumbnails: {
+    url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
+    width: 190,
+    height: 107
+  },
+  subtitle: {
+    url: url + '/subtitle/one-more-time-one-more-chance.srt',
+    style: {
+      color: '#03A9F4'
+    }
+  },
+  highlight: [
+    {
+      time: 60,
+      text: 'One more chance'
+    },
+    {
+      time: 120,
+      text: '谁でもいいはずなのに'
+    },
+    {
+      time: 180,
+      text: '夏の想い出がまわる'
+    },
+    {
+      time: 240,
+      text: 'こんなとこにあるはずもないのに'
+    },
+    {
+      time: 300,
+      text: '－－终わり－－'
+    }
+  ]
+});
+
+art.on('resize', $player => {
+  art.controls.quality.show();
+  art.controls.setting.show();
+  art.controls.subtitle.show();
+  art.controls.pip.show();
+
+  var playerWidth = $player.clientWidth;
+  if (playerWidth < 480) {
+    art.controls.quality.hide();
+    art.controls.setting.hide();
+  } 
+  
+  if (playerWidth < 360) {
+    art.controls.subtitle.hide();
+    art.controls.pip.hide();
+  }
+});
@@ -0,0 +1,346 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
@@ -0,0 +1 @@
+.consola-container{opacity:.9;display:flex;flex-direction:column;position:absolute;background-color:#242424}.consola-container.right{top:0;right:0;bottom:0;height:100%;width:0}.consola-container.bottom{left:0;right:0;bottom:0;width:100%;height:0}.consola-container .consola-tools{left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-direction:row;height:30px;padding:0 10px;color:hsla(0,0%,100%,.8);background-color:#141618;border-bottom:1px solid rgba(0,0,0,.3);font-size:12px;box-sizing:border-box}.consola-container .consola-tools .consola-clean{cursor:pointer}.consola-container .consola-wrap{flex:1;position:relative;z-index:1;overflow-y:auto;word-break:break-word;box-sizing:border-box}.consola-container .consola-wrap .method.method-log{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-log .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABpSURBVChTY6A92LNnj96uXbvKoVzsYMeOHVbbt29/D1T4eP/+/QJQYVSwe/duD6CCr0B8A8iWgwqjAqBk2NatW38B6bPbtm0TBYkBFbsA+c9ANFgRCBCtEASAAoSthgGiPAMD2IOHgQEA521bM7uG52wAAAAASUVORK5CYII=)}.consola-container .consola-wrap .method.method-info{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-info .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADISURBVChTY4ABp/AztmZBZ07qe538rO114rOa8+GTskYHbKHSEOARd6nLIOTsf61gIA46U6kVePYQiK3uc/K/hPG+LrCi8IyrtkZh5yCKgk/80w46ba0RdGYGhH/2v6rXyf88qtttGVwSLp2ECQLxeiAu1wo6uwpJ7L+o2f6TDA6xZz8jCyqFnuHXCj4djywmZXHoM/EK0azGqhBsNYpngL6VCTnGqRF4xgKo+D5IDO4ZEEAKnjcQBafvqwWf/YoSPDCAP8AZGAC7mLM81zgOTQAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-warn{position:relative;display:flex;color:#ffdc9e;background-color:#332b00;border-top:1px solid #650;border-bottom:1px solid #650;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-warn .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVChTbY7BCoJQFERn0Q/3BX1JuxQjsSCXiV8gtCgxhCIrKIRIqKDVzXl5w5cNHBjm6eGinXiAXu5inY2xYm/mbpIh+vcFhLA3sx0athNUhymEsP+10lAEEA17x8o/9wFuNGnYuVlWve0SQl7P0sBu3aq2R1Q/1JzSkYGd29eqNv2wjdnUuvNRciC/N+qe+7gidbA8zyHkOINsvA/sumcOkjcabcBmw2+mMgAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-error{position:relative;display:flex;color:#ff8080;background-color:#290000;border-top:1px solid #5b0000;border-bottom:1px solid #5b0000;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-error .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADESURBVChTY4CB7ZI8tmfU5E6e01b+DMIgNkgMKg0BR9Vkux6YWPx/bemIgkFiIDmwogOaqrYPzazAEm8DwuGKYGyQHEgNw0VT05Mwib9v3v7/kJEHxiA2TDFIDcNNU4vPMFPACj58/P/v40cwGyYOUsNwy8IZRSFIEUgxskKQGoZrzp4ErQapYbgYHG371M4dLACTQGaD5EBqwD6/FpzQ9dTBE64IhkFiIDmwIhi4mlJqey8o4eR9r8jPIAxig8QgsgwMAFZz1YtGPXgjAAAAAElFTkSuQmCC)}.consola-container .consola-wrap .method.method-debug{position:relative;display:flex;color:#4d88ff;background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-debug .method-icon{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3e%3cpath fill='%234D88FF' d='M433.5 127.5h-71.4a177.7 177.7 0 0 0-45.9-51L357 35.7 321.3 0l-56.1 56.1c-10.2-2.6-23-5.1-35.7-5.1s-25.5 2.5-35.7 5.1L137.7 0 102 35.7l40.8 40.8a177.7 177.7 0 0 0-45.9 51H25.5v51H79c-2.5 7.7-2.5 17.9-2.5 25.5v25.5h-51v51h51V306a88 88 0 0 0 2.5 25.5H25.5v51h71.4A152.2 152.2 0 0 0 229.5 459c56.1 0 107.1-30.6 132.6-76.5h71.4v-51H380c2.5-7.7 2.5-17.9 2.5-25.5v-25.5h51v-51h-51V204c0-7.7 0-17.9-2.5-25.5h53.5v-51zm-153 204h-102v-51h102v51zm0-102h-102v-51h102v51z'/%3e%3c/svg%3e")}.consola-container .consola-wrap .method *{vertical-align:top;box-sizing:border-box;font-family:Consolas,Lucida Console,Courier New,monospace;white-space:pre-wrap;font-size:12px}.consola-container .consola-wrap .method .method-icon{width:10px;height:18px;background-image:noneLine truncated
@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=c(n(1));n(2);var i=c(n(4));function c(e){return e&&e.__esModule?e:{default:e}}var l={},u={target:"body",position:"bottom",size:"300px",zIndex:99},a=["log","warn","error","info","debug"],s=void 0,f=void 0,d=void 0;l.creat=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e=o({},u,e),!document.querySelector(".consola-container"))return s=document.querySelector(e.target),i.default.insertHtml(s,"beforeend",'<div class="consola-container '+e.position+'" style="z-index: '+e.zIndex+"; "+("bottom"===e.position?"height":"width")+": "+e.size+'">\n      <div class="consola-tools">\n        <div class="consola-count">Console <span>0</span></div>\n        <div class="consola-clean">Clean</div>\n      </div>\n      <div class="consola-wrap"></div>\n    </div>'),f=s.querySelector(".consola-wrap"),d=s.querySelector(".consola-count span"),s.querySelector(".consola-clean").addEventListener("click",l.clean),function(e,t,n){var o=function(t){var o=e[t];e[t]=function(){o.apply(this,arguments),n(t,[].concat(Array.prototype.slice.call(arguments)))}},r=!0,i=!1,c=void 0;try{for(var l,u=t[Symbol.iterator]();!(r=(l=u.next()).done);r=!0){o(l.value)}}catch(e){i=!0,c=e}finally{try{!r&&u.return&&u.return()}finally{if(i)throw c}}}(window.console,a,function(e,t){i.default.insertHtml(f,"beforeend",'<div data-method="'+e+'" class="method method-'+e+'">\n        <div class="method-icon"></div>\n        <div class="method-text">'+function(e){var t=document.createElement("div");e=e.map(function(e){return(0,r.default)(e)}),t.textContent=e;var n=t.innerHTML;return t=null,n}(t)+"</div>\n      </div>"),d.innerHTML=f.children.length,f.scrollTo(0,f.scrollHeight)}),l},l.clean=function(){return f.innerHTML="",d.innerHTML="0",l},window.consola=l,e.exports=l},function(e,t){e.exports=function e(t){switch(typeof t){case"undefined":return"undefined";case"object":let n=Object.prototype.toString.call(t).slice(8,-1).toLowerCase();switch(n){case"null":return"null";case"array":return"["+t.map(t=>e(t)).join(", ")+"]";case"object":return"{ "+Object.keys(t).map(n=>n+": "+e(t[n])).join(", ")+" }";default:try{return t.toString()}catch(e){return"[Unknown type: "+n+"]"}}default:return t.toString()}}},function(e,t,n){},,function(e,t,n){"use strict";function o(e){for(var t=e.length,n=[],o=0;o<t;o+=1)n.push(e[o]);return n}e.exports={select:function(e){return document.querySelector(e)},selectAll:function(e){return o((arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll(e))},find:function(e,t){return o(e.querySelectorAll(t))},removeClass:function(e,t){e.classList.remove(t)},addClass:function(e,t){e.classList.add(t)},hasClass:function(e,t){return e.classList.contains(t)},removeElement:function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},closest:function(e,t){for(var n=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector;e&&!n.call(e,t);)e=e.parentElement;return e},getStyle:function(e,t,n){var o=window.getComputedStyle(e,null).getPropertyValue(t);return n?Number.parseFloat(o,10):o},blur:function(){document.activeElement&&document.activeElement.blur()},insertHtml:function(e,t,n){var o=["beforebegin","afterbegin","beforeend","afterend"];if(!o.includes(t))throw new TypeError("'position' must be one of them: "+o.join("、"));e.insertAdjacentHTML(t,n)},setAttributes:function(e,t){Object.keys(t).forEach(function(n){!1!==t[n]?e.setAttribute(n,t[n]):e.removeAttribute(n)})},setStyles:function(e,t){Object.keys(t).forEach(function(n){e.style[n]=t[n]})}}}])});
@@ -0,0 +1,899 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var statementIndent = parserConfig.statementIndent;
+  var jsonldMode = parserConfig.jsonld;
+  var jsonMode = parserConfig.json || jsonldMode;
+  var isTS = parserConfig.typescript;
+  var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
+
+  // Tokenizer
+
+  var keywords = function(){
+    function kw(type) {return {type: type, style: "keyword"};}
+    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c"), D = kw("keyword d");
+    var operator = kw("operator"), atom = {type: "atom", style: "atom"};
+
+    return {
+      "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+      "return": D, "break": D, "continue": D, "new": kw("new"), "delete": C, "void": C, "throw": C,
+      "debugger": kw("debugger"), "var": kw("var"), "const": kw("var"), "let": kw("var"),
+      "function": kw("function"), "catch": kw("catch"),
+      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+      "in": operator, "typeof": operator, "instanceof": operator,
+      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
+      "this": kw("this"), "class": kw("class"), "super": kw("atom"),
+      "yield": C, "export": kw("export"), "import": kw("import"), "extends": C,
+      "await": C
+    };
+  }();
+
+  var isOperatorChar = /[+\-*&%=<>!?|~^@]/;
+  var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
+
+  function readRegexp(stream) {
+    var escaped = false, next, inSet = false;
+    while ((next = stream.next()) != null) {
+      if (!escaped) {
+        if (next == "/" && !inSet) return;
+        if (next == "[") inSet = true;
+        else if (inSet && next == "]") inSet = false;
+      }
+      escaped = !escaped && next == "\\";
+    }
+  }
+
+  // Used as scratch variables to communicate multiple values without
+  // consing up tons of objects.
+  var type, content;
+  function ret(tp, style, cont) {
+    type = tp; content = cont;
+    return style;
+  }
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '"' || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    } else if (ch == "." && stream.match(/^\d+(?:[eE][+\-]?\d+)?/)) {
+      return ret("number", "number");
+    } else if (ch == "." && stream.match("..")) {
+      return ret("spread", "meta");
+    } else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
+      return ret(ch);
+    } else if (ch == "=" && stream.eat(">")) {
+      return ret("=>", "operator");
+    } else if (ch == "0" && stream.match(/^(?:x[\da-f]+|o[0-7]+|b[01]+)n?/i)) {
+      return ret("number", "number");
+    } else if (/\d/.test(ch)) {
+      stream.match(/^\d*(?:n|(?:\.\d*)?(?:[eE][+\-]?\d+)?)?/);
+      return ret("number", "number");
+    } else if (ch == "/") {
+      if (stream.eat("*")) {
+        state.tokenize = tokenComment;
+        return tokenComment(stream, state);
+      } else if (stream.eat("/")) {
+        stream.skipToEnd();
+        return ret("comment", "comment");
+      } else if (expressionAllowed(stream, state, 1)) {
+        readRegexp(stream);
+        stream.match(/^\b(([gimyus])(?![gimyus]*\2))+\b/);
+        return ret("regexp", "string-2");
+      } else {
+        stream.eat("=");
+        return ret("operator", "operator", stream.current());
+      }
+    } else if (ch == "`") {
+      state.tokenize = tokenQuasi;
+      return tokenQuasi(stream, state);
+    } else if (ch == "#") {
+      stream.skipToEnd();
+      return ret("error", "error");
+    } else if (isOperatorChar.test(ch)) {
+      if (ch != ">" || !state.lexical || state.lexical.type != ">") {
+        if (stream.eat("=")) {
+          if (ch == "!" || ch == "=") stream.eat("=")
+        } else if (/[<>*+\-]/.test(ch)) {
+          stream.eat(ch)
+          if (ch == ">") stream.eat(ch)
+        }
+      }
+      return ret("operator", "operator", stream.current());
+    } else if (wordRE.test(ch)) {
+      stream.eatWhile(wordRE);
+      var word = stream.current()
+      if (state.lastType != ".") {
+        if (keywords.propertyIsEnumerable(word)) {
+          var kw = keywords[word]
+          return ret(kw.type, kw.style, word)
+        }
+        if (word == "async" && stream.match(/^(\s|\/\*.*?\*\/)*[\[\(\w]/, false))
+          return ret("async", "keyword", word)
+      }
+      return ret("variable", "variable", word)
+    }
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, next;
+      if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
+        state.tokenize = tokenBase;
+        return ret("jsonld-keyword", "meta");
+      }
+      while ((next = stream.next()) != null) {
+        if (next == quote && !escaped) break;
+        escaped = !escaped && next == "\\";
+      }
+      if (!escaped) state.tokenize = tokenBase;
+      return ret("string", "string");
+    };
+  }
+
+  function tokenComment(stream, state) {
+    var maybeEnd = false, ch;
+    while (ch = stream.next()) {
+      if (ch == "/" && maybeEnd) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "comment");
+  }
+
+  function tokenQuasi(stream, state) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      escaped = !escaped && next == "\\";
+    }
+    return ret("quasi", "string-2", stream.current());
+  }
+
+  var brackets = "([{}])";
+  // This is a crude lookahead trick to try and notice that we're
+  // parsing the argument patterns for a fat-arrow function before we
+  // actually hit the arrow token. It only works if the arrow is on
+  // the same line as the arguments and there's no strange noise
+  // (comments) in between. Fallback is to only notice when we hit the
+  // arrow, and not declare the arguments as locals for the arrow
+  // body.
+  function findFatArrow(stream, state) {
+    if (state.fatArrowAt) state.fatArrowAt = null;
+    var arrow = stream.string.indexOf("=>", stream.start);
+    if (arrow < 0) return;
+
+    if (isTS) { // Try to skip TypeScript return type declarations after the arguments
+      var m = /:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(stream.string.slice(stream.start, arrow))
+      if (m) arrow = m.index
+    }
+
+    var depth = 0, sawSomething = false;
+    for (var pos = arrow - 1; pos >= 0; --pos) {
+      var ch = stream.string.charAt(pos);
+      var bracket = brackets.indexOf(ch);
+      if (bracket >= 0 && bracket < 3) {
+        if (!depth) { ++pos; break; }
+        if (--depth == 0) { if (ch == "(") sawSomething = true; break; }
+      } else if (bracket >= 3 && bracket < 6) {
+        ++depth;
+      } else if (wordRE.test(ch)) {
+        sawSomething = true;
+      } else if (/["'\/]/.test(ch)) {
+        return;
+      } else if (sawSomething && !depth) {
+        ++pos;
+        break;
+      }
+    }
+    if (sawSomething && !depth) state.fatArrowAt = pos;
+  }
+
+  // Parser
+
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
+
+  function JSLexical(indented, column, type, align, prev, info) {
+    this.indented = indented;
+    this.column = column;
+    this.type = type;
+    this.prev = prev;
+    this.info = info;
+    if (align != null) this.align = align;
+  }
+
+  function inScope(state, varname) {
+    for (var v = state.localVars; v; v = v.next)
+      if (v.name == varname) return true;
+    for (var cx = state.context; cx; cx = cx.prev) {
+      for (var v = cx.vars; v; v = v.next)
+        if (v.name == varname) return true;
+    }
+  }
+
+  function parseJS(state, style, type, content, stream) {
+    var cc = state.cc;
+    // Communicate our context to the combinators.
+    // (Less wasteful than consing up a hundred closures on every call.)
+    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
+
+    if (!state.lexical.hasOwnProperty("align"))
+      state.lexical.align = true;
+
+    while(true) {
+      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+      if (combinator(type, content)) {
+        while(cc.length && cc[cc.length - 1].lex)
+          cc.pop()();
+        if (cx.marked) return cx.marked;
+        if (type == "variable" && inScope(state, content)) return "variable-2";
+        return style;
+      }
+    }
+  }
+
+  // Combinator utils
+
+  var cx = {state: null, column: null, marked: null, cc: null};
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+  function inList(name, list) {
+    for (var v = list; v; v = v.next) if (v.name == name) return true
+    return false;
+  }
+  function register(varname) {
+    var state = cx.state;
+    cx.marked = "def";
+    if (state.context) {
+      if (state.lexical.info == "var" && state.context && state.context.block) {
+        // FIXME function decls are also not block scoped
+        var newContext = registerVarScoped(varname, state.context)
+        if (newContext != null) {
+          state.context = newContext
+          return
+        }
+      } else if (!inList(varname, state.localVars)) {
+        state.localVars = new Var(varname, state.localVars)
+        return
+      }
+    }
+    // Fall through means this is global
+    if (parserConfig.globalVars && !inList(varname, state.globalVars))
+      state.globalVars = new Var(varname, state.globalVars)
+  }
+  function registerVarScoped(varname, context) {
+    if (!context) {
+      return null
+    } else if (context.block) {
+      var inner = registerVarScoped(varname, context.prev)
+      if (!inner) return null
+      if (inner == context.prev) return context
+      return new Context(inner, context.vars, true)
+    } else if (inList(varname, context.vars)) {
+      return context
+    } else {
+      return new Context(context.prev, new Var(varname, context.vars), false)
+    }
+  }
+
+  function isModifier(name) {
+    return name == "public" || name == "private" || name == "protected" || name == "abstract" || name == "readonly"
+  }
+
+  // Combinators
+
+  function Context(prev, vars, block) { this.prev = prev; this.vars = vars; this.block = block }
+  function Var(name, next) { this.name = name; this.next = next }
+
+  var defaultVars = new Var("this", new Var("arguments", null))
+  function pushcontext() {
+    cx.state.context = new Context(cx.state.context, cx.state.localVars, false)
+    cx.state.localVars = defaultVars
+  }
+  function pushblockcontext() {
+    cx.state.context = new Context(cx.state.context, cx.state.localVars, true)
+    cx.state.localVars = null
+  }
+  function popcontext() {
+    cx.state.localVars = cx.state.context.vars
+    cx.state.context = cx.state.context.prev
+  }
+  popcontext.lex = true
+  function pushlex(type, info) {
+    var result = function() {
+      var state = cx.state, indent = state.indented;
+      if (state.lexical.type == "stat") indent = state.lexical.indented;
+      else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
+        indent = outer.indented;
+      state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
+    };
+    result.lex = true;
+    return result;
+  }
+  function poplex() {
+    var state = cx.state;
+    if (state.lexical.prev) {
+      if (state.lexical.type == ")")
+        state.indented = state.lexical.indented;
+      state.lexical = state.lexical.prev;
+    }
+  }
+  poplex.lex = true;
+
+  function expect(wanted) {
+    function exp(type) {
+      if (type == wanted) return cont();
+      else if (wanted == ";" || type == "}" || type == ")" || type == "]") return pass();
+      else return cont(exp);
+    };
+    return exp;
+  }
+
+  function statement(type, value) {
+    if (type == "var") return cont(pushlex("vardef", value), vardef, expect(";"), poplex);
+    if (type == "keyword a") return cont(pushlex("form"), parenExpr, statement, poplex);
+    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+    if (type == "keyword d") return cx.stream.match(/^\s*$/, false) ? cont() : cont(pushlex("stat"), maybeexpression, expect(";"), poplex);
+    if (type == "debugger") return cont(expect(";"));
+    if (type == "{") return cont(pushlex("}"), pushblockcontext, block, poplex, popcontext);
+    if (type == ";") return cont();
+    if (type == "if") {
+      if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
+        cx.state.cc.pop()();
+      return cont(pushlex("form"), parenExpr, statement, poplex, maybeelse);
+    }
+    if (type == "function") return cont(functiondef);
+    if (type == "for") return cont(pushlex("form"), forspec, statement, poplex);
+    if (type == "class" || (isTS && value == "interface")) { cx.marked = "keyword"; return cont(pushlex("form"), className, poplex); }
+    if (type == "variable") {
+      if (isTS && value == "declare") {
+        cx.marked = "keyword"
+        return cont(statement)
+      } else if (isTS && (value == "module" || value == "enum" || value == "type") && cx.stream.match(/^\s*\w/, false)) {
+        cx.marked = "keyword"
+        if (value == "enum") return cont(enumdef);
+        else if (value == "type") return cont(typeexpr, expect("operator"), typeexpr, expect(";"));
+        else return cont(pushlex("form"), pattern, expect("{"), pushlex("}"), block, poplex, poplex)
+      } else if (isTS && value == "namespace") {
+        cx.marked = "keyword"
+        return cont(pushlex("form"), expression, block, poplex)
+      } else if (isTS && value == "abstract") {
+        cx.marked = "keyword"
+        return cont(statement)
+      } else {
+        return cont(pushlex("stat"), maybelabel);
+      }
+    }
+    if (type == "switch") return cont(pushlex("form"), parenExpr, expect("{"), pushlex("}", "switch"), pushblockcontext,
+                                      block, poplex, poplex, popcontext);
+    if (type == "case") return cont(expression, expect(":"));
+    if (type == "default") return cont(expect(":"));
+    if (type == "catch") return cont(pushlex("form"), pushcontext, maybeCatchBinding, statement, poplex, popcontext);
+    if (type == "export") return cont(pushlex("stat"), afterExport, poplex);
+    if (type == "import") return cont(pushlex("stat"), afterImport, poplex);
+    if (type == "async") return cont(statement)
+    if (value == "@") return cont(expression, statement)
+    return pass(pushlex("stat"), expression, expect(";"), poplex);
+  }
+  function maybeCatchBinding(type) {
+    if (type == "(") return cont(funarg, expect(")"))
+  }
+  function expression(type, value) {
+    return expressionInner(type, value, false);
+  }
+  function expressionNoComma(type, value) {
+    return expressionInner(type, value, true);
+  }
+  function parenExpr(type) {
+    if (type != "(") return pass()
+    return cont(pushlex(")"), expression, expect(")"), poplex)
+  }
+  function expressionInner(type, value, noComma) {
+    if (cx.state.fatArrowAt == cx.stream.start) {
+      var body = noComma ? arrowBodyNoComma : arrowBody;
+      if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, expect("=>"), body, popcontext);
+      else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
+    }
+
+    var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
+    if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
+    if (type == "function") return cont(functiondef, maybeop);
+    if (type == "class" || (isTS && value == "interface")) { cx.marked = "keyword"; return cont(pushlex("form"), classExpression, poplex); }
+    if (type == "keyword c" || type == "async") return cont(noComma ? expressionNoComma : expression);
+    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
+    if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
+    if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
+    if (type == "{") return contCommasep(objprop, "}", null, maybeop);
+    if (type == "quasi") return pass(quasi, maybeop);
+    if (type == "new") return cont(maybeTarget(noComma));
+    if (type == "import") return cont(expression);
+    return cont();
+  }
+  function maybeexpression(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expression);
+  }
+
+  function maybeoperatorComma(type, value) {
+    if (type == ",") return cont(expression);
+    return maybeoperatorNoComma(type, value, false);
+  }
+  function maybeoperatorNoComma(type, value, noComma) {
+    var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
+    var expr = noComma == false ? expression : expressionNoComma;
+    if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
+    if (type == "operator") {
+      if (/\+\+|--/.test(value) || isTS && value == "!") return cont(me);
+      if (isTS && value == "<" && cx.stream.match(/^([^>]|<.*?>)*>\s*\(/, false))
+        return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, me);
+      if (value == "?") return cont(expression, expect(":"), expr);
+      return cont(expr);
+    }
+    if (type == "quasi") { return pass(quasi, me); }
+    if (type == ";") return;
+    if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
+    if (type == ".") return cont(property, me);
+    if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
+    if (isTS && value == "as") { cx.marked = "keyword"; return cont(typeexpr, me) }
+    if (type == "regexp") {
+      cx.state.lastType = cx.marked = "operator"
+      cx.stream.backUp(cx.stream.pos - cx.stream.start - 1)
+      return cont(expr)
+    }
+  }
+  function quasi(type, value) {
+    if (type != "quasi") return pass();
+    if (value.slice(value.length - 2) != "${") return cont(quasi);
+    return cont(expression, continueQuasi);
+  }
+  function continueQuasi(type) {
+    if (type == "}") {
+      cx.marked = "string-2";
+      cx.state.tokenize = tokenQuasi;
+      return cont(quasi);
+    }
+  }
+  function arrowBody(type) {
+    findFatArrow(cx.stream, cx.state);
+    return pass(type == "{" ? statement : expression);
+  }
+  function arrowBodyNoComma(type) {
+    findFatArrow(cx.stream, cx.state);
+    return pass(type == "{" ? statement : expressionNoComma);
+  }
+  function maybeTarget(noComma) {
+    return function(type) {
+      if (type == ".") return cont(noComma ? targetNoComma : target);
+      else if (type == "variable" && isTS) return cont(maybeTypeArgs, noComma ? maybeoperatorNoComma : maybeoperatorComma)
+      else return pass(noComma ? expressionNoComma : expression);
+    };
+  }
+  function target(_, value) {
+    if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorComma); }
+  }
+  function targetNoComma(_, value) {
+    if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorNoComma); }
+  }
+  function maybelabel(type) {
+    if (type == ":") return cont(poplex, statement);
+    return pass(maybeoperatorComma, expect(";"), poplex);
+  }
+  function property(type) {
+    if (type == "variable") {cx.marked = "property"; return cont();}
+  }
+  function objprop(type, value) {
+    if (type == "async") {
+      cx.marked = "property";
+      return cont(objprop);
+    } else if (type == "variable" || cx.style == "keyword") {
+      cx.marked = "property";
+      if (value == "get" || value == "set") return cont(getterSetter);
+      var m // Work around fat-arrow-detection complication for detecting typescript typed arrow params
+      if (isTS && cx.state.fatArrowAt == cx.stream.start && (m = cx.stream.match(/^\s*:\s*/, false)))
+        cx.state.fatArrowAt = cx.stream.pos + m[0].length
+      return cont(afterprop);
+    } else if (type == "number" || type == "string") {
+      cx.marked = jsonldMode ? "property" : (cx.style + " property");
+      return cont(afterprop);
+    } else if (type == "jsonld-keyword") {
+      return cont(afterprop);
+    } else if (isTS && isModifier(value)) {
+      cx.marked = "keyword"
+      return cont(objprop)
+    } else if (type == "[") {
+      return cont(expression, maybetype, expect("]"), afterprop);
+    } else if (type == "spread") {
+      return cont(expressionNoComma, afterprop);
+    } else if (value == "*") {
+      cx.marked = "keyword";
+      return cont(objprop);
+    } else if (type == ":") {
+      return pass(afterprop)
+    }
+  }
+  function getterSetter(type) {
+    if (type != "variable") return pass(afterprop);
+    cx.marked = "property";
+    return cont(functiondef);
+  }
+  function afterprop(type) {
+    if (type == ":") return cont(expressionNoComma);
+    if (type == "(") return pass(functiondef);
+  }
+  function commasep(what, end, sep) {
+    function proceed(type, value) {
+      if (sep ? sep.indexOf(type) > -1 : type == ",") {
+        var lex = cx.state.lexical;
+        if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
+        return cont(function(type, value) {
+          if (type == end || value == end) return pass()
+          return pass(what)
+        }, proceed);
+      }
+      if (type == end || value == end) return cont();
+      return cont(expect(end));
+    }
+    return function(type, value) {
+      if (type == end || value == end) return cont();
+      return pass(what, proceed);
+    };
+  }
+  function contCommasep(what, end, info) {
+    for (var i = 3; i < arguments.length; i++)
+      cx.cc.push(arguments[i]);
+    return cont(pushlex(end, info), commasep(what, end), poplex);
+  }
+  function block(type) {
+    if (type == "}") return cont();
+    return pass(statement, block);
+  }
+  function maybetype(type, value) {
+    if (isTS) {
+      if (type == ":") return cont(typeexpr);
+      if (value == "?") return cont(maybetype);
+    }
+  }
+  function mayberettype(type) {
+    if (isTS && type == ":") {
+      if (cx.stream.match(/^\s*\w+\s+is\b/, false)) return cont(expression, isKW, typeexpr)
+      else return cont(typeexpr)
+    }
+  }
+  function isKW(_, value) {
+    if (value == "is") {
+      cx.marked = "keyword"
+      return cont()
+    }
+  }
+  function typeexpr(type, value) {
+    if (value == "keyof" || value == "typeof") {
+      cx.marked = "keyword"
+      return cont(value == "keyof" ? typeexpr : expressionNoComma)
+    }
+    if (type == "variable" || value == "void") {
+      cx.marked = "type"
+      return cont(afterType)
+    }
+    if (type == "string" || type == "number" || type == "atom") return cont(afterType);
+    if (type == "[") return cont(pushlex("]"), commasep(typeexpr, "]", ","), poplex, afterType)
+    if (type == "{") return cont(pushlex("}"), commasep(typeprop, "}", ",;"), poplex, afterType)
+    if (type == "(") return cont(commasep(typearg, ")"), maybeReturnType)
+    if (type == "<") return cont(commasep(typeexpr, ">"), typeexpr)
+  }
+  function maybeReturnType(type) {
+    if (type == "=>") return cont(typeexpr)
+  }
+  function typeprop(type, value) {
+    if (type == "variable" || cx.style == "keyword") {
+      cx.marked = "property"
+      return cont(typeprop)
+    } else if (value == "?") {
+      return cont(typeprop)
+    } else if (type == ":") {
+      return cont(typeexpr)
+    } else if (type == "[") {
+      return cont(expression, maybetype, expect("]"), typeprop)
+    }
+  }
+  function typearg(type, value) {
+    if (type == "variable" && cx.stream.match(/^\s*[?:]/, false) || value == "?") return cont(typearg)
+    if (type == ":") return cont(typeexpr)
+    return pass(typeexpr)
+  }
+  function afterType(type, value) {
+    if (value == "<") return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, afterType)
+    if (value == "|" || type == "." || value == "&") return cont(typeexpr)
+    if (type == "[") return cont(expect("]"), afterType)
+    if (value == "extends" || value == "implements") { cx.marked = "keyword"; return cont(typeexpr) }
+  }
+  function maybeTypeArgs(_, value) {
+    if (value == "<") return cont(pushlex(">"), commasep(typeexpr, ">"), poplex, afterType)
+  }
+  function typeparam() {
+    return pass(typeexpr, maybeTypeDefault)
+  }
+  function maybeTypeDefault(_, value) {
+    if (value == "=") return cont(typeexpr)
+  }
+  function vardef(_, value) {
+    if (value == "enum") {cx.marked = "keyword"; return cont(enumdef)}
+    return pass(pattern, maybetype, maybeAssign, vardefCont);
+  }
+  function pattern(type, value) {
+    if (isTS && isModifier(value)) { cx.marked = "keyword"; return cont(pattern) }
+    if (type == "variable") { register(value); return cont(); }
+    if (type == "spread") return cont(pattern);
+    if (type == "[") return contCommasep(eltpattern, "]");
+    if (type == "{") return contCommasep(proppattern, "}");
+  }
+  function proppattern(type, value) {
+    if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
+      register(value);
+      return cont(maybeAssign);
+    }
+    if (type == "variable") cx.marked = "property";
+    if (type == "spread") return cont(pattern);
+    if (type == "}") return pass();
+    return cont(expect(":"), pattern, maybeAssign);
+  }
+  function eltpattern() {
+    return pass(pattern, maybeAssign)
+  }
+  function maybeAssign(_type, value) {
+    if (value == "=") return cont(expressionNoComma);
+  }
+  function vardefCont(type) {
+    if (type == ",") return cont(vardef);
+  }
+  function maybeelse(type, value) {
+    if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
+  }
+  function forspec(type, value) {
+    if (value == "await") return cont(forspec);
+    if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
+  }
+  function forspec1(type) {
+    if (type == "var") return cont(vardef, expect(";"), forspec2);
+    if (type == ";") return cont(forspec2);
+    if (type == "variable") return cont(formaybeinof);
+    return pass(expression, expect(";"), forspec2);
+  }
+  function formaybeinof(_type, value) {
+    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
+    return cont(maybeoperatorComma, forspec2);
+  }
+  function forspec2(type, value) {
+    if (type == ";") return cont(forspec3);
+    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
+    return pass(expression, expect(";"), forspec3);
+  }
+  function forspec3(type) {
+    if (type != ")") cont(expression);
+  }
+  function functiondef(type, value) {
+    if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
+    if (type == "variable") {register(value); return cont(functiondef);}
+    if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, mayberettype, statement, popcontext);
+    if (isTS && value == "<") return cont(pushlex(">"), commasep(typeparam, ">"), poplex, functiondef)
+  }
+  function funarg(type, value) {
+    if (value == "@") cont(expression, funarg)
+    if (type == "spread") return cont(funarg);
+    if (isTS && isModifier(value)) { cx.marked = "keyword"; return cont(funarg); }
+    return pass(pattern, maybetype, maybeAssign);
+  }
+  function classExpression(type, value) {
+    // Class expressions may have an optional name.
+    if (type == "variable") return className(type, value);
+    return classNameAfter(type, value);
+  }
+  function className(type, value) {
+    if (type == "variable") {register(value); return cont(classNameAfter);}
+  }
+  function classNameAfter(type, value) {
+    if (value == "<") return cont(pushlex(">"), commasep(typeparam, ">"), poplex, classNameAfter)
+    if (value == "extends" || value == "implements" || (isTS && type == ",")) {
+      if (value == "implements") cx.marked = "keyword";
+      return cont(isTS ? typeexpr : expression, classNameAfter);
+    }
+    if (type == "{") return cont(pushlex("}"), classBody, poplex);
+  }
+  function classBody(type, value) {
+    if (type == "async" ||
+        (type == "variable" &&
+         (value == "static" || value == "get" || value == "set" || (isTS && isModifier(value))) &&
+         cx.stream.match(/^\s+[\w$\xa1-\uffff]/, false))) {
+      cx.marked = "keyword";
+      return cont(classBody);
+    }
+    if (type == "variable" || cx.style == "keyword") {
+      cx.marked = "property";
+      return cont(isTS ? classfield : functiondef, classBody);
+    }
+    if (type == "[")
+      return cont(expression, maybetype, expect("]"), isTS ? classfield : functiondef, classBody)
+    if (value == "*") {
+      cx.marked = "keyword";
+      return cont(classBody);
+    }
+    if (type == ";") return cont(classBody);
+    if (type == "}") return cont();
+    if (value == "@") return cont(expression, classBody)
+  }
+  function classfield(type, value) {
+    if (value == "?") return cont(classfield)
+    if (type == ":") return cont(typeexpr, maybeAssign)
+    if (value == "=") return cont(expressionNoComma)
+    return pass(functiondef)
+  }
+  function afterExport(type, value) {
+    if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
+    if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
+    if (type == "{") return cont(commasep(exportField, "}"), maybeFrom, expect(";"));
+    return pass(statement);
+  }
+  function exportField(type, value) {
+    if (value == "as") { cx.marked = "keyword"; return cont(expect("variable")); }
+    if (type == "variable") return pass(expressionNoComma, exportField);
+  }
+  function afterImport(type) {
+    if (type == "string") return cont();
+    if (type == "(") return pass(expression);
+    return pass(importSpec, maybeMoreImports, maybeFrom);
+  }
+  function importSpec(type, value) {
+    if (type == "{") return contCommasep(importSpec, "}");
+    if (type == "variable") register(value);
+    if (value == "*") cx.marked = "keyword";
+    return cont(maybeAs);
+  }
+  function maybeMoreImports(type) {
+    if (type == ",") return cont(importSpec, maybeMoreImports)
+  }
+  function maybeAs(_type, value) {
+    if (value == "as") { cx.marked = "keyword"; return cont(importSpec); }
+  }
+  function maybeFrom(_type, value) {
+    if (value == "from") { cx.marked = "keyword"; return cont(expression); }
+  }
+  function arrayLiteral(type) {
+    if (type == "]") return cont();
+    return pass(commasep(expressionNoComma, "]"));
+  }
+  function enumdef() {
+    return pass(pushlex("form"), pattern, expect("{"), pushlex("}"), commasep(enummember, "}"), poplex, poplex)
+  }
+  function enummember() {
+    return pass(pattern, maybeAssign);
+  }
+
+  function isContinuedStatement(state, textAfter) {
+    return state.lastType == "operator" || state.lastType == "," ||
+      isOperatorChar.test(textAfter.charAt(0)) ||
+      /[,.]/.test(textAfter.charAt(0));
+  }
+
+  function expressionAllowed(stream, state, backUp) {
+    return state.tokenize == tokenBase &&
+      /^(?:operator|sof|keyword [bcd]|case|new|export|default|spread|[\[{}\(,;:]|=>)$/.test(state.lastType) ||
+      (state.lastType == "quasi" && /\{\s*$/.test(stream.string.slice(0, stream.pos - (backUp || 0))))
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      var state = {
+        tokenize: tokenBase,
+        lastType: "sof",
+        cc: [],
+        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
+        localVars: parserConfig.localVars,
+        context: parserConfig.localVars && new Context(null, null, false),
+        indented: basecolumn || 0
+      };
+      if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
+        state.globalVars = parserConfig.globalVars;
+      return state;
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        if (!state.lexical.hasOwnProperty("align"))
+          state.lexical.align = false;
+        state.indented = stream.indentation();
+        findFatArrow(stream, state);
+      }
+      if (state.tokenize != tokenComment && stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (type == "comment") return style;
+      state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
+      return parseJS(state, style, type, content, stream);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.tokenize == tokenComment) return CodeMirror.Pass;
+      if (state.tokenize != tokenBase) return 0;
+      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical, top
+      // Kludge to prevent 'maybelse' from blocking lexical scope pops
+      if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
+        var c = state.cc[i];
+        if (c == poplex) lexical = lexical.prev;
+        else if (c != maybeelse) break;
+      }
+      while ((lexical.type == "stat" || lexical.type == "form") &&
+             (firstChar == "}" || ((top = state.cc[state.cc.length - 1]) &&
+                                   (top == maybeoperatorComma || top == maybeoperatorNoComma) &&
+                                   !/^[,\.=+\-*:?[\(]/.test(textAfter))))
+        lexical = lexical.prev;
+      if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
+        lexical = lexical.prev;
+      var type = lexical.type, closing = firstChar == type;
+
+      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info.length + 1 : 0);
+      else if (type == "form" && firstChar == "{") return lexical.indented;
+      else if (type == "form") return lexical.indented + indentUnit;
+      else if (type == "stat")
+        return lexical.indented + (isContinuedStatement(state, textAfter) ? statementIndent || indentUnit : 0);
+      else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
+        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
+      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
+      else return lexical.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
+    blockCommentStart: jsonMode ? null : "/*",
+    blockCommentEnd: jsonMode ? null : "*/",
+    blockCommentContinue: jsonMode ? null : " * ",
+    lineComment: jsonMode ? null : "//",
+    fold: "brace",
+    closeBrackets: "()[]{}''\"\"``",
+
+    helperType: jsonMode ? "json" : "javascript",
+    jsonldMode: jsonldMode,
+    jsonMode: jsonMode,
+
+    expressionAllowed: expressionAllowed,
+
+    skipExpression: function(state) {
+      var top = state.cc[state.cc.length - 1]
+      if (top == expression || top == expressionNoComma) state.cc.pop()
+    }
+  };
+});
+
+CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
+
+CodeMirror.defineMIME("text/javascript", "javascript");
+CodeMirror.defineMIME("text/ecmascript", "javascript");
+CodeMirror.defineMIME("application/javascript", "javascript");
+CodeMirror.defineMIME("application/x-javascript", "javascript");
+CodeMirror.defineMIME("application/ecmascript", "javascript");
+CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true});
+CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
+CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
+
+});
@@ -1,401 +0,0 @@
-1
-00:00:01,500 --> 00:00:03,950
-歌名：One More Time,One More Chance
-〖愿往事重来〗
-
-2
-00:00:04,000 --> 00:00:05,950
-【新海诚动画】『秒速5センチメートル』
-《秒速5厘米》主题曲
-
-3
-00:00:06,000 --> 00:00:08,950
-编曲：森俊之
-
-4
-00:00:09,000 --> 00:00:11,950
-作词|作曲|演唱：山崎まさよし <山崎将义>
-
-5
-00:00:12,000 --> 00:00:15,950
-
-
-6
-00:00:16,000 --> 00:00:20,250
-これ以上何をう失(し)なえば 
-【还要再失去什么】
-
-7
-00:00:20,300 --> 00:00:23,250
-心は许(ゆる)されるの 
-【才能让心得到宽恕?】
-
-8
-00:00:23,300 --> 00:00:27,250
-どれ程(ほど)の痛(いた)みならば 
-【还要再怎样痛苦】
-
-9
-00:00:27,300 --> 00:00:30,250
-もう一度君に会(あ)える 
-【才能与你再次相见】
-
-10
-00:00:30,300 --> 00:00:33,250
-One more time
-
-11
-00:00:33,300 --> 00:00:37,950
-季节(きせつ)よ うつろわないで 
-【不愿看到季节的变迁】
-
-12
-00:00:38,000 --> 00:00:41,050
-One more time
-
-13
-00:00:41,100 --> 00:00:45,250
-ふざけあった时间(じかん)よ 
-【曾与你嬉闹的时光啊】
-
-14
-00:00:45,300 --> 00:00:49,250
-くいちがうときはいつも 
-【每次争执的时候】
-
-15
-00:00:49,300 --> 00:00:53,100
-仆が先(さき)に折(お)れたね 
-【总是我先让步】
-
-16
-00:00:53,150 --> 00:00:56,250
-わがままな性格(せいかく)が 
-【你那任性的性格】
-
-17
-00:00:56,300 --> 00:00:59,250
-なおさら爱(いと)しくさせた 
-【反而令你更加可爱】
-
-18
-00:00:59,300 --> 00:01:02,950
-One more chance
-
-19
-00:01:03,000 --> 00:01:07,250
-记忆(きおく)に足(あし)を取(と)られて 
-【回忆绊住我的脚步】
-
-20
-00:01:07,300 --> 00:01:10,250
-One more chance
-
-21
-00:01:10,300 --> 00:01:14,950
-次(つぎ)の场所を选(えら)べない 
-【无法选择下个地方】
-
-22
-00:01:15,000 --> 00:01:18,250
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-23
-00:01:18,300 --> 00:01:21,950
-どっかに君の姿(すがた)を 
-【寻觅着你的身影】
-
-24
-00:01:22,000 --> 00:01:23,950
-向(むか)いのホーム 
-【对面的月台上】
-
-25
-00:01:24,000 --> 00:01:25,950
-路地裏(ろじうら)の窓(まど) 
-【在小巷的窗口里】
-
-26
-00:01:26,000 --> 00:01:29,250
-こんなとこにいるはずもないのに
-【尽管明知道你不可能在那里】
-
-27
-00:01:29,300 --> 00:01:33,250
-愿(ねが)いがもしも叶(かな)うなら 
-【若愿望能够实现】
-
-28
-00:01:33,300 --> 00:01:36,550
-いますぐ君のもとへ 
-【好想马上去到你身边】
-
-29
-00:01:36,600 --> 00:01:40,250
-できないことは もう何もない 
-【如今我再也不会有丝毫退缩】
-
-30
-00:01:40,300 --> 00:01:47,300
-すべてかけて抱きしめてみせるよ 
-【我会不顾一切将你紧紧拥抱】
-
-31
-00:01:47,350 --> 00:01:51,950
-
-
-32
-00:01:52,000 --> 00:01:55,250
-
-
-33
-00:01:55,300 --> 00:01:59,250
-寂(さび)しさ纷(まぎ)らすだけなら
-【如果只是为了排遣寂寞】
-
-34
-00:01:59,300 --> 00:02:02,950
-谁でもいいはずなのに 
-【其实不管是谁都无所谓】
-
-35
-00:02:03,000 --> 00:02:07,250
-星が落(お)ちそうな夜(よる)だから 
-【唯有在星辰仿佛要坠落的夜晚】
-
-36
-00:02:07,300 --> 00:02:10,250
-自分(じぶん)をいつわれない 
-【我无法欺骗自己】
-
-37
-00:02:10,300 --> 00:02:13,250
-One more time
-
-38
-00:02:13,300 --> 00:02:17,250
-季节(きせつ)よ うつろわないで 
-【不愿看到季节的变迁】
-
-39
-00:02:17,300 --> 00:02:20,250
-One more time
-
-40
-00:02:20,300 --> 00:02:24,600
-ふざけあった时间(じかん)よ 
-【曾与你嬉闹的时光啊】
-
-41
-00:02:24,650 --> 00:02:25,250
-
-
-42
-00:02:25,300 --> 00:02:29,050
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-43
-00:02:29,100 --> 00:02:32,250
-どっかに君(きみ)の姿(すがた)を 
-【寻觅着你的身影】
-
-44
-00:02:32,300 --> 00:02:34,250
-交差点(こうさてん)でも 
-【每个十字路口】
-
-45
-00:02:34,300 --> 00:02:36,250
-梦の中でも 【每次梦境之中】
-
-46
-00:02:36,300 --> 00:02:39,950
-こんなとこにいるはずもないのに 
-【尽管明知道你不可能在那里】
-
-47
-00:02:40,000 --> 00:02:43,250
-奇迹(きせき)がもしも起(お)こるなら 
-【若奇迹将会发生】
-
-48
-00:02:43,300 --> 00:02:46,950
-今すぐ君に见せたい 
-【我希望马上就能见到你】
-
-49
-00:02:47,000 --> 00:02:50,250
-新しい朝(あさ) これからの仆 
-【无论崭新的清晨 还是今后的自己】
-
-50
-00:02:50,300 --> 00:02:57,250
-言えなかった「好き」という言叶も 
-【或是那句没能说出口的「喜欢你」】
-
-51
-00:02:57,300 --> 00:03:04,450
-
-
-52
-00:03:04,500 --> 00:03:05,950
-
-
-53
-00:03:06,000 --> 00:03:13,950
-夏の想い出がまわる 
-【夏日的回忆在脑海中回旋】
-
-54
-00:03:14,000 --> 00:03:20,950
-ふいに消(き)えた鼓动(こどう) 
-【刹那间消失的悸动】
-
-55
-00:03:21,000 --> 00:03:24,950
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-57
-00:03:25,000 --> 00:03:27,950
-どっかに君の姿(すがた)を 
-【寻觅着你的身影】
-
-58
-00:03:28,000 --> 00:03:29,950
-明(あ)け方(がた)の街(まち) 
-【在拂晓的街头】
-
-59
-00:03:30,000 --> 00:03:31,950
-桜木町(さくらぎちょう)で 
-【在种满樱树的小镇】
-
-60
-00:03:32,000 --> 00:03:35,950
-こんなとこに来(く)るはずもないのに 
-【尽管明知道你不可能在那里】
-
-61
-00:03:36,000 --> 00:03:39,250
-愿(ねが)いがもしも叶(かな)うなら 
-【若愿望能够实现】
-
-62
-00:03:39,300 --> 00:03:43,050
-今すぐ君のもとへ 
-【现在马上去到你身边】
-
-63
-00:03:43,100 --> 00:03:46,800
-できないことは もう何(なに)もない 
-【如今我再也不会有丝毫退缩】
-
-64
-00:03:46,850 --> 00:03:50,600
-すべてかけて抱きしめてみせるよ 
-【我会不顾一切紧紧将你拥抱】
-
-65
-00:03:50,650 --> 00:03:54,250
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-66
-00:03:54,300 --> 00:03:57,700
-どっかに君のかけらを 
-【寻觅着你的片断】
-
-67
-00:03:57,750 --> 00:03:59,250
-旅先(たびさき)の店(みせ) 
-【在旅途中的小店】
-
-68
-00:03:59,300 --> 00:04:01,450
-新闻(しんぶん)の隅(すみ) 
-【在报纸的角落】
-
-69
-00:04:01,500 --> 00:04:04,950
-こんなとこにあるはずもないのに 
-【尽管明知道你不可能在那里】
-
-70
-00:04:05,000 --> 00:04:08,250
-奇迹(きせき)がもしも起(お)こるなら 
-【若奇迹将会发生】
-
-71
-00:04:08,300 --> 00:04:12,250
-今すぐ君に见せたい 
-【我希望现在就能见到你】
-
-72
-00:04:12,300 --> 00:04:16,050
-新しい朝(あさ) これからの仆 
-【无论崭新的清晨 还是今后的自己】
-
-73
-00:04:16,100 --> 00:04:19,400
-言えなかった「好き」という言叶も 
-【或是那句没能说出口的「喜欢你」】
-
-74
-00:04:19,450 --> 00:04:19,950
-
-
-75
-00:04:20,000 --> 00:04:22,950
-いつでも捜(さが)してしまう 
-【总是在一直寻觅】
-
-76
-00:04:23,000 --> 00:04:26,950
-どっかに君の笑颜(えがお)を 
-【寻觅着你的笑容】
-
-77
-00:04:27,000 --> 00:04:30,250
-急行(きゅうこう)待ちの 踏切(ふみきり)あたり
-【哪怕在等待列车通过的铁路道口】
-
-78
-00:04:30,300 --> 00:04:34,250
-こんなとこにいるはずもないのに 
-【虽然明明知道你不可能在那里】
-
-79
-00:04:34,300 --> 00:04:37,950
-命(いのち)が缲(く)り返(かえ)すならば 
-【如果生命能够重来】
-
-80
-00:04:38,000 --> 00:04:41,050
-何度(なんど)も君のもとへ 
-【无论几次我都要去你身边】
-
-81
-00:04:41,100 --> 00:04:45,150
-欲(ほ)しいものなど もう何もない 
-【那时我一定别无所求】
-
-82
-00:04:45,200 --> 00:04:52,750
-君のほかに大切なものなど 
-【再也没有什么比你更加重要】
-
-83
-00:04:52,800 --> 00:05:10,950
-
-
-84
-00:05:11,000 --> 00:05:15,450
-
-
-85
-00:05:15,500 --> 00:05:25,500
-－－终わり－－
-
@@ -1,403 +0,0 @@
-WEBVTT
-
-1
-00:00:01.500 --> 00:00:03.950
-歌名：One More Time,One More Chance
-〖愿往事重来〗
-
-2
-00:00:04.000 --> 00:00:05.950
-【新海诚动画】『秒速5センチメートル』
-《秒速5厘米》主题曲
-
-3
-00:00:06.000 --> 00:00:08.950
-编曲：森俊之
-
-4
-00:00:09.000 --> 00:00:11.950
-作词|作曲|演唱：山崎まさよし <山崎将义>
-
-5
-00:00:12.000 --> 00:00:15.950
-
-
-6
-00:00:16.000 --> 00:00:20.250
-これ以上何をう失(し)なえば 
-【还要再失去什么】
-
-7
-00:00:20.300 --> 00:00:23.250
-心は许(ゆる)されるの 
-【才能让心得到宽恕?】
-
-8
-00:00:23.300 --> 00:00:27.250
-どれ程(ほど)の痛(いた)みならば 
-【还要再怎样痛苦】
-
-9
-00:00:27.300 --> 00:00:30.250
-もう一度君に会(あ)える 
-【才能与你再次相见】
-
-10
-00:00:30.300 --> 00:00:33.250
-One more time
-
-11
-00:00:33.300 --> 00:00:37.950
-季节(きせつ)よ うつろわないで 
-【不愿看到季节的变迁】
-
-12
-00:00:38.000 --> 00:00:41.050
-One more time
-
-13
-00:00:41.100 --> 00:00:45.250
-ふざけあった时间(じかん)よ 
-【曾与你嬉闹的时光啊】
-
-14
-00:00:45.300 --> 00:00:49.250
-くいちがうときはいつも 
-【每次争执的时候】
-
-15
-00:00:49.300 --> 00:00:53.100
-仆が先(さき)に折(お)れたね 
-【总是我先让步】
-
-16
-00:00:53.150 --> 00:00:56.250
-わがままな性格(せいかく)が 
-【你那任性的性格】
-
-17
-00:00:56.300 --> 00:00:59.250
-なおさら爱(いと)しくさせた 
-【反而令你更加可爱】
-
-18
-00:00:59.300 --> 00:01:02.950
-One more chance
-
-19
-00:01:03.000 --> 00:01:07.250
-记忆(きおく)に足(あし)を取(と)られて 
-【回忆绊住我的脚步】
-
-20
-00:01:07.300 --> 00:01:10.250
-One more chance
-
-21
-00:01:10.300 --> 00:01:14.950
-次(つぎ)の场所を选(えら)べない 
-【无法选择下个地方】
-
-22
-00:01:15.000 --> 00:01:18.250
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-23
-00:01:18.300 --> 00:01:21.950
-どっかに君の姿(すがた)を 
-【寻觅着你的身影】
-
-24
-00:01:22.000 --> 00:01:23.950
-向(むか)いのホーム 
-【对面的月台上】
-
-25
-00:01:24.000 --> 00:01:25.950
-路地裏(ろじうら)の窓(まど) 
-【在小巷的窗口里】
-
-26
-00:01:26.000 --> 00:01:29.250
-こんなとこにいるはずもないのに
-【尽管明知道你不可能在那里】
-
-27
-00:01:29.300 --> 00:01:33.250
-愿(ねが)いがもしも叶(かな)うなら 
-【若愿望能够实现】
-
-28
-00:01:33.300 --> 00:01:36.550
-いますぐ君のもとへ 
-【好想马上去到你身边】
-
-29
-00:01:36.600 --> 00:01:40.250
-できないことは もう何もない 
-【如今我再也不会有丝毫退缩】
-
-30
-00:01:40.300 --> 00:01:47.300
-すべてかけて抱きしめてみせるよ 
-【我会不顾一切将你紧紧拥抱】
-
-31
-00:01:47.350 --> 00:01:51.950
-
-
-32
-00:01:52.000 --> 00:01:55.250
-
-
-33
-00:01:55.300 --> 00:01:59.250
-寂(さび)しさ纷(まぎ)らすだけなら
-【如果只是为了排遣寂寞】
-
-34
-00:01:59.300 --> 00:02:02.950
-谁でもいいはずなのに 
-【其实不管是谁都无所谓】
-
-35
-00:02:03.000 --> 00:02:07.250
-星が落(お)ちそうな夜(よる)だから 
-【唯有在星辰仿佛要坠落的夜晚】
-
-36
-00:02:07.300 --> 00:02:10.250
-自分(じぶん)をいつわれない 
-【我无法欺骗自己】
-
-37
-00:02:10.300 --> 00:02:13.250
-One more time
-
-38
-00:02:13.300 --> 00:02:17.250
-季节(きせつ)よ うつろわないで 
-【不愿看到季节的变迁】
-
-39
-00:02:17.300 --> 00:02:20.250
-One more time
-
-40
-00:02:20.300 --> 00:02:24.600
-ふざけあった时间(じかん)よ 
-【曾与你嬉闹的时光啊】
-
-41
-00:02:24.650 --> 00:02:25.250
-
-
-42
-00:02:25.300 --> 00:02:29.050
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-43
-00:02:29.100 --> 00:02:32.250
-どっかに君(きみ)の姿(すがた)を 
-【寻觅着你的身影】
-
-44
-00:02:32.300 --> 00:02:34.250
-交差点(こうさてん)でも 
-【每个十字路口】
-
-45
-00:02:34.300 --> 00:02:36.250
-梦の中でも 【每次梦境之中】
-
-46
-00:02:36.300 --> 00:02:39.950
-こんなとこにいるはずもないのに 
-【尽管明知道你不可能在那里】
-
-47
-00:02:40.000 --> 00:02:43.250
-奇迹(きせき)がもしも起(お)こるなら 
-【若奇迹将会发生】
-
-48
-00:02:43.300 --> 00:02:46.950
-今すぐ君に见せたい 
-【我希望马上就能见到你】
-
-49
-00:02:47.000 --> 00:02:50.250
-新しい朝(あさ) これからの仆 
-【无论崭新的清晨 还是今后的自己】
-
-50
-00:02:50.300 --> 00:02:57.250
-言えなかった「好き」という言叶も 
-【或是那句没能说出口的「喜欢你」】
-
-51
-00:02:57.300 --> 00:03:04.450
-
-
-52
-00:03:04.500 --> 00:03:05.950
-
-
-53
-00:03:06.000 --> 00:03:13.950
-夏の想い出がまわる 
-【夏日的回忆在脑海中回旋】
-
-54
-00:03:14.000 --> 00:03:20.950
-ふいに消(き)えた鼓动(こどう) 
-【刹那间消失的悸动】
-
-55
-00:03:21.000 --> 00:03:24.950
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-56
-00:03:25.000 --> 00:03:27.950
-どっかに君の姿(すがた)を 
-【寻觅着你的身影】
-
-57
-00:03:28.000 --> 00:03:29.950
-明(あ)け方(がた)の街(まち) 
-【在拂晓的街头】
-
-58
-00:03:30.000 --> 00:03:31.950
-桜木町(さくらぎちょう)で 
-【在种满樱树的小镇】
-
-59
-00:03:32.000 --> 00:03:35.950
-こんなとこに来(く)るはずもないのに 
-【尽管明知道你不可能在那里】
-
-60
-00:03:36.000 --> 00:03:39.250
-愿(ねが)いがもしも叶(かな)うなら 
-【若愿望能够实现】
-
-61
-00:03:39.300 --> 00:03:43.050
-今すぐ君のもとへ 
-【现在马上去到你身边】
-
-62
-00:03:43.100 --> 00:03:46.800
-できないことは もう何(なに)もない 
-【如今我再也不会有丝毫退缩】
-
-63
-00:03:46.850 --> 00:03:50.600
-すべてかけて抱きしめてみせるよ 
-【我会不顾一切紧紧将你拥抱】
-
-64
-00:03:50.650 --> 00:03:54.250
-いつでも捜(さが)しているよ 
-【总是在一直寻觅】
-
-65
-00:03:54.300 --> 00:03:57.700
-どっかに君のかけらを 
-【寻觅着你的片断】
-
-66
-00:03:57.750 --> 00:03:59.250
-旅先(たびさき)の店(みせ) 
-【在旅途中的小店】
-
-67
-00:03:59.300 --> 00:04:01.450
-新闻(しんぶん)の隅(すみ) 
-【在报纸的角落】
-
-68
-00:04:01.500 --> 00:04:04.950
-こんなとこにあるはずもないのに 
-【尽管明知道你不可能在那里】
-
-69
-00:04:05.000 --> 00:04:08.250
-奇迹(きせき)がもしも起(お)こるなら 
-【若奇迹将会发生】
-
-70
-00:04:08.300 --> 00:04:12.250
-今すぐ君に见せたい 
-【我希望现在就能见到你】
-
-71
-00:04:12.300 --> 00:04:16.050
-新しい朝(あさ) これからの仆 
-【无论崭新的清晨 还是今后的自己】
-
-72
-00:04:16.100 --> 00:04:19.400
-言えなかった「好き」という言叶も 
-【或是那句没能说出口的「喜欢你」】
-
-73
-00:04:19.450 --> 00:04:19.950
-
-
-74
-00:04:20.000 --> 00:04:22.950
-いつでも捜(さが)してしまう 
-【总是在一直寻觅】
-
-75
-00:04:23.000 --> 00:04:26.950
-どっかに君の笑颜(えがお)を 
-【寻觅着你的笑容】
-
-76
-00:04:27.000 --> 00:04:30.250
-急行(きゅうこう)待ちの 踏切(ふみきり)あたり
-【哪怕在等待列车通过的铁路道口】
-
-77
-00:04:30.300 --> 00:04:34.250
-こんなとこにいるはずもないのに 
-【虽然明明知道你不可能在那里】
-
-78
-00:04:34.300 --> 00:04:37.950
-命(いのち)が缲(く)り返(かえ)すならば 
-【如果生命能够重来】
-
-79
-00:04:38.000 --> 00:04:41.050
-何度(なんど)も君のもとへ 
-【无论几次我都要去你身边】
-
-80
-00:04:41.100 --> 00:04:45.150
-欲(ほ)しいものなど もう何もない 
-【那时我一定别无所求】
-
-81
-00:04:45.200 --> 00:04:52.750
-君のほかに大切なものなど 
-【再也没有什么比你更加重要】
-
-82
-00:04:52.800 --> 00:05:10.950
-
-
-83
-00:05:11.000 --> 00:05:15.450
-
-
-84
-00:05:15.500 --> 00:05:25.500
-－－终わり－－
-
@@ -1,7 +1,15 @@
 {
  "lerna": "3.4.3",
-  "version": "1.0.1",
+  "version": "1.0.3",
  "packages": [
    "packages/*"
-  ]
+  ],
+  "command": {
+    "publish": {
+      "ignoreChanges": [
+        "docs/**",
+        "package.json"
+      ]
+    }
+  }
 }
@@ -1,13 +1,13 @@
 {
  "name": "artplayer",
-  "version": "1.0.0",
+  "version": "1.0.2",
  "description": "ArtPlayer is a modern HTML5 video player",
-  "main": "dist/artplayer.js",
-  "style": "dist/artplayer.css",
  "scripts": {
-    "dev": "cross-env NODE_ENV=development rollup -c -m -w",
-    "build": "cross-env NODE_ENV=production rollup -c",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "bootstrap": "lerna bootstrap",
+    "publish": "lerna publish",
+    "build": "lerna run build",
+    "test": "lerna run test",
+    "lint": "eslint packages/*/src"
  },
  "repository": {
    "type": "git",
@@ -24,32 +24,11 @@
  },
  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
  "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/runtime": "^7.1.2",
-    "autoprefixer": "^9.3.1",
-    "browser-env": "^3.2.5",
-    "cross-env": "^5.2.0",
-    "cssnano": "^4.1.7",
-    "lerna": "^3.4.3",
-    "node-sass": "^4.9.4",
-    "rollup": "^0.67.0",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-eslint": "^5.0.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-svgo": "^1.0.1",
-    "rollup-plugin-uglify": "^6.0.0"
-  },
-  "dependencies": {
-    "balloon-css": "^0.5.0",
-    "draggabilly": "^2.2.0",
-    "option-validator": "^1.1.0",
-    "screenfull": "^3.3.3",
-    "tiny-emitter": "^2.0.2"
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.9.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-import": "^2.14.0",
+    "lerna": "^3.4.3"
  }
 }
@@ -1,3 +1,4 @@
+node_modules
 .DS_Store
 yarn.lock
 package-lock.json
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Harvey Zack
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
@@ -1,5 +1,5 @@
 /*!
- * artplayer-plugin-danmu.js v1.0.0
+ * artplayer-plugin-danmu.js v1.0.2
 * Github: https://github.com/zhw2590582/ArtPlayer#readme
 * (c) 2017-2018 Harvey Zack
 * Released under the MIT License.
@@ -1,6 +1,6 @@
 {
  "name": "artplayer-plugin-danmu",
-  "version": "1.0.1",
+  "version": "1.0.3",
  "description": "Danmu plugin for ArtPlayer",
  "main": "dist/artplayer-plugin-danmu.js",
  "style": "dist/artplayer-plugin-danmu.css",
@@ -24,7 +24,7 @@ export default {
  input: 'src/index.js',
  output: {
    name: name,
-    file: isProd ? `dist/${name}.js` : path.join(process.cwd(), '../../', `docs/js/${name}.js`),
+    file: isProd ? `dist/${name}.js` : path.join(process.cwd(), '../../', `docs/lab/js/${name}.js`),
    format: 'umd',
    exports: 'named'
  },
@@ -38,7 +38,7 @@ export default {
    }),
    postcss({
      plugins: [autoprefixer, cssnano],
-      extract: isProd ? `dist/${name}.css` : path.join(process.cwd(), '../../', `docs/css/${name}.css`)
+      extract: isProd ? `dist/${name}.css` : path.join(process.cwd(), '../../', `docs/lab/css/${name}.css`)
    }),
    nodeResolve(),
    commonjs(),
@@ -1,9 +1,9 @@
 import './style/index.scss';

 class ArtplayerPluginDanmu {
-  constructor() {
-    console.log(this);
-  }
+    constructor() {
+        console.log(this);
+    }
 }

 window.ArtplayerPluginDanmu = ArtplayerPluginDanmu;
@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs
@@ -0,0 +1 @@
+package-lock=false
@@ -0,0 +1,4 @@
+# ArtPlayer
+
+[README.md](https://github.com/zhw2590582/ArtPlayer)
+
@@ -1,16 +1,18 @@
-.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-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{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 .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{position:absolute;pointer-events:all}
+.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-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-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-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-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-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.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 .art-control{opacity:.9;float:left;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;padding:7px}.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 .art-volume-panel.art-volume-panel-hover{width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-time{padding:0 10px}.artplayer-video-playeLine 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-menu{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-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none}
-.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-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:350px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-x:hidden;overflow-y:auto;width:365px;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 35px 12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}
+.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}
+.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:300px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-y:auto;width:100%;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
 .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
 .artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
-.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
+.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;z-index:9999;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important}
+.artplayer-auto-size{display:flex;align-items:center;justify-content:center}
+.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
 button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated
@@ -0,0 +1,8 @@
+/*!
+ * artplayer.js v1.0.2
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2018 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.artplayer={})}(this,function(t){"use strict";var jt=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var r=function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t},o="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}function n(t,e){return t(e={exports:{}},e.exports),e.exports}var l=n(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=i=function(t){return n(t)}:e.exports=i=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},i(t)}e.exports=i});var a=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var s=function(t,e){return!e||"object"!==l(e)&&"function"!=typeof e?a(t):e},c=n(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),u=n(function(n){function i(t,e){return n.exports=i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},i(t,e)}n.exports=i});var d=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)};var h=function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t};var f=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){h(e,t,n[t])})}return e};var p=function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}};var v=function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)};var y=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var g=function(t){return p(t)||v(t)||y()};var m=function(t){return-1!==Function.toString.call(t).indexOf("[native code]")},b=n(function(i){function r(t,e,n){return!function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?i.exports=r=function(t,e,n){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(t,i));return n&&u(r,n.prototype),r}:i.exports=r=Reflect.construct,r.apply(null,arguments)}i.exports=r}),w=function(t){function i(t,e){var n;return jt(this,i),n=s(this,c(i).call(this,t)),"function"==typeof Error.captureStackTrace&&Error.captureStackTrace(a(a(n)),e||n.constructor),n.name="ArtPlayerError",n}return d(i,t),i}(n(function(e){function i(t){var n="function"==typeof Map?new Map:void 0;return e.exports=i=function(t){if(null===t||!m(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return b(t,arguments,c(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),u(e,t)},i(t)}e.exports=i})(Error));function Mt(t,e){var n="function"==typeof t;if(n?!n():!t)throw new w(e)}function At(t,e,n){return Math.max(Math.min(t,Math.max(e,n)),Math.min(e,n))}function x(t){return t.includes("?")?x(t.split("?")[0]):t.includes("#")?x(t.split("#")[0]):t.trim().toLowerCase().split(".").pop()}function $(t,e){return e instanceof Element?t.appendChild(e):t.insertAdjacentHTML("beforeend",e),t.lastElementChild}function k(t,e,n){var i=Array.from(t.children);e.dataset.index=n;var r=i.find(function(t){return Number(t.dataset.index)>=Number(n)});return r?r.insertAdjacentElement("beforebegin",e):$(t,e),e}function zt(t,e,n){return t.style[e]=n,t}function E(e,n){return Object.keys(n).forEach(function(t){zt(e,t,n[t])}),e}function S(t,e){var n=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],i=window.getComputedStyle(t,null).getPropertyValue(e);return n?parseFloat(i):i}function Dt(t){var eLine truncated
@@ -0,0 +1,55 @@
+{
+  "name": "artplayer",
+  "version": "1.0.3",
+  "description": "ArtPlayer is a modern HTML5 video player",
+  "main": "dist/artplayer.js",
+  "style": "dist/artplayer.css",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rollup -c -m -w",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+  },
+  "keywords": [
+    "video",
+    "player"
+  ],
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
+  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/runtime": "^7.1.2",
+    "autoprefixer": "^9.3.1",
+    "browser-env": "^3.2.5",
+    "cross-env": "^5.2.0",
+    "cssnano": "^4.1.7",
+    "node-sass": "^4.9.4",
+    "rollup": "^0.67.0",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-eslint": "^5.0.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-svgo": "^1.0.1",
+    "rollup-plugin-uglify": "^6.0.0"
+  },
+  "dependencies": {
+    "balloon-css": "^0.5.0",
+    "draggabilly": "^2.2.0",
+    "option-validator": "^1.1.1",
+    "resize-observer": "^1.0.0-alpha.1",
+    "screenfull": "^3.3.3",
+    "tiny-emitter": "^2.0.2"
+  }
+}
@@ -1,3 +1,4 @@
+const path = require('path');
 const babel = require('rollup-plugin-babel');
 const commonjs = require('rollup-plugin-commonjs');
 const nodeResolve = require('rollup-plugin-node-resolve');
@@ -8,12 +9,12 @@ const cssnano = require('cssnano');
 const replace = require('rollup-plugin-replace');
 const svgo = require('rollup-plugin-svgo');
 const { uglify } = require('rollup-plugin-uglify');
-const { version, homepage } = require('./package.json');
+const { version, homepage, name } = require('./package.json');
 const isProd = process.env.NODE_ENV === 'production';

 const banner =
  '/*!\n' +
-  ` * ArtPlayer.js v${version}\n` +
+  ` * ${name}.js v${version}\n` +
  ` * Github: ${homepage}\n` +
  ` * (c) 2017-${new Date().getFullYear()} Harvey Zack\n` +
  ' * Released under the MIT License.\n' +
@@ -22,8 +23,8 @@ const banner =
 export default {
  input: 'src/index.js',
  output: {
-    name: 'artplayer',
-    file: isProd ? 'dist/artplayer.js' : 'docs/js/artplayer.js',
+    name: name,
+    file: isProd ? `dist/${name}.js` : path.join(process.cwd(), '../../', `docs/lab/js/${name}.js`),
    format: 'umd',
    exports: 'named'
  },
@@ -31,14 +32,13 @@ export default {
    eslint({
      exclude: [
        'node_modules/**',
-        'docs/**',
-        'src/icons/*.svg',
-        'src/style/*.scss'
+        'src/**/*.scss',
+        'src/**/*.svg'
      ]
    }),
    postcss({
      plugins: [autoprefixer, cssnano],
-      extract: isProd ? 'dist/artplayer.css' : 'docs/css/artplayer.css'
+      extract: isProd ? `dist/${name}.css` : path.join(process.cwd(), '../../', `docs/lab/css/${name}.css`)
    }),
    nodeResolve(),
    commonjs(),
@@ -1,7 +1,7 @@
-import { sublings } from '../utils';
+import { inverseClass } from '../utils';

 export default function aspectRatio(art) {
-  const { option, i18n, player, contextmenu } = art;
+  const { option, i18n, player } = art;
  return {
    disable: !option.aspectRatio,
    name: 'aspectRatio',
@@ -17,10 +17,16 @@ export default function aspectRatio(art) {
      const { ratio } = target.dataset;
      if (ratio) {
        player.aspectRatio(ratio.split(':'));
-        sublings(target).forEach(item => item.classList.remove('current'));
-        target.classList.add('current');
-        contextmenu.hide();
+        art.contextmenu.hide();
      }
+    },
+    callback: $menu => {
+      art.on('aspectRatioChange', ratio => {
+        const $current = Array.from($menu.querySelectorAll('span')).find(
+          item => item.dataset.ratio === ratio.join(':')
+        );
+        inverseClass($current, 'current');
+      });
    }
  };
 }
@@ -8,12 +8,15 @@ import close from './close';
 let id = 0;
 export default class Contextmenu {
  constructor(art) {
+    id = 0;
    this.art = art;
-    this.init();
+    this.art.on('firstCanplay', () => {
+      this.init();
+    });
  }

  init() {
-    const { option, refs, events: { proxy } } = this.art;
+    const { option, refs: { $player, $contextmenu }, events: { proxy } } = this.art;

    option.contextmenu.push(
      playbackRate,
@@ -27,28 +30,29 @@ export default class Contextmenu {
      this.add(item);
    });

-    proxy(refs.$player, 'contextmenu', event => {
+    proxy($player, 'contextmenu', event => {
      event.preventDefault();
      this.show();
      this.setPos(event);
    });

-    proxy(refs.$player, 'click', event => {
-      if (refs.$contextmenu && !event.composedPath().includes(refs.$contextmenu)) {
+    proxy($player, 'click', event => {
+      if (!event.composedPath().includes($contextmenu)) {
        this.hide();
      }
    });
  }

-  add(item) {
-    if (!item.disable) {
-      const { refs, events: { proxy } } = this.art;
+  add(item, callback) {
+    const menu = typeof item === 'function' ? item(this.art) : item;
+    if (!menu.disable) {
      id++;
-      const menu = typeof item === 'function' ? item(this.art) : item;
+      const { refs: { $contextmenu }, events: { proxy } } = this.art;
+      const name = menu.name || `contextmenu${id}`;
      const $menu = document.createElement('div');
-      $menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
-      append($menu, menu.html);
+      $menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
      setStyles($menu, menu.style || {});
+      append($menu, menu.html);
      if (menu.click) {
        proxy($menu, 'click', event => {
          event.preventDefault();
@@ -56,17 +60,20 @@ export default class Contextmenu {
          this.art.emit('contextmenu:click', $menu);
        });
      }
-      this[`$${menu.name || id}`] = $menu;
-      insertByIndex(refs.$contextmenu, $menu, menu.index || id);
+      insertByIndex($contextmenu, $menu, menu.index || id);
+      this[name] = $menu;
+      menu.callback && menu.callback($menu);
+      callback && callback($menu);
+      this.art.emit('contextmenu:add', $menu);
    }
  }

  setPos(event) {
-    const { refs } = this.art;
+    const { refs: { $player, $contextmenu } } = this.art;
    const mouseX = event.clientX;
    const mouseY = event.clientY;
-    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$player.getBoundingClientRect();
-    const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
+    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
+    const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
    let menuLeft = mouseX - cLeft;
    let menuTop = mouseY - cTop;

@@ -78,8 +85,8 @@ export default class Contextmenu {
      menuTop = cHeight - mHeight;
    }

-    setStyle(refs.$contextmenu, 'left', `${menuLeft}px`);
-    setStyle(refs.$contextmenu, 'top', `${menuTop}px`);
+    setStyle($contextmenu, 'left', `${menuLeft}px`);
+    setStyle($contextmenu, 'top', `${menuTop}px`);
  }

  hide() {
@@ -1,7 +1,7 @@
-import { sublings } from '../utils';
+import { inverseClass } from '../utils';

 export default function playbackRate(art) {
-  const { option, i18n, player, contextmenu } = art;
+  const { option, i18n, player } = art;
  return {
    disable: !option.playbackRate,
    name: 'playbackRate',
@@ -20,10 +20,16 @@ export default function playbackRate(art) {
      const { rate } = target.dataset;
      if (rate) {
        player.playbackRate(Number(rate));
-        sublings(target).forEach(item => item.classList.remove('current'));
-        target.classList.add('current');
-        contextmenu.hide();
+        art.contextmenu.hide();
      }
+    },
+    callback: $menu => {
+      art.on('playbackRateChange', rate => {
+        const $current = Array.from($menu.querySelectorAll('span')).find(
+          item => Number(item.dataset.rate) === rate
+        );
+        inverseClass($current, 'current');
+      });
    }
  };
 }
@@ -1,4 +1,4 @@
-import { insertByIndex } from '../utils';
+import { insertByIndex, setStyle } from '../utils';
 import Fullscreen from './fullscreen';
 import FullscreenWeb from './fullscreenWeb';
 import Pip from './pip';
@@ -15,6 +15,7 @@ import Quality from './quality';
 let id = 0;
 export default class Controls {
  constructor(art) {
+    id = 0;
    this.art = art;
    this.art.on('firstCanplay', () => {
      this.init();
@@ -111,15 +112,17 @@ export default class Controls {
    });
  }

-  add(control) {
+  add(control, callback) {
    const { option } = control;
    if (option && !option.disable) {
      id++;
-      const name = option.name || control.constructor.name.toLowerCase() || `control${id}`;
+      const name = option.name || `control${id}`;
      const $control = document.createElement('div');
-      $control.setAttribute('class', `art-control art-control-${name}`);
+      $control.classList.value = `art-control art-control-${name}`;
      this.mount(option.position, $control, option.index || id);
+      this.commonMethod(control, $control);
      control.apply && control.apply(this.art, $control);
+      callback && callback($control);
      this[name] = control;
    }
  }
@@ -141,6 +144,22 @@ export default class Controls {
    }
  }

+  commonMethod(control, $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() {
    const { $player } = this.art.refs;
    $player.classList.add('artplayer-controls-show');
@@ -24,11 +24,11 @@ export default class PlayAndPause {

    art.on('video:playing', () => {
      setStyle(this.$play, 'display', 'none');
-      setStyle(this.$pause, 'display', 'block');
+      setStyle(this.$pause, 'display', 'flex');
    });

    art.on('video:pause', () => {
-      setStyle(this.$play, 'display', 'block');
+      setStyle(this.$play, 'display', 'flex');
      setStyle(this.$pause, 'display', 'none');
    });
  }
@@ -1,18 +1,16 @@
-import { append, clamp, secondToTime, setStyle } from '../utils';
+import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';

 export default class Progress {
  constructor(option) {
    this.option = option;
    this.isDroging = false;
-    this.getLoaded = this.getLoaded.bind(this);
-    this.getPlayed = this.getPlayed.bind(this);
    this.set = this.set.bind(this);
  }

  apply(art, $control) {
    this.art = art;
    this.$control = $control;
-    const { option: { highlight, theme }, events: { proxy }, refs: { $video }, player } = art;
+    const { option: { highlight, theme }, events: { proxy }, player } = art;

    append(
      $control,
@@ -33,18 +31,19 @@ export default class Progress {
    this.$indicator = $control.querySelector('.art-progress-indicator');
    this.$tip = $control.querySelector('.art-progress-tip');

-    this.set('loaded', this.getLoaded());
    highlight.forEach(item => {
-      const left = Number(item.time) / $video.duration;
-      append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>`);
+      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', this.getLoaded());
+      this.set('loaded', player.loaded);
    });

    this.art.on('video:timeupdate', () => {
-      this.set('played', this.getPlayed());
+      this.set('played', player.played);
    });

    this.art.on('video:ended', () => {
@@ -79,7 +78,7 @@ export default class Progress {
    proxy(document, 'mousemove', event => {
      if (this.isDroging) {
        const { second, percentage } = this.getPosFromEvent(event);
-        this.$indicator.classList.add('show-indicator');
+        this.$indicator.classList.add('art-show-indicator');
        this.set('played', percentage);
        player.seek(second);
      }
@@ -88,17 +87,16 @@ export default class Progress {
    proxy(document, 'mouseup', () => {
      if (this.isDroging) {
        this.isDroging = false;
-        this.$indicator.classList.remove('show-indicator');
+        this.$indicator.classList.remove('art-show-indicator');
      }
    });
  }

  showHighlight(event) {
-    const { $video } = this.art.refs;
    const { text, time } = event.target.dataset;
    this.$tip.innerHTML = text;
    const left =
-      Number(time) / $video.duration * this.$control.clientWidth +
+      Number(time) / this.art.player.duration * this.$control.clientWidth +
      event.target.clientWidth / 2 -
      this.$tip.clientWidth / 2;
    setStyle(this.$tip, 'left', `${left}px`);
@@ -117,23 +115,11 @@ export default class Progress {
    }
  }

-  getPlayed() {
-    const { $video } = this.art.refs;
-    return $video.currentTime / $video.duration;
-  }
-
-  getLoaded() {
-    const { $video } = this.art.refs;
-    return $video.buffered.length
-      ? $video.buffered.end($video.buffered.length - 1) / $video.duration
-      : 0;
-  }
-
  getPosFromEvent(event) {
-    const { $video, $progress } = this.art.refs;
+    const { player, refs: { $progress } } = this.art;
    const { left } = $progress.getBoundingClientRect();
    const width = clamp(event.x - left, 0, $progress.clientWidth);
-    const second = width / $progress.clientWidth * $video.duration;
+    const second = width / $progress.clientWidth * player.duration;
    const time = secondToTime(second);
    const percentage = clamp(width / $progress.clientWidth, 0, 1);
    return { second, time, width, percentage };
@@ -142,7 +128,7 @@ export default class Progress {
  set(type, percentage) {
    setStyle(this[`$${type}`], 'width', `${percentage * 100}%`);
    if (type === 'played') {
-      setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - 6.5px)`);
+      setStyle(this.$indicator, 'left', `calc(${percentage * 100}% - ${getStyle(this.$indicator, 'width') / 2}px)`);
    }
  }
 }
@@ -15,9 +15,9 @@ export default class Quality {
    const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);

    hover($control, () => {
-      $control.classList.add('hover');
+      $control.classList.add('art-quality-hover');
    }, () => {
-      $control.classList.remove('hover');
+      $control.classList.remove('art-quality-hover');
    });

    proxy($qualitys, 'click', event => {
@@ -16,12 +16,12 @@ export default class Subtitle {
    });

    art.on('subtitle:show', () => {
-      setStyle(this.$subtitle, 'opacity', '0.8');
+      setStyle(this.$subtitle, 'opacity', '1');
      tooltip(this.$subtitle, i18n.get('Hide subtitle'));
    });

    art.on('subtitle:hide', () => {
-      setStyle(this.$subtitle, 'opacity', '1');
+      setStyle(this.$subtitle, 'opacity', '0.8');
      tooltip(this.$subtitle, i18n.get('Show subtitle'));
    });
  }
@@ -10,13 +10,13 @@ export default class Thumbnails {
  apply(art, $control) {
    this.art = art;
    errorHandle(art.controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
-    const { refs: { $progress }, events: { proxy } } = art;
+    const { refs: { $progress }, events: { proxy, loadImg } } = art;
    this.$control = $control;

    proxy($progress, 'mousemove', event => {
      if (!this.loading) {
        this.loading = true;
-        this.load(this.art.option.thumbnails.url).then(() => {
+        loadImg(this.art.option.thumbnails.url).then(() => {
          this.isLoad = true;
        });
      }
@@ -32,21 +32,6 @@ export default class Thumbnails {
    });
  }

-  load(url) {
-    const { proxy } = this.art.events;
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      image.src = url;
-
-      if (image.complete) {
-        return resolve(image);
-      }
-
-      proxy(image, 'load', () => resolve(image));
-      proxy(image, 'error', () => reject(image));
-    });
-  }
-
  showThumbnails(event) {
    const { refs: { $progress }, controls } = this.art;
    const { width: posWidth } = controls.progress.getPosFromEvent(event);
@@ -0,0 +1,21 @@
+import { secondToTime } from '../utils';
+
+export default class Time {
+  constructor(option) {
+    this.option = option;
+  }
+
+  apply(art, $control) {
+    function getTime() {
+      const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
+      if (newTime !== $control.innerHTML) {
+        $control.innerHTML = newTime;
+      }
+    }
+
+    getTime();
+    ['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
+      art.on(event, getTime);
+    });
+  }
+}
@@ -1,4 +1,4 @@
-import { append, getStorage, clamp, tooltip, setStyle } from '../utils';
+import { append, clamp, tooltip, setStyle, sleep, getStyle } from '../utils';
 import icons from '../icons';

 export default class Volume {
@@ -8,51 +8,47 @@ export default class Volume {
  }

  apply(art, $control) {
-    this.art = art;
-    this.$control = $control;
-    this.init();
-  }
-
-  init() {
-    const { events: { proxy }, player, i18n } = this.art;
-    this.$volume = append(this.$control, icons.volume);
-    this.$volumeClose = append(this.$control, icons.volumeClose);
-    this.$volumePanel = append(this.$control, '<div class="art-volume-panel"></div>');
+    const { events: { proxy, hover }, player, i18n, storage } = art;
+    this.$volume = append($control, icons.volume);
+    this.$volumeClose = append($control, icons.volumeClose);
+    this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
    this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
    tooltip(this.$volume, i18n.get('Mute'));
    setStyle(this.$volumeClose, 'display', 'none');

-    const volume = getStorage('volume');
-    this.setVolumeHandle(volume);
-    player.volume(volume);
+    art.on('volumeChange', percentage => {
+      if (percentage === 0) {
+        setStyle(this.$volume, 'display', 'none');
+        setStyle(this.$volumeClose, 'display', 'flex');
+      } else {
+        setStyle(this.$volume, 'display', 'flex');
+        setStyle(this.$volumeClose, 'display', 'none');
+      }
+    });
+
+    art.on('video:volumechange', () => {
+      this.setVolumeHandle(player.volume);
+    });

    proxy(this.$volume, 'click', () => {
-      setStyle(this.$volume, 'display', 'none');
-      setStyle(this.$volumeClose, 'display', 'block');
-      player.volume(0);
+      player.volume = 0;
    });

    proxy(this.$volumeClose, 'click', () => {
-      setStyle(this.$volume, 'display', 'block');
-      setStyle(this.$volumeClose, 'display', 'none');
-      player.volume(getStorage('volume'));
+      player.volume = storage.get('volume');
    });

-    proxy(this.$control, 'mouseenter', () => {
+    hover($control, () => {
      this.$volumePanel.classList.add('art-volume-panel-hover');
-
-      // TODO
-      setTimeout(() => {
-        this.setVolumeHandle(player.volume());
-      }, 200);
-    });
-
-    proxy(this.$control, 'mouseleave', () => {
+      sleep(200).then(() => {
+        this.setVolumeHandle(player.volume);
+      });
+    }, () => {
      this.$volumePanel.classList.remove('art-volume-panel-hover');
    });

    proxy(this.$volumePanel, 'click', event => {
-      this.volumeChangeFromEvent(event);
+      player.volume = this.volumeChangeFromEvent(event);
    });

    proxy(this.$volumeHandle, 'mousedown', () => {
@@ -61,7 +57,7 @@ export default class Volume {

    proxy(this.$volumeHandle, 'mousemove', event => {
      if (this.isDroging) {
-        this.volumeChangeFromEvent(event);
+        player.volume = this.volumeChangeFromEvent(event);
      }
    });

@@ -70,31 +66,18 @@ export default class Volume {
        this.isDroging = false;
      }
    });
-
-    this.art.on('video:volumechange', () => {
-      const percentage = player.volume();
-      this.setVolumeHandle(percentage);
-      if (percentage === 0) {
-        setStyle(this.$volume, 'display', 'none');
-        setStyle(this.$volumeClose, 'display', 'block');
-      } else {
-        setStyle(this.$volume, 'display', 'block');
-        setStyle(this.$volumeClose, 'display', 'none');
-      }
-    });
  }

  volumeChangeFromEvent(event) {
-    const { player } = this.art;
    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);
-    player.volume(percentage);
+    return percentage;
  }

  setVolumeHandle(percentage = 0.7) {
-    const { width: panelWidth } = this.$volumePanel.getBoundingClientRect();
-    const { width: handleWidth } = this.$volumeHandle.getBoundingClientRect();
+    const panelWidth = getStyle(this.$volumePanel, 'width');
+    const handleWidth = getStyle(this.$volumeHandle, 'width');
    const width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
    setStyle(this.$volumeHandle, 'left', `${width}px`);
  }
@@ -0,0 +1,11 @@
+export default function clickInit(art, events) {
+  const { refs: { $player } } = art;
+  events.proxy(document, ['click', 'contextmenu'], event => {
+    if (event.composedPath().indexOf($player) > -1) {
+      art.isFocus = true;
+    } else {
+      art.isFocus = false;
+      art.contextmenu.hide();
+    }
+  });
+}
@@ -0,0 +1,7 @@
+export default function doubleClickInit(art, events) {
+  const { refs: { $video } } = art;
+  events.proxy($video, 'dblclick', () => {
+    art.player.fullscreenToggle();
+    art.emit('dblclick');
+  });
+}
@@ -0,0 +1,14 @@
+export default function hoverInit(art, events) {
+  const { refs: { $player } } = art;
+  events.hover(
+    $player,
+    () => {
+      $player.classList.add('artplayer-hover');
+      art.emit('hoverenter');
+    },
+    () => {
+      $player.classList.remove('artplayer-hover');
+      art.emit('hoverleave');
+    }
+  );
+}
@@ -0,0 +1,62 @@
+import clickInit from './clickInit';
+import hoverInit from './hoverInit';
+import mousemoveInit from './mousemoveInit';
+import resizeInit from './resizeInit';
+import doubleClickInit from './doubleClickInit';
+
+export default class Events {
+  constructor(art) {
+    this.destroyEvents = [];
+    this.proxy = this.proxy.bind(this);
+    this.hover = this.hover.bind(this);
+    this.loadImg = this.loadImg.bind(this);
+    clickInit(art, this);
+    hoverInit(art, this);
+    mousemoveInit(art, this);
+    resizeInit(art, this);
+    doubleClickInit(art, this);
+  }
+
+  proxy(target, name, callback, option = {}) {
+    if (Array.isArray(name)) {
+      name.forEach(item => this.proxy(target, item, callback, option));
+      return;
+    }
+
+    target.addEventListener(name, callback, option);
+    this.destroyEvents.push(() => {
+      target.removeEventListener(name, callback, option);
+    });
+  }
+
+  hover(target, mouseenter, mouseleave) {
+    this.proxy(target, 'mouseenter', mouseenter);
+    this.proxy(target, 'mouseleave', mouseleave);
+  }
+
+  loadImg(img) {
+    return new Promise((resolve, reject) => {
+      let image;
+
+      if (img instanceof HTMLImageElement) {
+        image = img;
+      } else if (typeof img === 'string') {
+        image = new Image();
+        image.src = img;
+      } else {
+        return reject(img);
+      }
+
+      if (image.complete) {
+        return resolve(image);
+      }
+
+      this.proxy(image, 'load', () => resolve(image));
+      this.proxy(image, 'error', () => reject(image));
+    });
+  }
+
+  destroy() {
+    this.destroyEvents.forEach(event => event());
+  }
+}
@@ -0,0 +1,26 @@
+import { debounce } from '../utils';
+
+export default function mousemoveInitInit(art, events) {
+  const { refs: { $player } } = art;
+
+  const autoHide = debounce(() => {
+    $player.classList.add('artplayer-hide-cursor');
+    $player.classList.remove('artplayer-hover');
+    art.controls.hide();
+  }, 5000);
+
+  art.on('hoverleave', () => {
+    if (art.isPlaying) {
+      autoHide();
+    }
+  });
+
+  events.proxy($player, 'mousemove', () => {
+    autoHide.clearTimeout();
+    $player.classList.remove('artplayer-hide-cursor');
+    art.controls.show();
+    if (!art.player.pipState && art.isPlaying) {
+      autoHide();
+    }
+  });
+}
@@ -0,0 +1,27 @@
+import { sleep } from '../utils';
+import { ResizeObserver } from 'resize-observer';
+
+export default function resizeInit(art, events) {
+  const { option, refs: { $player } } = art;
+  const resizeObserver = new ResizeObserver(() => {
+    sleep().then(() => {
+      if (option.autoSize) {
+        if (
+          !art.player.fullscreenState &&
+          !art.player.fullscreenWebState &&
+          !art.player.pipState
+        ) {
+          art.player.autoSize();
+        } else {
+          art.player.autoSizeRemove();
+        }
+      }
+      art.player.aspectRatioReset();
+      art.emit('resize', $player);
+    });
+  });
+  resizeObserver.observe($player);
+  events.destroyEvents.push(() => {
+    resizeObserver.unobserve($player);
+  });
+}
@@ -2,13 +2,14 @@ export default class Hotkey {
  constructor(art) {
    this.art = art;
    if (this.art.option.hotkey) {
-      this.init();
+      this.art.on('firstCanplay', () => {
+        this.init();
+      });
    }
  }

  init() {
    const { player, events: { proxy } } = this.art;
-
    proxy(window, 'keydown', event => {
      if (this.art.isFocus) {
        const tag = document.activeElement.tagName.toUpperCase();
@@ -19,22 +20,23 @@ export default class Hotkey {
          editable !== '' &&
          editable !== 'true'
        ) {
+          this.art.emit('hotkey', event);
          switch (event.keyCode) {
            case 39:
              event.preventDefault();
-              player.seek(player.currentTime() + 10);
+              player.seek(player.currentTime + 10);
              break;
            case 37:
              event.preventDefault();
-              player.seek(player.currentTime() - 10);
+              player.seek(player.currentTime - 10);
              break;
            case 38:
              event.preventDefault();
-              player.volume(player.volume() + 0.05);
+              player.volume += 0.05;
              break;
            case 40:
              event.preventDefault();
-              player.volume(player.volume() - 0.05);
+              player.volume -= 0.05;
              break;
            case 32:
              event.preventDefault();
@@ -9,11 +9,16 @@ let i18nMap = {
    'Pause': '暂停',
    'Rate': '速度',
    'Mute': '静音',
+    'Flip': '视频翻转',
+    'Horizontal': '水平',
+    'Vertical': '垂直',
    'Reconnect': '重新连接',
    'Hide subtitle': '隐藏字幕',
    'Show subtitle': '显示字幕',
    'Hide danmu': '隐藏弹幕',
    'Show danmu': '显示弹幕',
+    'Show setting': '显示设置',
+    'Hide setting': '隐藏设置',
    'Screenshot': '截图',
    'Play speed': '播放速度',
    'Aspect ratio': '画面比例',
@@ -25,9 +30,6 @@ let i18nMap = {
    'Exit fullscreen': '退出全屏',
    'Web fullscreen': '网页全屏',
    'Exit web fullscreen': '退出网页全屏',
-    'Common': '常规',
-    'Hide setting': '隐藏设置',
-    'Show setting': '显示设置',
    'Mini player': '迷你播放器'
  },
  'zh-tw': {
@@ -40,9 +42,14 @@ let i18nMap = {
    'Pause': '暫停',
    'Rate': '速度',
    'Mute': '靜音',
+    'Flip': '影片翻轉',
+    'Horizontal': '水平',
+    'Vertical': '垂直',
    'Reconnect': '重新連接',
    'Hide subtitle': '隱藏字幕',
    'Show subtitle': '顯示字幕',
+    'Show setting': '顯示设置',
+    'Hide setting': '隱藏设置',
    'Hide danmu': '隱藏彈幕',
    'Show danmu': '顯示彈幕',
    'Screenshot': '截圖',
@@ -56,9 +63,6 @@ let i18nMap = {
    'Exit fullscreen': '退出全屏',
    'Web fullscreen': '網頁全屏',
    'Exit web fullscreen': '退出網頁全屏',
-    'Common': '常規',
-    'Hide setting': '隱藏設置',
-    'Show setting': '顯示設置',
    'Mini player': '迷你播放器'
  }
 };
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" height="36" width="36">
+	<path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill-rule="evenodd"></path>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="36" width="36" viewBox="0 0 36 36">
+	<path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path>
+	<path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path>
+	<path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path>
+	<path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path>
+</svg>
@@ -6,27 +6,12 @@ import volume from './volume.svg';
 import volumeClose from './volume-close.svg';
 import subtitle from './subtitle.svg';
 import screenshot from './screenshot.svg';
-import danmu from './danmu.svg';
 import setting from './setting.svg';
 import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
 import pip from './pip.svg';
-
-const icons = {
-  loading,
-  playBig,
-  play,
-  pause,
-  volume,
-  volumeClose,
-  subtitle,
-  screenshot,
-  danmu,
-  setting,
-  fullscreen,
-  fullscreenWeb,
-  pip
-};
+import prev from './prev.svg';
+import next from './next.svg';

 function creatDomFromSvg(map) {
  const result = {};
@@ -38,4 +23,19 @@ function creatDomFromSvg(map) {
  return result;
 }

-export default creatDomFromSvg(icons);
+export default creatDomFromSvg({
+  loading,
+  playBig,
+  play,
+  pause,
+  volume,
+  volumeClose,
+  subtitle,
+  screenshot,
+  setting,
+  fullscreen,
+  fullscreenWeb,
+  pip,
+  prev,
+  next
+});
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="36" width="36" viewBox="0 0 36 36">
+    <path d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z"></path>
+</svg>
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewBox="0 0 22 22">
    <path d="M7 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zM15 3a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2z"></path>
 </svg>
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 36 36" style="width: 100%; height: 100%">
-    <path d="M25,17 L17,17 L17,23 L25,23 L25,17 L25,17 Z M29,25 L29,10.98 C29,9.88 28.1,9 27,9 L9,9 C7.9,9 7,9.88 7,10.98 L7,25 C7,26.1 7.9,27 9,27 L27,27 C28.1,27 29,26.1 29,25 L29,25 Z M27,25.02 L9,25.02 L9,10.97 L27,10.97 L27,25.02 L27,25.02 Z" fill="#fff" id="ytp-id-20"></path>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" height="32" width="32">
+    <path d="M25,17 L17,17 L17,23 L25,23 L25,17 L25,17 Z M29,25 L29,10.98 C29,9.88 28.1,9 27,9 L9,9 C7.9,9 7,9.88 7,10.98 L7,25 C7,26.1 7.9,27 9,27 L27,27 C28.1,27 29,26.1 29,25 L29,25 Z M27,25.02 L9,25.02 L9,10.97 L27,10.97 L27,25.02 L27,25.02 Z"></path>
 </svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="60" width="60" style="filter: drop-shadow(0px 1px 1px black);" viewBox="0 0 24 24">
+    <path d="M20,2H4C1.8,2,0,3.8,0,6v12c0,2.2,1.8,4,4,4h16c2.2,0,4-1.8,4-4V6C24,3.8,22.2,2,20,2z M15.6,12.8L10.5,16 C9.9,16.5,9,16,9,15.2V8.8C9,8,9.9,7.5,10.5,8l5.1,3.2C16.3,11.5,16.3,12.5,15.6,12.8z"/>
+</svg>
Author	SHA1	Message	Date
Harvey Zack	0454f785be	v1.0.3	2018-11-21 18:48:20 +08:00
Harvey Zack	34c95dbe70	Update README.md	2018-11-21 18:46:50 +08:00
Harvey Zack	475645d11d	update	2018-11-21 18:40:20 +08:00
Harvey Zack	eea72af62e	Delete test.js	2018-11-21 18:37:34 +08:00
Harvey Zack	b12507cdb3	add esline	2018-11-21 18:37:25 +08:00
Harvey Zack	f6ef3da5aa	add mute	2018-11-21 17:22:42 +08:00
Harvey Zack	0fb3dba760	添加原生画中画功能	2018-11-21 16:44:57 +08:00
Harvey Zack	08a29ba6aa	Update screenshot.png	2018-11-21 16:10:56 +08:00
Harvey Zack	f75e01be3b	添加Demo自适应	2018-11-21 16:05:09 +08:00
Harvey Zack	e9d7c0cfdc	add issue_template	2018-11-21 15:18:21 +08:00
Harvey Zack	8570a86f54	add screenshot	2018-11-21 15:07:47 +08:00
Harvey Zack	59e7335b84	移除设置面板滚动条	2018-11-21 14:48:47 +08:00
Harvey Zack	16586d8d7e	变更事件名称	2018-11-21 14:13:37 +08:00
Harvey Zack	4ecdb6b2d9	优化隐藏光标	2018-11-21 12:07:11 +08:00
Harvey Zack	5c037ad08f	优化svg	2018-11-21 11:19:46 +08:00
Harvey Zack	6d0f3cad14	typofix	2018-11-20 19:52:05 +08:00
Harvey Zack	b621061417	update docs	2018-11-20 17:35:10 +08:00
Harvey Zack	5d00320c1a	update docs	2018-11-20 16:41:42 +08:00
Harvey Zack	8d52cf8bba	添加运行代码	2018-11-20 16:02:37 +08:00
Harvey Zack	d8e1e597e2	update docs	2018-11-20 15:03:48 +08:00
Harvey Zack	ab0533995e	分离文档	2018-11-20 14:46:46 +08:00
Harvey Zack	d46701e9eb	update docd	2018-11-15 15:33:47 +08:00
Harvey Zack	7eb63eff91	docs update	2018-11-15 15:08:31 +08:00
Harvey Zack	157a0e7048	bugfix	2018-11-15 14:44:55 +08:00
Harvey Zack	ac1ba12767	优化回调分离	2018-11-15 14:24:12 +08:00
Harvey Zack	4b61098945	update docs	2018-11-15 13:24:15 +08:00
Harvey Zack	42ad972374	docs update	2018-11-15 10:47:21 +08:00
Harvey Zack	65db437799	update docs	2018-11-15 09:14:41 +08:00
Harvey Zack	53cbde0ff0	docs update	2018-11-14 17:18:17 +08:00
Harvey Zack	d26826401a	docs update	2018-11-14 16:51:40 +08:00
Harvey Zack	2d65e94195	添加统计代码	2018-11-14 16:26:26 +08:00
Harvey Zack	17c34330b5	docs fix	2018-11-14 16:19:16 +08:00
Harvey Zack	6ff85de301	docs fix	2018-11-14 16:12:50 +08:00
Harvey Zack	54b68b067b	update readme	2018-11-14 16:02:26 +08:00
Harvey Zack	6767487d7e	update readme	2018-11-14 13:52:07 +08:00
Harvey Zack	9a72dcb231	update docs	2018-11-14 13:34:26 +08:00
Harvey Zack	c242390fe9	update docs	2018-11-14 12:00:40 +08:00
Harvey Zack	1364f2b2e5	update readme	2018-11-14 11:21:42 +08:00
Harvey Zack	bac873deeb	typofix	2018-11-14 09:25:44 +08:00
Harvey Zack	0f56ffbef8	update docs	2018-11-14 09:18:35 +08:00
Harvey Zack	16efac5ac1	Update doubleClickInit.js	2018-11-13 19:32:09 +08:00
Harvey Zack	cd001655e4	typofix	2018-11-13 18:55:48 +08:00
Harvey Zack	49fe680c87	update readme	2018-11-13 17:22:54 +08:00
Harvey Zack	992dab34ae	update docs	2018-11-13 10:29:34 +08:00
Harvey Zack	9fe5c5d021	Update README.md	2018-11-12 18:28:30 +08:00
Harvey Zack	f121991369	update readme	2018-11-12 18:17:14 +08:00
Harvey Zack	c1bf612dd3	update readme	2018-11-12 16:00:55 +08:00
Harvey Zack	7f1e1dc255	cleanup	2018-11-12 10:00:55 +08:00
Harvey Zack	eed28c1d21	bugfix	2018-11-11 15:31:27 +08:00
Harvey Zack	ae548e93c8	bugfix	2018-11-10 11:57:28 +08:00
Harvey Zack	c25038b74c	bugfix	2018-11-09 20:23:19 +08:00
Harvey Zack	3dc1e30bb3	bugfix	2018-11-09 20:06:56 +08:00
Harvey Zack	1b91760be2	添加翻转状态	2018-11-09 17:23:41 +08:00
Harvey Zack	ccf1999e6d	添加旋转和翻转设置	2018-11-09 16:58:21 +08:00
Harvey Zack	650d1abef3	bugfix	2018-11-09 15:37:05 +08:00
Harvey Zack	4fbb3442e0	update docs	2018-11-09 15:25:56 +08:00
Harvey Zack	2a933206dc	优化演示	2018-11-09 14:53:35 +08:00
Harvey Zack	7d766ac1d5	添加自动尺寸	2018-11-09 14:36:48 +08:00
Harvey Zack	1d40d1c46b	分离事件中心	2018-11-09 12:17:19 +08:00
Harvey Zack	b5694fea89	update docs	2018-11-08 22:26:56 +08:00
Harvey Zack	9dba43c2c6	typofix	2018-11-08 20:28:21 +08:00
Harvey Zack	620638a56e	捕捉全局错误	2018-11-08 20:26:13 +08:00
Harvey Zack	4338cb2217	update docs	2018-11-08 20:19:02 +08:00
Harvey Zack	e96778746a	update docs	2018-11-08 16:32:32 +08:00
Harvey Zack	b97e49bead	update docs	2018-11-08 16:12:17 +08:00
Harvey Zack	1388df955f	update docs	2018-11-08 15:35:07 +08:00
Harvey Zack	a0bc4d3a39	优化回调	2018-11-08 09:09:44 +08:00
Harvey Zack	8148973d39	重置ID	2018-11-08 08:57:47 +08:00
Harvey Zack	ddcf432717	typofix	2018-11-07 19:43:30 +08:00
Harvey Zack	cee1b18b83	remove video file	2018-11-07 18:42:13 +08:00
Harvey Zack	f8ba38812a	v1.0.2	2018-11-07 17:14:11 +08:00
Harvey Zack	0aa018db6d	修改包管理	2018-11-07 17:12:42 +08:00
				`@@ -0,0 +1 @@`
				`PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.`
				`@@ -1 +0,0 @@`
				{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/inherits.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/defineProperty.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/objectSpread.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/toConsumableArray.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/_option-validator@1.1.0@option-validator/dist/option-validator.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/_tiny-emitter@2.0.2@tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player/mountUrlMix.js","../../src/player/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/screenshotMix.js","../../node_modules/_screenfull@3.3.3@screenfull/dist/screenfull.js","../../src/player/fullscreenMix.js","../../src/player/fullscreenWebMix.js","../../node_modules/_get-size@2.0.3@get-size/get-size.js","../../node_modules/_ev-emitter@1.1.1@ev-emitter/ev-emitter.js","../../node_modules/_unipointer@2.3.0@unipointer/unipointer.js","../../node_modules/_unidragger@2.3.0@unidragger/unidragger.js","../../node_modules/_draggabilly@2.2.0@draggabilly/draggabilly.js","../../src/player/pipMix.js","../../src/player/index.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/fullscreen.js","../../src/controls/fullscreenWeb.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/setting/common.js","../../src/setting/index.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable \|\| false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if Line truncated
				`@@ -0,0 +1 @@`
				.consola-container{opacity:.9;display:flex;flex-direction:column;position:absolute;background-color:#242424}.consola-container.right{top:0;right:0;bottom:0;height:100%;width:0}.consola-container.bottom{left:0;right:0;bottom:0;width:100%;height:0}.consola-container .consola-tools{left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-direction:row;height:30px;padding:0 10px;color:hsla(0,0%,100%,.8);background-color:#141618;border-bottom:1px solid rgba(0,0,0,.3);font-size:12px;box-sizing:border-box}.consola-container .consola-tools .consola-clean{cursor:pointer}.consola-container .consola-wrap{flex:1;position:relative;z-index:1;overflow-y:auto;word-break:break-word;box-sizing:border-box}.consola-container .consola-wrap .method.method-log{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-log .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABpSURBVChTY6A92LNnj96uXbvKoVzsYMeOHVbbt29/D1T4eP/+/QJQYVSwe/duD6CCr0B8A8iWgwqjAqBk2NatW38B6bPbtm0TBYkBFbsA+c9ANFgRCBCtEASAAoSthgGiPAMD2IOHgQEA521bM7uG52wAAAAASUVORK5CYII=)}.consola-container .consola-wrap .method.method-info{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-info .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADISURBVChTY4ABp/AztmZBZ07qe538rO114rOa8+GTskYHbKHSEOARd6nLIOTsf61gIA46U6kVePYQiK3uc/K/hPG+LrCi8IyrtkZh5yCKgk/80w46ba0RdGYGhH/2v6rXyf88qtttGVwSLp2ECQLxeiAu1wo6uwpJ7L+o2f6TDA6xZz8jCyqFnuHXCj4djywmZXHoM/EK0azGqhBsNYpngL6VCTnGqRF4xgKo+D5IDO4ZEEAKnjcQBafvqwWf/YoSPDCAP8AZGAC7mLM81zgOTQAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-warn{position:relative;display:flex;color:#ffdc9e;background-color:#332b00;border-top:1px solid #650;border-bottom:1px solid #650;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-warn .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVChTbY7BCoJQFERn0Q/3BX1JuxQjsSCXiV8gtCgxhCIrKIRIqKDVzXl5w5cNHBjm6eGinXiAXu5inY2xYm/mbpIh+vcFhLA3sx0athNUhymEsP+10lAEEA17x8o/9wFuNGnYuVlWve0SQl7P0sBu3aq2R1Q/1JzSkYGd29eqNv2wjdnUuvNRciC/N+qe+7gidbA8zyHkOINsvA/sumcOkjcabcBmw2+mMgAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-error{position:relative;display:flex;color:#ff8080;background-color:#290000;border-top:1px solid #5b0000;border-bottom:1px solid #5b0000;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-error .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADESURBVChTY4CB7ZI8tmfU5E6e01b+DMIgNkgMKg0BR9Vkux6YWPx/bemIgkFiIDmwogOaqrYPzazAEm8DwuGKYGyQHEgNw0VT05Mwib9v3v7/kJEHxiA2TDFIDcNNU4vPMFPACj58/P/v40cwGyYOUsNwy8IZRSFIEUgxskKQGoZrzp4ErQapYbgYHG371M4dLACTQGaD5EBqwD6/FpzQ9dTBE64IhkFiIDmwIhi4mlJqey8o4eR9r8jPIAxig8QgsgwMAFZz1YtGPXgjAAAAAElFTkSuQmCC)}.consola-container .consola-wrap .method.method-debug{position:relative;display:flex;color:#4d88ff;background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-debug .method-icon{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3e%3cpath fill='%234D88FF' d='M433.5 127.5h-71.4a177.7 177.7 0 0 0-45.9-51L357 35.7 321.3 0l-56.1 56.1c-10.2-2.6-23-5.1-35.7-5.1s-25.5 2.5-35.7 5.1L137.7 0 102 35.7l40.8 40.8a177.7 177.7 0 0 0-45.9 51H25.5v51H79c-2.5 7.7-2.5 17.9-2.5 25.5v25.5h-51v51h51V306a88 88 0 0 0 2.5 25.5H25.5v51h71.4A152.2 152.2 0 0 0 229.5 459c56.1 0 107.1-30.6 132.6-76.5h71.4v-51H380c2.5-7.7 2.5-17.9 2.5-25.5v-25.5h51v-51h-51V204c0-7.7 0-17.9-2.5-25.5h53.5v-51zm-153 204h-102v-51h102v51zm0-102h-102v-51h102v51z'/%3e%3c/svg%3e")}.consola-container .consola-wrap .method *{vertical-align:top;box-sizing:border-box;font-family:Consolas,Lucida Console,Courier New,monospace;white-space:pre-wrap;font-size:12px}.consola-container .consola-wrap .method .method-icon{width:10px;height:18px;background-image:noneLine truncated
				`@@ -0,0 +1 @@`
				!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var o=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=c(n(1));n(2);var i=c(n(4));function c(e){return e&&e.__esModule?e:{default:e}}var l={},u={target:"body",position:"bottom",size:"300px",zIndex:99},a=["log","warn","error","info","debug"],s=void 0,f=void 0,d=void 0;l.creat=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e=o({},u,e),!document.querySelector(".consola-container"))return s=document.querySelector(e.target),i.default.insertHtml(s,"beforeend",'<div class="consola-container '+e.position+'" style="z-index: '+e.zIndex+"; "+("bottom"===e.position?"height":"width")+": "+e.size+'">\n <div class="consola-tools">\n <div class="consola-count">Console <span>0</span></div>\n <div class="consola-clean">Clean</div>\n </div>\n <div class="consola-wrap"></div>\n </div>'),f=s.querySelector(".consola-wrap"),d=s.querySelector(".consola-count span"),s.querySelector(".consola-clean").addEventListener("click",l.clean),function(e,t,n){var o=function(t){var o=e[t];e[t]=function(){o.apply(this,arguments),n(t,[].concat(Array.prototype.slice.call(arguments)))}},r=!0,i=!1,c=void 0;try{for(var l,u=t[Symbol.iterator]();!(r=(l=u.next()).done);r=!0){o(l.value)}}catch(e){i=!0,c=e}finally{try{!r&&u.return&&u.return()}finally{if(i)throw c}}}(window.console,a,function(e,t){i.default.insertHtml(f,"beforeend",'<div data-method="'+e+'" class="method method-'+e+'">\n <div class="method-icon"></div>\n <div class="method-text">'+function(e){var t=document.createElement("div");e=e.map(function(e){return(0,r.default)(e)}),t.textContent=e;var n=t.innerHTML;return t=null,n}(t)+"</div>\n </div>"),d.innerHTML=f.children.length,f.scrollTo(0,f.scrollHeight)}),l},l.clean=function(){return f.innerHTML="",d.innerHTML="0",l},window.consola=l,e.exports=l},function(e,t){e.exports=function e(t){switch(typeof t){case"undefined":return"undefined";case"object":let n=Object.prototype.toString.call(t).slice(8,-1).toLowerCase();switch(n){case"null":return"null";case"array":return"["+t.map(t=>e(t)).join(", ")+"]";case"object":return"{ "+Object.keys(t).map(n=>n+": "+e(t[n])).join(", ")+" }";default:try{return t.toString()}catch(e){return"[Unknown type: "+n+"]"}}default:return t.toString()}}},function(e,t,n){},,function(e,t,n){"use strict";function o(e){for(var t=e.length,n=[],o=0;o<t;o+=1)n.push(e[o]);return n}e.exports={select:function(e){return document.querySelector(e)},selectAll:function(e){return o((arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll(e))},find:function(e,t){return o(e.querySelectorAll(t))},removeClass:function(e,t){e.classList.remove(t)},addClass:function(e,t){e.classList.add(t)},hasClass:function(e,t){return e.classList.contains(t)},removeElement:function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},closest:function(e,t){for(var n=e.matches\|\|e.webkitMatchesSelector\|\|e.mozMatchesSelector\|\|e.msMatchesSelector;e&&!n.call(e,t);)e=e.parentElement;return e},getStyle:function(e,t,n){var o=window.getComputedStyle(e,null).getPropertyValue(t);return n?Number.parseFloat(o,10):o},blur:function(){document.activeElement&&document.activeElement.blur()},insertHtml:function(e,t,n){var o=["beforebegin","afterbegin","beforeend","afterend"];if(!o.includes(t))throw new TypeError("'position' must be one of them: "+o.join("、"));e.insertAdjacentHTML(t,n)},setAttributes:function(e,t){Object.keys(t).forEach(function(n){!1!==t[n]?e.setAttribute(n,t[n]):e.removeAttribute(n)})},setStyles:function(e,t){Object.keys(t).forEach(function(n){e.style[n]=t[n]})}}}])});