Skip to content

Live UI optimization#495

Merged
xfangfang merged 23 commits into
xfangfang:devfrom
4fuu:live-ui-optimization
Jun 11, 2025
Merged

Live UI optimization#495
xfangfang merged 23 commits into
xfangfang:devfrom
4fuu:live-ui-optimization

Conversation

@4fuu
Copy link
Copy Markdown
Contributor

@4fuu 4fuu commented Mar 29, 2025

截屏2025-03-29 23 08 48

添加:1. 侧边栏:弹幕展示(表情渲染,等级、名称、粉丝牌子等展示)、醒目留言展示
2. 直播弹幕等级过滤选项(0-60 级)
3. 弹幕表情渲染
4. 主播信息展示:头像、名称、称号

不知道为什么使用 gh action 打开 unity build 选项在 win 上编译不过,手动禁用后编译能过:action

@xfangfang
Copy link
Copy Markdown
Owner

非常感谢,看起来做的很完善了,还没看代码,有个可能会影响到页面布局的选项你那边可以测试一下看看:

设置-界面设置 内有一个选项:“界面缩放”,可以调整一下,看看在不同缩放下显示效果是否都正常。

之前在其他播放页面,针对小屏幕特别做了个调整,可以对比一下其他播放页面的效果看看是否要实现。


windows 下的那个问题我稍后修复一下试试,应该是 http.hpp 里面有个宏定义冲突了。


最近看 mongoose 的代码,应该是在之前直播相关的东西实现好了之后,mongoose又更新了一个新的api:https://mongoose.ws/documentation/#mg_wakeup

mg_wakeup 可以安全地在其他线程调用,

比如下面的代码,即使加锁了也不一定是可以安全执行的,应该用 mg_wakeup 来微调一下。

void LiveDanmaku::send_heartbeat() {
brls::Logger::debug("(LiveDanmaku) send_heartbeat");
std::vector<uint8_t> packet = encode_packet(0, 2, "");
std::string packet_str(packet.begin(), packet.end());
mongoose_mutex.lock();
if (this->nc == nullptr) return;
mg_ws_send(this->nc, packet_str.data(), packet_str.size(), WEBSOCKET_OP_BINARY);
mongoose_mutex.unlock();
}

正好最近在 ps4 上写别的东西用到了 mongoose 才又想起了这个问题。

@xfangfang
Copy link
Copy Markdown
Owner

刚刚更新了一下dev分支的代码,可以rebase一下试试,如果还有问题的话,我就换windows系统在本地再看看。

@4fuu 4fuu force-pushed the live-ui-optimization branch from b227028 to 7500ae5 Compare March 30, 2025 05:01
@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Mar 30, 2025

截屏2025-03-30 13 14 17
  1. 缩放正常,图示是“适合小屏幕”的选项
  2. 已经改用mg_wakeup 发送进房请求和心跳包
  3. 基本都是围绕直播相关功能的修改,唯一会影响到其他代码的修改是直播弹幕等级的屏蔽:4fuu@4395286 看看这块有没有问题

Comment thread wiliwili/source/activity/live_player_activity.cpp Outdated
Comment thread wiliwili/source/api/util/dl_emoticon.cpp Outdated
Comment thread resources/i18n/zh-Hans/wiliwili.json
Comment thread wiliwili/source/utils/config_helper.cpp
@xfangfang
Copy link
Copy Markdown
Owner

太感谢啦,我刚刚使用了一下,体验很好。

现在已经足够完善了,我稍微从功能的角度说一下我的想法。

image

以图示为例,很多直播间进去半天也没有人说话,我在想如果可以在右侧实时互动的区域像web端一样加载一些历史记录,就会显示不是那么空荡荡。

另外一个想法就是可以在用户头像右侧加个关注取关的按钮(我记着头像那个组件里面好像就带这个按钮),这样底部右侧也不空了。

上面这个只是我现在临时想到的,可能不是很成熟,可能你还有其他的设计,只是先提出来一起讨论一下,目前的实现已经很好啦。

@xfangfang
Copy link
Copy Markdown
Owner

xfangfang commented Mar 30, 2025

