danmaku display algorithms; setting box; comment button

demo/danmaku.json

@@ -1,53 +1,53 @@
 {
     "danmaku": [
+        {
+            "author": "DIYgod",
+            "time": "2.8",
+            "text": "此生无悔入",
+            "color": "#f00",
+            "type": "right"
+        },
+        {
+            "author": "DIYgod",
+            "time": "1.6",
+            "text": "此生无悔入四月来世愿做友人A",
+            "color": "#ff0",
+            "type": "right"
+        },
         {
             "author": "DIYgod",
             "time": "0.4",
-            "text": "比♂利比♂利爱1",
+            "text": "此生无悔入四月来世",
             "color": "#f00",
             "type": "right"
         },
         {
             "author": "DIYgod",
             "time": "0.8",
-            "text": "比♂利比♂利比♂利爱1.2",
+            "text": "此生无悔入四月来世愿做友人A此生无悔入四月来世愿做",
             "color": "#0f0",
             "type": "right"
         },
         {
             "author": "DIYgod",
             "time": "1.2",
-            "text": "比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4比♂利比♂利爱1.4",
+            "text": "此生无悔入四月来世愿做友人",
             "color": "#00f",
             "type": "right"
         },
-        {
-            "author": "DIYgod",
-            "time": "1.6",
-            "text": "比♂利比♂利爱1.6",
-            "color": "#ff0",
-            "type": "right"
-        },
         {
             "author": "DIYgod",
             "time": "2.0",
-            "text": "比♂利比♂利比♂利爱1.8",
+            "text": "此生无悔入四月来世愿做友人A",
             "color": "#f0f",
             "type": "right"
         },
         {
             "author": "DIYgod",
             "time": "2.4",
-            "text": "比♂利比♂利比♂利爱2",
+            "text": "此生无悔入四月来世愿做友人A",
             "color": "#0ff",
             "type": "right"
-        },
-        {
-            "author": "DIYgod",
-            "time": "2.8",
-            "text": "比♂利比♂利爱2.2",
-            "color": "#f00",
-            "type": "right"
         }
     ]
 }

demo/index.html

@@ -61,8 +61,8 @@
         autoplay: false,
         theme: '#FADFA3',
         video: {
-            url: 'http://o6m1pq7od.bkt.clouddn.com/禁绝的边境线.mp4',
-            pic: 'http://o6m1pq7od.bkt.clouddn.com/禁绝的边境线.jpg'
+            url: 'http://o6m1pq7od.bkt.clouddn.com/最后的告白.mp4',
+            pic: 'http://o6m1pq7od.bkt.clouddn.com/poster.jpg'
         },
         danmaku: {
             get: 'danmaku.json'

src/DPlayer.scss

@@ -39,6 +39,20 @@
         }
     }
 
+    .dplayer-mask {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        display: none;
+
+        &.dplayer-mask-show {
+            display: block;
+        }
+    }
+
     .dplayer-video-wrap {
         position: relative;
         background: #000;
@@ -58,7 +72,7 @@
         right: 0;
         top: 0;
         bottom: 0;
-        font-size: 24px;
+        font-size: 22px;
         color: #fff;
 
         .dplayer-danmaku-item {
@@ -200,6 +214,10 @@
                 &:hover {
                     opacity: 1;
                 }
+
+                &.dplayer-comment-icon {
+                    padding: 10px 9px 9px;
+                }
             }
 
             .dplayer-svg-shadow {
@@ -294,6 +312,7 @@
                     padding: 7px 0;
                     transition: all .3s ease-in-out;
                     overflow: hidden;
+                    z-index: 2;
 
                     &.dplayer-setting-box-open {
                         transform: translateX(0);
@@ -319,6 +338,11 @@
                 }
             }
 
+            .dplayer-comment {
+                display: inline-block;
+                height: 100%;
+            }
+
             .dplayer-label {
                 color: #eee;
                 font-size: 13px;