Merge branch 'master' into master

README.md

@@ -46,10 +46,20 @@ Using DPlayer on your project? [Let me know!](https://github.com/DIYgod/DPlayer/
 
 ## Thanks
 
+## Special Sponsors
+
+<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
+    <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
+</a>
+
+<a href="https://www.9ccms.net" target="_blank">
+    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+</a>
+
 ### Sponsors
 
-<a href="https://pear.hk/" target="_blank">
-    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
 <a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
     <img width="222px" src="https://imgur.com/apG1uKf.png">
@@ -97,6 +107,7 @@ Feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/DPlay
 
 ## Who use DPlayer?
 
+- [学习强国](https://itunes.apple.com/cn/app/%E5%AD%A6%E4%B9%A0%E5%BC%BA%E5%9B%BD/id1426355645?mt=8): “学习强国”学习平台精心打造的手机客户端
 - [小红书](https://www.xiaohongshu.com/): 中国最大的生活社区分享平台，同时也是发现全球好物的电商平台
 - [极客时间](https://time.geekbang.org/): 极客邦科技出品的一款 IT 内容知识服务 App
 - [嘀哩嘀哩](http://www.dilidili.wang/): 兴趣使然的无名小站（D站）
@@ -119,7 +130,6 @@ We accept donations through these channels:
 - [Paypal](https://www.paypal.me/DIYgod)
 - [WeChat Pay](https://i.imgur.com/aq6PtWa.png)
 - [Alipay](https://i.imgur.com/wv1Pj2k.png)
-- Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
 
 ## Recurring Pledges
 

demo/demo.js

@@ -19,10 +19,10 @@ function handleEvent () {
         const $clickDom = e.currentTarget;
         const isShowStatus = $clickDom.getAttribute('data-show');
 
-        if (!!isShowStatus) {
+        if (isShowStatus) {
             document.getElementById('float-dplayer').style.display = 'none';
         } else {
-          $clickDom.setAttribute('data-show', 1);
+            $clickDom.setAttribute('data-show', 1);
             document.getElementById('float-dplayer').style.display = 'block';
         }
     });
@@ -42,16 +42,16 @@ function initPlayers () {
         preload: 'none',
         screenshot: true,
         video: {
-          url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
-          pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
-          thumbnails: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
+            url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
+            pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
+            thumbnails: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
         },
         subtitle: {
-          url: 'subtitle test'
+            url: 'subtitle test'
         },
         danmaku: {
-          id: '9E2E3368B56CDBB4',
-          api: 'https://api.prprpr.me/dplayer/'
+            id: '9E2E3368B56CDBB4',
+            api: 'https://api.prprpr.me/dplayer/'
         }
     });
     // dp1
@@ -60,9 +60,9 @@ function initPlayers () {
         preload: 'none',
         screenshot: true,
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
         },
         subtitle: {
             url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
@@ -82,13 +82,13 @@ function initPlayers () {
         loop: true,
         screenshot: true,
         hotkey: true,
-        logo: 'https://moeplayer.b0.upaiyun.com/dplayer/DPlayer.png',
+        logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
         volume: 0.2,
         mutex: true,
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg',
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
             type: 'auto'
         },
         subtitle: {
@@ -151,11 +151,11 @@ function initPlayers () {
     //             type: 'hls'
     //         }, {
     //             name: 'SD',
-    //             url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
+    //             url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
     //             type: 'normal'
     //         }],
     //         defaultQuality: 0,
-    //         pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png'
+    //         pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png'
     //     }
     // });
 
@@ -244,8 +244,8 @@ function clearPlayers () {
 function switchDPlayer () {
     if (dp2.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') {
         dp2.switchVideo({
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/flowerdance.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/flowerdance.jpg',
+            url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
+            pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
             type: 'auto',
         }, {
             id: '5rGf5Y2X55qu6Z2p',
@@ -255,9 +255,9 @@ function switchDPlayer () {
         });
     } else {
         dp2.switchVideo({
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg',
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
             type: 'auto'
         }, {
             id: '9E2E3368B56CDBB42',

docs/README.md

@@ -8,8 +8,18 @@ search: english
 
 ## Special Sponsors
 
-<a href="https://pear.hk/" target="_blank">
-    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
+    <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
+</a>
+
+<a href="https://www.9ccms.net" target="_blank">
+    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+</a>
+
+## Sponsors
+
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
 <a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
     <img width="222px" src="https://imgur.com/apG1uKf.png">
@@ -63,8 +73,8 @@ const dp = new DPlayer({
 Work with module bundler:
 
 ```js
-import 'DPlayer/dist/DPlayer.min.css';
-import DPlayer from 'DPlayer';
+import 'dplayer/dist/DPlayer.min.css';
+import DPlayer from 'dplayer';
 
 const dp = new DPlayer(options);
 ```

docs/config.js

@@ -83,8 +83,8 @@ function dplayer1 () {
         container: document.getElementById('dplayer1'),
         video: {
             url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
         },
         danmaku: {
             id: '9E2E3368B56CDBB4',
@@ -96,14 +96,10 @@ function dplayer1 () {
 function dplayer2 () {
     window.dp2 = new DPlayer({
         container: document.getElementById('dplayer2'),
-        screenshot: true,
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
-        },
-        subtitle: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
         },
         danmaku: {
             id: '9E2E3368B56CDBB4',
@@ -119,25 +115,17 @@ function dplayer3 () {
         theme: '#FADFA3',
         loop: true,
         lang: 'zh-cn',
-        screenshot: true,
         hotkey: true,
         preload: 'auto',
-        logo: 'https://moeplayer.b0.upaiyun.com/dplayer/DPlayer.png',
+        logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png',
         volume: 0.7,
         mutex: true,
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg',
+            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg',
             type: 'auto'
         },
-        subtitle: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt',
-            type: 'webvtt',
-            fontSize: '25px',
-            bottom: '10%',
-            color: '#b7daff'
-        },
         danmaku: {
             id: '9E2E3368B56CDBB4',
             api: 'https://api.prprpr.me/dplayer/',
@@ -179,16 +167,16 @@ function dplayer4 () {
         video: {
             quality: [{
                 name: 'HD',
-                url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
+                url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
                 type: 'hls'
             }, {
                 name: 'SD',
-                url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
+                url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
                 type: 'normal'
             }],
             defaultQuality: 0,
-            pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
-            thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
+            pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
+            thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
         }
     });
 }
@@ -197,27 +185,27 @@ function dplayer5 () {
     window.dp5 = new DPlayer({
         container: document.getElementById('dplayer5'),
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
+            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
             type: 'hls'
         }
     });
 }
 
 function dplayer6 () {
-    window.dp6 = new DPlayer({
-        container: document.getElementById('dplayer6'),
-        video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/dash/hikarunara.mpd',
-            type: 'dash'
-        }
-    });
+    // window.dp6 = new DPlayer({
+    //     container: document.getElementById('dplayer6'),
+    //     video: {
+    //         url: 'https://moeplayer.b0.upaiyun.com/dplayer/dash/hikarunara.mpd',
+    //         type: 'dash'
+    //     }
+    // });
 }
 
 function dplayer7 () {
     window.dp7 = new DPlayer({
         container: document.getElementById('dplayer7'),
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.flv',
+            url: 'https://api.dogecloud.com/player/get.flv?vcode=5ac682e6f8231991&userId=17&ext=.flv',
             type: 'flv'
         }
     });
@@ -249,7 +237,7 @@ function dplayer9 () {
             }
         },
         video: {
-            url: 'https://moeplayer.b0.upaiyun.com/dplayer/hls/hikarunara.m3u8',
+            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
             type: 'hls'
         }
     });

docs/ecosystem.md

@@ -47,6 +47,7 @@ Let's make DPlayer better, feel free to submit yours in [`Let me know!`](https:/
 
 ## Who use DPlayer?
 
+- [学习强国](https://itunes.apple.com/cn/app/%E5%AD%A6%E4%B9%A0%E5%BC%BA%E5%9B%BD/id1426355645?mt=8): “学习强国”学习平台精心打造的手机客户端
 - [小红书](https://www.xiaohongshu.com/): 中国最大的生活社区分享平台，同时也是发现全球好物的电商平台
 - [极客时间](https://time.geekbang.org/): 极客邦科技出品的一款 IT 内容知识服务 App
 - [嘀哩嘀哩](http://www.dilidili.wang/): 兴趣使然的无名小站（D站）

docs/support.md

@@ -19,7 +19,6 @@ We accept donations through these channels:
 - [Paypal](https://www.paypal.me/DIYgod)
 - [WeChat Pay](https://i.imgur.com/aq6PtWa.png)
 - [Alipay](https://i.imgur.com/wv1Pj2k.png)
-- Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
 
 ## Recurring Pledges
 
@@ -30,10 +29,20 @@ Recurring pledges come with exclusive perks, e.g. having your name or your compa
 
 ## Current Premium Sponsors
 
-### Special Sponsors
+## Special Sponsors
 
-<a href="https://pear.hk/" target="_blank">
-    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
+    <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
+</a>
+
+<a href="https://www.9ccms.net" target="_blank">
+    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+</a>
+
+### Sponsors
+
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
 <a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
     <img width="222px" src="https://imgur.com/apG1uKf.png">

docs/zh-Hans/README.md

@@ -7,10 +7,20 @@ search: zh-Hans
 
 🍭 Wow, such a lovely HTML5 danmaku video player
 
-## 特别赞助商
+## Special Sponsors
 
-<a href="https://pear.hk/" target="_blank">
-    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
+    <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
+</a>
+
+<a href="https://www.9ccms.net" target="_blank">
+    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+</a>
+
+### Sponsors
+
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
 <a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
     <img width="222px" src="https://imgur.com/apG1uKf.png">
@@ -64,8 +74,8 @@ const dp = new DPlayer({
 使用模块管理器:
 
 ```js
-import 'DPlayer/dist/DPlayer.min.css';
-import DPlayer from 'DPlayer';
+import 'dplayer/dist/DPlayer.min.css';
+import DPlayer from 'dplayer';
 
 const dp = new DPlayer(options);
 ```

docs/zh-Hans/ecosystem.md

@@ -48,6 +48,7 @@ search: zh-Hans
 
 ## 谁在用 DPlayer?
 
+- [学习强国](https://itunes.apple.com/cn/app/%E5%AD%A6%E4%B9%A0%E5%BC%BA%E5%9B%BD/id1426355645?mt=8): “学习强国”学习平台精心打造的手机客户端
 - [小红书](https://www.xiaohongshu.com/): 中国最大的生活社区分享平台，同时也是发现全球好物的电商平台
 - [极客时间](https://time.geekbang.org/): 极客邦科技出品的一款 IT 内容知识服务 App
 - [嘀哩嘀哩](http://www.dilidili.wang/): 兴趣使然的无名小站（D站）

docs/zh-Hans/support.md

@@ -20,7 +20,6 @@ DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着
 - [微信支付](https://i.imgur.com/aq6PtWa.png)
 - [支付宝](https://i.imgur.com/wv1Pj2k.png)
 - [Paypal](https://www.paypal.me/DIYgod)
-- 比特币: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
 
 ## 周期性赞助
 
@@ -31,10 +30,20 @@ DPlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着
 
 ## 当前的顶级赞助商
 
-### 特别赞助商
+## Special Sponsors
 
-<a href="https://pear.hk/" target="_blank">
-    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+<a href="https://www.polyv.net/?f=git_DPlayer-20190518-02" target="_blank">
+    <img width="600px" src="https://i.loli.net/2019/06/03/5cf4028f7b8f716387.gif">
+</a>
+
+<a href="https://www.9ccms.net" target="_blank">
+    <img width="330px" src="https://i.imgur.com/YBV6kfb.png">
+</a>
+
+### Sponsors
+
+<a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
+    <img width="222px" src="https://i.imgur.com/BBKXPAp.png">
 </a>
 <a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
     <img width="222px" src="https://imgur.com/apG1uKf.png">

package.json

@@ -30,35 +30,36 @@
   },
   "homepage": "https://github.com/DIYgod/DPlayer#readme",
   "devDependencies": {
-    "art-template": "4.12.2",
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "art-template": "4.13.2",
     "art-template-loader": "1.4.3",
-    "autoprefixer": "^8.6.2",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
+    "autoprefixer": "^9.6.0",
+    "babel-loader": "^8.0.6",
     "cross-env": "^5.2.0",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
-    "eslint-loader": "^2.0.0",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
+    "eslint": "^5.16.0",
+    "eslint-loader": "^2.1.2",
     "exports-loader": "^0.7.0",
-    "file-loader": "^1.1.11",
+    "file-loader": "^4.0.0",
     "git-revision-webpack-plugin": "^3.0.3",
-    "mini-css-extract-plugin": "0.4.0",
-    "node-sass": "^4.9.0",
-    "postcss-loader": "^2.1.5",
-    "sass-loader": "^7.0.3",
+    "mini-css-extract-plugin": "0.7.0",
+    "node-sass": "^4.12.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
     "strip-loader": "^0.1.2",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.1",
     "svg-inline-loader": "0.8.0",
-    "template-string-optimize-loader": "^2.2.3",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.12.0",
-    "webpack-cli": "3.0.4",
-    "webpack-dev-server": "^3.1.4"
+    "template-string-optimize-loader": "^3.0.0",
+    "url-loader": "^2.0.0",
+    "webpack": "^4.33.0",
+    "webpack-cli": "3.3.2",
+    "webpack-dev-server": "^3.6.0"
   },
   "dependencies": {
-    "axios": "0.18.0",
+    "axios": "0.19.0",
     "balloon-css": "^0.5.0",
-    "promise-polyfill": "8.0.0"
+    "promise-polyfill": "8.1.0"
   }
 }

src/js/controller.js

@@ -91,7 +91,7 @@ class Controller {
             });
 
             this.player.on('loadedmetadata', () => {
-                this.thumbnails.resize(160, this.player.video.videoHeight / this.player.video.videoWidth * 160);
+                this.thumbnails.resize(160, this.player.video.videoHeight / this.player.video.videoWidth * 160, this.player.template.barWrap.offsetWidth);
             });
         }
     }

src/js/player.js

@@ -564,6 +564,9 @@ class DPlayer {
         if (this.danmaku) {
             this.danmaku.resize();
         }
+        if (this.controller.thumbnails) {
+            this.controller.thumbnails.resize(160, this.video.videoHeight / this.video.videoWidth * 160, this.template.barWrap.offsetWidth);
+        }
         this.events.trigger('resize');
     }
 

src/js/thumbnails.js

@@ -6,10 +6,11 @@ class Thumbnails {
         this.events = options.events;
     }
 
-    resize (width, height) {
+    resize (width, height, barWrapWidth) {
         this.container.style.width = `${width}px`;
         this.container.style.height = `${height}px`;
         this.container.style.top = `${-height + 2}px`;
+        this.barWidth = barWrapWidth;
     }
 
     show () {

src/js/utils.js

@@ -48,7 +48,7 @@ const utils = {
     * getBoundingClientRect 在 Opera 10.5 及以下返回的值缺失 width、height 值
     */
     getBoundingClientRectViewLeft (element) {
-        const scrollTop = document.documentElement.scrollTop;
+        const scrollTop = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);
 
         if (element.getBoundingClientRect) {
             if (typeof this.getBoundingClientRectViewLeft.offset !== 'number') {

webpack/dev.config.js

@@ -45,7 +45,7 @@ module.exports = {
                         loader: 'babel-loader',
                         options: {
                             cacheDirectory: true,
-                            presets: ['env']
+                            presets: ['@babel/preset-env']
                         }
                     }
                 ]

webpack/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
     plugins: {
-        'autoprefixer': {}
+        'autoprefixer': {},
+        'cssnano': {}
     }
 };

webpack/prod.config.js

@@ -48,8 +48,8 @@ module.exports = {
                     {
                         loader: 'babel-loader',
                         options: {
-                            compact: true,
-                            presets: ['env']
+                            cacheDirectory: true,
+                            presets: ['@babel/preset-env']
                         }
                     }
                 ]
@@ -62,7 +62,6 @@ module.exports = {
                         loader: 'css-loader',
                         options: {
                             importLoaders: 1,
-                            minimize: true,
                             sourceMap: true
                         }
                     },