// 当最前方的 activity 内不包含 videoView 时,不执行关闭全屏
brls::Activity* top = activityStack[activityStack.size() - 1];
if (!dynamic_cast<BasePlayerActivity*>(top)) {
// 判断最顶层是否为video
if (!dynamic_cast<VideoView*>(top->getContentView()->getView("video"))) return;
}
// 同时点击全屏按钮和评论会导致评论弹出在 BasePlayerActivity 和 videoView 之间,
// 因此目前需要遍历全部的 activity 找到 BasePlayerActivity
if (activityStack.size() <= 2) {
brls::Application::popActivity();
return;
}
for (size_t i = activityStack.size() - 2; i != 0; i--) {
auto* last = dynamic_cast<BasePlayerActivity*>(activityStack[i]);
if (!last) continue;
auto* video = dynamic_cast<VideoView*>(last->getView("video"));
if (video) {

VideoView 关闭全屏的操作需要在这里微调一下,当时只考虑了BasePlayerActivity 的情况,在VideoView里判断具体的某个activity确实不是很优雅,如果没什么其他好的方案可以先按照这么改着之后再改成更好的方法。

如果不改这里的话,就会出现:在全屏是暂停了视频,推出全屏发现播放/暂停 按钮显示视频还在播放

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Mar 30, 2025

太感谢啦,我刚刚使用了一下,体验很好。

现在已经足够完善了,我稍微从功能的角度说一下我的想法。

image 以图示为例,很多直播间进去半天也没有人说话,我在想如果可以在右侧实时互动的区域像web端一样加载一些历史记录,就会显示不是那么空荡荡。

另外一个想法就是可以在用户头像右侧加个关注取关的按钮(我记着头像那个组件里面好像就带这个按钮),这样底部右侧也不空了。

上面这个只是我现在临时想到的,可能不是很成熟,可能你还有其他的设计,只是先提出来一起讨论一下,目前的实现已经很好啦。

历史记录似乎是一个接口获取,我之后会尝试加上;关注按钮我后面看看你视频界面是怎么做的,回头给他加上。其他确实有一些想法,但是暂时先做成这样吧,现在先保证这块没有 bug :)

@xfangfang
Copy link
Copy Markdown
Owner

历史记录似乎是一个接口获取,我之后会尝试加上;关注按钮我后面看看你视频界面是怎么做的,回头给他加上。其他确实有一些想法,但是暂时先做成这样吧,现在先保证这块没有 bug :)

好的好的,已经很完善了,我明天再继续测测,目前有点担心在弹幕很多的时候会不会右侧的列表在psv上有性能问题,我明天再多测测。

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Mar 30, 2025

