modular design

package.json

@@ -35,7 +35,7 @@
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.2.2",
     "sass-loader": "^6.0.2",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.14.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0"

src/api.js

@@ -5,45 +5,46 @@
  * */
 
 const SendXMLHttpRequest = (url, data, success, error, fail) => {
-  const xhr = new XMLHttpRequest()
+    const xhr = new XMLHttpRequest()
 
-  xhr.onreadystatechange = () => {
-    if (xhr.readyState === 4) {
-      if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
-        const response = JSON.parse(xhr.responseText)
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4) {
+            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
+                const response = JSON.parse(xhr.responseText)
 
-        if (response.code !== 1) {
-          return error(xhr, response)
-        }
+                if (response.code !== 1) {
+                    return error(xhr, response)
+                }
 
-        return success(xhr, response)
-      }
+                return success(xhr, response)
+            }
 
-      fail(xhr)
+            fail(xhr)
+        }
     }
-  }
-
-  xhr.open((data !== null) ? 'POST' : 'GET', url, true)
-  xhr.send((data !== null) ? JSON.stringify(data) : null)
-}
 
-export const send = (endpoint, danmakuData) => {
-  SendXMLHttpRequest(endpoint, danmakuData, (xhr, response) => {
-    console.log('Post danmaku: ', response)
-  }, (xhr, response) => {
-    alert(response.msg)
-  }, (xhr) => {
-    console.log('Request was unsuccessful: ' + xhr.status)
-  })
-}
-
-export const read = (endpoint, cbk) => {
-  SendXMLHttpRequest(endpoint, null, (xhr, response) => {
-    cbk(null, response.danmaku)
-  }, (xhr, response) => {
-    cbk({ status: xhr.status, response })
-  }, (xhr) => {
-    cbk({ status: xhr.status, response: null })
-  })
+    xhr.open((data !== null) ? 'POST' : 'GET', url, true)
+    xhr.send((data !== null) ? JSON.stringify(data) : null)
 }
 
+module.exports = {
+    send: (endpoint, danmakuData) => {
+        SendXMLHttpRequest(endpoint, danmakuData, (xhr, response) => {
+            console.log('Post danmaku: ', response)
+        }, (xhr, response) => {
+            alert(response.msg)
+        }, (xhr) => {
+            console.log('Request was unsuccessful: ' + xhr.status)
+        })
+    },
+
+    read: (endpoint, cbk) => {
+        SendXMLHttpRequest(endpoint, null, (xhr, response) => {
+            cbk(null, response.danmaku)
+        }, (xhr, response) => {
+            cbk({ status: xhr.status, response })
+        }, (xhr) => {
+            cbk({ status: xhr.status, response: null })
+        })
+    }
+}

src/html.js

