fix: video preview style and static server #4324
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options. """ 概述演练这些更改主要涉及文件服务和视频预览组件的改进。在 Express 文件服务器中，新增了文件存在性检查和范围请求处理机制，增强了文件传输的健壮性。同时，在文件方案的浏览器预览中，对 VideoPreview 组件进行了性能优化，并调整了视频显示样式，提升了组件的渲染效率和布局灵活性。 变更
建议的标签
建议的审阅者
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/express-file-server/src/node/express-file-server.contribution.ts (2)
49-53: 建议使用异步文件系统方法替换同步方法为了提高性能并避免阻塞事件循环，建议将
fs.existsSync替换为异步的fs.exists或fs.promises.access。
59-60: 建议使用异步文件系统方法替换同步方法为了提高性能并避免阻塞事件循环，建议将
fs.statSync替换为异步的fs.stat或fs.promises.stat。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/express-file-server/src/node/express-file-server.contribution.ts(1 hunks)packages/file-scheme/src/browser/preview.view.tsx(2 hunks)packages/file-scheme/src/browser/style.module.less(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: build-windows
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (4)
packages/file-scheme/src/browser/preview.view.tsx (2)
19-26: 使用React.memo优化VideoPreview组件性能将
VideoPreview组件使用memo进行包裹，可以避免不必要的重新渲染，提升组件的性能。
23-23: 确认移除autoPlay属性对视频播放的影响移除了
<video>标签的autoPlay属性，添加了playsInline属性。请确认此更改符合预期，不会影响视频的自动播放和用户体验。packages/file-scheme/src/browser/style.module.less (2)
46-49: 为.kt_video_preview添加样式以改进布局新增的样式使视频预览区域居中显示，并增加了适当的内边距，提升了用户体验。
53-54: 调整.kt_video的样式以增强响应式设计将
width和height改为max-width和max-height，确保视频在父容器中保持适当比例，防止超出容器范围。
packages/express-file-server/src/node/express-file-server.contribution.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/express-file-server/src/node/express-file-server.contribution.ts (1)
70-73:⚠️ Potential issue需要对Range头部进行有效性验证
解析Range头部时需要验证解析结果：
- 确保解析后的start和end为有效数字
- 添加isNaN检查避免后续计算错误
const parts = range.replace(/bytes=/, '').split('-'); const start = parseInt(parts[0], 10); const end = parts[1] ? parseInt(parts[1], 10) : total - 1; + if (isNaN(start) || isNaN(end)) { + ctx.status = 416; + ctx.set('Content-Range', `bytes */${total}`); + return; + }
🧹 Nitpick comments (2)
packages/express-file-server/src/node/express-file-server.contribution.ts (2)
49-53: 建议使用异步API和国际化错误消息建议进行以下优化：
- 使用
fs.promises.access()替代fs.existsSync()以避免阻塞事件循环- 将错误消息抽取到国际化配置中，支持多语言
- if (!fs.existsSync(filePath)) { - ctx.status = 404; - ctx.body = '文件未找到'; - return; - } + try { + await fs.promises.access(filePath); + } catch (error) { + ctx.status = 404; + ctx.body = i18n.t('fileNotFound'); + return; + }
80-87: 建议添加流错误处理当前实现正确设置了部分内容响应，但建议添加流错误处理：
- 监听stream的'error'事件
- 在错误发生时关闭响应
const stream = fs.createReadStream(filePath, { start, end }); + stream.on('error', (error) => { + ctx.status = 500; + ctx.body = '读取文件流失败'; + stream.destroy(); + }); ctx.body = stream;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/express-file-server/src/node/express-file-server.contribution.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: build-windows
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (1)
packages/express-file-server/src/node/express-file-server.contribution.ts (1)
59-68: 代码实现正确且完整文件统计信息获取和基本响应头设置的实现是正确的：
- 使用异步API获取文件信息
- 正确设置了Content-Type和Content-Length
- 使用流式响应避免内存占用
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4324 +/- ##
==========================================
+ Coverage 54.17% 54.19% +0.02%
==========================================
Files 1637 1638 +1
Lines 100001 100084 +83
Branches 21714 21723 +9
==========================================
+ Hits 54175 54240 +65
- Misses 38075 38089 +14
- Partials 7751 7755 +4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Types
Background or solution
Changelog
Summary by CodeRabbit
新功能
样式调整
性能优化
memo提高视频预览组件的渲染性能