JavaWeb/biliob
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update 调整弹幕按批次加载，防止过多

Browse Source
This commit is contained in:
zlzw
2024-11-28 17:54:26 +08:00
parent 903ba44bbb
commit 4474da490f
16 changed files with 289 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
Web/html/body/data.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -11,15 +12,56 @@
<div id="header"></div>
不想做了,鸽
</body>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/CommonConfig.js"></script>
<script src="/js/httpUtils.js"></script>
<script src="/layui/layui.js"></script>
<script src="/js/lodash.min.js"></script>
<script src="/js/Chart.min.js"></script>
<script>
headerModel=3;
headerModel = 3;
var roomId = getParam('roomId');
$('#header').load("/html/header.html");
</script>
<script>
function init() {
if (!hasString(getParam('roomId'))) {
showAnchor();
return
}
initTabs()
initBarrageRenderer();
}
function showAnchor() {
layer.open({
type: 2, // page 层类型
area: ['320px', '400px'],
title: '选择主播',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域，关闭弹层
maxmin: true, // 允许全屏最小化
anim: 1, // 0-6 的动画形式，-1 不开启
btn: ['确定', '取消'],
content: '/html/ui/selectAnchor.html',
yes: function (index, layero) {
var iframeWin = window[layero.find('iframe')[0]['name']];
var anchorRoomId = iframeWin.$('#anchorRoomId')[0].value;
if (!hasString(anchorRoomId)) {
layer.msg("请选择")
return
}
let url = new URL(window.location.href);
url.searchParams.set('roomId', anchorRoomId);
window.location.href = url.toString();
}
});
}
init();
</script>
<style>
</style>
</html>

2
Web/html/body/live.html
View File

@@ -91,10 +91,10 @@
{ field: 'recordPath', title: '保存路径', width: 120 },
{ field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
{ field: 'recordLive', title: '录制视频', width: 120, sort: true },
{ field: 'syncDanmuForLive', title: '同步录制', width: 120, sort: true },
{ field: 'recordDanmuDate', title: '弹幕录制预定时间', width: 100, sort: true },
{ field: 'recordLiveDate', title: '视频录制预定时间', width: 100, sort: true },
{ field: 'recordUid', title: '录制账号', width: 120, sort: true, templet: '<div><a href="https://space.bilibili.com/{{= d.recordUid}}" target="_blank">{{= d.recordUid}}</a>' },
{ field: 'recordDanmu', title: '录制弹幕', width: 120, sort: true },
{ field: 'sql_time', title: '添加时间', width: 100 },
{ fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#toolDemo" }
]],

89
Web/html/body/video.html
View File