@@ -0,0 +1,215 @@
+const svg = require('./svg.js');
+
+module.exports = {
+    main: (option, index, tran) => {
+        return `
+            <div class="dplayer-mask"></div>
+            <div class="dplayer-video-wrap">
+                <video class="dplayer-video" ${option.video.pic ? `poster="${option.video.pic}"` : ``} webkit-playsinline playsinline ${option.screenshot ? `crossorigin="anonymous"` : ``} preload="${option.preload}" src="${option.video.url}"></video>
+                <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">${tran('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">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-0" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="11" y="3">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-1" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="13" y="7">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-2" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="11" y="11">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-3" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="7" y="13">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-4" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="3" y="11">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-5" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="1" y="7">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-6" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                            <svg x="3" y="3">
+                                <circle class="diplayer-loading-dot diplayer-loading-dot-7" cx="4" cy="4" r="2"></circle>
+                            </svg>
+                        </svg>
+                    </span>
+                </div>
+            </div>
+            <div class="dplayer-controller-mask"></div>
+            <div class="dplayer-controller">
+                <div class="dplayer-icons dplayer-icons-left">
+                    <button class="dplayer-icon dplayer-play-icon">`
+            +           svg('play')
+            + `     </button>
+                    <div class="dplayer-volume">
+                        <button class="dplayer-icon dplayer-volume-icon">`
+            +               svg('volume-down')
+            + `         </button>
+                        <div class="dplayer-volume-bar-wrap">
+                            <div class="dplayer-volume-bar">
+                                <div class="dplayer-volume-bar-inner" style="width: 70%; background: ${option.theme};">
+                                    <span class="dplayer-thumb" style="background: ${option.theme}"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <span class="dplayer-time"><span class="dplayer-ptime">0:00</span> / <span class="dplayer-dtime">0:00</span></span>
+                </div>
+                <div class="dplayer-icons dplayer-icons-right">
+                    ${option.screenshot ? `
+                    <a href="#" class="dplayer-icon dplayer-camera-icon"}dplayer-volume>`
+                +           svg('camera')
+                + `     </a>
+                    ` : ``}
+                    <div class="dplayer-comment">
+                        <button class="dplayer-icon dplayer-comment-icon">`
+            +               svg('comment')
+            + `         </button>
+                        <div class="dplayer-comment-box">
+                            <button class="dplayer-icon dplayer-comment-setting-icon">`
+            +                   svg('menu')
+            + `             </button>
+                            <div class="dplayer-comment-setting-box">
+                                <div class="dplayer-comment-setting-color">
+                                   <div class="dplayer-comment-setting-title">${tran('Set danmaku color')}</div>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-color-${index}" value="#fff" checked>
+                                        <span style="background: #fff; border: 1px solid rgba(0,0,0,.1);"></span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-color-${index}" value="#e54256">
+                                        <span style="background: #e54256"></span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-color-${index}" value="#ffe133">
+                                        <span style="background: #ffe133"></span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-color-${index}" value="#64DD17">
+                                        <span style="background: #64DD17"></span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-color-${index}" value="#39ccff">
+                                        <span style="background: #39ccff"></span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-color-${index}" value="#D500F9">
+                                        <span style="background: #D500F9"></span>
+                                    </label>
+                                </div>
+                                <div class="dplayer-comment-setting-type">
+                                    <div class="dplayer-comment-setting-title">${tran('Set danmaku type')}</div>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-type-${index}" value="top">
+                                        <span>${tran('Top')}</span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-type-${index}" value="right" checked>
+                                        <span>${tran('Rolling')}</span>
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="dplayer-danmaku-type-${index}" value="bottom">
+                                        <span>${tran('Bottom')}</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <input class="dplayer-comment-input" type="text" placeholder="${tran('Input danmaku, hit Enter')}" maxlength="30">
+                            <button class="dplayer-icon dplayer-send-icon">`
+            +                   svg('send')
+            + `             </button>
+                        </div>
+                    </div>
+                    <div class="dplayer-setting">
+                        <button class="dplayer-icon dplayer-setting-icon">`
+            +               svg('setting')
+            + `         </button>
+                        <div class="dplayer-setting-box"></div>
+                    </div>
+                    <div class="dplayer-full">
+                        <button class="dplayer-icon dplayer-full-in-icon">`
+            +               svg('full-in')
+            + `         </button>
+                        <button class="dplayer-icon dplayer-full-icon">`
+            +               svg('full')
+            + `         </button>
+                    </div>
+                </div>
+                <div class="dplayer-bar-wrap">
+                    <div class="dplayer-bar">
+                        <div class="dplayer-loaded" style="width: 0;"></div>
+                        <div class="dplayer-played" style="width: 0; background: ${option.theme}">
+                            <span class="dplayer-thumb" style="background: ${option.theme}"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="dplayer-menu">
+                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="http://diygod.me/">${tran('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">${tran('DPlayer feedback')}</a></span></div>
+                <div class="dplayer-menu-item"><span class="dplayer-menu-label"><a target="_blank" href="https://github.com/DIYgod/DPlayer">${tran('About DPlayer')}</a></span></div>
+            </div>
+        `;
+    },
+
+    setting: (tran) => {
+        return {
+            'original': `
+                <div class="dplayer-setting-item dplayer-setting-speed">
+                    <span class="dplayer-label">${tran('Speed')}</span>
+                    <div class="dplayer-toggle">`
+            +       svg('right')
+            + ` </div>
+                </div>
+                <div class="dplayer-setting-item dplayer-setting-loop">
+                    <span class="dplayer-label">${tran('Loop')}</span>
+                    <div class="dplayer-toggle">
+                        <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">
+                        <label for="dplayer-toggle"></label>
+                    </div>
+                </div>
+                <div class="dplayer-setting-item dplayer-setting-showdan">
+                    <span class="dplayer-label">${tran('Danmaku')}</span>
+                    <div class="dplayer-toggle">
+                        <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
+                        <label for="dplayer-toggle-dan"></label>
+                    </div>
+                </div>
+                <div class="dplayer-setting-item dplayer-setting-danmaku">
+                    <span class="dplayer-label">${tran('Opacity for danmaku')}</span>
+                    <div class="dplayer-danmaku-bar-wrap">
+                        <div class="dplayer-danmaku-bar">
+                            <div class="dplayer-danmaku-bar-inner" style="width: ${(localStorage.getItem('DPlayer-opacity') || 0.7) * 100}%">
+                                <span class="dplayer-thumb"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>`,
+            'speed': `
+                <div class="dplayer-setting-speed-item" data-speed="0.5">
+                    <span class="dplayer-label">0.5</span>
+                </div>
+                <div class="dplayer-setting-speed-item" data-speed="0.75">
+                    <span class="dplayer-label">0.75</span>
+                </div>
+                <div class="dplayer-setting-speed-item" data-speed="1">
+                    <span class="dplayer-label">${tran('Normal')}</span>
+                </div>
+                <div class="dplayer-setting-speed-item" data-speed="1.25">
+                    <span class="dplayer-label">1.25</span>
+                </div>
+                <div class="dplayer-setting-speed-item" data-speed="1.5">
+                    <span class="dplayer-label">1.5</span>
+                </div>
+                <div class="dplayer-setting-speed-item" data-speed="2">
+                    <span class="dplayer-label">2</span>
+                </div>`
+        }
+    }
+}

