From 046e8ee6b42373aab3ca63ec5f8a0c649e580630 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Wed, 4 Jul 2018 01:12:46 +0800 Subject: [PATCH] work with backend v3 --- demo/demo.js | 8 ++++---- src/js/api.js | 2 +- src/js/comment.js | 6 ++++-- src/js/danmaku.js | 21 ++++++++++----------- src/js/utils.js | 27 ++++++++++++++++++++++++++- src/template/player.art | 6 +++--- 6 files changed, 48 insertions(+), 22 deletions(-) diff --git a/demo/demo.js b/demo/demo.js index c9197f9..43013c4 100644 --- a/demo/demo.js +++ b/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' }); diff --git a/src/js/api.js b/src/js/api.js index e6a5820..ae28ccc 100644 --- a/src/js/api.js +++ b/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) => { diff --git a/src/js/comment.js b/src/js/comment.js index 73cbb05..8756772 100644 --- a/src/js/comment.js +++ b/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(); diff --git a/src/js/danmaku.js b/src/js/danmaku.js index 88382b2..cc782e9 100644 --- a/src/js/danmaku.js +++ b/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); }); diff --git a/src/js/utils.js b/src/js/utils.js index 4a6f56e..0526325 100644 --- a/src/js/utils.js +++ b/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; \ No newline at end of file diff --git a/src/template/player.art b/src/template/player.art index ae65e4d..e837ec3 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -55,15 +55,15 @@
{{ tran('Set danmaku type') }}