@@ -6,11 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>视频中心</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<style>
canvas {
width: 600px;
}
</style>
</head>
<body class="layui-bg-gray">
@@ -27,36 +23,44 @@
</div>
</div>
<div class="layui-col-xs7">
<div class="grid-demo" id="container" style="margin-top: 16px; width: 100%;">
<video id="videoElement" controls style="width: 100%;"></video>
<div class="layui-row">
<div class="grid-demo" id="container" style="margin-top: 16px; width: 100%;">
<video id="videoElement" controls style="width: 100%;"></video>
</div>
</div>
<div class="layui-row">
<div class="layui-form layui-col-xs1">
<input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on
checked>
</div>
<div class="layui-col-xs9" style="text-align: center;">
&nbsp; <div id="slider" lay-options="{value: 100,input:true}"></div>
<span>弹幕透明度</span>
</div>
<div class="layui-col-xs2" style="text-align: right; align-self: center;">
弹幕装载数:<span id="danmuSize">你猜</span>
</div>
</div>
</div>
<div class="layui-col-xs2" style="margin-left: 16px; width: 22%; margin-top: 16px;">
<p style="font-size: 4;font-weight: bold; text-align: center;">Super&nbsp;Chat&nbsp;列表</p>
<div class="flow-demo" id="flow" style="height: 60vh; overflow: auto;"></div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs2">&nbsp;</div>
<div class="layui-form layui-col-xs1">
<input type="checkbox" id="danmuCheckBox" title="弹幕" lay-skin="tag" lay-filter="danmuCheckBox" on checked>
</div>
<div class="layui-col-xs4" style="text-align: center;">
&nbsp; <div id="slider" lay-options="{value: 100,input:true}"></div>
<span>弹幕透明度</span>
</div>
<div class="layui-col-xs2" style="text-align: right; align-self: center;">
弹幕装载数:<span id="danmuSize">你猜</span>
<div class="layui-col-xs2" style="margin-left: 16px; width: 22%; margin-top: 16px;">
<div class="layui-row">
<div class="layui-col-md12">
<canvas id="giftChart" style="width: 100%; max-height: 100%;"></canvas>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<p style="font-size: 4;font-weight: bold; text-align: center;">Super&nbsp;Chat&nbsp;列表</p>
<div class="flow-demo" id="flow" style="max-height: 60vh; overflow: auto;"></div>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs2">&nbsp;</div>
<div class="layui-col-xs7" style="width: auto; height: 50%;">
<canvas id="giftChart" style="width: 100%; height: 100%;"></canvas>
</div>
</div>
<div style="margin-bottom: 10vh;"></div>
<!-- <div style="margin-bottom: 10vh;"></div> -->
</body>
<script id="menulist" type="text/html">
<ul class="layui-tab-title">
@@ -252,7 +256,7 @@
lables.push(item.gift_name + "\n" + item.total_price / 100 + "¥")
values.push(item.total_gift_num)
});
if(chartView!==null){
if (chartView !== null) {
chartView.destroy()
}
chartView = new Chart($('#giftChart').get(0), {
@@ -332,13 +336,23 @@
}
function initDanmu() {
barrageRenderer.setBarrages([])
getDanmu(getParam('roomId'), videoId)
loadDanmu(0)
}
function loadDanmu(page) {
getDanmu(getParam('roomId'), videoId, page)
.then(data => {
barrageRenderer.setBarrages(data.data.danmu);
$('#danmuSize').get(0).innerHTML = data.data.danmu.length
initSC(data.data.superChat)
if (page === 0) {
initSC(data.data.superChat)
$('#danmuSize').get(0).innerHTML = data.data.danmuCount;
barrageRenderer.setBarrages(data.data.danmu)
}else{
barrageRenderer.barrageLayoutCalculate.allBarrageInstances.push(...data.data.danmu);
}
if(data.data.nextDanmu){
loadDanmu(page+1)
}
// barrageRenderer.setBarrages(data.data.danmu);
})
}
function initSC(scList) {
flow.load({
@@ -347,10 +361,7 @@
isAuto: true,
isLazyimg: false,
done: function (page, next) { // 加载下一页
// 模拟插入
console.log(scList)
laytpl($('#superChatCard').get(0).innerHTML).render(scList, function (html) {
console.log(html)
next(html, false)
});
}

3
Web/html/header.html
View File

@@ -5,6 +5,7 @@
<li class="layui-nav-item video"><a href="/html/body/video.html">视频管理</a></li>
<li class="layui-nav-item data" ><a href="/html/body/data.html">数据中心</a></li>
<li class="layui-nav-item user"><a href="/html/body/user.html">用户中心</a></li>
<li class="layui-nav-item config layui-layout-right"> <a href="/html/body/config.html"><i class="layui-icon layui-icon-set-fill" style="font-size: 20px; margin-right: 10px;"></i>系统设置</a></li>
</ul>
</body>
<!-- <script src="/layui/layui.js"></script> -->
@@ -15,11 +16,13 @@
$(".video").removeClass("layui-this")
$(".data").removeClass("layui-this")
$(".user").removeClass("layui-this")
$(".config").removeClass("layui-this")
switch(headerModel){
case 0:$(".index").addClass('layui-this');break;
case 1:$(".live").addClass('layui-this');break;
case 2:$(".video").addClass('layui-this');break;
case 3:$(".data").addClass('layui-this');break;
case 4:$(".user").addClass('layui-this');break;
case 5:$(".config").addClass('layui-this');break;
}
</script>

47
Web/html/ui/createConfig.html
View File

@@ -29,16 +29,26 @@
<input type="checkbox" name="recordLive" lay-skin="switch" lay-filter="switchTest" title="启用|禁用">
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">录制视频时<br>同步录制弹幕</label>
<div class="layui-input-block"><br>
<input type="checkbox" name="syncDanmuForLive" lay-skin="switch" lay-filter="switchSync" title="启用|禁用">
<i class="layui-icon layui-icon-help layui-text-em " onclick="timeTips2(this)"></i>
<br>
<br>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">录制日期</label>
<div class="layui-input-block">
<input type="checkbox" name="week_1" title="周一" lay-skin="tag">
<input type="checkbox" name="week_2" title="周二" lay-skin="tag">
<input type="checkbox" name="week_3" title="周三" lay-skin="tag">
<input type="checkbox" name="week_4" title="周四" lay-skin="tag">
<input type="checkbox" name="week_5" title="周五" lay-skin="tag">
<input type="checkbox" name="week_6" title="周六" lay-skin="tag">
<input type="checkbox" name="week_7" title="周日" lay-skin="tag">
<input type="checkbox" name="week_1" title="周一" lay-skin="tag">
<input type="checkbox" name="week_2" title="周二" lay-skin="tag">
<input type="checkbox" name="week_3" title="周三" lay-skin="tag">
<input type="checkbox" name="week_4" title="周四" lay-skin="tag">
<input type="checkbox" name="week_5" title="周五" lay-skin="tag">
<input type="checkbox" name="week_6" title="周六" lay-skin="tag">
<input type="checkbox" name="week_7" title="周日" lay-skin="tag">
</div>
</div>
<div class="layui-form-item">
@@ -96,6 +106,10 @@
layer.tips('仅在当前时间范围内录制,如遇到正在直播,则延迟到下播时停止录制', that);
}
}
function timeTips2(that) {
layer.tips('启用后,录制视频时会同步录制弹幕,下播后会同步停止录制.同时上面录制弹幕按钮将失效', that);
}
var roomId = getParam("roomId");
var editArray = getParam("array")
@@ -125,7 +139,7 @@
field.weeks = weeks;
console.log(field)
if (editArray === null) {
var loadIndex=showLoadingDialog();
var loadIndex = showLoadingDialog();
addRoomConfig(field)
.then(json => {
layer.close(loadIndex)
@@ -141,7 +155,7 @@
editArray.split(',').forEach(element => {
array.push(element)
});
var loadIndex=showLoadingDialog();
var loadIndex = showLoadingDialog();
setArrayRoomConfig(array, field)
.then(json => {
layer.close(loadIndex)
@@ -170,6 +184,14 @@
type: 'time',
range: true
});
form.on('switch(switchSync)', function (data) {
if (form.val('form-filter').syncDanmuForLive === 'on') {
$("[name='recordDanmu']").prop("disabled", true);
} else {
$("[name='recordDanmu']").prop("disabled", false);
}
form.render();
});
function init() {
getUserInfo();
if (roomId !== null) {
@@ -202,13 +224,18 @@
'recordDanmu': json.recordDanmu,
'recordDanmuDate': json.recordDanmuDate,
'recordLiveDate': json.recordLiveDate,
'syncDanmuForLive': json.syncDanmuForLive,
};
for (let i = 0; i < json.weeks.length; i++) {
result[`week_${json.weeks[i]}`] = true;
}
form.val('form-filter', result);
if (json.syncDanmuForLive) {
$("[name='recordDanmu']").prop("disabled", true);
} else {
$("[name='recordDanmu']").prop("disabled", false);
}
$('#url').get(0).disabled = true;
}
})