src/i18n.js

@@ -0,0 +1,30 @@
+const 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!': '要输入弹幕内容啊喂！',
+    'Set danmaku color': '设置弹幕颜色',
+    'Set danmaku type': '设置弹幕类型',
+    'Danmaku': '弹幕'
+};
+
+module.exports = function (lang) {
+    this.lang = lang;
+    this.tran = (text) => {
+        if (this.lang === 'en') {
+            return text;
+        }
+        else if (this.lang === 'zh') {
+            return tranZH[text];
+        }
+    }
+};

src/option.js

@@ -0,0 +1,32 @@
+const defaultApiBackend = require('./api.js');
+
+module.exports = (option) => {
+    const isMobile = /mobile/i.test(window.navigator.userAgent);
+    // compatibility: some mobile browsers don't suppose autoplay
+    if (isMobile) {
+        option.autoplay = false;
+    }
+
+    // default options
+    const defaultOption = {
+        element: document.getElementsByClassName('dplayer')[0],
+        autoplay: false,
+        theme: '#b7daff',
+        loop: false,
+        lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en',
+        screenshot: false,
+        hotkey: true,
+        preload: 'auto',
+        apiBackend: defaultApiBackend
+    };
+    for (let defaultKey in defaultOption) {
+        if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {
+            option[defaultKey] = defaultOption[defaultKey];
+        }
+    }
+    if (!option.video.hasOwnProperty('type')) {
+        option.video.type = 'auto';
+    }
+
+    return option;
+};

yarn.lock

@@ -3389,9 +3389,9 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "http://registry.npm.taobao.org/strip-json-comments/download/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@^0.13.1:
-  version "0.13.2"
-  resolved "http://registry.npm.taobao.org/style-loader/download/style-loader-0.13.2.tgz#74533384cf698c7104c7951150b49717adc2f3bb"
+style-loader@^0.14.1:
+  version "0.14.1"
+  resolved "http://registry.npm.taobao.org/style-loader/download/style-loader-0.14.1.tgz#27b9b6c9822adf8c4748e02a1efae229405d79a5"
   dependencies:
     loader-utils "^1.0.2"