v3.1.2

Update del requirement from ^3.0.0 to ^4.0.0

.babelrc

@@ -0,0 +1,14 @@
+{
+    "presets": [
+        [
+            "@babel/env",
+            {
+                "modules": false
+            }
+        ]
+    ],
+    "plugins": [
+        "@babel/plugin-external-helpers",
+        "@babel/plugin-transform-runtime"
+    ]
+}

.eslintignore

@@ -1,5 +1,7 @@
 /docs
 /dist
+/test
+/scripts
 /node_modules
 /packages/**/node_modules
 /packages/**/dist

.eslintrc

@@ -10,6 +10,8 @@
       "jQuery": false
   },
   "rules": {
+      "class-methods-use-this": 2,
+      "no-console": 0,
       "import/no-cycle": 1,
       "no-const-assign": 1,
       "no-shadow": 0,
@@ -32,4 +34,4 @@
   "parserOptions": {
       "sourceType": "module"
   }
-}
+}

.travis.yml

@@ -5,6 +5,9 @@ node_js:
 
 before_script:
   - npm install
+  - npm i packages/* && lerna bootstrap --hoist
 
 script:
-  - npm run lint
+  - npm run lint
+  - npm run build:all
+  - npm run test

README.md

@@ -7,19 +7,44 @@
 
 > ArtPlayer is a modern HTML5 video player
 
-![Alt text](./screenshot.png)
+![Screenshot](./screenshot.png)
 
-## Introduction
+## Features
 
-> TODO...
+-   Support `vtt` and `srt` subtitles
+-   Support video quality switching
+-   Support for custom `control`, `layer`, `contextmenu`, `setting`
+-   Support `playback rate`, `aspect ratio`, `flip`, `window fullscreen` or `web fullscreen` adjustment
+-   Support integration with other dependencies, like: `flv.js`, `hls.js`, `dash.js`, `shaka-player`, `webtorrent`
+-   Support chrome native picture-in-picture mode, or custom picture-in-picture mode
+-   Support `thumbnails` and `highlight` in the progress bar
+-   Support to maintain the original video ratio, adaptive size
+-   Support rich custom event monitoring, easy to expand
+-   Support for internationalization of controls
+-   Support for custom plugins
+-   Support local video preview
+-   Support subtitle time offset
+-   Support `screenshot`
+-   And more...
+
+## Ecosystem
+
+| Project                                                                                                           | Description                   | Demo                                        |
+| ----------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------- |
+| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu)     | Danmu plugin for ArtPlayer    | `WIP`                                       |
+| [artplayer-plugin-flv](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-flv)         | Flv plugin for ArtPlayer      | `WIP`                                       |
+| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif)         | Gif plugin for ArtPlayer      | [demo](https://artplayer.org/gif/)          |
+| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer  | [demo](https://artplayer.org/thumbnail/)    |
+| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react)                   | React Component for Artplayer | [demo](https://codesandbox.io/s/n74859y9rl) |
+| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue)                       | Vue Component for Artplayer   | [demo](https://codesandbox.io/s/6z76lm109n) |
 
 ## Demo
 
-[Checkout the demo](https://blog.zhw-island.com/ArtPlayer/lab)
+[Checkout the demo](https://artplayer.org/lab/) from Github Pages
 
 ## Document
 
-[Checkout the Document](https://blog.zhw-island.com/ArtPlayer/docs)
+[Checkout the Document](https://artplayer.org/docs) from Github Pages
 
 ## Install
 
@@ -28,6 +53,7 @@ Install with `npm`
 ```
 $ npm install artplayer
 ```
+
 Or install with `yarn`
 
 ```
@@ -56,17 +82,18 @@ Will expose the global variable to `window.Artplayer`.
 
 ```js
 var art = new Artplayer({
-  container: '.artplayer-app',
-  url: 'path/to/video.mp4'
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
 });
 ```
 
-## Ecosystem
+## Changelog
 
-| Project                                                                                                       | Description                |
-| ------------------------------------------------------------------------------------------------------------- | -------------------------- |
-| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer |
+[Checkout the changelog](https://github.com/zhw2590582/ArtPlayer/blob/master/changelog.md)
 
+## QQ Group
+
+![QQ Group](./QQgroup.png)
 
 ## License
 

docs/CNAME

@@ -0,0 +1 @@
+artplayer.org

docs/docs/common.js

@@ -0,0 +1,25 @@
+(function () {
+  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 libs = item.href.split('/lib=')[1] || '';
+              var code = encodeURIComponent(codeElement.innerText);
+              var url = 'https://artplayer.org/lab/?libs=' + libs + '&code=' + code;
+              window.open(url);
+            }
+          });
+        });
+    });
+  };  
+})();

docs/docs/index.html

@@ -1,16 +1,18 @@
 <!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 charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta name="keywords" content="artplayer,html5,video,player">
+  <meta name="description" content="ArtPlayer is a modern HTML5 video player">
+  <link rel="shortcut icon" href="./favicon.ico">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
 </head>
 <body>
   <div id="app"></div>
-  <script src="./runCode.js"></script>
+  <script src="./common.js"></script>
   <script>
     window.$docsify = {
       name: 'ArtPlayer',
@@ -21,5 +23,14 @@
     }
   </script>
   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
+        var s = document.getElementsByTagName("script")[0]; 
+        s.parentNode.insertBefore(hm, s);
+      })();
+  </script>
 </body>
 </html>

docs/docs/runCode.js

@@ -1,23 +0,0 @@
-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
-            );
-          }
-        });
-      });
-  });
-};

docs/flv/css/common.css

@@ -0,0 +1,40 @@
+html,
+body,
+.container {
+    height: 100%;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.part-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 70%;
+}
+
+.part-top .config {
+    width: 500px;
+    margin-bottom: 20px;
+}
+
+.part-top .config .urlInput {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.part-top .artplayer {
+    opacity: 0;
+    width: 500px;
+    height: 300px;
+    background: #fff;
+}
+
+.part-bottom {
+    position: relative;
+    height: 30%;
+}

docs/flv/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Flv plugin for ArtPlayer</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="keywords" content="artplayer,html5,video,player,flv">
+    <meta name="description" content="Flv plugin for ArtPlayer">
+    <link rel="shortcut icon" href="../assets/img/favicon.ico">
+    <link rel="stylesheet" href="../assets/css/normalize.css">
+    <link rel="stylesheet" href="../assets/css/consola.css">
+    <link rel="stylesheet" href="./css/common.css">
+    <link rel="stylesheet" href="../uncompiled/artplayer.css">    
+</head>
+
+<body>
+    <div class="container">
+        <div class="part-top">
+            <div class="config">
+                <input class="urlInput" type="text" value="./video/again.flv">
+                <!-- <input class="urlInput" type="text" value="https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.flv"> -->
+                <div class="btns">
+                    <input class="playBtn" type="button" value="Play">
+                    <input class="fileBtn" type="file">
+                </div>
+            </div>
+            <div class="artplayer"></div>
+        </div>
+        <div class="part-bottom"></div>
+    </div>
+    <script src="../assets/js/consola.js"></script>
+    <script src="../uncompiled/artplayer.js"></script>
+    <script src="../uncompiled/artplayer-plugin-flv.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?b6c9b8bafbf5fe7225160101dafbbc7d";
+        //   var s = document.getElementsByTagName("script")[0]; 
+        //   s.parentNode.insertBefore(hm, s);
+        // })();
+    </script>
+</body>
+
+</html>

docs/flv/js/common.js

@@ -0,0 +1,52 @@
+'use strict';
+
+(function() {
+    // consola.creat({
+    //     target: '.part-bottom',
+    //     size: '100%',
+    //     zIndex: 99,
+    // });
+
+    console.info('Welcome, if you like it, consider star it, thank you.');
+    console.info('https://github.com/zhw2590582/ArtPlayer');
+
+    window.addEventListener('error', function(err) {
+        console.error(err.message);
+    });
+
+    var $urlInput = document.querySelector('.urlInput');
+    var $playBtn = document.querySelector('.playBtn');
+    var $fileBtn = document.querySelector('.fileBtn');
+
+    function creatPlayer(file) {
+        Artplayer.instances.forEach(function(art) {
+            art.destroy(true);
+        });
+
+        new Artplayer({
+            container: '.artplayer',
+            url: $urlInput.value,
+            type: 'flv',
+            customType: {
+                flv: function(video, url) {
+                    var flv = new Flv({
+                        mediaElement: video,
+                        url: file instanceof File ? file : url,
+                        debug: true,
+                    });
+
+                    this.on('destroy', () => {
+                        flv.destroy();
+                    });
+                },
+            },
+        });
+    }
+
+    creatPlayer();
+    $playBtn.addEventListener('click', creatPlayer);
+    $fileBtn.addEventListener('change', () => {
+        const file = $fileBtn.files[0];
+        creatPlayer(file);
+    });
+})();

docs/gif/css/common.css

@@ -0,0 +1,53 @@
+html,
+body,
+.container {
+    height: 100%;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.part-top {
+    display: flex;
+    height: 70%;
+}
+
+.part-bottom {
+    position: relative;
+    height: 30%;
+}
+
+.part-left {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.part-left .artplayer {
+    width: 500px;
+    height: 300px;
+    background: #fff;
+}
+
+.part-right .preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 500px;
+    height: 500px;
+    background: #f3f3f3;
+}
+
+.part-right .preview img {
+    max-width: 100%;
+}

docs/gif/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Gif plugin for ArtPlayer</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="keywords" content="artplayer,html5,video,player,gif">
+    <meta name="description" content="Gif plugin for ArtPlayer">
+    <link rel="shortcut icon" href="../assets/img/favicon.ico">
+    <link rel="stylesheet" href="../assets/css/normalize.css">
+    <link rel="stylesheet" href="../assets/css/consola.css">
+    <link rel="stylesheet" href="./css/common.css">
+    <link rel="stylesheet" href="../uncompiled/artplayer.css">    
+</head>
+
+<body>
+    <div class="container">
+        <div class="part-top">
+            <div class="part-left">
+                <div class="artplayer"></div>
+            </div>
+            <div class="part-right">
+                <div class="preview"></div>
+            </div>
+        </div>
+        <div class="part-bottom"></div>
+    </div>
+    <script src="../assets/js/consola.js"></script>
+    <script src="../uncompiled/artplayer.js"></script>
+    <script src="../uncompiled/artplayer-plugin-gif.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?b6c9b8bafbf5fe7225160101dafbbc7d";
+          var s = document.getElementsByTagName("script")[0]; 
+          s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+</body>
+
+</html>

docs/gif/js/common.js

@@ -0,0 +1,47 @@
+'use strict';
+
+(function() {
+    consola.creat({
+        target: '.part-bottom',
+        size: '100%',
+        zIndex: 99,
+    });
+
+    console.info('Welcome, if you like it, consider star it, thank you.');
+    console.info('https://github.com/zhw2590582/ArtPlayer');
+    console.warn('For web video, this plugin depends on the network, so the results are not necessarily ideal.');
+
+    window.addEventListener('error', function(err) {
+        console.error(err.message);
+    });
+
+    var art = new Artplayer({
+        container: '.artplayer',
+        url: function () {
+            return new Promise(function (resolve) {
+                resolve('https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4');
+            });
+        },
+        title: '【新海诚动画】『秒速5センチメートル』',
+        autoSize: true,
+        controls: [
+            {
+                name: 'preview',
+                position: 'right',
+                html: '打开',
+                mounted: $preview => {
+                    art.plugins.localPreview.attach($preview);
+                },
+            },
+        ],
+        plugins: [artplayerPluginGif]
+    });
+
+    var $preview = document.querySelector('.preview');
+    art.on('artplayerPluginGif', image => {
+        var animatedImage = document.createElement('img');
+        animatedImage.src = image;
+        $preview.innerHTML = '';
+        $preview.appendChild(animatedImage);
+    });
+})();

docs/issues/7.html

@@ -0,0 +1,66 @@
+<!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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="keywords" content="artplayer,html5,video,player">
+    <meta name="description" content="ArtPlayer is a modern HTML5 video player">
+    <link rel="shortcut icon" href="../assets/img/favicon.ico">
+    <link rel="stylesheet" href="../assets/css/normalize.css">
+    <link rel="stylesheet" href="../uncompiled/artplayer.css">
+    <style>
+        html, body {
+            height: 100%;
+        }
+
+        .container {
+            height: 100%;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        .artplayer-app {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="artplayer-app"></div>
+    </div>
+    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
+    <script src="https://cdn.bootcss.com/hls.js/0.10.1/hls.js"></script>
+    <script src="../uncompiled/artplayer.js"></script>
+    <script>
+        var vConsole = new VConsole();
+        var whitelist = new URL(window.location.href).searchParams.get('whitelist');
+
+        var option = {
+            container: '.artplayer-app',
+            url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
+            customType: {
+                m3u8: function(video, url) {
+                    var hls = new Hls();
+                    hls.loadSource(url);
+                    hls.attachMedia(video);
+                    if (!video.src) {
+                        video.src = url;
+                    }
+                },
+            },
+        }
+
+        if (whitelist) {
+            option.whitelist = [whitelist]
+        }
+
+        var art = new Artplayer(option);
+    </script>
+</body>
+
+</html>

docs/lab/css/artplayer.css

@@ -1,18 +0,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{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-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-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;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

docs/lab/css/common.css

@@ -10,7 +10,7 @@ html, body {
 .part-left {
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 45%;
   border-right: 1px solid #ddd;
 }
 
@@ -21,7 +21,7 @@ html, body {
   overflow: hidden;
 }
 
-.part-left .controls {
+.part-left .header {
   display: flex;
   align-items: center;
   height: 40px;
@@ -31,17 +31,28 @@ html, body {
   box-sizing: border-box;
 }
 
-.part-left .controls .left {
+.part-left .header .links {
   display: flex;
   align-items: center;
   flex: 1;
 }
 
-.part-left .controls .left .logo {
+.part-left .header .links a {
   padding-right: 30px;
 }
 
-.part-left .controls .run {
+.part-left .lib {
+  height: 30px;
+  padding: 5px;
+  outline: none;
+  resize: none;
+  border: none;
+  font-size: 13px;
+  color: #666;
+  border-bottom: 1px solid #ddd;
+}
+
+.part-left .header .run {
   height: 30px;
   width: 100px;
 }
@@ -81,4 +92,4 @@ html, body {
 .part-right .console {
   position: relative;
   height: 30%;
-}
+}

docs/lab/css/mobile.css

@@ -0,0 +1,14 @@
+html, body {
+    height: 100%;
+}
+
+.container {
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.artplayer-app {
+    width: 100%;
+    height: 100%;
+}

docs/lab/index.html

@@ -5,29 +5,29 @@
     <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="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <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="shortcut icon" href="../assets/img/favicon.ico">
+    <link rel="stylesheet" href="../assets/css/normalize.css">
+    <link rel="stylesheet" href="../assets/css/consola.css">
+    <link rel="stylesheet" href="../assets/css/codemirror.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">    
+    <link rel="stylesheet" href="../uncompiled/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 class="header">
+                <div class="links">
+                    <a href="./">ArtPlayer.js Lab</a>
+                    <a href="../docs">Document</a>
+                    <a href="https://github.com/zhw2590582/ArtPlayer">Github</a>
                 </div>
                 <input class="run" type="button" value="Run Code">
             </div>
+            <textarea class="lib" cols="30" rows="10" placeholder="Other dependencies, support for js and css, multiple line breaks" spellcheck="false"></textarea>
             <div class="code"></div>
         </div>
         <div class="part-right">
@@ -37,23 +37,20 @@
             <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="../assets/js/consola.js"></script>
+    <script src="../assets/js/codemirror.js"></script>
+    <script src="../assets/js/javascript.js"></script>
+    <script src="../uncompiled/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";
+          hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
           var s = document.getElementsByTagName("script")[0]; 
           s.parentNode.insertBefore(hm, s);
         })();
     </script>
-    <script>
-        loadCode('./js/index.js');
-    </script>
 </body>
 
 </html>

docs/lab/js/artplayer-plugin-danmu.js

@@ -1,28 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (factory((global['artplayer-plugin-danmu'] = {})));
-}(this, (function (exports) { 'use strict';
-
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-
-  var classCallCheck = _classCallCheck;
-
-  var ArtplayerPluginDanmu = function ArtplayerPluginDanmu() {
-    classCallCheck(this, ArtplayerPluginDanmu);
-
-    console.log(this);
-  };
-
-  window.ArtplayerPluginDanmu = ArtplayerPluginDanmu;
-
-  exports.default = ArtplayerPluginDanmu;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=artplayer-plugin-danmu.js.map

docs/lab/js/artplayer-plugin-danmu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../packages/artplayer-plugin-danmu/node_modules/_@babel_runtime@7.1.5@@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer-plugin-danmu/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;","import './style/index.scss';\n\nclass ArtplayerPluginDanmu {\n  constructor() {\n    console.log(this);\n  }\n}\n\nwindow.ArtplayerPluginDanmu = ArtplayerPluginDanmu;\nexport default ArtplayerPluginDanmu;\n"],"names":["ArtplayerPluginDanmu","console","log","window"],"mappings":";;;;;;EAAA,SAAS,eAAe,CAAC,QAAQ,EAAE,WAAW,EAAE;IAC9C,IAAI,EAAE,QAAQ,YAAY,WAAW,CAAC,EAAE;MACtC,MAAM,IAAI,SAAS,CAAC,mCAAmC,CAAC,CAAC;KAC1D;GACF;;EAED,kBAAc,GAAG,eAAe;;MCJ1BA,uBACJ,gCAAc;EAAA;;EACZC,EAAAA,OAAO,CAACC,GAAR,CAAY,IAAZ;EACD;;EAGHC,MAAM,CAACH,oBAAP,GAA8BA,oBAA9B;;;;;;;;;;;;"}

docs/lab/js/artplayer.js.map

@@ -1 +0,0 @@
-{"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

docs/lab/js/common.js

@@ -1,83 +1,165 @@
-(function(win) {
-  var $code = document.querySelector('.code');
-  var $run = document.querySelector('.run');
-  var fileCode = '';
+'use strict';
 
-  consola.creat({
-    target: '.console',
-    size: '100%',
-    zIndex: 99
-  });
+(function() {
+    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    if (isMobile) {
+        window.location.href = './mobile.html';
+        return;
+    }
 
-  var mirror = CodeMirror($code, {
-    lineNumbers: true,
-    mode: 'javascript',
-    matchBrackets: true,
-    value: ''
-  });
+    var $code = document.querySelector('.code');
+    var $run = document.querySelector('.run');
+    var $lib = document.querySelector('.lib');
+    var loaddLib = [];
 
-  function initApp(app) {
-    consola.clean();
-    Artplayer.config.video.events.forEach(item => {
-      app.on('video:' + item, event => {
-        console.log('video: ' + event.type);
-      });
+    consola.creat({
+        target: '.console',
+        size: '100%',
+        zIndex: 99,
     });
-  }
 
-  function getURLParameters(url) {
-    return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
-      (a, v) => (
-        (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
-      ),
-      {}
-    );
-  }
+    var mirror = CodeMirror($code, {
+        lineNumbers: true,
+        mode: 'javascript',
+        matchBrackets: true,
+        value: '',
+    });
 
-  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 initArt(art) {
+        Artplayer.config.video.events.forEach(function(item) {
+            art.on('video:' + item, function(event) {
+                console.log('video: ' + event.type);
+            });
         });
     }
-  }
 
-  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);
+    function getURLParameters(url) {
+        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function(a, v) {
+            return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
+        }, {});
     }
-  });
 
-  win.addEventListener('error', err => {
-    console.error(err.message);
-  });
+    function getExt(url) {
+        if (url.includes('?')) {
+            return getExt(url.split('?')[0]);
+        }
 
-  win.loadCode = loadCode;
-})(window);
+        if (url.includes('#')) {
+            return getExt(url.split('#')[0]);
+        }
+
+        return url
+            .trim()
+            .toLowerCase()
+            .split('.')
+            .pop();
+    }
+
+    function loadScript(url) {
+        return new Promise(function(resolve, reject) {
+            var script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = url;
+            script.onload = function() {
+                resolve(url);
+            };
+            script.onerror = function() {
+                reject(new Error('Loading script failed:' + url));
+            };
+            document.querySelector('head').appendChild(script);
+        });
+    }
+
+    function loadStyle(url) {
+        return new Promise(function(resolve, reject) {
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+            link.onload = function() {
+                resolve(url);
+            };
+            link.onerror = function() {
+                reject(new Error('Loading style failed:' + url));
+            };
+            document.querySelector('head').appendChild(link);
+        });
+    }
+
+    function loadLib(libs) {
+        var libPromise = [];
+        var libsDecode = decodeURIComponent(libs || '');
+        libsDecode
+            .split(/\r?\n/)
+            .filter(function(url) {
+                return !loaddLib.includes(url);
+            })
+            .forEach(function(url) {
+                var ext = getExt(url);
+                if (ext === 'js') {
+                    libPromise.push(loadScript(url));
+                } else if (ext === 'css') {
+                    libPromise.push(loadStyle(url));
+                }
+            });
+        $lib.value = libsDecode;
+        return Promise.all(libPromise);
+    }
+
+    function loadCode(code) {
+        if (code) {
+            mirror.setValue(decodeURIComponent(code).trim());
+            runCode();
+        } else {
+            fetch('./js/example.js')
+                .then(function(response) {
+                    return response.text();
+                })
+                .then(function(text) {
+                    mirror.setValue(text);
+                    runCode();
+                })
+                .catch(function(err) {
+                    console.error(err.message);
+                });
+        }
+    }
+
+    function runCode() {
+        Artplayer.instances.forEach(function(art) {
+            art.destroy(true);
+        });
+        var code = mirror.getValue();
+        eval(code);
+        initArt(Artplayer.instances[0]);
+        console.info('Player initialization completed');
+    }
+
+    function initApp() {
+        var _getURLParameters = getURLParameters(window.location.href),
+            code = _getURLParameters.code,
+            libs = _getURLParameters.libs;
+
+        loadLib(libs)
+            .then(function(result) {
+                loaddLib = loaddLib.concat(result);
+                loadCode(code);
+            })
+            .catch(function(err) {
+                console.error(err.message);
+            });
+    }
+
+    window.addEventListener('error', function(err) {
+        console.error(err.message);
+    });
+
+    $run.addEventListener('click', function(e) {
+        var libs = encodeURIComponent($lib.value);
+        var code = encodeURIComponent(mirror.getValue());
+        var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
+        history.pushState(null, null, url);
+        initApp();
+    });
+
+    initApp();
+})();

docs/lab/js/example.js

@@ -0,0 +1,130 @@
+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,
+    muted: false,
+    autoplay: false,
+    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: {
+        crossOrigin: 'anonymous'
+    },
+    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: '－－终わり－－',
+        },
+    ],
+    controls: [
+        {
+            name: 'preview',
+            position: 'right',
+            html: '打开',
+            mounted: $preview => {
+                art.plugins.localPreview.attach($preview);
+            },
+        },
+    ],
+    icons: {
+        loading: '<img src="https://static.hdslb.com/player/images/ploading.gif">',
+    }
+});
+
+art.on('firstCanplay', () => {
+    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();
+        }
+    });
+});

docs/lab/js/index.js

@@ -1,115 +0,0 @@
-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();
-  }
-});

docs/lab/js/mobile.js

@@ -0,0 +1,9 @@
+var vConsole = new VConsole();
+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',
+    whitelist: ['iPhone OS 11'],
+    // whitelist: [(ua)=>{ return /iPhone OS 11/gi.test(ua); }],
+    // whitelist: [/iPhone OS 11/gi]
+});

docs/lab/mobile.html

@@ -0,0 +1,35 @@
+<!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, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="keywords" content="artplayer,html5,video,player">
+    <meta name="description" content="ArtPlayer is a modern HTML5 video player">
+    <link rel="shortcut icon" href="../assets/img/favicon.ico">
+    <link rel="stylesheet" href="../assets/css/normalize.css">
+    <link rel="stylesheet" href="./css/mobile.css">
+    <link rel="stylesheet" href="../uncompiled/artplayer.css">    
+</head>
+
+<body>
+    <div class="container">
+        <div class="artplayer-app"></div>
+    </div>
+    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
+    <script src="../uncompiled/artplayer.js"></script>
+    <script src="./js/mobile.js"></script>
+    <script>
+        var _hmt = _hmt || [];
+        (function() {
+          var hm = document.createElement("script");
+          hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
+          var s = document.getElementsByTagName("script")[0]; 
+          s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+</body>
+
+</html>

docs/thumbnail/css/common.css

@@ -0,0 +1,165 @@
+html, body {
+    height: 100%;
+}
+
+::-webkit-input-placeholder {
+    color:#dadada;
+}
+:-moz-placeholder {
+    color:#dadada;
+}
+::-moz-placeholder {
+    color:#dadada;
+}
+:-ms-input-placeholder {
+    color:#dadada;
+}
+
+.container {
+    height: 100%;
+    display: flex;
+    font-size: 14px;
+    color: #97a8be;
+}
+
+.left-part {
+    width: 40%;
+    flex-direction: column;
+    border-right: 1px solid #ddd;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.left-part .upload {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    border: 2px dashed #d9d9d9;
+    text-align: center;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 3px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.left-part .upload .file {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    outline: none;
+    opacity: 0;
+}
+
+.left-part .artplayer {
+    display: none;
+    height: 300px;
+    margin-bottom: 10px;
+}
+
+.left-part .result {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 10px;
+}
+
+.left-part .result .item {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    margin-right: 20px;
+}
+
+.left-part .result .item .name{
+    width: 50px;
+}
+
+.left-part .setup {
+    margin-bottom: 10px;
+}
+
+.left-part .setup .item {
+    display: flex;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 20px;
+}
+
+.left-part .setup .item .name{
+    width: 65px;
+    text-align: right;
+}
+
+.left-part .setup .item .input {
+    height: 30px;
+    width: 200px;
+    border-radius: 3px;
+    outline: none;
+    color: #687079;
+    border: 1px solid #d9d9d9;
+    padding: 0 10px;
+}
+
+.left-part .btns {
+    display: flex;
+}
+
+.left-part .btns .btn {
+    width: 120px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    border-radius: 3px;
+    margin-right: 20px;
+    color: #fff;
+    cursor: pointer;
+}
+
+.left-part .btns .btn.reset {
+    background: #97a8be;
+}
+
+.left-part .btns .btn.create {
+    background: #3ca5ea;
+}
+
+.left-part .btns .btn.download {
+    background: #3ca5ea;
+}
+
+.left-part .btns .btn:hover {
+    opacity: .8;
+}
+
+.rigth-part {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.rigth-part .preview {
+    width: 100%;
+    height: 70%;
+    border: 2px dashed #d9d9d9;
+    background-color: #f5f5f5;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    box-sizing: border-box;
+}
+
+.rigth-part .preview canvas {
+    max-width: 100%;
+}
+
+.rigth-part .console {
+    position: relative;
+    height: 30%;
+}
+  

docs/thumbnail/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Thumbnail tool for ArtPlayer</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="keywords" content="artplayer,html5,video,player,thumbnail">
+    <meta name="description" content="Thumbnail tool for ArtPlayer">
+    <link rel="shortcut icon" href="../assets/img/favicon.ico">
+    <link rel="stylesheet" href="../assets/css/normalize.css">
+    <link rel="stylesheet" href="../assets/css/consola.css">
+    <link rel="stylesheet" href="./css/common.css">
+    <link rel="stylesheet" href="../uncompiled/artplayer.css">   
+</head>
+
+<body>
+    <div class="container">
+        <div class="left-part">
+            <div class="upload">
+                Drop video file here or click to upload.
+                <input class="file" type="file">
+            </div>
+            <div class="artplayer"></div>
+            <div class="setup">
+                <div class="item">
+                    <div class="name">Delay：</div>
+                    <input class="input delay" type="number" min="10" max="1000" placeholder="10 - 1000" value="300">
+                </div>
+                <div class="item">
+                    <div class="name">Number：</div>
+                    <input class="input number" type="number" min="10" max="1000" placeholder="10 - 1000" value="60">
+                </div>
+                <div class="item">
+                    <div class="name">Width：</div>
+                    <input class="input width" type="number" min="10" max="1000" placeholder="10 - 1000" value="160">
+                </div>
+                <div class="item">
+                    <div class="name">Height：</div>
+                    <input class="input height" type="number" min="10" max="1000" placeholder="10 - 1000" value="90">
+                </div>
+                <div class="item">
+                    <div class="name">Column：</div>
+                    <input class="input column" type="number" min="1" max="1000" placeholder="1 - 1000" value="10">
+                </div>
+            </div>
+            <div class="btns">
+                <div class="btn reset">Reset</div>
+                <div class="btn download">Download</div>
+                <div class="btn create">Create</div>
+            </div>
+        </div>
+        <div class="rigth-part">
+            <div class="preview"></div>
+            <div class="console"></div>
+        </div>
+    </div>
+    <script src="../assets/js/consola.js"></script>
+    <script src="../uncompiled/artplayer.js"></script>
+    <script src="../uncompiled/artplayer-tool-thumbnail.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?b6c9b8bafbf5fe7225160101dafbbc7d";
+          var s = document.getElementsByTagName("script")[0]; 
+          s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+</body>
+
+</html>

docs/thumbnail/js/common.js

@@ -0,0 +1,103 @@
+'use strict';
+
+(function() {
+    var $preview = document.querySelector('.preview');
+    var $upload = document.querySelector('.upload');
+    var $file = document.querySelector('.file');
+    var $reset = document.querySelector('.reset');
+    var $create = document.querySelector('.create');
+    var $download = document.querySelector('.download');
+    var $artplayer = document.querySelector('.artplayer');
+    var $delay = document.querySelector('.delay');
+    var $number = document.querySelector('.number');
+    var $width = document.querySelector('.width');
+    var $height = document.querySelector('.height');
+    var $column = document.querySelector('.column');
+
+    function getConfig() {
+        return {
+            delay: Number($delay.value),
+            number: Number($number.value),
+            width: Number($width.value),
+            height: Number($height.value),
+            column: Number($column.value),
+        };
+    }
+
+    consola.creat({
+        target: '.console',
+        size: '100%',
+        zIndex: 99,
+    });
+
+    console.info('Welcome, if you like it, consider star it, thank you.');
+    console.info('https://github.com/zhw2590582/ArtPlayer');
+
+    window.addEventListener('error', function(err) {
+        console.error(err.message);
+    });
+
+    var thumbnail = new ArtplayerToolThumbnail({
+        fileInput: $file,
+    });
+
+    $reset.addEventListener('click', function() {
+        window.location.reload();
+    });
+
+    $create.addEventListener('click', function() {
+        thumbnail.setup(getConfig()).start();
+    });
+
+    $download.addEventListener('click', function() {
+        thumbnail.download();
+    });
+
+    thumbnail.on('file', function(file) {
+        console.log('Read video successfully: ' + file.name);
+    });
+
+    thumbnail.on('video', function(video) {
+        console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
+        console.log('Video duration: ' + video.duration + 's');
+        thumbnail.setup(getConfig()).start();
+    });
+
+    thumbnail.on('canvas', function(canvas) {
+        console.log('Build canvas successfully');
+        console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
+        console.log('Preview density: ' + thumbnail.density + ' p/s');
+    });
+
+    thumbnail.on('update', function(url, percentage) {
+        console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
+        $preview.style.backgroundImage = 'url(' + url + ')';
+    });
+
+    thumbnail.on('download', function(name) {
+        console.log('Start download preview: ' + name);
+    });
+
+    thumbnail.on('done', function() {
+        console.log('Build preview image complete');
+        $upload.style.display = 'none';
+        $artplayer.style.display = 'block';
+
+        Artplayer.instances.forEach(function(art) {
+            art.destroy(true);
+        });
+
+        new Artplayer({
+            container: $artplayer,
+            url: thumbnail.videoUrl,
+            thumbnails: {
+                url: thumbnail.thumbnailUrl,
+                number: thumbnail.option.number,
+                width: thumbnail.option.width,
+                height: thumbnail.option.height,
+                column: thumbnail.option.column,
+            },
+        });
+        console.log('Build player complete');
+    });
+})();

docs/uncompiled/artplayer-plugin-danmu.js

@@ -0,0 +1,18 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (factory((global['artplayer-plugin-danmu'] = {})));
+}(this, (function (exports) { 'use strict';
+
+    function artplayerPluginDanmu(Artplayer) {
+      var art = Artplayer.prototype;
+      console.log(art);
+    }
+
+    window.artplayerPluginDanmu = artplayerPluginDanmu;
+
+    exports.default = artplayerPluginDanmu;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

docs/uncompiled/artplayer-plugin-flv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artplayer-plugin-flv.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-plugin-flv/node_modules/tiny-emitter/index.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer-plugin-flv/src/utils/flvError.js","../../packages/artplayer-plugin-flv/src/utils/index.js","../../packages/artplayer-plugin-flv/src/utils/checkSupport.js","../../packages/artplayer-plugin-flv/src/eventProxy.js","../../packages/artplayer-plugin-flv/src/creatWorker.js","../../packages/artplayer-plugin-flv/src/config.js","../../packages/artplayer-plugin-flv/src/creatMediaSource.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer-plugin-flv/src/flvParse/fetchStream.js","../../packages/artplayer-plugin-flv/src/flvParse/readFile.js","../../packages/artplayer-plugin-flv/src/flvParse/parseScripTag.js","../../packages/artplayer-plugin-flv/src/flvParse/index.js","../../packages/artplayer-plugin-flv/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 (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" Line truncated

docs/uncompiled/artplayer-plugin-gif.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artplayer-plugin-gif.js","sources":["../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer-plugin-gif/node_modules/gifshot/dist/gifshot.js","../../packages/artplayer-plugin-gif/node_modules/b64-to-blob/b64toBlob.js","../../packages/artplayer-plugin-gif/src/index.js"],"sourcesContent":["function _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n\n  return obj;\n}\n\nmodule.exports = _defineProperty;","var defineProperty = require(\"./defineProperty\");\n\nfunction _objectSpread(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i] != null ? arguments[i] : {};\n    var ownKeys = Object.keys(source);\n\n    if (typeof Object.getOwnPropertySymbols === 'function') {\n      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n        return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n      }));\n    }\n\n    ownKeys.forEach(function (key) {\n      defineProperty(target, key, source[key]);\n    });\n  }\n\n  return target;\n}\n\nmodule.exports = _objectSpread;","/*Copyrights for code authored by Yahoo Inc. is licensed under the following terms:\nMIT License\nCopyright  2017 Yahoo Inc.\nPermission 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:\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\nTHE 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.\n*/\n;(function(window, document, navigator, undefined) {\n\"use strict\";\n\n/*\n  utils.js\n  ========\n*/\n\n/* Copyright  2017 Yahoo Inc.\n * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.\n*/\n\nvar utils = {\n    URL: window.URL || window.webkitURL || window.mozURL || window.msURL,\n    getUserMedia: function () {\n        var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;\n\n        return getUserMedia ? getUserMedia.bind(navigator) : getUserMedia;\n    }(),\n    requestAnimFrame: window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame,\n    requestTimeout: function requestTimeout(callback, delay) {\n        callback = callback || utils.noop;\n        delay = delay || 0;\n\n        if (!utils.requestAnimFrame) {\n            return setTimeout(callback, delay);\n        }\n\n        var start = new Date().getTime();\n        var handle = new Object();\n        var requestAnimFrame = utils.requestAnimFrame;\n\n        var loop = function loop() {\n            var current = new Date().getTime();\n            var delta = current - start;\n\n            delta >= delay ? callback.call() : handle.value = requestAnimFrame(loop);\n        };\n\n        handle.value = requestAnimFrame(loop);\n\n        return handle;\n    },\n    Blob: window.Blob || window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder,\n    btoa: function () {\n        var btoa = window.btoa || function (input) {\n            var output = '';\n            var i = 0;\n            var l = input.length;\n            var key = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n            var chr1 = void 0;\n            var chr2 = void 0;\n            var chr3 = void 0;\n            var enc1 = void 0;\n            var enc2 = void 0;\n            var enc3 = void 0;\n            var enc4 = void 0;\n\n            while (i < l) {\n                chr1 = input.charCodeAt(i++);\n                chr2 = input.charCodeAt(i++);\n                chr3 = input.charCodeAt(i++);\n                enc1 = chr1 >> 2;\n                enc2 = (chr1 & 3) << 4 | chr2 >> 4;\n                enc3 = (chr2 & 15) << 2 | chr3 >> 6;\n                enc4 = chr3 & 63;\n\n                if (isNaN(chr2)) {\n                 Line truncated

docs/uncompiled/artplayer-react.css

@@ -0,0 +1,2 @@
+.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{-webkit-box-sizing:border-box;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{pointer-events:all}.artplayer-video-player .artplayer-loading{z-index:60;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.artplayer-video-player .artplayer-loading,.artplayer-video-player .artplayer-mask{display:none;position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask{z-index:40}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}.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;-webkit-transition:all .2s ease-in-out;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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-boxLine truncated
+/*# sourceMappingURL=artplayer-react.css.map */

docs/uncompiled/artplayer-react.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["artplayer.css"],"names":[],"mappings":"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 truncated

docs/uncompiled/artplayer-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artplayer-react.js","sources":["../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js","../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-react/node_modules/_object-assign@4.1.1@object-assign/index.js","../../packages/artplayer-react/node_modules/_react@16.8.6@react/cjs/react.production.min.js","../../packages/artplayer-react/node_modules/_prop-types@15.7.2@prop-types/lib/ReactPropTypesSecret.js","../../packages/artplayer-react/node_modules/_prop-types@15.7.2@prop-types/checkPropTypes.js","../../packages/artplayer-react/node_modules/_react@16.8.6@react/cjs/react.development.js","../../packages/artplayer-react/node_modules/_react@16.8.6@react/index.js","../../packages/artplayer-react/node_modules/_artplayer@1.0.6@artplayer/dist/artplayer.js","../../packages/artplayer-react/src/index.js"],"sourcesContent":["function _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n\n  return target;\n}\n\nmodule.exports = _objectWithoutPropertiesLoose;","var objectWithoutPropertiesLoose = require(\"./objectWithoutPropertiesLoose\");\n\nfunction _objectWithoutProperties(source, excluded) {\n  if (source == null) return {};\n  var target = objectWithoutPropertiesLoose(source, excluded);\n  var key, i;\n\n  if (Object.getOwnPropertySymbols) {\n    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n    for (i = 0; i < sourceSymbolKeys.length; i++) {\n      key = sourceSymbolKeys[i];\n      if (excluded.indexOf(key) >= 0) continue;\n      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n      target[key] = source[key];\n    }\n  }\n\n  return target;\n}\n\nmodule.exports = _objectWithoutProperties;","function _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n\n  return obj;\n}\n\nmodule.exports = _defineProperty;","var defineProperty = require(\"./defineProperty\");\n\nfunction _objectSpread(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i] != null ? arguments[i] : {};\n    var ownKeys = Object.keys(source);\n\n    if (typeof Object.getOwnPropertySymbols === 'function') {\n      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n        return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n      }));\n    }\n\n    ownKeys.forEach(function (key) {\n      defineProperty(target, key, source[key]);\n    });\n  }\n\n  return target;\n}\n\nmodule.exports = _objectSpread;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","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 _creLine truncated

docs/uncompiled/artplayer-tool-thumbnail.js

@@ -0,0 +1,472 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global['artplayer-tool-thumbnail'] = {})));
+}(this, (function (exports) { 'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var classCallCheck = _classCallCheck;
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  var createClass = _createClass;
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var _typeof_1 = createCommonjsModule(function (module) {
+  function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
+
+  function _typeof(obj) {
+    if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
+      module.exports = _typeof = function _typeof(obj) {
+        return _typeof2(obj);
+      };
+    } else {
+      module.exports = _typeof = function _typeof(obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  module.exports = _typeof;
+  });
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  var assertThisInitialized = _assertThisInitialized;
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
+      return call;
+    }
+
+    return assertThisInitialized(self);
+  }
+
+  var possibleConstructorReturn = _possibleConstructorReturn;
+
+  var getPrototypeOf = createCommonjsModule(function (module) {
+  function _getPrototypeOf(o) {
+    module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  module.exports = _getPrototypeOf;
+  });
+
+  var setPrototypeOf = createCommonjsModule(function (module) {
+  function _setPrototypeOf(o, p) {
+    module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  module.exports = _setPrototypeOf;
+  });
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) setPrototypeOf(subClass, superClass);
+  }
+
+  var inherits = _inherits;
+
+  function E() {// Keep this empty so it's easier to inherit from
+    // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+  }
+
+  E.prototype = {
+    on: function on(name, callback, ctx) {
+      var e = this.e || (this.e = {});
+      (e[name] || (e[name] = [])).push({
+        fn: callback,
+        ctx: ctx
+      });
+      return this;
+    },
+    once: function once(name, callback, ctx) {
+      var self = this;
+
+      function listener() {
+        self.off(name, listener);
+        callback.apply(ctx, arguments);
+      }
+      listener._ = callback;
+      return this.on(name, listener, ctx);
+    },
+    emit: function emit(name) {
+      var data = [].slice.call(arguments, 1);
+      var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+      var i = 0;
+      var len = evtArr.length;
+
+      for (i; i < len; i++) {
+        evtArr[i].fn.apply(evtArr[i].ctx, data);
+      }
+
+      return this;
+    },
+    off: function off(name, callback) {
+      var e = this.e || (this.e = {});
+      var evts = e[name];
+      var liveEvents = [];
+
+      if (evts && callback) {
+        for (var i = 0, len = evts.length; i < len; i++) {
+          if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
+        }
+      } // Remove event from queue to prevent memory leak
+      // Suggested by https://github.com/lazd
+      // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+
+      liveEvents.length ? e[name] = liveEvents : delete e[name];
+      return this;
+    }
+  };
+  var tinyEmitter = E;
+
+  function sleep(ms) {
+    return new Promise(function (resolve) {
+      return setTimeout(resolve, ms);
+    });
+  }
+  function runPromisesInSeries(ps) {
+    return ps.reduce(function (p, next) {
+      return p.then(next);
+    }, Promise.resolve());
+  }
+  function getFileName(name) {
+    var nameArray = name.split('.');
+    nameArray.pop();
+    return nameArray.join('.');
+  }
+  function clamp(num, a, b) {
+    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+  }
+
+  var ArtplayerToolThumbnail =
+  /*#__PURE__*/
+  function (_Emitter) {
+    inherits(ArtplayerToolThumbnail, _Emitter);
+
+    function ArtplayerToolThumbnail() {
+      var _this;
+
+      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      classCallCheck(this, ArtplayerToolThumbnail);
+
+      _this = possibleConstructorReturn(this, getPrototypeOf(ArtplayerToolThumbnail).call(this));
+      _this.processing = false;
+      _this.option = {};
+
+      _this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
+
+      _this.video = ArtplayerToolThumbnail.creatVideo();
+      _this.inputChange = _this.inputChange.bind(assertThisInitialized(assertThisInitialized(_this)));
+      _this.ondrop = _this.ondrop.bind(assertThisInitialized(assertThisInitialized(_this)));
+
+      _this.option.fileInput.addEventListener('change', _this.inputChange);
+
+      _this.option.fileInput.addEventListener('dragover', ArtplayerToolThumbnail.ondragover);
+
+      _this.option.fileInput.addEventListener('drop', ArtplayerToolThumbnail.ondrop);
+
+      return _this;
+    }
+
+    createClass(ArtplayerToolThumbnail, [{
+      key: "ondrop",
+      value: function ondrop(e) {
+        e.preventDefault();
+        var file = e.dataTransfer.files[0];
+        this.loadVideo(file);
+      }
+    }, {
+      key: "setup",
+      value: function setup() {
+        var _this2 = this;
+
+        var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        this.option = Object.assign({}, this.option, option);
+        var _this$option = this.option,
+            fileInput = _this$option.fileInput,
+            delay = _this$option.delay,
+            number = _this$option.number,
+            width = _this$option.width,
+            height = _this$option.height,
+            column = _this$option.column;
+        this.errorHandle(fileInput.tagName === 'INPUT' && fileInput.type === 'file', 'The \'fileInput\' is not a usable file input like: <input type="file">');
+        ['delay', 'number', 'width', 'height', 'column'].forEach(function (item) {
+          _this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number"));
+        });
+        this.option.delay = clamp(delay, 10, 1000);
+        this.option.number = clamp(number, 10, 1000);
+        this.option.width = clamp(width, 10, 1000);
+        this.option.height = clamp(height, 10, 1000);
+        this.option.column = clamp(column, 1, 1000);
+        return this;
+      }
+    }, {
+      key: "inputChange",
+      value: function inputChange() {
+        var file = this.option.fileInput.files[0];
+        this.loadVideo(file);
+      }
+    }, {
+      key: "loadVideo",
+      value: function loadVideo(file) {
+        var _this3 = this;
+
+        var delay = this.option.delay;
+
+        if (file) {
+          var canPlayType = this.video.canPlayType(file.type);
+          this.errorHandle(canPlayType === 'maybe' || canPlayType === 'probably', "Playback of this file format is not supported: ".concat(file.type));
+          var videoUrl = URL.createObjectURL(file);
+          this.videoUrl = videoUrl;
+          this.file = file;
+          this.emit('file', this.file);
+          this.video.src = videoUrl;
+          sleep(delay).then(function () {
+            _this3.emit('video', _this3.video);
+          }).catch(function (err) {
+            _this3.emit('error', err.message);
+
+            console.error(err);
+          });
+        }
+      }
+    }, {
+      key: "start",
+      value: function start() {
+        var _this4 = this;
+
+        var _this$option2 = this.option,
+            width = _this$option2.width,
+            height = _this$option2.height,
+            number = _this$option2.number,
+            delay = _this$option2.delay;
+        this.density = number / this.video.duration;
+        this.errorHandle(this.file && this.video, 'Please select the video file first');
+        this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
+        this.errorHandle(this.density <= 1, "The preview density cannot be greater than 1, but got ".concat(this.density));
+        var screenshotDate = this.creatScreenshotDate();
+        var canvas = this.creatCanvas();
+        var context2D = canvas.getContext('2d');
+        this.emit('canvas', canvas);
+        var promiseList = screenshotDate.map(function (item, index) {
+          return function () {
+            _this4.video.currentTime = item.time;
+            return new Promise(function (resolve) {
+              sleep(delay).then(function () {
+                context2D.drawImage(_this4.video, item.x, item.y, width, height);
+                canvas.toBlob(function (blob) {
+                  if (_this4.thumbnailUrl) {
+                    URL.revokeObjectURL(_this4.thumbnailUrl);
+                  }
+
+                  _this4.thumbnailUrl = URL.createObjectURL(blob);
+
+                  _this4.emit('update', _this4.thumbnailUrl, (index + 1) / number);
+
+                  resolve();
+                });
+              }).catch(function (err) {
+                console.error(err);
+              });
+            });
+          };
+        });
+        this.processing = true;
+        return runPromisesInSeries(promiseList).then(function () {
+          return sleep(delay * 2).then(function () {
+            _this4.processing = false;
+
+            _this4.emit('done');
+          }).catch(function (err) {
+            _this4.processing = false;
+
+            _this4.emit('error', err.message);
+
+            console.error(err);
+          });
+        }).catch(function (err) {
+          _this4.processing = false;
+
+          _this4.emit('error', err.message);
+
+          console.error(err);
+        });
+      }
+    }, {
+      key: "creatScreenshotDate",
+      value: function creatScreenshotDate() {
+        var _this$option3 = this.option,
+            number = _this$option3.number,
+            width = _this$option3.width,
+            height = _this$option3.height,
+            column = _this$option3.column;
+        var duration = this.video.duration;
+        var timeGap = duration / number;
+        var timePoints = [timeGap];
+
+        while (timePoints.length < number) {
+          var last = timePoints[timePoints.length - 1];
+          timePoints.push(last + timeGap);
+        }
+
+        return timePoints.map(function (item, index) {
+          return {
+            time: item - timeGap / 2,
+            x: index % column * width,
+            y: Math.floor(index / column) * height
+          };
+        });
+      }
+    }, {
+      key: "creatCanvas",
+      value: function creatCanvas() {
+        var _this$option4 = this.option,
+            number = _this$option4.number,
+            width = _this$option4.width,
+            height = _this$option4.height,
+            column = _this$option4.column;
+        var canvas = document.createElement('canvas');
+        var context2D = canvas.getContext('2d');
+        canvas.width = width * column;
+        canvas.height = Math.ceil(number / column) * height + 30;
+        context2D.fillStyle = 'black';
+        context2D.fillRect(0, 0, canvas.width, canvas.height);
+        context2D.font = '14px Georgia';
+        context2D.fillStyle = '#fff';
+        context2D.fillText("From: https://artplayer.org/thumbnail, Number: ".concat(number, ", Width: ").concat(width, ", Height: ").concat(height, ", Column: ").concat(column), 10, canvas.height - 11);
+        return canvas;
+      }
+    }, {
+      key: "download",
+      value: function download() {
+        this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready, please create preview first');
+        this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
+        var elink = document.createElement('a');
+        var name = "".concat(getFileName(this.file.name), ".png");
+        elink.download = name;
+        elink.href = this.thumbnailUrl;
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        this.emit('download', name);
+        return this;
+      }
+    }, {
+      key: "errorHandle",
+      value: function errorHandle(condition, msg) {
+        if (!condition) {
+          this.emit('error', msg);
+          throw new Error(msg);
+        }
+      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        this.option.fileInput.removeEventListener('change', this.inputChange);
+        this.option.fileInput.removeEventListener('dragover', ArtplayerToolThumbnail.ondragover);
+        this.option.fileInput.removeEventListener('drop', ArtplayerToolThumbnail.ondrop);
+        document.body.removeChild(this.video);
+
+        if (this.videoUrl) {
+          URL.revokeObjectURL(this.videoUrl);
+        }
+
+        if (this.thumbnailUrl) {
+          URL.revokeObjectURL(this.thumbnailUrl);
+        }
+
+        this.emit('destroy');
+      }
+    }], [{
+      key: "ondragover",
+      value: function ondragover(e) {
+        e.preventDefault();
+      }
+    }, {
+      key: "creatVideo",
+      value: function creatVideo() {
+        var video = document.createElement('video');
+        video.style.position = 'absolute';
+        video.style.top = '-9999px';
+        video.style.left = '-9999px';
+        video.muted = true;
+        video.controls = true;
+        document.body.appendChild(video);
+        return video;
+      }
+    }, {
+      key: "DEFAULTS",
+      get: function get() {
+        return {
+          delay: 300,
+          number: 60,
+          width: 160,
+          height: 90,
+          column: 10
+        };
+      }
+    }]);
+
+    return ArtplayerToolThumbnail;
+  }(tinyEmitter);
+
+  window.ArtplayerToolThumbnail = ArtplayerToolThumbnail;
+
+  exports.default = ArtplayerToolThumbnail;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=artplayer-tool-thumbnail.js.map

docs/uncompiled/artplayer-tool-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artplayer-tool-thumbnail.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-tool-thumbnail/node_modules/tiny-emitter/index.js","../../packages/artplayer-tool-thumbnail/src/utils.js","../../packages/artplayer-tool-thumbnail/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 (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctx) {\n    var self = this;\n    function listener () {\n      self.off(name, listener);\n      callback.apply(ctx, arguments);\n    };\n\n    listener._ = callback\n    return this.on(name, listener, ctx);\n  },\n\n  emit: function (name) {\n    var data = [].slice.call(arguments, 1);\n    var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n    var i = 0;\n    var len = evtArr.length;\n\n    for (i; i < len; i++) {\n      evtArr[i].fn.apply(evtArr[i].ctx, data);\n    Line truncated

docs/uncompiled/artplayer.css

@@ -0,0 +1,19 @@
+.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);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;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-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 .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-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%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack: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;-webkit-transition:all .2s ease-in-out;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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;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:-webkit-box;display:-ms-flexbox;display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;font-size:12px;height:36px;min-width:36px;line-height:36px;text-align:center;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack: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%;-webkit-transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);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;baLine 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-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-setting{display:none;position:absolute;z-index:80;left:0;top:0;height:100%;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack: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:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{-webkit-box-flex:1;-ms-flex:1;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 .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:-webkit-box;display:-ms-flexbox;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{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
+.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
+.artplayer-video-player[data-aspect-ratio] video{-webkit-box-sizing:content-box;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);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;opacity:0;visibility:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{-webkit-box-flex:1;-ms-flex:1;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;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2);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:-webkit-box;display:-ms-flexbox;display:flex}.artplayer-video-player.artplayer-pip.artplayer-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack: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;-webkit-transition:all .18s ease-out .18s;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{-webkit-transition:none;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);tranLine truncated
+/*# sourceMappingURL=artplayer.css.map */

docs/uncompiled/artplayer.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.min.css"],"names":[],"mappings":"AAAA,wBACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,SAAU,CACV,6CAA8C,CAC9C,UAAW,CACX,eAAgB,CAChB,aAAc,CACd,cAAe,CACf,eAAgB,CAChB,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,yCAA6C,CAC7C,6BAA0B,CAA1B,yBAA0B,CAC1B,6BAAgC,CAChC,0BACE,QAAS,CACT,SAAU,CACV,6BAAsB,CAAtB,qBAAwB,CAC1B,kCACE,oBAAqB,CACrB,eAAkB,CAClB,sCACE,SAAY;ACxBlB,yCACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,qBAAsB,CACtB,SAAU,CACV,cAAiB;ACXnB,4CACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,UAAW,CACX,cAAe,CACf,iBAAkB,CAClB,UAAW,CACX,yCAAiD,CACjD,cAAe,CACf,mBAAsB,CACtB,8CACE,YAAe;ACZnB,0CACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,mBAAsB,CACtB,qDACE,kBAAqB;ACXzB,wCACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,mBAAsB,CACtB,qDACE,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,UAAa;ACfjB,2CACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,UAAW,CACX,WAAY,CACZ,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,mBAAsB;ACZxB,0CACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,OAAQ,CACR,QAAS,CACT,YAAa,CACb,mBAAoB,CACpB,SAAU,CACV,iBAAkB,CAClB,sCAA+B,CAA/B,8BAA+B,CAC/B,mBAAoB,CACpB,kSAAqS,CACrS,8DACE,iBAAkB,CAClB,kBAAqB,CACrB,oFACE,iBAAkB,CAClB,UAAW,CACX,aAAc,CACd,cAAiB,CACjB,gHACE,iBAAkB,CAClB,WAAY,CACZ,6BAAsC,CACtC,qIACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,WAAY,CACZ,OAAQ,CACR,6BAAsC,CACxC,qIACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,WAAY,CACZ,OAAU,CACZ,wIACE,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,OAAQ,CACR,QAAS,CACT,QAAW,CACX,6IACE,oBAAqB,CACrB,iBAAkB,CAClB,MAAO,CACP,KAAM,CACN,SAAU,CACV,UAAW,CACX,eAAgB,CAChB,iBAAoB,CACxB,wIACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAoB,CACpB,2JACE,aAAgB,CACpB,kIACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,MAAO,CACP,WAAY,CACZ,aAAc,CACd,gBAAiB,CACjB,UAAW,CACX,cAAe,CACf,iBAAkB,CAClB,yBAA8B,CAC9B,iBAAkB,CAClB,eAAmB,CACvB,8NACE,aAAgB,CACpB,sFACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,mBAAoB,CACpB,+BAAsC,CAC1C,8DACE,iBAAkB,CAClB,kBAAmB,CACnB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,wBAA8B,CAA9B,qBAA8B,CAA9B,6BAA8B,CAC9B,WAAc,CACd,+KACE,mBAAa,CAAb,mBAAa,CAAb,YAAe,CACjB,2EACE,UAAW,CACX,cAAe,CACf,WAAY,CACZ,cAAe,CACf,gBAAiB,CACjB,iBAAkB,CAClB,cAAiB,CACjB,qFACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,UAAW,CACX,WAAY,CACZ,UAAa,CACf,iFACE,SAAY,CAChB,oGACE,iBAAkB,CAClB,UAAW,CACX,OAAQ,CACR,WAAY,CACZ,qFAAyF,CAAzF,6EAAyF,CACzF,eAAkB,CAClB,8HACE,iBAAkB,CAClB,OAAQ,CACR,MAAO,CACP,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,eAAgB,CAChB,eAAkB,CAClB,qIACE,UAAW,CACX,eAAkB,CACpB,oIACE,QAAS,CACT,6BAAsC,CACxC,yQACE,UAAW,CACX,iBAAkB,CAClB,aAAc,CACd,OAAQ,CACR,UAAW,CACX,eAAgB,CAChB,UAAa,CACnB,0GACE,UAAa,CACf,gFACE,cAAiB,CACnB,mFACE,iBAAkB,CAClB,UAAW,CACX,cAAiB,CACjB,iGACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,WAAY,CACZ,aAAc,CACd,iBAAkB,CAClB,UAAW,CACX,yBAA8B,CAC9B,iBAAoB,CACpB,mHACE,WAAY,CACZ,gBAAiB,CACjB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,kCAAyC,CACzC,yHACE,mCAA4C,CAClD,uGACE,aAAgB,CAExB,4HACE,SAAU,CACV,kBAAqB,CAEvB,wPACE,sBAA0B;AC5L5B,0CACE,YAAa,CACb,cAAe,CACf,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,YAAa,CACb,UAAW,CACX,mBAAsB,CACtB,kEACE,oBAAqB,CACrB,gBAAiB,CACjB,UAAW,CACX,yBAA8B,CAC9B,iBAAoB;ACfxB,+CACE,YAAa,CACb,iBAAkB,CAClB,WAAY,CACZ,MAAO,CACP,KAAM,CACN,eAAgB,CAChB,aAAc,CACd,yBAA8B,CAC9B,iBAAoB,CACpB,gEACE,cAAe,CACf,cAAe,CACf,aAAc,CACd,UAAW,CACX,gBAAiB,CACjB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CACnB,kCAAuC,CACvC,0CAAmD,CACnD,kEACE,UAAW,CACX,oBAAuB,CACzB,qEACE,oBAAqB,CACrB,aAAgB,CAChB,wJACE,aAAgB,CACpB,sEACE,mCAA4C,CAC9C,2EACE,kBAAqB;AChC3B,2CACE,YAAa,CACb,iBAAkB,CAClB,UAAW,CACX,MAAO,CACP,KAAM,CACN,WAAY,CACZ,UAAW,CACX,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,mBAAsB,CACtB,oEACE,iBAAkB,CAClB,WAAY,CACZ,YAAa,CACb,cAAe,CACf,yBAA8B,CAC9B,iBAAkB,CAClB,kBAAmB,CACnB,eAAkB,CAClB,4FACE,eAAgB,CAChB,UAAW,CACX,WAAc,CACd,yGACE,0CAAiD,CACjD,iBAA8B,CAC9B,6HACE,UAAW,CACX,kBAAqB,CACvB,2HACE,wBAAiC,CACvC,6FACE,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAClB,wBAA+B,CAC/B,yBAA8B,CAC9B,cAAe,CACf,cAAiB,CACrB,6DACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,gBAAiB,CACjB,iBAAoB,CACpB,8EACE,kBAAO,CAAP,UAAO,CAAP,MAAO,CACP,aAAgB,CAChB,mFACE,aAAc,CACd,WAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAClB,UAAW,CACX,6BAAoC,CACpC,iBAAkB,CAClB,cAAiB,CACnB,oLACE,UAAW,CACX,kBAAqB;AC9D7B,wCACE,YAAa,CACb,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,UAAW,CACX,WAAY,CACZ,gBAAiB,CACjB,YAAa,CACb,UAAW,CACX,cAAe,CACf,wFAAyF,CACzF,kCAAmC,CACnC,yBAAgC,CAChC,uDACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,iLine truncated

docs/uncompiled/artplayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchQualityMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../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","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/node_modules/resize-observer/lib/ContentRect.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObservation.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserverEntry.js","../../packages/artplayer/node_modules/resize-observer/lib/ResizeObserver.js","../../packages/artplayer/src/events/reLine truncated

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "3.4.3",
-  "version": "1.0.3",
+  "version": "3.1.2",
   "packages": [
     "packages/*"
   ],

package.json

@@ -1,13 +1,17 @@
 {
-  "name": "artplayer",
-  "version": "1.0.2",
+  "name": "artplayer-packages",
+  "version": "1.0.0",
   "description": "ArtPlayer is a modern HTML5 video player",
   "scripts": {
-    "bootstrap": "lerna bootstrap",
-    "publish": "lerna publish",
-    "build": "lerna run build",
-    "test": "lerna run test",
-    "lint": "eslint packages/*/src"
+    "bootstrap": "node ./node_modules/.bin/lerna bootstrap",
+    "version": "node ./node_modules/.bin/lerna version patch --yes",
+    "publish": "node ./node_modules/.bin/lerna publish --yes",
+    "release": "npm run lint && npm run version && npm run build:all && npm test && npm run publish",
+    "dev": "node ./node_modules/.bin/cross-env NODE_ENV=development node ./scripts/dev.js",
+    "build": "node ./node_modules/.bin/cross-env NODE_ENV=production node ./scripts/build.js",
+    "build:all": "npm run build all && git add . && git commit -m \"build all packages\" -n ",
+    "test": "node ./node_modules/.bin/mocha-chrome ./test/index.html --mocha '{\"ui\":\"bdd\"}'",
+    "lint": "node ./node_modules/.bin/eslint packages/*/src"
   },
   "repository": {
     "type": "git",
@@ -23,12 +27,39 @@
     "url": "https://github.com/zhw2590582/ArtPlayer/issues"
   },
   "homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
-  "devDependencies": {
+  "dependencies": {
+    "@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",
     "babel-eslint": "^10.0.1",
+    "browser-env": "^3.2.5",
+    "chai": "^4.2.0",
+    "chalk": "^2.4.1",
+    "cpy": "^7.0.1",
+    "cross-env": "^5.2.0",
+    "cssnano": "^4.1.7",
+    "del": "^4.0.0",
     "eslint": "^5.9.0",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^3.3.0",
+    "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-import": "^2.14.0",
-    "lerna": "^3.4.3"
+    "glob": "^7.1.3",
+    "inquirer": "^6.2.1",
+    "lerna": "^3.13.2",
+    "mocha": "^6.1.3",
+    "mocha-chrome": "^2.0.0",
+    "node-sass": "^4.9.4",
+    "rollup": "^1.1.0",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-eslint": "^5.0.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-postcss": "^2.0.0",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-svgo": "^1.0.1",
+    "rollup-plugin-uglify": "^6.0.0"
   }
 }

packages/artplayer-plugin-danmu/.babelrc

@@ -1,11 +0,0 @@
-{
-	"presets": [
-		[
-			"@babel/env",
-			{
-				"modules": false
-			}
-		]
-	],
-	"plugins": ["@babel/plugin-external-helpers", "@babel/plugin-transform-runtime"]
-}

packages/artplayer-plugin-danmu/dist/artplayer-plugin-danmu.css

@@ -1 +1 @@
-.artplayerPluginDanmu{display:flex}
+.artplayerPluginDanmu{display:-webkit-box;display:-ms-flexbox;display:flex}

packages/artplayer-plugin-danmu/dist/artplayer-plugin-danmu.js

@@ -1,8 +1,8 @@
 /*!
- * artplayer-plugin-danmu.js v1.0.2
+ * artplayer-plugin-danmu.js v3.1.1
  * Github: https://github.com/zhw2590582/ArtPlayer#readme
- * (c) 2017-2018 Harvey Zack
+ * (c) 2017-2019 Harvey Zack
  * Released under the MIT License.
  */
 
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e["artplayer-plugin-danmu"]={})}(this,function(e){"use strict";var n=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},t=function e(){n(this,e),console.log(this)};window.ArtplayerPluginDanmu=t,e.default=t,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self)["artplayer-plugin-danmu"]=n()}(this,function(){"use strict";function e(e){var n=e.prototype;console.log(n)}return window.artplayerPluginDanmu=e});

packages/artplayer-plugin-danmu/package.json

@@ -1,12 +1,10 @@
 {
   "name": "artplayer-plugin-danmu",
-  "version": "1.0.3",
+  "version": "3.1.2",
   "description": "Danmu plugin for ArtPlayer",
   "main": "dist/artplayer-plugin-danmu.js",
   "style": "dist/artplayer-plugin-danmu.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": {
@@ -22,26 +20,5 @@
   "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"
-  }
+  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme"
 }

packages/artplayer-plugin-danmu/rollup.config.js

@@ -1,65 +0,0 @@
-const path = require('path');
-const babel = require('rollup-plugin-babel');
-const commonjs = require('rollup-plugin-commonjs');
-const nodeResolve = require('rollup-plugin-node-resolve');
-const postcss = require('rollup-plugin-postcss');
-const { eslint } = require('rollup-plugin-eslint');
-const autoprefixer = require('autoprefixer');
-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, name } = require('./package.json');
-const isProd = process.env.NODE_ENV === 'production';
-
-const banner =
-  '/*!\n' +
-  ` * ${name}.js v${version}\n` +
-  ` * Github: ${homepage}\n` +
-  ` * (c) 2017-${new Date().getFullYear()} Harvey Zack\n` +
-  ' * Released under the MIT License.\n' +
-  ' */\n';
-
-export default {
-  input: 'src/index.js',
-  output: {
-    name: name,
-    file: isProd ? `dist/${name}.js` : path.join(process.cwd(), '../../', `docs/lab/js/${name}.js`),
-    format: 'umd',
-    exports: 'named'
-  },
-  plugins: [
-    eslint({
-      exclude: [
-        'node_modules/**',
-        'src/**/*.scss',
-        'src/**/*.svg'
-      ]
-    }),
-    postcss({
-      plugins: [autoprefixer, cssnano],
-      extract: isProd ? `dist/${name}.css` : path.join(process.cwd(), '../../', `docs/lab/css/${name}.css`)
-    }),
-    nodeResolve(),
-    commonjs(),
-    babel({
-      runtimeHelpers: true,
-      exclude: 'node_modules/**',
-      presets: [['@babel/env', { modules: false }]],
-      plugins: ['@babel/plugin-external-helpers', '@babel/plugin-transform-runtime']
-    }),
-    svgo({
-      raw: true
-    }),
-    replace({
-      exclude: 'node_modules/**',
-      __ENV__: JSON.stringify(process.env.NODE_ENV || 'development'),
-      __VERSION__: version
-    }),
-    isProd && uglify({
-      output: {
-        preamble: banner
-      }
-    })
-  ]
-};

packages/artplayer-plugin-danmu/src/index.js

@@ -1,10 +1,9 @@
-import './style/index.scss';
+import './index.scss';
 
-class ArtplayerPluginDanmu {
-    constructor() {
-        console.log(this);
-    }
+function artplayerPluginDanmu(Artplayer) {
+    const art = Artplayer.prototype;
+    console.log(art);
 }
 
-window.ArtplayerPluginDanmu = ArtplayerPluginDanmu;
-export default ArtplayerPluginDanmu;
+window.artplayerPluginDanmu = artplayerPluginDanmu;
+export default artplayerPluginDanmu;

packages/artplayer-plugin-flv/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs

packages/artplayer-plugin-flv/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/artplayer-plugin-flv/README.md

@@ -0,0 +1,3 @@
+# artplayer-plugin-flv
+Flv plugin for ArtPlayer
+

packages/artplayer-plugin-flv/dist/artplayer-plugin-flv.js

@@ -0,0 +1,8 @@
+/*!
+ * artplayer-plugin-flv.js v3.1.1
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2019 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["artplayer-plugin-flv"]=t()}(this,function(){"use strict";var a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var c=function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e};function e(e,t){return e(t={exports:{}},t.exports),t.exports}var n=e(function(t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=r=function(e){return n(e)}:t.exports=r=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},r(e)}t.exports=r});var o=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e};var i=function(e,t){return!t||"object"!==n(t)&&"function"!=typeof t?o(e):t},u=e(function(t){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(e)}t.exports=n}),s=e(function(n){function r(e,t){return n.exports=r=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},r(e,t)}n.exports=r});var t=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)};function f(){}f.prototype={on:function(e,t,n){var r=this.e||(this.e={});return(r[e]||(r[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){var r=this;function o(){r.off(e,o),t.apply(n,arguments)}return o._=t,this.on(e,o,n)},emit:function(e){for(var t=[].slice.call(arguments,1),n=((this.e||(this.e={}))[e]||[]).slice(),r=0,o=n.length;r<o;r++)n[r].fn.apply(n[r].ctx,t);return this},off:function(e,t){var n=this.e||(this.e={}),r=n[e],o=[];if(r&&t)for(var i=0,a=r.length;i<a;i++)r[i].fn!==t&&r[i].fn._!==t&&o.push(r[i]);return o.length?n[e]=o:delete n[e],this}};var l=f,p=f;l.TinyEmitter=p;var d=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}};var h=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)};var v=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var y=function(e){return d(e)||h(e)||v()};var m=function(e){return-1!==Function.toString.call(e).indexOf("[native code]")},g=e(function(r){function o(e,t,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(e){return!1}}()?r.exports=o=function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&s(o,n.prototype),o}:r.exports=o=Reflect.construct,o.apply(null,arguments)}r.exports=o}),b=function(e){function r(e,t){var n;return a(this,r),n=i(this,u(r).call(this,e)),"function"==typeof Error.captureStackTrace&&Error.captureStackTrace(o(n),t||n.constructor),n.name="FlvError",n}return t(r,e),r}(e(function(t){function r(e){var n="function"==typeof Map?new Map:void 0;return t.exports=r=function(e){if(null===e||!m(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(e))return n.get(e);n.set(e,t)}function t(){return g(e,arguments,u(this).constructor)}return t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),s(t,e)},r(e)}t.exports=r})(Error));function w(e,t){if(!e)throw new b(t)}function S(e,t){var n=new e.constructor(e.length+t.length);return n.set(e),n.set(t,e.length),n}function k(r){return r.reduce(function(e,t,n){return e+t*Math.pow(256,r.length-n-1)},0)}function x(e){var t;return(t=String.fromCharCode).call.apply(t,[String].concat(y(e)))}function E(e){var n=new DataView(new ArrayBuffer(e.length));return e.forEach(function(e,t){n.setUint8(t,e)}),n.getFloat64(0)}function O(e){return 1===e}function T(o){var i=0;return function e(t){for(var n=new Uint8Array(t),r=0;r<t;r+=1)n[r]=o[i],i+=1;return e.index=i,n}}var j=Object.freeze({errorHandle:w,mergeTypedArrays:S,sleep:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0;return new Promise(function(e){return setTimeout(e,t)})},getUint8Sum:k,string2Bin:function(e){for(var t=[],n=0;n<e.length;n+=1)t.push(Number(e.charCodeAt(n).toString(10)));return t},bin2String:x,bin2Float:E,bin2Boolean:O,log:function(Line truncated

packages/artplayer-plugin-flv/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "artplayer-plugin-flv",
+  "version": "3.1.2",
+  "description": "Flv plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-flv.js",
+  "scripts": {
+    "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",
+  "dependencies": {
+    "tiny-emitter": "^2.0.2"
+  }
+}

packages/artplayer-plugin-flv/src/config.js

@@ -0,0 +1,58 @@
+export default {
+    mediaSource: {
+        propertys: [
+            'activeSourceBuffers',
+            'duration',
+            'readyState',
+            'sourceBuffers',
+        ],
+        methods: [
+            'addSourceBuffer',
+            'endOfStream',
+            'removeSourceBuffer',
+            'clearLiveSeekableRange',
+            'setLiveSeekableRange',
+        ],
+        events: [
+            'sourceclose',
+            'sourceended',
+            'sourceopen',
+        ],
+    },
+    sourceBuffer: {
+        propertys: [
+            'mode',
+            'updating',
+            'buffered',
+            'timestampOffset',
+            'audioTracks',
+            'videoTracks',
+            'textTracks',
+            'appendWindowStart',
+            'appendWindowEnd',
+            'trackDefaults',
+        ],
+        methods: [
+            'appendBuffer',
+            'appendStream',
+            'abort',
+            'remove',
+        ],
+        events: [
+            'abort',
+            'error',
+            'update',
+            'updateend',
+            'updatestart',
+        ],
+    },
+    sourceBufferList: {
+        propertys: [
+            'length',
+        ],
+        events: [
+            'addsourcebuffer',
+            'removesourcebuffer',
+        ],
+    },
+};

packages/artplayer-plugin-flv/src/creatMediaSource.js

@@ -0,0 +1,43 @@
+import config from './config';
+
+export default class CreatMediaSource {
+    constructor(flv) {
+        this.flv = flv;
+        this.creatUrl();
+        this.eventBind();
+    }
+
+    creatUrl() {
+        const {
+            options: { mediaElement },
+            events: { destroyEvents },
+        } = this.flv;
+        this.mediaSource = new MediaSource();
+        const url = URL.createObjectURL(this.mediaSource);
+        destroyEvents.push(() => {
+            URL.revokeObjectURL(url);
+        });
+        mediaElement.src = url;
+    }
+
+    eventBind() {
+        const {
+            events: { proxy },
+        } = this.flv;
+
+        config.mediaSource.events.forEach(eventName => {
+            proxy(this.mediaSource, eventName, event => {
+                this.flv.emit(`mediaSource:${event.type}`, event);
+            });
+        });
+
+        config.sourceBufferList.events.forEach(eventName => {
+            proxy(this.mediaSource.sourceBuffers, eventName, event => {
+                this.flv.emit(`sourceBuffers:${event.type}`, event);
+            });
+            proxy(this.mediaSource.activeSourceBuffers, eventName, event => {
+                this.flv.emit(`activeSourceBuffers:${event.type}`, event);
+            });
+        });
+    }
+}

packages/artplayer-plugin-flv/src/creatWorker.js

@@ -0,0 +1,58 @@
+export default class CreatWorker {
+    constructor() {
+        this.workers = new Map();
+    }
+
+    static fnToStr(fn) {
+        return `
+           self.onmessage = event => {
+               return self.postMessage((${fn}).apply(null, event.data));
+           }
+         `;
+    }
+
+    static create(fn) {
+        const blob = new Blob([CreatWorker.fnToStr(fn)], {
+            type: 'application/javascript',
+        });
+        const objectURL = window.URL.createObjectURL(blob);
+        const worker = new Worker(objectURL);
+        worker.kill = () => {
+            URL.revokeObjectURL(objectURL);
+            worker.terminate();
+        };
+        worker.post = args =>
+            new Promise((resolve, reject) => {
+                worker.onmessage = event => {
+                    resolve(event.data);
+                };
+                worker.onerror = error => {
+                    reject(error);
+                };
+                worker.postMessage(args);
+            });
+        return worker;
+    }
+
+    add(name, fn) {
+        if (!this.workers.has(name)) {
+            this.workers.set(name, CreatWorker.create(fn));
+        }
+    }
+
+    run(name, ...args) {
+        const worker = this.workers.get(name);
+        return worker.post(args);
+    }
+
+    kill(name) {
+        const worker = this.workers.get(name);
+        worker.kill();
+    }
+
+    killAll() {
+        this.workers.forEach(worker => {
+            worker.kill();
+        });
+    }
+}

packages/artplayer-plugin-flv/src/eventProxy.js

@@ -0,0 +1,17 @@
+export default class EventProxy {
+    constructor() {
+        this.destroyEvents = [];
+        this.proxy = this.proxy.bind(this);
+    }
+
+    proxy(target, name, callback, option = {}) {
+        target.addEventListener(name, callback, option);
+        this.destroyEvents.push(() => {
+            target.removeEventListener(name, callback, option);
+        });
+    }
+
+    destroy() {
+        this.destroyEvents.forEach(event => event());
+    }
+}

packages/artplayer-plugin-flv/src/flvParse/fetchStream.js

@@ -0,0 +1,49 @@
+import { errorHandle } from '../utils';
+
+export default function fetchStream(flv, url) {
+    flv.emit('flvFetchStart');
+    fetch(url).then(response => {
+        errorHandle(
+            response.ok && response.status >= 200 && response.status <= 299,
+            `${response.status} ${response.statusText}`,
+        );
+        const contentType = response.headers.get('content-type');
+        errorHandle(contentType.includes('x-flv'), 'The resource does not seem to be a flv file');
+        return new Response(
+            new ReadableStream({
+                start(controller) {
+                    const reader = response.body.getReader();
+
+                    flv.on('destroy', () => {
+                        reader.cancel();
+                    });
+
+                    flv.on('readerCancel', () => {
+                        reader.cancel();
+                    });
+
+                    (function read() {
+                        reader
+                            .read()
+                            .then(({ done, value }) => {
+                                if (done) {
+                                    flv.emit('flvFetchEnd');
+                                    controller.close();
+                                    return;
+                                }
+                                flv.emit('flvFetching', new Uint8Array(value));
+                                controller.enqueue(value);
+                                read();
+                            })
+                            .catch(error => {
+                                throw error;
+                            });
+                    })();
+                },
+                cancel() {
+                    flv.emit('flvFetchCancel');
+                },
+            }),
+        );
+    });
+}

packages/artplayer-plugin-flv/src/flvParse/index.js

@@ -0,0 +1,110 @@
+import fetchStream from './fetchStream';
+import readFile from './readFile';
+import parseScripTag from './parseScripTag';
+import { mergeTypedArrays, getUint8Sum, bin2String } from '../utils';
+
+export default class FlvParse {
+    constructor(flv) {
+        this.flv = flv;
+        const { url, debug } = flv.options;
+        this.uint8 = new Uint8Array(0);
+        this.index = 0;
+        this.header = null;
+        this.scripTag = null;
+        this.tags = [];
+        this.done = false;
+
+        flv.on('flvFetchStart', () => {
+            if (debug) {
+                console.log('[flv-fetch-start]', url);
+            }
+        });
+
+        flv.on('flvFetchCancel', () => {
+            if (debug) {
+                console.log('[flv-fetch-cancel]');
+            }
+        });
+
+        flv.on('flvFetching', uint8 => {
+            this.uint8 = mergeTypedArrays(this.uint8, uint8);
+            this.parse();
+        });
+
+        flv.on('flvFetchEnd', uint8 => {
+            if (debug) {
+                console.log('[flv-fetch-end]');
+            }
+            this.done = true;
+            if (uint8) {
+                this.uint8 = uint8;
+                this.index = 0;
+                this.header = null;
+                this.scripTag = null;
+                this.tags = [];
+                this.parse();
+            }
+            flv.emit('flvParseDone');
+            if (debug) {
+                console.log('[flv-parse-done]');
+            }
+        });
+
+        if (typeof url === 'string') {
+            fetchStream(flv, url);
+        } else {
+            readFile(flv, url);
+        }
+    }
+
+    parse() {
+        const { debug } = this.flv.options;
+        if (this.uint8.length >= 13 && !this.header) {
+            const header = Object.create(null);
+            header.signature = bin2String(this.read(3));
+            [header.version] = this.read(1);
+            [header.flags] = this.read(1);
+            header.headersize = getUint8Sum(this.read(4));
+            this.header = header;
+            this.read(4);
+            this.flv.emit('flvParseHeader', this.header);
+            if (debug) {
+                console.log('[flv-parse-header]', this.header);
+            }
+        }
+
+        while (this.index < this.uint8.length) {
+            const tag = Object.create(null);
+            [tag.tagType] = this.read(1);
+            tag.dataSize = getUint8Sum(this.read(3));
+            tag.timestamp = this.read(4);
+            tag.streamID = this.read(3);
+            tag.body = this.read(tag.dataSize);
+            this.tags.push(tag);
+            this.read(4);
+
+            switch (tag.tagType) {
+                case 18:
+                    this.scripTag = parseScripTag(tag.body);
+                    this.flv.emit('parseScripTag', this.scripTag);
+                    if (debug) {
+                        console.log('[flv-parse-scrip-tag]', this.scripTag);
+                    }
+                    break;
+                default:
+                    break;
+            }
+
+            this.flv.emit('flvParseTag', tag);
+        }
+    }
+
+    read(length) {
+        const tempUint8 = new Uint8Array(length);
+        for (let i = 0; i < length; i += 1) {
+            tempUint8[i] = this.uint8[this.index];
+            this.index += 1;
+        }
+        return tempUint8;
+    }
+}

packages/artplayer-plugin-flv/src/flvParse/parseScripTag.js

@@ -0,0 +1,104 @@
+import { getUint8Sum, readUint8, bin2String, bin2Boolean, bin2Float, errorHandle } from '../utils';
+
+export default function parseScripTag(scripTagBody) {
+    const readScripTag = readUint8(scripTagBody);
+    const metadata = Object.create(null);
+    const amf1 = Object.create(null);
+    const amf2 = Object.create(null);
+
+    [amf1.type] = readScripTag(1);
+    errorHandle(amf1.type === 2, `AMF: [amf1] type expect 2, but got ${amf1.type}`);
+    amf1.size = getUint8Sum(readScripTag(2));
+    amf1.string = bin2String(readScripTag(amf1.size));
+
+    [amf2.type] = readScripTag(1);
+    errorHandle(amf2.type === 8, `AMF: [amf1] type expect 8, but got ${amf2.type}`);
+    amf2.size = getUint8Sum(readScripTag(4));
+    amf2.metaData = Object.create(null);
+
+    function getValue(type) {
+        let value = null;
+        if (type !== undefined) {
+            switch (type) {
+                case 0:
+                    value = bin2Float(readScripTag(8));
+                    break;
+                case 1:
+                    value = bin2Boolean(readScripTag(1)[0]);
+                    break;
+                case 2: {
+                    const valueLength = getUint8Sum(readScripTag(2));
+                    value = bin2String(readScripTag(valueLength));
+                    break;
+                }
+                case 3: {
+                    value = Object.create(null);
+                    let endObject = false;
+                    while (!endObject && readScripTag.index < scripTagBody.length) {
+                        const nameLength = getUint8Sum(readScripTag(2));
+                        const name = bin2String(readScripTag(nameLength));
+                        const type = readScripTag(1)[0];
+                        if (name) {
+                            value[name] = getValue(type);
+                        }
+                        if (type === 9) {
+                            endObject = true;
+                        }
+                    }
+                    break;
+                }
+                case 8: {
+                    value = Object.create(null);
+                    let endArray = false;
+                    while (!endArray && readScripTag.index < scripTagBody.length) {
+                        const nameLength = getUint8Sum(readScripTag(2));
+                        const name = bin2String(readScripTag(nameLength));
+                        const type = readScripTag(1)[0];
+                        if (name) {
+                            value[name] = getValue(type);
+                        }
+                        if (type === 9) {
+                            endArray = true;
+                        }
+                    }
+                    break;
+                }
+                case 10: {
+                    const valueLength = getUint8Sum(readScripTag(4));
+                    value = [];
+                    for (let index = 0; index < valueLength; index += 1) {
+                        const itemType = readScripTag(1)[0];
+                        value.push(getValue(itemType));
+                    }
+                    break;
+                }
+                case 12: {
+                    const valueLength = getUint8Sum(readScripTag(4));
+                    value = bin2String(readScripTag(valueLength));
+                    break;
+                }
+                default:
+                    console.log(readScripTag(scripTagBody.length - readScripTag.index - 1));
+                    errorHandle(false, `AMF: Unknown metaData type: ${type}`);
+                    break;
+            }
+        }
+        return value;
+    }
+
+    while (readScripTag.index < scripTagBody.length) {
+        const nameLength = getUint8Sum(readScripTag(2));
+        const name = bin2String(readScripTag(nameLength));
+        const type = readScripTag(1)[0];
+        if (name) {
+            amf2.metaData[name] = getValue(type);
+        }
+    }
+
+    errorHandle(readScripTag.index === scripTagBody.length, 'AMF: Seems to be incompletely parsed');
+    errorHandle(amf2.size === Object.keys(amf2.metaData).length, 'AMF: [amf2] length does not match');
+
+    metadata.amf1 = amf1;
+    metadata.amf2 = amf2;
+    return metadata;
+}

packages/artplayer-plugin-flv/src/flvParse/readFile.js

@@ -0,0 +1,11 @@
+export default function readFile(flv, file) {
+    flv.emit('flvFetchStart');
+    const { proxy } = flv.events;
+    const reader = new FileReader();
+    proxy(reader, 'load', e => {
+        const buffer = e.target.result;
+        const uint8 = new Uint8Array(buffer);
+        flv.emit('flvFetchEnd', uint8);
+    });
+    reader.readAsArrayBuffer(file);
+}

packages/artplayer-plugin-flv/src/index.js

@@ -0,0 +1,58 @@
+import Emitter from 'tiny-emitter';
+import checkSupport from './utils/checkSupport';
+import EventProxy from './eventProxy';
+import CreatWorker from './creatWorker';
+import CreatMediaSource from './creatMediaSource';
+import FlvParse from './flvParse';
+import * as utils from './utils';
+import config from './config';
+
+let id = 0;
+class Flv extends Emitter {
+    constructor(options) {
+        super();
+        this.options = Object.assign({}, Flv.DEFAULTS, options);
+        checkSupport(this.options);
+        this.events = new EventProxy(this);
+        this.workers = new CreatWorker(this);
+        this.mediaSource = new CreatMediaSource(this);
+        this.flvData = new FlvParse(this);
+        id += 1;
+        this.id = id;
+        Flv.instances.push(this);
+    }
+
+    static get DEFAULTS() {
+        return {
+            mediaElement: '',
+            url: '',
+            debug: false,
+        };
+    }
+
+    static get version() {
+        return '__VERSION__';
+    }
+
+    static get config() {
+        return config;
+    }
+
+    static get utils() {
+        return utils;
+    }
+
+    destroy() {
+        this.events.destroy();
+        this.workers.killAll();
+        Flv.instances.splice(Flv.instances.indexOf(this), 1);
+        this.emit('destroy');
+    }
+}
+
+Object.defineProperty(Flv, 'instances', {
+    value: [],
+});
+
+window.Flv = Flv;
+export default Flv;

packages/artplayer-plugin-flv/src/utils/checkSupport.js

@@ -0,0 +1,24 @@
+import { errorHandle } from '.';
+
+export default function checkSupport(options) {
+    const { mediaElement, url } = options;
+    errorHandle(mediaElement instanceof HTMLVideoElement, 'The first parameter is not a video tag element');
+    errorHandle(
+        typeof url === 'string' || (url instanceof File && url.type === 'video/x-flv'),
+        'The second parameter is not a string type or flv file',
+    );
+
+    const MP4H264MimeCodec = 'video/mp4; codecs="avc1.42001E, mp4a.40.2"';
+    const canPlay = mediaElement.canPlayType(MP4H264MimeCodec);
+    errorHandle(
+        window.MediaSource &&
+            window.MediaSource.isTypeSupported(MP4H264MimeCodec) &&
+            (canPlay === 'probably' || canPlay === 'maybe'),
+        `Unsupported MIME type or codec: ${MP4H264MimeCodec}`,
+    );
+
+    errorHandle(typeof window.Promise === 'function', "Unsupported 'Promise' method");
+    errorHandle(typeof window.fetch === 'function', "Unsupported 'fetch' method");
+    errorHandle(typeof window.Worker === 'function', "Unsupported 'Worker' method");
+    errorHandle(typeof window.ReadableStream === 'function', "Unsupported 'ReadableStream' method");
+}

packages/artplayer-plugin-flv/src/utils/flvError.js

@@ -0,0 +1,9 @@
+export default class FlvError extends Error {
+    constructor(message, context) {
+        super(message);
+        if (typeof Error.captureStackTrace === 'function') {
+            Error.captureStackTrace(this, context || this.constructor);
+        }
+        this.name = 'FlvError';
+    }
+} 

packages/artplayer-plugin-flv/src/utils/index.js

@@ -0,0 +1,63 @@
+import FlvError from './flvError';
+
+export function errorHandle(condition, msg) {
+    if (!condition) {
+        throw new FlvError(msg);
+    }
+}
+
+export function mergeTypedArrays(a, b) {
+    const c = new a.constructor(a.length + b.length);
+    c.set(a);
+    c.set(b, a.length);
+    return c;
+}
+
+export function sleep(ms = 0) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export function getUint8Sum(arr) {
+    return arr.reduce((totle, num, index) => totle + num * 256 ** (arr.length - index - 1), 0);
+}
+
+export function string2Bin(str) {
+    const result = [];
+    for (let i = 0; i < str.length; i += 1) {
+        result.push(Number(str.charCodeAt(i).toString(10)));
+    }
+    return result;
+}
+
+export function bin2String(array) {
+    return String.fromCharCode.call(String, ...array);
+}
+
+export function bin2Float(array) {
+    const view = new DataView(new ArrayBuffer(array.length));
+    array.forEach((b, i) => {
+        view.setUint8(i, b);
+    });
+    return view.getFloat64(0);
+}
+
+export function bin2Boolean(bin) {
+    return bin === 1;
+}
+
+export function log(name, msg = '') {
+    console.log(`[${name}] ${msg}`);
+}
+
+export function readUint8(uint8) {
+    let index = 0;
+    return function read(length) {
+        const tempUint8 = new Uint8Array(length);
+        for (let i = 0; i < length; i += 1) {
+            tempUint8[i] = uint8[index];
+            index += 1;
+        }
+        read.index = index;
+        return tempUint8;
+    };
+}

packages/artplayer-plugin-gif/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs

packages/artplayer-plugin-gif/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/artplayer-plugin-gif/README.md

@@ -0,0 +1,63 @@
+# artplayer-plugin-gif
+
+Gif plugin for ArtPlayer, use [gifshot](https://github.com/yahoo/gifshot) as a dependency
+
+## Demo
+
+[Checkout the demo](https://artplayer.org/gif/) from Github Pages
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-plugin-gif
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-plugin-gif
+```
+
+```js
+import artplayerPluginGif from 'artplayer-plugin-gif';
+```
+
+Or umd builds are also available
+
+```html
+<script src="artplayer-plugin-gif.js"></script>
+```
+
+Will expose the global variable to `window.artplayerPluginGif`.
+
+## Usage
+
+This will add a button called "GIF" in the bottom control bar.
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+    plugins: [artplayerPluginGif],
+});
+```
+
+Or can be called via api
+
+```js
+art.plugins.artplayerPluginGif.create(
+    {
+        // some configuration
+        // https://github.com/yahoo/gifshot#options
+    },
+    function(imageUrl) {
+        console.log(imageUrl);
+    },
+);
+```
+
+## License
+
+MIT © [Harvey Zack](https://www.zhw-island.com/)

packages/artplayer-plugin-gif/dist/artplayer-plugin-gif.js

@@ -0,0 +1,8 @@
+/*!
+ * artplayer-plugin-gif.js v3.1.1
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2019 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["artplayer-plugin-gif"]=t()}(this,function(){"use strict";var n=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e};var x=function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),i.forEach(function(e){n(t,e,r[e])})}return t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function e(e,t){return e(t={exports:{}},t.exports),t.exports}var k=e(function(C,e){!function(e,P,t,H){var r,i,z={URL:e.URL||e.webkitURL||e.mozURL||e.msURL,getUserMedia:(i=t.getUserMedia||t.webkitGetUserMedia||t.mozGetUserMedia||t.msGetUserMedia,i?i.bind(t):i),requestAnimFrame:e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame,requestTimeout:function(r,i){if(r=r||z.noop,i=i||0,!z.requestAnimFrame)return setTimeout(r,i);var n=(new Date).getTime(),o=new Object,a=z.requestAnimFrame;return o.value=a(function e(){var t=(new Date).getTime();i<=t-n?r.call():o.value=a(e)}),o},Blob:e.Blob||e.BlobBuilder||e.WebKitBlobBuilder||e.MozBlobBuilder||e.MSBlobBuilder,btoa:(r=e.btoa||function(e){for(var t="",r=0,i=e.length,n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",o=void 0,a=void 0,s=void 0,c=void 0,d=void 0,l=void 0,u=void 0;r<i;)c=(o=e.charCodeAt(r++))>>2,d=(3&o)<<4|(a=e.charCodeAt(r++))>>4,l=(15&a)<<2|(s=e.charCodeAt(r++))>>6,u=63&s,isNaN(a)?l=u=64:isNaN(s)&&(u=64),t=t+n.charAt(c)+n.charAt(d)+n.charAt(l)+n.charAt(u);return t},r?r.bind(e):z.noop),isObject:function(e){return e&&"[object Object]"===Object.prototype.toString.call(e)},isEmptyObject:function(e){return z.isObject(e)&&!Object.keys(e).length},isArray:function(e){return e&&Array.isArray(e)},isFunction:function(e){return e&&"function"==typeof e},isElement:function(e){return e&&1===e.nodeType},isString:function(e){return"string"==typeof e||"[object String]"===Object.prototype.toString.call(e)},isSupported:{canvas:function(){var e=P.createElement("canvas");return e&&e.getContext&&e.getContext("2d")},webworkers:function(){return e.Worker},blob:function(){return z.Blob},Uint8Array:function(){return e.Uint8Array},Uint32Array:function(){return e.Uint32Array},videoCodecs:function(){var e=P.createElement("video"),t={mp4:!1,h264:!1,ogv:!1,ogg:!1,webm:!1};try{e&&e.canPlayType&&(t.mp4=""!==e.canPlayType('video/mp4; codecs="mp4v.20.8"'),t.h264=""!==(e.canPlayType('video/mp4; codecs="avc1.42E01E"')||e.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')),t.ogv=""!==e.canPlayType('video/ogg; codecs="theora"'),t.ogg=""!==e.canPlayType('video/ogg; codecs="theora"'),t.webm=-1!==e.canPlayType('video/webm; codecs="vp8, vorbis"'))}catch(e){}return t}()},noop:function(){},each:function(e,t){var r=void 0,i=void 0;if(z.isArray(e))for(r=-1,i=e.length;++r<i&&!1!==t(r,e[r]););else if(z.isObject(e))for(r in e)if(e.hasOwnProperty(r)&&!1===t(r,e[r]))break},mergeOptions:function(i,n){if(z.isObject(i)&&z.isObject(n)&&Object.keys){var o={};return z.each(i,function(e,t){o[e]=i[e]}),z.each(n,function(e,t){var r=n[e];z.isObject(r)&&i[e]?o[e]=z.mergeOptions(i[e],r):o[e]=r}),o}},setCSSAttr:function(r,e,t){z.isElement(r)&&(z.isString(e)&&z.isString(t)?r.style[e]=t:z.isObject(e)&&z.each(e,function(e,t){r.style[e]=t}))},removeElement:function(e){z.isElement(e)&&e.parentNode&&e.parentNode.removeChild(e)},createWebWorker:function(e){if(!z.isString(e))return{};try{var t=new z.Blob([e],{type:"text/javascript"}),r=z.URL.createObjectURL(t);return{objectUrl:r,worker:new Worker(r)}}catch(e){return""+e}},getExtension:function(e){return e.substr(e.lastIndexOf(".")+1,e.length)},getFontSize:function(){var e=0<arguments.length&&arguments[0]!==H?arguments[0]:{};if(!P.body||!1===e.resizeFont)return e.fontSize;var t=e.text,r=e.gifWidth,i=parseInt(e.fontSize,10),n=parseInt(e.minFontSize,10),o=P.createElement("div"),a=P.createElement("span");for(o.setAttribute("width",r),o.appendChild(a),a.innerHTML=t,a.style.fontSize=i+"px",a.style.textIndent="-9999px",a.style.visibility="hidden",P.body.appendChild(a);a.offsetWidth>r&&n<=i;)a.style.fontSize=--i+"px";return P.body.removeChild(a),i+"px"},webWorkerError:!1},n=Object.freeze({default:z}),u={validate:function(i){i=z.isObject(i)?i:{};var n={};return z.each(u.validators,function(e,t){var r=t.errorCode;if(!i[r]&&!t.condition)return!((n=t).error=!0)}),delete n.condition,n},isValid:function(e){var t=!0!==u.validate(e).error;return t},validators:[{condition:z.isFunction(z.getUserMedia),errorCode:"getUserMedia",errorMsg:"The getUserMedia API is not supported in your browser"},{conditioLine truncated

packages/artplayer-plugin-gif/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "artplayer-plugin-gif",
+  "version": "3.1.2",
+  "description": "Gif plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-gif.js",
+  "style": "dist/artplayer-plugin-gif.css",
+  "scripts": {
+    "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",
+  "dependencies": {
+    "b64-to-blob": "^1.2.19",
+    "blob-util": "^2.0.2",
+    "gifshot": "^0.4.5"
+  }
+}

packages/artplayer-plugin-gif/src/index.js

@@ -0,0 +1,160 @@
+import gifshot from 'gifshot';
+import b64toBlob from 'b64-to-blob';
+
+function i18nMix(i18n) {
+    i18n.update({
+        'zh-cn': {
+            'Long press, gif length is between 1 second and 10 seconds': '长按，gif 长度为 1 ~ 10 秒',
+            'Gif time is too short': 'Gif 时间太短',
+            'Start creating gif...': '开始创建 gif...',
+            'Create gif successfully': '创建 gif 成功',
+            'There is another gif in the processing': '正有另一个 gif 在创建中',
+            'Release the mouse to start': '放开鼠标即可开始',
+        },
+        'zh-tw': {
+            'Long press, gif length is between 1 second and 10 seconds': '長按，gif 長度為 1 ~ 10 秒',
+            'Gif time is too short': 'Gif 時間太短',
+            'Start creating gif...': '開始創建 gif...',
+            'Create gif successfully': '創建 gif 成功',
+            'There is another gif in the processing': '正有另一個 gif 在創建中',
+            'Release the mouse to start': '放開鼠標即可開始',
+        },
+    });
+}
+
+function artplayerPluginGif(art) {
+    const { errorHandle, clamp, downloadImage } = art.constructor.utils;
+    const {
+        i18n,
+        notice,
+        layers,
+        controls,
+        player,
+        loading,
+        option: { theme, title },
+        events: { proxy },
+        template: { $video },
+    } = art;
+
+    i18nMix(i18n);
+
+    layers.add({
+        name: 'artplayer-plugin-gif-progress',
+        style: {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            height: '3px',
+            width: '0%',
+            'background-color': theme,
+        },
+    });
+
+    const $progress = layers['artplayer-plugin-gif-progress'].$ref;
+    const timeLimit = 10000;
+    let isProcessing = false;
+    let pressStartTime = 0;
+    let progressTimer = null;
+    let isPress = false;
+    let offset = 0;
+
+    function cleanTimer() {
+        $progress.style.width = '0%';
+        clearTimeout(progressTimer);
+        progressTimer = null;
+    }
+
+    function createGif() {
+        cleanTimer();
+        const pressTime = new Date() - pressStartTime;
+        if (isProcessing) {
+            notice.show(i18n.get('There is another gif in the processing'));
+        } else if (pressTime < 1000) {
+            notice.show(i18n.get('Gif time is too short'));
+        } else {
+            const numFrames = Math.floor(clamp(pressTime, 1000, timeLimit) / 100);
+            const { videoWidth, videoHeight } = $video;
+            art.plugins.artplayerPluginGif.create(
+                {
+                    numFrames,
+                    offset: Math.floor(offset),
+                    gifHeight: 200,
+                    gifWidth: (videoWidth / videoHeight) * 200,
+                },
+                image => {
+                    downloadImage(image, `${title || 'unnamed'}.gif`);
+                },
+            );
+        }
+    }
+
+    controls.add({
+        name: 'artplayer-plugin-gif',
+        position: 'right',
+        html: 'GIF',
+        mounted: $gif => {
+            proxy($gif, 'mousedown', () => {
+                isPress = true;
+                cleanTimer();
+                offset = player.currentTime;
+                pressStartTime = new Date();
+                notice.show(i18n.get('Long press, gif length is between 1 second and 10 seconds'));
+                (function loop() {
+                    progressTimer = setTimeout(() => {
+                        const width = parseInt($progress.style.width, 10);
+                        if (width <= 100) {
+                            $progress.style.width = `${width + 1}%`;
+                            loop();
+                        } else {
+                            notice.show(i18n.get('Release the mouse to start'));
+                        }
+                    }, timeLimit / 100);
+                })();
+            });
+
+            proxy(document, 'mouseup', () => {
+                if (isPress) {
+                    isPress = false;
+                    createGif();
+                    offset = 0;
+                }
+            });
+        },
+    });
+
+    return {
+        name: 'artplayerPluginGif',
+        create(config = {}, callback) {
+            isProcessing = true;
+            loading.show();
+            art.emit('artplayerPluginGif:start');
+            notice.show(i18n.get('Start creating gif...'), false);
+            gifshot.createGIF(
+                {
+                    ...config,
+                    video: [$video.src],
+                    crossOrigin: 'anonymous',
+                },
+                obj => {
+                    if (obj.error) {
+                        notice.show(obj.errorMsg);
+                        errorHandle(false, obj.errorMsg);
+                    } else if (typeof callback === 'function') {
+                        const base64String = obj.image.split(',')[1];
+                        const blob = b64toBlob(base64String, 'image/gif');
+                        const blobUrl = URL.createObjectURL(blob);
+                        notice.show(i18n.get('Create gif successfully'));
+                        art.emit('artplayerPluginGif', blobUrl);
+                        callback(blobUrl);
+                    }
+                    isProcessing = false;
+                    loading.hide();
+                    art.emit('artplayerPluginGif:end');
+                },
+            );
+        },
+    };
+}
+
+window.artplayerPluginGif = artplayerPluginGif;
+export default artplayerPluginGif;

packages/artplayer-react/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs

packages/artplayer-react/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/artplayer-react/README.md

@@ -0,0 +1,42 @@
+# artplayer-react
+
+React Component for Artplayer, It is recommended to package itself according to actual business needs.
+
+## Demo
+
+[Checkout the demo](https://codesandbox.io/s/n74859y9rl) from Github Pages
+
+## Install
+
+Install with `npm`
+
+```
+$ npm install artplayer-react
+```
+
+Or install with `yarn`
+
+```
+$ yarn add artplayer-react
+```
+
+## Usage
+
+```js
+import ArtplayerComponent from 'artplayer-react';
+import 'artplayer-react/dist/artplayer-react.css';
+
+// ...
+<ArtplayerComponent
+    option={
+        {
+            // option, no 'container' property required
+        }
+    }
+    getInstance={ins => console.log(ins)} // get the instance
+/>;
+```
+
+## License
+
+MIT © [Harvey Zack](https://www.zhw-island.com/)

packages/artplayer-react/dist/artplayer-react.css

@@ -0,0 +1 @@
+.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);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;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-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 .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-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%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack: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;-webkit-transition:all .2s ease-in-out;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:-webkit-box;dispLine truncated

packages/artplayer-react/dist/artplayer-react.js

@@ -0,0 +1,8 @@
+/*!
+ * artplayer-react.js v3.1.1
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2019 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self)["artplayer-react"]=e()}(this,function(){"use strict";var a=function(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],0<=e.indexOf(n)||(i[n]=t[n]);return i};var r=function(t,e){if(null==t)return{};var n,r,i=a(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(r=0;r<o.length;r++)n=o[r],0<=e.indexOf(n)||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i};var i=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 o=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),r.forEach(function(t){i(e,t,n[t])})}return e},jt="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function t(t,e){return t(e={exports:{}},e.exports),e.exports}var s=t(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 r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(t){return n(t)}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(t)}e.exports=r});var c=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var e=function(t,e,n){return e&&u(t.prototype,e),n&&u(t,n),t};var n=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var l=function(t,e){return!e||"object"!==s(e)&&"function"!=typeof e?n(t):e},f=t(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}),p=t(function(n){function r(t,e){return n.exports=r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},r(t,e)}n.exports=r});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&&p(t,e)},h=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var $t=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var n,r,i=function(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),o=1;o<arguments.length;o++){for(var a in n=Object(arguments[o]))y.call(n,a)&&(i[a]=n[a]);if(h){r=h(n);for(var s=0;s<r.length;s++)v.call(n,r[s])&&(i[r[s]]=n[r[s]])}}return i},m="function"==typeof Symbol&&Symbol.for,g=m?Symbol.for("react.element"):60103,b=m?Symbol.for("react.portal"):60106,w=m?Symbol.for("react.fragment"):60107,x=m?Symbol.for("react.strict_mode"):60108,k=m?Symbol.for("react.profiler"):60114,S=m?Symbol.for("react.provider"):60109,E=m?Symbol.for("react.context"):60110,P=m?Symbol.for("react.concurrent_mode"):60111,$=m?Symbol.for("react.forward_ref"):60112,_=m?Symbol.for("react.suspense"):60113,O=m?Symbol.for("react.memo"):60115,R=m?Symbol.for("react.lazy"):60116,C="function"==typeof Symbol&&Symbol.iterator;function j(t){for(var e=arguments.length-1,n="https://reactjs.org/docs/error-decoder.html?invariant="+t,r=0;r<e;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);!function(t,e,n,r,i,o,a,s){if(!t){if((t=void 0)===e)t=Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,o,a,s],u=0;(t=Error(e.replace(/%s/g,function(){return c[u++]}))).name="Invariant Violation"}throw t.framesToPop=1,t}}(!1,"Minified React error #"+t+"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ",n)}var T={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceStLine truncated

packages/artplayer-react/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "artplayer-react",
+  "version": "3.1.2",
+  "description": "React Component for Artplayer",
+  "main": "dist/artplayer-react.js",
+  "style": "dist/artplayer-react.css",
+  "scripts": {
+    "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",
+  "dependencies": {
+    "artplayer": "latest",
+    "react": "latest"
+  }
+}

packages/artplayer-react/src/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Artplayer from 'artplayer';
+import 'artplayer/dist/artplayer.css';
+
+export default class ArtplayerComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        Artplayer.utils.errorHandle(
+            props.option && typeof props.option === 'object',
+            "The prop 'option' object cannot be missing",
+        );
+        this.instance = null;
+        this.artRef = React.createRef();
+    }
+
+    componentDidMount() {
+        const { option, getInstance } = this.props;
+        this.instance = new Artplayer({
+            ...option,
+            container: this.artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(this.instance);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.instance && this.instance.destroy) {
+            this.instance.destroy();
+        }
+    }
+
+    render() {
+        const { option, getInstance, ...rest } = this.props;
+        return React.createElement('div', {
+            ref: this.artRef,
+            ...rest,
+        });
+    }
+}

packages/artplayer-tool-thumbnail/.npmignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.cache
+docs

packages/artplayer-tool-thumbnail/.npmrc

@@ -0,0 +1 @@
+package-lock=false