Update devDependencies; Fix volume api bug

demo/index.html

@@ -73,7 +73,6 @@
             maximum: 3000
         }
     });
-//    dp.init();
 
     // stats.js: JavaScript Performance Monitor
     var stats = new Stats();

package.json

@@ -24,18 +24,18 @@
   },
   "homepage": "https://github.com/DIYgod/DPlayer#readme",
   "devDependencies": {
-    "autoprefixer": "^6.3.7",
+    "autoprefixer": "^6.4.0",
     "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015": "^6.13.2",
     "css-loader": "^0.23.1",
     "exports-loader": "^0.6.3",
     "file-loader": "^0.9.0",
     "node-sass": "^3.8.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^0.10.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.9.0"
+    "webpack-dev-server": "^1.14.1"
   }
 }

src/DPlayer.js

@@ -119,7 +119,9 @@ class DPlayer {
                 <video class="dplayer-video" ${option.video.pic ? `poster="${option.video.pic}"` : ``} ${option.screenshot ? `crossorigin="anonymous"` : ``}>
                     <source src="${option.video.url}">
                 </video>
-                <div class="dplayer-danmaku"></div>
+                <div class="dplayer-danmaku">
+                    <div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>
+                </div>
                 <div class="dplayer-bezel">
                     <span class="dplayer-bezel-icon"></span>
                     ${option.danmaku ? `<span class="dplayer-danloading">${getTran('Danmaku is loading')}</span>` : ``}
@@ -687,7 +689,7 @@ class DPlayer {
                     showdan = false;
                     if (option.danmaku) {
                         clearInterval(danmakuTime);
-                        danContainer.innerHTML = '';
+                        danContainer.innerHTML = `<div class="dplayer-danmaku-item  dplayer-danmaku-item--demo"></div>`;
                     }
                 }
                 closeSetting();
@@ -860,6 +862,8 @@ class DPlayer {
             }
         };
 
+        const itemDemo = this.element.getElementsByClassName('dplayer-danmaku-item')[0];
+
         const danmakuIn = (text, color, type) => {
             danWidth = danContainer.offsetWidth;
             danHeight = danContainer.offsetHeight;
@@ -870,11 +874,13 @@ class DPlayer {
             item.innerHTML = text;
             item.style.opacity = danOpacity;
             item.style.color = color;
+            item.addEventListener('animationend', () => {
+                danContainer.removeChild(item);
+            });
 
-            // insert
-            danContainer.appendChild(item);
-
-            let itemWidth = item.offsetWidth;
+            // measure
+            itemDemo.innerHTML = text;
+            let itemWidth = itemDemo.offsetWidth;
 
             // adjust
             switch (type) {
@@ -882,26 +888,20 @@ class DPlayer {
                     item.style.top = itemHeight * getTunnel(item, type, itemWidth) + 'px';
                     item.style.width = (itemWidth + 1) + 'px';
                     item.style.transform = `translateX(-${danWidth}px)`;
-                    item.addEventListener('animationend', () => {
-                        danContainer.removeChild(item);
-                    });
                     break;
                 case 'top':
                     item.style.top = itemHeight * getTunnel(item, type) + 'px';
-                    item.addEventListener('animationend', () => {
-                        danContainer.removeChild(item);
-                    });
                     break;
                 case 'bottom':
                     item.style.bottom = itemHeight * getTunnel(item, type) + 'px';
-                    item.addEventListener('animationend', () => {
-                        danContainer.removeChild(item);
-                    });
                     break;
                 default:
                     console.error(`Can't handled danmaku type: ${type}`);
             }
 
+            // insert
+            danContainer.appendChild(item);
+
             // move
             item.classList.add(`dplayer-danmaku-move`);
         };
@@ -1100,12 +1100,15 @@ class DPlayer {
 
         this.element.addEventListener('fullscreenchange', () => {
             resetAnimation();
+            console.log(danContainer.offsetHeight);
         });
         this.element.addEventListener('mozfullscreenchange', () => {
             resetAnimation();
+            console.log(danContainer.offsetHeight);
         });
         this.element.addEventListener('webkitfullscreenchange', () => {
             resetAnimation();
+            console.log(danContainer.offsetHeight);
         });
         this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', () => {
             if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
@@ -1254,10 +1257,10 @@ class DPlayer {
     volume(percentage) {
         percentage = percentage > 0 ? percentage : 0;
         percentage = percentage < 1 ? percentage : 1;
-        this.updateBar('volume', percentage, 'height');
-        this.audio.volume = percentage;
-        if (this.audio.muted) {
-            this.audio.muted = false;
+        this.updateBar('volume', percentage, 'width');
+        this.video.volume = percentage;
+        if (this.video.muted) {
+            this.video.muted = false;
         }
         this.switchVolumeIcon();
     }

src/DPlayer.scss

@@ -139,6 +139,11 @@
             white-space: nowrap;
             font-weight: bolder;
             text-shadow: .5px .5px .5px rgba(0,0,0,.5);
+
+            &--demo {
+                position: absolute;
+                visibility: hidden;
+            }
         }
 
         .dplayer-danmaku-right {