Files
mew-h5/view/mew/activity/2022-newYear/js/danmaku.js
2023-11-08 11:26:13 +08:00

697 lines
20 KiB
JavaScript

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Danmaku = factory());
}(this, (function () { 'use strict';
var transform = (function() {
var properties = [
'oTransform', // Opera 11.5
'msTransform', // IE 9
'mozTransform',
'webkitTransform',
'transform'
];
var style = document.createElement('div').style;
for (var i = 0; i < properties.length; i++) {
/* istanbul ignore else */
if (properties[i] in style) {
return properties[i];
}
}
/* istanbul ignore next */
return 'transform';
}());
function createCommentNode(cmt) {
var node = document.createElement('div');
node.style.cssText = 'position:absolute;';
if (typeof cmt.render === 'function') {
var $el = cmt.render();
if ($el instanceof HTMLElement) {
node.appendChild($el);
return node;
}
}
node.textContent = cmt.text;
if (cmt.style) {
for (var key in cmt.style) {
node.style[key] = cmt.style[key];
}
}
return node;
}
function init() {
var stage = document.createElement('div');
stage.style.cssText = 'overflow:hidden;white-space:nowrap;transform:translateZ(0);';
return stage;
}
function clear(stage) {
var lc = stage.lastChild;
while (lc) {
stage.removeChild(lc);
lc = stage.lastChild;
}
}
function resize(stage) {
stage.style.width = stage.width + 'px';
stage.style.height = stage.height + 'px';
}
function framing() {
//
}
function setup(stage, comments) {
var df = document.createDocumentFragment();
var i = 0;
var cmt = null;
for (i = 0; i < comments.length; i++) {
cmt = comments[i];
cmt.node = cmt.node || createCommentNode(cmt);
df.appendChild(cmt.node);
}
if (comments.length) {
stage.appendChild(df);
}
for (i = 0; i < comments.length; i++) {
cmt = comments[i];
cmt.width = cmt.width || cmt.node.offsetWidth;
cmt.height = cmt.height || cmt.node.offsetHeight;
}
}
function render(stage, cmt) {
cmt.node.style[transform] = 'translate(' + cmt.x + 'px,' + cmt.y + 'px)';
}
/* eslint no-invalid-this: 0 */
function remove(stage, cmt) {
stage.removeChild(cmt.node);
/* istanbul ignore else */
if (!this.media) {
cmt.node = null;
}
}
var domEngine = {
name: 'dom',
init: init,
clear: clear,
resize: resize,
framing: framing,
setup: setup,
render: render,
remove: remove,
};
var canvasHeightCache = Object.create(null);
function canvasHeight(font, fontSize) {
if (canvasHeightCache[font]) {
return canvasHeightCache[font];
}
var height = 12;
var regex = /(\d+(?:\.\d+)?)(px|%|em|rem)(?:\s*\/\s*(\d+(?:\.\d+)?)(px|%|em|rem)?)?/;
var p = font.match(regex);
if (p) {
var fs = p[1] * 1 || 10;
var fsu = p[2];
var lh = p[3] * 1 || 1.2;
var lhu = p[4];
if (fsu === '%') fs *= fontSize.container / 100;
if (fsu === 'em') fs *= fontSize.container;
if (fsu === 'rem') fs *= fontSize.root;
if (lhu === 'px') height = lh;
if (lhu === '%') height = fs * lh / 100;
if (lhu === 'em') height = fs * lh;
if (lhu === 'rem') height = fontSize.root * lh;
if (lhu === undefined) height = fs * lh;
}
canvasHeightCache[font] = height;
return height;
}
function createCommentCanvas(cmt, fontSize) {
if (typeof cmt.render === 'function') {
var cvs = cmt.render();
if (cvs instanceof HTMLCanvasElement) {
cmt.width = cvs.width;
cmt.height = cvs.height;
return cvs;
}
}
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var style = cmt.style || {};
style.font = style.font || '10px sans-serif';
style.textBaseline = style.textBaseline || 'bottom';
var strokeWidth = style.lineWidth * 1;
strokeWidth = (strokeWidth > 0 && strokeWidth !== Infinity)
? Math.ceil(strokeWidth)
: !!style.strokeStyle * 1;
ctx.font = style.font;
cmt.width = cmt.width ||
Math.max(1, Math.ceil(ctx.measureText(cmt.text).width) + strokeWidth * 2);
cmt.height = cmt.height ||
Math.ceil(canvasHeight(style.font, fontSize)) + strokeWidth * 2;
canvas.width = cmt.width;
canvas.height = cmt.height;
for (var key in style) {
ctx[key] = style[key];
}
var baseline = 0;
switch (style.textBaseline) {
case 'top':
case 'hanging':
baseline = strokeWidth;
break;
case 'middle':
baseline = cmt.height >> 1;
break;
default:
baseline = cmt.height - strokeWidth;
}
if (style.strokeStyle) {
ctx.strokeText(cmt.text, strokeWidth, baseline);
}
ctx.fillText(cmt.text, strokeWidth, baseline);
return canvas;
}
function computeFontSize(el) {
return window
.getComputedStyle(el, null)
.getPropertyValue('font-size')
.match(/(.+)px/)[1] * 1;
}
function init$1(container) {
var stage = document.createElement('canvas');
stage.context = stage.getContext('2d');
stage._fontSize = {
root: computeFontSize(document.getElementsByTagName('html')[0]),
container: computeFontSize(container)
};
return stage;
}
function clear$1(stage, comments) {
stage.context.clearRect(0, 0, stage.width, stage.height);
// avoid caching canvas to reduce memory usage
for (var i = 0; i < comments.length; i++) {
comments[i].canvas = null;
}
}
function resize$1() {
//
}
function framing$1(stage) {
stage.context.clearRect(0, 0, stage.width, stage.height);
}
function setup$1(stage, comments) {
for (var i = 0; i < comments.length; i++) {
var cmt = comments[i];
cmt.canvas = createCommentCanvas(cmt, stage._fontSize);
}
}
function render$1(stage, cmt) {
stage.context.drawImage(cmt.canvas, cmt.x, cmt.y);
}
function remove$1(stage, cmt) {
// avoid caching canvas to reduce memory usage
cmt.canvas = null;
}
var canvasEngine = {
name: 'canvas',
init: init$1,
clear: clear$1,
resize: resize$1,
framing: framing$1,
setup: setup$1,
render: render$1,
remove: remove$1,
};
/* eslint no-invalid-this: 0 */
function allocate(cmt) {
var that = this;
var ct = this.media ? this.media.currentTime : Date.now() / 1000;
var pbr = this.media ? this.media.playbackRate : 1;
function willCollide(cr, cmt) {
if (cmt.mode === 'top' || cmt.mode === 'bottom') {
return ct - cr.time < that._.duration;
}
var crTotalWidth = that._.stage.width + cr.width;
var crElapsed = crTotalWidth * (ct - cr.time) * pbr / that._.duration;
if (cr.width > crElapsed) {
return true;
}
// (rtl mode) the right end of `cr` move out of left side of stage
var crLeftTime = that._.duration + cr.time - ct;
var cmtTotalWidth = that._.stage.width + cmt.width;
var cmtTime = that.media ? cmt.time : cmt._utc;
var cmtElapsed = cmtTotalWidth * (ct - cmtTime) * pbr / that._.duration;
var cmtArrival = that._.stage.width - cmtElapsed;
// (rtl mode) the left end of `cmt` reach the left side of stage
var cmtArrivalTime = that._.duration * cmtArrival / (that._.stage.width + cmt.width);
return crLeftTime > cmtArrivalTime;
}
var crs = this._.space[cmt.mode];
var last = 0;
var curr = 0;
// START------added by zoe
// 耦合了業務代碼,不要使用!!!!!!!!!!
let find = false;
for (var i = 1; i < crs.length && i <= 5; i++) {
var cr = crs[i];
var crTotalWidth = that._.stage.width + cr.width;
if (ct - cr.time > that._.duration) {
find = true;
last = i - 1;
curr = i;
break;
}
}
if (!find) {
for (var i = 1; i < crs.length; i++) {
var cr = crs[i];
var requiredRange = cmt.height;
if (cmt.mode === 'top' || cmt.mode === 'bottom') {
requiredRange += cr.height;
}
if (cr.range - cr.height - crs[last].range >= requiredRange) {
curr = i;
break;
}
if ((i <= 5 && crs.length <= 6) || willCollide(cr, cmt)) {
last = i;
}
}
}
// 耦合了業務代碼,不要使用!!!!!!!!!!
// END------added by zoe
var channel = crs[last].range;
var crObj = {
range: channel + cmt.height,
time: this.media ? cmt.time : cmt._utc,
width: cmt.width,
height: cmt.height
};
crs.splice(last + 1, curr - last - 1, crObj);
if (cmt.mode === 'bottom') {
return this._.stage.height - cmt.height - channel % this._.stage.height;
}
var cssFontSize = window.getComputedStyle(document.getElementById('page-root')).fontSize;
cssFontSize = cssFontSize.replace('px', '');
return channel % (this._.stage.height - cmt.height) + last % 6 * 10 / 37.5 * Number(cssFontSize);
}
/* eslint no-invalid-this: 0 */
function createEngine(framing, setup, render, remove) {
return function() {
framing(this._.stage);
var dn = Date.now() / 1000;
var ct = this.media ? this.media.currentTime : dn;
var pbr = this.media ? this.media.playbackRate : 1;
var cmt = null;
var cmtt = 0;
var i = 0;
for (i = this._.runningList.length - 1; i >= 0; i--) {
cmt = this._.runningList[i];
cmtt = this.media ? cmt.time : cmt._utc;
if (ct - cmtt > this._.duration) {
remove(this._.stage, cmt);
this._.runningList.splice(i, 1);
}
}
var pendingList = [];
while (this._.position < this.comments.length) {
cmt = this.comments[this._.position];
cmtt = this.media ? cmt.time : cmt._utc;
if (cmtt >= ct) {
break;
}
// when clicking controls to seek, media.currentTime may changed before
// `pause` event is fired, so here skips comments out of duration,
// see https://github.com/weizhenye/Danmaku/pull/30 for details.
if (ct - cmtt > this._.duration) {
++this._.position;
continue;
}
if (this.media) {
cmt._utc = dn - (this.media.currentTime - cmt.time);
}
pendingList.push(cmt);
++this._.position;
}
setup(this._.stage, pendingList);
for (i = 0; i < pendingList.length; i++) {
cmt = pendingList[i];
cmt.y = allocate.call(this, cmt);
if (cmt.mode === 'top' || cmt.mode === 'bottom') {
cmt.x = (this._.stage.width - cmt.width) >> 1;
}
this._.runningList.push(cmt);
}
for (i = 0; i < this._.runningList.length; i++) {
cmt = this._.runningList[i];
var totalWidth = this._.stage.width + cmt.width;
var elapsed = totalWidth * (dn - cmt._utc) * pbr / this._.duration;
if (cmt.mode === 'ltr') cmt.x = (elapsed - cmt.width + .5) | 0;
if (cmt.mode === 'rtl') cmt.x = (this._.stage.width - elapsed + .5) | 0;
render(this._.stage, cmt);
}
};
}
var raf =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(cb) {
return setTimeout(cb, 50 / 3);
};
var caf =
window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
clearTimeout;
function binsearch(arr, prop, key) {
var mid = 0;
var left = 0;
var right = arr.length;
while (left < right - 1) {
mid = (left + right) >> 1;
if (key >= arr[mid][prop]) {
left = mid;
} else {
right = mid;
}
}
if (arr[left] && key < arr[left][prop]) {
return left;
}
return right;
}
function formatMode(mode) {
if (!/^(ltr|top|bottom)$/i.test(mode)) {
return 'rtl';
}
return mode.toLowerCase();
}
function collidableRange() {
var max = 9007199254740991;
return [
{ range: 0, time: -max, width: max, height: 0 },
{ range: max, time: max, width: 0, height: 0 }
];
}
function resetSpace(space) {
space.ltr = collidableRange();
space.rtl = collidableRange();
space.top = collidableRange();
space.bottom = collidableRange();
}
/* eslint no-invalid-this: 0 */
function play() {
if (!this._.visible || !this._.paused) {
return this;
}
this._.paused = false;
if (this.media) {
for (var i = 0; i < this._.runningList.length; i++) {
var cmt = this._.runningList[i];
cmt._utc = Date.now() / 1000 - (this.media.currentTime - cmt.time);
}
}
var that = this;
var engine = createEngine(
this._.engine.framing.bind(this),
this._.engine.setup.bind(this),
this._.engine.render.bind(this),
this._.engine.remove.bind(this)
);
function frame() {
engine.call(that);
that._.requestID = raf(frame);
}
this._.requestID = raf(frame);
return this;
}
/* eslint no-invalid-this: 0 */
function pause() {
if (!this._.visible || this._.paused) {
return this;
}
this._.paused = true;
caf(this._.requestID);
this._.requestID = 0;
return this;
}
/* eslint no-invalid-this: 0 */
function seek() {
if (!this.media) {
return this;
}
this.clear();
resetSpace(this._.space);
var position = binsearch(this.comments, 'time', this.media.currentTime);
this._.position = Math.max(0, position - 1);
return this;
}
/* eslint no-invalid-this: 0 */
function bindEvents(_) {
_.play = play.bind(this);
_.pause = pause.bind(this);
_.seeking = seek.bind(this);
this.media.addEventListener('play', _.play);
this.media.addEventListener('pause', _.pause);
this.media.addEventListener('seeking', _.seeking);
}
/* eslint no-invalid-this: 0 */
function unbindEvents(_) {
this.media.removeEventListener('play', _.play);
this.media.removeEventListener('pause', _.pause);
this.media.removeEventListener('seeking', _.seeking);
_.play = null;
_.pause = null;
_.seeking = null;
}
/* eslint-disable no-invalid-this */
function init$2(opt) {
this._ = {};
this.container = opt.container || document.createElement('div');
this.media = opt.media;
this._.visible = true;
/* istanbul ignore else */
{
this.engine = (opt.engine || 'DOM').toLowerCase();
this._.engine = this.engine === 'canvas' ? canvasEngine : domEngine;
}
/* eslint-enable no-undef */
this._.requestID = 0;
this._.speed = Math.max(0, opt.speed) || 144;
this._.duration = 4;
this.comments = opt.comments || [];
this.comments.sort(function(a, b) {
return a.time - b.time;
});
for (var i = 0; i < this.comments.length; i++) {
this.comments[i].mode = formatMode(this.comments[i].mode);
}
this._.runningList = [];
this._.position = 0;
this._.paused = true;
if (this.media) {
this._.listener = {};
bindEvents.call(this, this._.listener);
}
this._.stage = this._.engine.init(this.container);
this._.stage.style.cssText += 'position:relative;pointer-events:none;';
this.resize();
this.container.appendChild(this._.stage);
this._.space = {};
resetSpace(this._.space);
if (!this.media || !this.media.paused) {
seek.call(this);
play.call(this);
}
return this;
}
/* eslint-disable no-invalid-this */
function destroy() {
if (!this.container) {
return this;
}
pause.call(this);
this.clear();
this.container.removeChild(this._.stage);
if (this.media) {
unbindEvents.call(this, this._.listener);
}
for (var key in this) {
/* istanbul ignore else */
if (Object.prototype.hasOwnProperty.call(this, key)) {
this[key] = null;
}
}
return this;
}
var properties = ['mode', 'time', 'text', 'render', 'style'];
/* eslint-disable no-invalid-this */
function emit(obj) {
if (!obj || Object.prototype.toString.call(obj) !== '[object Object]') {
return this;
}
var cmt = {};
for (var i = 0; i < properties.length; i++) {
if (obj[properties[i]] !== undefined) {
cmt[properties[i]] = obj[properties[i]];
}
}
cmt.text = (cmt.text || '').toString();
cmt.mode = formatMode(cmt.mode);
cmt._utc = Date.now() / 1000;
if (this.media) {
var position = 0;
if (cmt.time === undefined) {
cmt.time = this.media.currentTime;
position = this._.position;
} else {
position = binsearch(this.comments, 'time', cmt.time);
if (position < this._.position) {
this._.position += 1;
}
}
this.comments.splice(position, 0, cmt);
} else {
this.comments.push(cmt);
}
return this;
}
/* eslint-disable no-invalid-this */
function show() {
if (this._.visible) {
return this;
}
this._.visible = true;
if (this.media && this.media.paused) {
return this;
}
seek.call(this);
play.call(this);
return this;
}
/* eslint-disable no-invalid-this */
function hide() {
if (!this._.visible) {
return this;
}
pause.call(this);
this.clear();
this._.visible = false;
return this;
}
/* eslint-disable no-invalid-this */
function clear$2() {
this._.engine.clear(this._.stage, this._.runningList);
this._.runningList = [];
return this;
}
/* eslint-disable no-invalid-this */
function resize$2() {
this._.stage.width = this.container.offsetWidth;
this._.stage.height = this.container.offsetHeight;
this._.engine.resize(this._.stage);
this._.duration = this._.stage.width / this._.speed;
return this;
}
var speed = {
get: function() {
return this._.speed;
},
set: function(s) {
if (typeof s !== 'number' ||
isNaN(s) ||
!isFinite(s) ||
s <= 0) {
return this._.speed;
}
this._.speed = s;
if (this._.stage.width) {
this._.duration = this._.stage.width / s;
}
return s;
}
};
function Danmaku(opt) {
opt && init$2.call(this, opt);
}
Danmaku.prototype.destroy = function() {
return destroy.call(this);
};
Danmaku.prototype.emit = function(cmt) {
return emit.call(this, cmt);
};
Danmaku.prototype.show = function() {
return show.call(this);
};
Danmaku.prototype.hide = function() {
return hide.call(this);
};
Danmaku.prototype.clear = function() {
return clear$2.call(this);
};
Danmaku.prototype.resize = function() {
return resize$2.call(this);
};
Object.defineProperty(Danmaku.prototype, 'speed', speed);
return Danmaku;
})));