// 当最前方的 activity 内不包含 videoView 时,不执行关闭全屏
brls::Activity* top = activityStack[activityStack.size() - 1];
if (!dynamic_cast<BasePlayerActivity*>(top)) {
// 判断最顶层是否为video
if (!dynamic_cast<VideoView*>(top->getContentView()->getView("video"))) return;
}
// 同时点击全屏按钮和评论会导致评论弹出在 BasePlayerActivity 和 videoView 之间,
// 因此目前需要遍历全部的 activity 找到 BasePlayerActivity
if (activityStack.size() <= 2) {
brls::Application::popActivity();
return;
}
for (size_t i = activityStack.size() - 2; i != 0; i--) {
auto* last = dynamic_cast<BasePlayerActivity*>(activityStack[i]);
if (!last) continue;
auto* video = dynamic_cast<VideoView*>(last->getView("video"));
if (video) {

VideoView 关闭全屏的操作需要在这里微调一下,当时只考虑了BasePlayerActivity 的情况,在VideoView里判断具体的某个activity确实不是很优雅,如果没什么其他好的方案可以先按照这么改着之后再改成更好的方法。

如果不改这里的话,就会出现:在全屏是暂停了视频,推出全屏发现播放/暂停 按钮显示视频还在播放

这个问题我尝试修了一版,你看一下:640113d

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Apr 5, 2025

@xfangfang 最近能抽空合并这个pr吗?

@xfangfang
Copy link
Copy Markdown
Owner

嗯嗯,抱歉推迟了这么久,这几天事有点多

@xfangfang
Copy link
Copy Markdown
Owner

我刚刚又测试了看看,这次确实没有崩溃问题了。
有一些其他的问题,先记录在这里,这次完善或者之后有时间再搞都好。

  1. 来回切换播放器全屏,会导致弹幕重叠(这个影响很小,不改貌似也没什么)
截屏2025-04-06 10 24 47
  1. 表情弹幕位置稍微有些偏差
截屏2025-04-06 10 28 33

Comment thread wiliwili/source/activity/live_player_activity.cpp Outdated
@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Apr 6, 2025

第一个问题是因为全屏来回切换的时候,弹幕速度等会重新刷新,已经上屏的弹幕就没修改了。
第二个貌似是混合弹幕的渲染有问题,我来检查一下

@xfangfang
Copy link
Copy Markdown
Owner

感谢,还有一个小疑问,右侧的组件是一直在添加的吗?还是只保留最近多少条评论呢?如果一直添加的话有点担心对于小内存设备有影响。


右侧的历史聊天记录列表使用 ScrollingFrame 的话,我刚刚看了一下他的代码,他貌似会绘制所有内部的view,这个可能会导致psv这种设备在聊天记录很多的时候直播播放非常卡顿。这个感觉得想个解决办法:

  1. 基于 ScrollingFrame 重写一个列表
  2. 用 RecyclingGrid(支持复用组件的列表),wiliwili其他地方都是用的这个列表,但是可能不是特别适合直播右侧的列表,比如不太方便添加置顶评论。
  3. 或者提供一个选项让用户可以选择原来的直播页面?

还有就是 ImageHelper的使用,ImageHelper::load 和 ImageHelper::clear 需要成对调用,我简单看了一下好像没看到 ImageHelper::clear,ImageHelper::load的时候会给纹理添加一个计数,同一张图片loadN次,计数就是N,clear的时候会减少一次计数。

成对调用的话,在退出某个页面时,可以保证纹理计数归0。在可用的纹理缓存数量(设置里有个选项)不足时,计数非0的纹理不会被删除,计数是0的纹理会被删掉。

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Apr 6, 2025

表情和ImageHelper::clear的问题添加了修复,侧边栏目前是会保留100条,是否会造成性能问题我不太确定,你现在有条件做这个测试吗?我手边没有switch和psv能做测试,我的想法是加一个设置项,控制侧边栏保留的条数,如果选择保留到0条就关闭侧边栏的显示

@xfangfang
Copy link
Copy Markdown
Owner

这个想法很好诶,switch应该没什么性能问题,psv第一次测试的时候好像正好进了个英雄联盟比赛的直播间,一下就cpu100%了。

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Apr 6, 2025

英雄联盟比赛的直播间压力本身就大,有可能不是侧边栏的问题。
我现在添加了侧边栏的设置(界面设置/其他设置中),就是这个隐藏侧边栏后有点丑陋,所以暂时进入直播间使用全屏,或者你有更好的方法吗?便捷的设置左侧部分的宽度。
另外你可以再测试测试禁用后的负载,可以选择一些比赛的直播间,弹幕的量都比较大

Comment thread resources/i18n/en-US/wiliwili.json Outdated
Comment thread wiliwili/source/activity/live_player_activity.cpp Outdated
Comment thread wiliwili/source/activity/live_player_activity.cpp Outdated
Comment thread wiliwili/include/activity/live_player_activity.hpp Outdated
@xfangfang
Copy link
Copy Markdown
Owner

刚刚试了一下,太完美了,我周末再广泛测试一下各个平台的效果。

@xfangfang
Copy link
Copy Markdown
Owner

image

貌似侧边栏现在在什么情况下都不显示内容了。

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Apr 10, 2025

犯了个低级错误,现在应该可以了

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Jun 11, 2025

@xfangfang 关于这个直播间改进的这个 pr 你有时间能处理一下吗?

@xfangfang xfangfang merged commit 14583a4 into xfangfang:dev Jun 11, 2025
18 checks passed
@xfangfang
Copy link
Copy Markdown
Owner

抱歉这段时间不太富裕,我看issue里有人说直播弹幕最近出现问题了,本来准备下周末有空一起看一下的,如果你有时间的话也可以试一试看看好不好解决~
万分感谢

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Jun 11, 2025

抱歉这段时间不太富裕,我看issue里有人说直播弹幕最近出现问题了,本来准备下周末有空一起看一下的,如果你有时间的话也可以试一试看看好不好解决~ 万分感谢

没问题,我等会看一下

@4fuu 4fuu deleted the live-ui-optimization branch June 12, 2025 15:33
@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Jun 12, 2025

抱歉这段时间不太富裕,我看issue里有人说直播弹幕最近出现问题了,本来准备下周末有空一起看一下的,如果你有时间的话也可以试一试看看好不好解决~ 万分感谢

@xfangfang 问题出现在 get danmuku info 接口添加了 wbi 签名认证,需要使用 #505 中添加的 wbi 签名认证机制,更换一下这个pr添加的接口即可:#505 (comment)

这个 pr 是为了改进搜索功能,换了一个接口,添加了 wbi 签名验证,代码量不多,如果你的时间不紧张,可以抽空审核一下,wbi 部分初步看没有什么问题,搜索部分的我并没有检查

@xfangfang
Copy link
Copy Markdown
Owner

wbi的部分单独提交了一下,昨晚顺便测试了一下直播新页面的效果,发现了个小问题:
从小窗进入全屏页面后,全屏的播放器右上角会显示投屏按钮,直播的投屏目前还没做。


另外一个就是在直播间没有弹幕数据的时候,使用摇杆控制,焦点移动到评论区时会有一个0高度的焦点框,我感觉是不是应该直接把评论区的焦点框取消掉会好看一些呢?

同样是焦点框的问题,为了方便测试,设置成最多显示十条弹幕,当弹幕超过十条开始自动减少为十条后,使用焦点从视频区域移动到弹幕区域偶尔出现焦点框聚集在某一条评论上的问题。

对pc端来说还好,对于有一些无法触屏的linux掌机设备,焦点框的问题还是比较难受的。


我感觉如果一两个月内发下个版本的话,最好还是能在进入直播间的时候自动加载历史评论?不然界面感觉有点不太平衡,如果最近时间不太富裕的话我先把默认的设置改成不显示评论区?

@4fuu
Copy link
Copy Markdown
Contributor Author

4fuu commented Jul 7, 2025

@xfangfang 我最近的时间不是特别充裕,我会尝试解决这些问题。在下个版本发布前如果还没完善好,你可以直接默认不显示评论区

@xfangfang
Copy link
Copy Markdown
Owner

xfangfang commented Jul 29, 2025

记录另外一个问题,在关闭底部提示栏且只能触摸的情况下无法退出新版直播页,对于这个问题,其他页面的解决方案是在右上角设置一个关闭按键。


小窗模式下显示了防误触按钮,我感觉小窗模式下可以隐藏一下这个按钮。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants