i18n; improve UI

README.md

@@ -49,6 +49,7 @@ var option = {
     autoplay: false,                                                   // Optional, autoplay video, not supported by mobile browsers
     theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
     loop: true,                                                        // Optional, loop play music, default: true
+    lang: zh,                                                          // Optional, language, `zh` for Chinese, `en` for English, default: en
     video: {                                                           // Required, video info
         url: '若能绽放光芒.mp4',                                         // Required, video url
         pic: '若能绽放光芒.png'                                          // Optional, music picture

demo/index.html

@@ -61,6 +61,7 @@
         autoplay: false,
         theme: '#FADFA3',
         loop: true,
+        lang: 'zh',
         video: {
             url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
             pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'

src/DPlayer.js

@@ -20,7 +20,8 @@ class DPlayer {
             'right': ['0 0 32 32', 'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'],
             'comment': ['0 0 32 32', 'M27.128 0.38h-22.553c-2.336 0-4.229 1.825-4.229 4.076v16.273c0 2.251 1.893 4.076 4.229 4.076h4.229v-2.685h8.403l-8.784 8.072 1.566 1.44 7.429-6.827h9.71c2.335 0 4.229-1.825 4.229-4.076v-16.273c0-2.252-1.894-4.076-4.229-4.076zM28.538 19.403c0 1.5-1.262 2.717-2.819 2.717h-8.36l-0.076-0.070-0.076 0.070h-11.223c-1.557 0-2.819-1.217-2.819-2.717v-13.589c0-1.501 1.262-2.718 2.819-2.718h19.734c1.557 0 2.819-0.141 2.819 1.359v14.947zM9.206 10.557c-1.222 0-2.215 0.911-2.215 2.036s0.992 2.035 2.215 2.035c1.224 0 2.216-0.911 2.216-2.035s-0.992-2.036-2.216-2.036zM22.496 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.224 0 2.215-0.911 2.215-2.035s-0.991-2.036-2.215-2.036zM15.852 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.222 0 2.215-0.911 2.215-2.035s-0.992-2.036-2.215-2.036z'],
             'comment-off': ['0 0 32 32', 'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z'],
-            'send': ['0 0 32 32', 'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z']
+            'send': ['0 0 32 32', 'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'],
+            'menu': ['0 0 22 32', 'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z']
         };
         this.getSVG = (type) => {
             return `
@@ -42,7 +43,8 @@ class DPlayer {
             element: document.getElementsByClassName('dplayer')[0],
             autoplay: false,
             theme: '#b7daff',
-            loop: false
+            loop: false,
+            lang: 'en'
         };
         for (let defaultKey in defaultOption) {
             if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
@@ -53,6 +55,30 @@ class DPlayer {
         this.option = option;
         this.loop = option.loop;
 
+        this.tranZH = {
+            'Danmaku is loading': '弹幕加载中',
+            'Top': '顶部',
+            'Bottom': '底部',
+            'Rolling': '滚动',
+            'Input danmaku, hit Enter': '输入弹幕，回车发送',
+            'About author': '关于作者',
+            'DPlayer feedback': '播放器意见反馈',
+            'About DPlayer': '关于 DPlay 播放器',
+            'Loop': '洗脑循环',
+            'Speed': '速度',
+            'Opacity for danmaku': '弹幕透明度',
+            'Normal': '正常',
+            'Please input danmaku!': '要输入弹幕内容啊喂！'
+        };
+        this.getTran = (text) => {
+            if (this.option.lang === 'en') {
+                return text;
+            }
+            else if (this.option.lang === 'zh') {
+                return this.tranZH[text];
+            }
+        };
+
         /**
          * Parse second to 00:00 format
          *
@@ -112,7 +138,7 @@ class DPlayer {
                 <div class="dplayer-danmaku"></div>
                 <div class="dplayer-bezel">
                     <span class="dplayer-bezel-icon"></span>
-                   ${this.option.danmaku ? `<span class="dplayer-danloading">弹幕加载中</span>` : ``}
+                   ${this.option.danmaku ? `<span class="dplayer-danloading">${this.getTran('Danmaku is loading')}</span>` : ``}
                     <span class="diplayer-loading-icon">
                         <svg height="100%" version="1.1" viewBox="0 0 22 22" width="100%">
                             <svg x="7" y="1">
@@ -170,24 +196,11 @@ class DPlayer {
             + `         </button>
                         <div class="dplayer-comment-box">
                             <button class="dplayer-icon dplayer-comment-setting-icon">`
-            +                   this.getSVG('setting')
+            +                   this.getSVG('menu')
             + `             </button>
                             <div class="dplayer-comment-setting-box">
-                                <div class="dplayer-comment-setting-type">
-                                    <label>
-                                        <input type="radio" name="dplayer-danmaku-type" value="top">
-                                        <span>顶部</span>
-                                    </label>
-                                    <label>
-                                        <input type="radio" name="dplayer-danmaku-type" value="right" checked>
-                                        <span>滚动</span>
-                                    </label>
-                                    <label>
-                                        <input type="radio" name="dplayer-danmaku-type" value="bottom">
-                                        <span>底部</span>
-                                    </label>
-                                </div>
                                 <div class="dplayer-comment-setting-color">
+                                   <div class="dplayer-comment-setting-title">设置弹幕颜色</div>
                                     <label>
                                         <input type="radio" name="dplayer-danmaku-color" value="#fff" checked>
                                         <span style="background: #fff; border: 1px solid rgba(0,0,0,.1);"></span>
@@ -196,10 +209,6 @@ class DPlayer {
                                         <input type="radio" name="dplayer-danmaku-color" value="#e54256">
                                         <span style="background: #e54256"></span>
                                     </label>
-                                    <label>
-                                        <input type="radio" name="dplayer-danmaku-color" value="#FFAB00">
-                                        <span style="background: #FFAB00"></span>
-                                    </label>
                                     <label>
                                         <input type="radio" name="dplayer-danmaku-color" value="#ffe133">
                                         <span style="background: #ffe133"></span>
@@ -216,13 +225,24 @@ class DPlayer {
                                         <input type="radio" name="dplayer-danmaku-color" value="#D500F9">
                                         <span style="background: #D500F9"></span>
                                     </label>
+                                </div>
+                                <div class="dplayer-comment-setting-type">
+                                   <div class="dplayer-comment-setting-title">设置弹幕类型</div>
                                     <label>
-                                        <input type="radio" name="dplayer-danmaku-color" value="#444">
-                                        <span style="background: #444;"></span>
+                                        <input type="radio" name="dplayer-danmaku-type" value="top">
+                                        <span>${this.getTran('Top')}</span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-type" value="right" checked>
+                                        <span>${this.getTran('Rolling')}</span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-type" value="bottom">
+                                        <span>${this.getTran('Bottom')}</span>
                                     </label>
                                 </div>
                             </div>
-                            <input class="dplayer-comment-input" type="text" placeholder="输入弹幕，回车发送" maxlength="30">
+                            <input class="dplayer-comment-input" type="text" placeholder="${this.getTran('Input danmaku, hit Enter')}" maxlength="30">
                             <button class="dplayer-icon dplayer-send-icon">`
             +                   this.getSVG('send')
             + `             </button>
@@ -248,9 +268,9 @@ class DPlayer {
                 </div>
             </div>
             <div class="dplayer-menu">
-                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="http://diygod.me/">关于作者</a></span></div>
-                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer/issues">播放器意见反馈</a></span></div>
-                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer">关于 DPlayer 播放器</a></span></div>
+                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="http://diygod.me/">${this.getTran('About author')}</a></span></div>
+                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer/issues">${this.getTran('DPlayer feedback')}</a></span></div>
+                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer">${this.getTran('About DPlayer')}</a></span></div>
             </div>
         `;
 
@@ -513,20 +533,20 @@ class DPlayer {
         const settingHTML = {
             'original': `
                     <div class="dplayer-setting-item dplayer-setting-loop">
-                        <span class="dplayer-label">洗脑循环</span>
+                        <span class="dplayer-label">${this.getTran('Loop')}</span>
                         <div class="dplayer-toggle">
                             <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle" id="dplayer-toggle">
                             <label for="dplayer-toggle"></label>
                         </div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-speed">
-                        <span class="dplayer-label">速度</span>
+                        <span class="dplayer-label">${this.getTran('Speed')}</span>
                         <div class="dplayer-toggle">`
                 +           this.getSVG('right')
                 + `     </div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-danmaku">
-                        <span class="dplayer-label">弹幕透明度</span>
+                        <span class="dplayer-label">${this.getTran('Opacity for danmaku')}</span>
                         <div class="dplayer-danmaku-bar-wrap">
                             <div class="dplayer-danmaku-bar">
                                 <div class="dplayer-danmaku-bar-inner" style="width: ${this.danOpacity * 100}%">
@@ -543,7 +563,7 @@ class DPlayer {
                         <span class="dplayer-label">0.75</span>
                     </div>
                     <div class="dplayer-setting-speed-item" data-speed="1">
-                        <span class="dplayer-label">正常</span>
+                        <span class="dplayer-label">${this.getTran('Normal')}</span>
                     </div>
                     <div class="dplayer-setting-speed-item" data-speed="1.25">
                         <span class="dplayer-label">1.25</span>
@@ -900,7 +920,7 @@ class DPlayer {
 
             // text can't be empty
             if (!commentInput.value.replace(/^\s+|\s+$/g, '')) {
-                alert('要输入弹幕内容啊喂！');
+                alert(this.getTran('Please input danmaku!'));
                 return;
             }
 

src/DPlayer.scss

@@ -373,6 +373,11 @@
                 }
             }
 
+            #dplayer-menu {
+                stroke: #ddd;
+                stroke-width: 1px;
+            }
+
             .dplayer-time {
                 line-height: 38px;
                 color: #eee;
@@ -629,12 +634,12 @@
                         position: absolute;
                         background: #fff;
                         bottom: 40px;
-                        left: -82.5px;
+                        left: -93px;
                         box-shadow: 0 0 25px rgba(0,0,0,.3);
                         border-radius: 4px;
-                        padding: 5px;
+                        padding: 10px 10px 16px;
                         font-size: 14px;
-                        width: 193px;
+                        width: 204px;
                         transition: all .3s ease-in-out;
                         transform: scale(0);
 
@@ -661,25 +666,44 @@
                             cursor: pointer;
                         }
 
+                        .dplayer-comment-setting-title {
+                            font-size: 14px;
+                            color: #555;
+                            padding: 6px;
+                        }
+
                         .dplayer-comment-setting-type {
-                            width: 44px;
-                            float: left;
-                            margin-right: 5px;
+                            font-size: 0;
+
+                            label {
+                                &:nth-child(2) {
+                                    span {
+                                        border-radius: 4px 0 0 4px;
+                                    }
+                                }
+                                &:nth-child(4) {
+                                    span {
+                                        border-radius: 0 4px 4px 0;
+                                    }
+                                }
+                            }
 
                             span {
+                                width: 33%;
                                 padding: 4px 6px;
                                 line-height: 16px;
                                 display: inline-block;
-                                border-radius: 4px;
-
-                                &:hover {
-                                    animation: my-face 5s infinite ease-in-out;
-                                }
+                                font-size: 12px;
+                                color: #555;
+                                border: 1px solid #E4E4E6;
+                                margin-right: -1px;
+                                box-sizing: border-box;
+                                text-align: center;
+                                cursor: pointer;
                             }
 
                             input:checked+span {
-                                background: #aaa;
-                                color: #FFF;
+                                background: #E4E4E6;
                             }
                         }
 
@@ -693,10 +717,10 @@
                             }
 
                             span {
-                                width: 24px;
-                                height: 24px;
+                                width: 22px;
+                                height: 22px;
                                 display: inline-block;
-                                border-radius: 7px;
+                                border-radius: 50%;
                                 box-sizing: border-box;
                                 cursor: pointer;