work with backend v3

demo/demo.js

@@ -29,7 +29,7 @@ function initPlayers () {
         },
         danmaku: {
             id: '9E2E3368B56CDBB4',
-            api: 'https://api.prprpr.me/dplayer/'
+            api: 'https://dan.prprpr.me/'
         }
     });
 
@@ -60,7 +60,7 @@ function initPlayers () {
         },
         danmaku: {
             id: '9E2E3368B56CDBB4',
-            api: 'https://api.prprpr.me/dplayer/',
+            api: 'https://dan.prprpr.me/',
             token: 'tokendemo',
             maximum: 3000,
             user: 'DIYgod',
@@ -209,7 +209,7 @@ function switchDPlayer () {
             type: 'auto',
         }, {
             id: '5rGf5Y2X55qu6Z2p',
-            api: 'https://api.prprpr.me/dplayer/',
+            api: 'https://dan.prprpr.me/',
             maximum: 3000,
             user: 'DIYgod'
         });
@@ -221,7 +221,7 @@ function switchDPlayer () {
             type: 'auto'
         }, {
             id: '9E2E3368B56CDBB42',
-            api: 'https://api.prprpr.me/dplayer/',
+            api: 'https://dan.prprpr.me/',
             maximum: 3000,
             user: 'DIYgod'
         });

src/js/api.js

@@ -44,7 +44,7 @@ export default {
 
     read: (endpoint, callback) => {
         SendXMLHttpRequest(endpoint, null, (xhr, response) => {
-            callback(null, response.danmaku);
+            callback(null, response.data);
         }, (xhr, response) => {
             callback({ status: xhr.status, response });
         }, (xhr) => {

src/js/comment.js

@@ -1,3 +1,5 @@
+import utils from './utils';
+
 class Comment {
     constructor (player) {
         this.player = player;
@@ -81,8 +83,8 @@ class Comment {
 
         this.player.danmaku.send({
             text: this.player.template.commentInput.value,
-            color: this.player.container.querySelector('.dplayer-comment-setting-color input:checked').value,
-            type: this.player.container.querySelector('.dplayer-comment-setting-type input:checked').value
+            color: utils.color2Number(this.player.container.querySelector('.dplayer-comment-setting-color input:checked').value),
+            type: parseInt(this.player.container.querySelector('.dplayer-comment-setting-type input:checked').value),
         }, () => {
             this.player.template.commentInput.value = '';
             this.hide();

src/js/danmaku.js

@@ -1,3 +1,5 @@
+import utils from './utils';
+
 class Danmaku {
     constructor (options) {
         this.options = options;
@@ -21,10 +23,10 @@ class Danmaku {
     load () {
         let apiurl;
         if (this.options.api.maximum) {
-            apiurl = `${this.options.api.address}v2/?id=${this.options.api.id}&max=${this.options.api.maximum}`;
+            apiurl = `${this.options.api.address}v3/?id=${this.options.api.id}&max=${this.options.api.maximum}`;
         }
         else {
-            apiurl = `${this.options.api.address}v2/?id=${this.options.api.id}`;
+            apiurl = `${this.options.api.address}v3/?id=${this.options.api.id}`;
         }
         const endpoints = (this.options.api.addition || []).slice(0);
         endpoints.push(apiurl);
@@ -67,11 +69,10 @@ class Danmaku {
                 results[i] = [];
             }
             else {
-                const typeMap = ['right', 'top', 'bottom'];
                 if (data) {
                     results[i] = data.map((item) => ({
                         time: item[0],
-                        type: typeMap[item[1]],
+                        type: item[1],
                         color: item[2],
                         author: item[3],
                         text: item[4]
@@ -94,14 +95,14 @@ class Danmaku {
     send (dan, callback) {
         const danmakuData = {
             token: this.options.api.token,
-            player: this.options.api.id,
+            id: this.options.api.id,
             author: this.options.api.user,
             time: this.options.time(),
             text: dan.text,
             color: dan.color,
             type: dan.type
         };
-        this.options.apiBackend.send(this.options.api.address + 'v2/', danmakuData, callback);
+        this.options.apiBackend.send(this.options.api.address + 'v3/', danmakuData, callback);
 
         this.dan.splice(this.danIndex, 0, danmakuData);
         this.danIndex++;
@@ -208,11 +209,9 @@ class Danmaku {
             const docFragment = document.createDocumentFragment();
 
             for (let i = 0; i < dan.length; i++) {
-                if (!dan[i].type) {
-                    dan[i].type = 'right';
-                }
+                dan[i].type = utils.number2Type(dan[i].type);
                 if (!dan[i].color) {
-                    dan[i].color = '#fff';
+                    dan[i].color = 16777215;
                 }
                 const item = document.createElement('div');
                 item.classList.add('dplayer-danmaku-item');
@@ -224,7 +223,7 @@ class Danmaku {
                     item.innerHTML = dan[i].text;
                 }
                 item.style.opacity = this._opacity;
-                item.style.color = dan[i].color;
+                item.style.color = utils.number2Color(dan[i].color);
                 item.addEventListener('animationend', () => {
                     this.container.removeChild(item);
                 });

src/js/utils.js

@@ -88,7 +88,32 @@ const utils = {
         dragStart: isMobile ? 'touchstart' : 'mousedown',
         dragMove: isMobile ? 'touchmove' : 'mousemove',
         dragEnd: isMobile ? 'touchend' : 'mouseup'
-    }
+    },
+
+    color2Number: (color) => {
+        if (color[0] === '#') {
+            color = color.substr(1);
+        }
+        if (color.length === 3) {
+            color = `${color[0]}${color[0]}${color[1]}${color[1]}${color[2]}${color[2]}`;
+        }
+        return parseInt(color, 16) + 0x000000 & 0xffffff;
+    },
+
+    number2Color: (number) => '#' + ('00000' + number.toString(16)).slice(-6),
+
+    number2Type: (number) => {
+        switch (number) {
+        case 0:
+            return 'right';
+        case 1:
+            return 'top';
+        case 2:
+            return 'bottom';
+        default:
+            return 'right';
+        }
+    },
 };
 
 export default utils;

src/template/player.art

@@ -55,15 +55,15 @@
             <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">
+                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="1">
                     <span>{{ tran('Top') }}</span>
                 </label>
                 <label>
-                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="right" checked>
+                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="0" checked>
                     <span>{{ tran('Rolling') }}</span>
                 </label>
                 <label>
-                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="bottom">
+                    <input type="radio" name="dplayer-danmaku-type-{{ index }}" value="2">
                     <span>{{ tran('Bottom') }}</span>
                 </label>
             </div>