@video-lab/player-ui 1.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -12
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
# @video-lab/player-ui
|
|
2
2
|
|
|
3
|
-
Video Lab Player
|
|
4
|
-
inline(`video-react`)和 iframe 内部(`apps/embed-app`)用的是同一份。
|
|
3
|
+
Video Lab Player 的框架无关覆盖层。它提供四个 custom element，零框架依赖，可供 inline 和 iframe 集成共用。
|
|
5
4
|
|
|
6
5
|
依赖:只有 `@video-lab/protocol`。**没有 peer 依赖**,不依赖 React,也不依赖 Vue。
|
|
7
6
|
|
|
8
7
|
## 实现范围
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
提供四个覆盖层：`<sentinel-poster>`（封面）、`<sentinel-loading>`（缓冲）、
|
|
11
10
|
`<sentinel-error>`(错误 + 重试)、`<sentinel-pause>`(暂停时的中性广告 / 推荐插槽,可选关闭按钮)。
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
自己渲染、自跑 `setInterval` 倒计时),**刻意不在本包** —— 业务调度的覆盖层归团队层,SDK 只做
|
|
15
|
-
事件驱动、无需业务内容的自动覆盖层(Poster/Loading/Error/Pause)。
|
|
12
|
+
结束覆盖层和倒计时属于业务应用职责，刻意不在本包中实现。本包仅处理由播放器事件驱动、无需业务内容的 Poster、Loading、Error 与 Pause 覆盖层。
|
|
16
13
|
|
|
17
14
|
## 用法
|
|
18
15
|
|
|
@@ -92,7 +89,7 @@ error.addEventListener('sentinel-retry', () => {
|
|
|
92
89
|
|
|
93
90
|
## 两条红线
|
|
94
91
|
|
|
95
|
-
|
|
92
|
+
**不内置品牌 UI。** 所有颜色都通过 `--sentinel-overlay-*` CSS 变量提供。CSS 自定义属性可穿透 shadow 边界；需要调整内部结构样式时使用 `::part()`：
|
|
96
93
|
|
|
97
94
|
```css
|
|
98
95
|
.player-container {
|
|
@@ -104,18 +101,16 @@ sentinel-error::part(retry-button) {
|
|
|
104
101
|
}
|
|
105
102
|
```
|
|
106
103
|
|
|
107
|
-
|
|
104
|
+
**不内置任何翻译。** 元素只接收**已经解析好的字符串**——
|
|
108
105
|
`message` / `retry-label` / `text` 传什么显示什么,本包不做 key → 文案的查表。
|
|
109
|
-
|
|
110
|
-
SDK 内置一份"标准翻译"反而不准。
|
|
106
|
+
文案解析应由消费应用完成；不同产品和地区的术语不同，SDK 不应内置一份“标准翻译”。
|
|
111
107
|
|
|
112
108
|
> ⚠️ 只有 `retry-label` 有硬编码兜底(`'Retry'`)。不传就是英文,**不是**漏翻译的报错。
|
|
113
109
|
|
|
114
110
|
## 设计上值得知道的几件事
|
|
115
111
|
|
|
116
112
|
**注册刻意做成显式函数**,不在模块求值期自动跑。自动注册要在模块顶层碰 `customElements`,
|
|
117
|
-
而那是浏览器全局 —— SSR
|
|
118
|
-
(flv.js 是 UMD、模块求值期引用 `self`,导致 inline 模式 `next build` 直接失败,而单测 / e2e / 体积检查三层全碰不到)。
|
|
113
|
+
而那是浏览器全局 —— SSR 构建在 Node 中求值模块时会失败。`defineSentinelOverlays()` 幂等，重复调用不抛错；没有 `customElements` 的环境会返回 `false`。
|
|
119
114
|
`defineSentinelOverlays()` 幂等,重复调不抛;没有 `customElements` 的环境直接返回 `false` 空转。
|
|
120
115
|
|
|
121
116
|
**`visible: false` 时整棵子树不渲染**,而不是 `display: none`。覆盖层里有 spinner 动画,留在树里会白白跑着。
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@video-lab/player-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"dist/**/*.css"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@video-lab/protocol": "
|
|
31
|
+
"@video-lab/protocol": "2.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"jsdom": "^24.0.0",
|