mirrors/DPlayer
1
0
Fork 0
mirror of https://github.com/DIYgod/DPlayer synced 2024-11-23 12:09:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor API access, support multiple additions, add missing dependency

Browse Source 
* Duplicate XHR code extracted into functions
* Now supports more than one API addition
* API backend made swappable
* Added missing dependency 'babel-core' to package.json
This commit is contained in:
TecyT 2016-10-29 13:41:11 +08:00
parent 3a23427cba
commit 3747e6177b
5 changed files with 112 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/DPlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
package.json
View File

@ -25,6 +25,7 @@
"homepage": "https://github.com/DIYgod/DPlayer#readme",
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.18.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"css-loader": "^0.25.0",

220
src/DPlayer.js
View File

@ -1,6 +1,7 @@
console.log("\n %c DPlayer 1.1.2 %c http://dplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
require('./DPlayer.scss');
const defaultApiBackend = require('./api.js');
let index = 0;
@ -54,7 +55,8 @@ class DPlayer {
lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en',
screenshot: false,
hotkey: true,
preload: 'auto'
preload: 'auto',
apiBackend: defaultApiBackend
};
for (let defaultKey in defaultOption) {
if (defaultOption.hasOwnProperty(defaultKey) && !this.option.hasOwnProperty(defaultKey)) {
@ -939,72 +941,7 @@ class DPlayer {
// danmaku
if (this.option.danmaku) {
this.danIndex = 0;
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);
if (response.code !== 1) {
alert(response.msg);
}
else {
if (this.option.danmaku.addition) {
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
const response2 = JSON.parse(xhr.responseText);
if (response2.code !== 1) {
alert(response2.msg);
}
else {
this.dan = response.danmaku.concat(response2.danmaku).sort((a, b) => a.time - b.time);
this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
// autoplay
if (this.option.autoplay && !isMobile) {
this.play();
}
else if (isMobile) {
this.pause();
}
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open('get', this.option.danmaku.addition[0], true);
xhr.send(null);
}
else {
this.dan = response.danmaku.sort((a, b) => a.time - b.time);
this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
// autoplay
if (this.option.autoplay && !isMobile) {
this.play();
}
else if (isMobile) {
this.pause();
}
}
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
let apiurl;
if (this.option.danmaku.maximum) {
apiurl = `${this.option.danmaku.api}?id=${this.option.danmaku.id}&max=${this.option.danmaku.maximum}`;
}
else {
apiurl = `${this.option.danmaku.api}?id=${this.option.danmaku.id}`;
}
xhr.open('get', apiurl, true);
xhr.send(null);
this.readDanmaku();
}
else {
// autoplay
@ -1054,25 +991,7 @@ class DPlayer {
color: this.element.querySelector('.dplayer-comment-setting-color input:checked').value,
type: this.element.querySelector('.dplayer-comment-setting-type input:checked').value
};
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);
if (response.code !== 1) {
alert(response.msg);
}
else {
console.log('Post danmaku: ', JSON.parse(xhr.responseText));
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open('post', this.option.danmaku.api, true);
xhr.send(JSON.stringify(danmakuData));
this.option.apiBackend.send(this.option.danmaku.api, danmakuData);
commentInput.value = '';
closeComment();
@ -1354,6 +1273,64 @@ class DPlayer {
}
}
/**
* Asynchronously read danmaku from all API endpoints
*/
_readAllEndpoints (endpoints, finish) {
let results = [];
let readCount = 0;
let cbk = (i) => (err, data) => {
++readCount;
if (err) {
if (err.response)
alert(err.response.msg);
else
console.log('Request was unsuccessful: ' + err.status);
results[i] = [];
}
else {
results[i] = data;
}
if (readCount == endpoints.length) {
return finish(results);
}
};
for (let i = 0; i < endpoints.length; ++i) {
this.option.apiBackend.read(endpoints[i], cbk(i));
}
}
/**
* Read danmaku from API
*/
readDanmaku() {
const isMobile = /mobile/i.test(window.navigator.userAgent);
let apiurl;
if (this.option.danmaku.maximum) {
apiurl = `${this.option.danmaku.api}?id=${this.option.danmaku.id}&max=${this.option.danmaku.maximum}`;
}
else {
apiurl = `${this.option.danmaku.api}?id=${this.option.danmaku.id}`;
}
let endpoints = (this.option.danmaku.addition || []).slice(0);
endpoints.push(apiurl);
this._readAllEndpoints(endpoints, (results) => {
this.danIndex = 0;
this.dan = [].concat.apply([], results).sort((a, b) => a.time - b.time);
this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
// autoplay
if (this.option.autoplay && !isMobile) {
this.play();
}
else if (isMobile) {
this.pause();
}
});
}
/**
* Switch to a new video
*
@ -1379,77 +1356,8 @@ class DPlayer {
bottom: {}
};
this.itemDemo = this.element.getElementsByClassName('dplayer-danmaku-item')[0];
const isMobile = /mobile/i.test(window.navigator.userAgent);
this.option.danmaku = danmaku;
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);
if (response.code !== 1) {
alert(response.msg);
}
else {
if (this.option.danmaku.addition) {
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
const response2 = JSON.parse(xhr.responseText);
if (response2.code !== 1) {
alert(response2.msg);
}
else {
this.danIndex = 0;
this.dan = response.danmaku.concat(response2.danmaku).sort((a, b) => a.time - b.time);
this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
// autoplay
if (this.option.autoplay && !isMobile) {
this.play();
}
else if (isMobile) {
this.pause();
}
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open('get', this.option.danmaku.addition[0], true);
xhr.send(null);
}
else {
this.danIndex = 0;
this.dan = response.danmaku.sort((a, b) => a.time - b.time);
this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';
// autoplay
if (this.option.autoplay && !isMobile) {
this.play();
}
else if (isMobile) {
this.pause();
}
}
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
let apiurl;
if (this.option.danmaku.maximum) {
apiurl = `${this.option.danmaku.api}?id=${this.option.danmaku.id}&max=${this.option.danmaku.maximum}`;
}
else {
apiurl = `${this.option.danmaku.api}?id=${this.option.danmaku.id}`;
}
xhr.open('get', apiurl, true);
xhr.send(null);
this.readDanmaku();
}
}
}

43
src/api.js Normal file
View File

@ -0,0 +1,43 @@
export const send = (endpoint, danmakuData) => {
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);
if (response.code !== 1) {
alert(response.msg);
}
else {
console.log('Post danmaku: ', JSON.parse(xhr.responseText));
}
}
else {
console.log('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open('post', endpoint, true);
xhr.send(JSON.stringify(danmakuData));
};
export const read = (endpoint, cbk) => {
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);
if (response.code !== 1) {
return cbk({ status: xhr.status, response });
}
else {
return cbk(null, response.danmaku);
}
}
else {
return cbk({ status: xhr.status, response: null });
}
}
};
xhr.open('get', endpoint, true);
xhr.send(null);
};