feat: 播放控制移入页眉 + 媒体铺满智能裁切

页眉播放控制(仅媒体轮播页):
- 新增 MediaHeaderControls:播放/暂停、上一段/下一段、序号、当前文件名(点击进后台)、声音解锁
- 新增 mediaControl 共享状态桥:媒体页同步播放状态,页眉订阅渲染并下发指令
- 移除媒体页底部控制区,媒体区保持纯净全屏

媒体展示:
- .ms-media 改为 object-fit: cover,填满整个容器并智能居中裁切(原 contain 留黑边)

修复:
- MediaScreen useEffect 依赖数组引用后声明函数导致的 TDZ 崩溃
- 清理 MediaScreen 中不再使用的 Icon/cleanName/togglePlayPause
This commit is contained in:
Pine
2026-08-17 22:45:46 +08:00
parent 07dbd404a9
commit 29bdad316f
6 changed files with 266 additions and 209 deletions
+4 -123
View File
@@ -67,13 +67,14 @@
-webkit-backdrop-filter: blur(14px);
}
/* 媒体播放器(铺满媒体区,等比适配 */
/* 媒体播放器(填满整个媒体区,等比裁切铺满 */
.ms-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
object-position: center;
background: transparent;
}
@@ -109,127 +110,7 @@
border-bottom: 1px solid rgba(47, 107, 255, 0.3);
}
/* 右下角轻量播放控制(弱化悬浮 */
.ms-controls {
position: absolute;
right: 16px;
bottom: 14px;
left: auto;
transform: none;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(120, 160, 220, 0.16);
border-radius: 30px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 6px 22px rgba(56, 100, 170, 0.12);
opacity: 0;
transition: opacity 0.5s ease;
}
.ms-controls.visible { opacity: 1; }
.ms-play {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(140deg, var(--bd-blue, #2f6bff), var(--bd-cyan, #4cc2ff));
cursor: pointer;
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
transition: transform 0.2s;
}
.ms-play:hover { transform: scale(1.08); }
.ms-nav {
display: flex;
align-items: center;
gap: 6px;
}
.ms-nav button {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(47, 107, 255, 0.18);
background: rgba(255, 255, 255, 0.6);
color: var(--bd-blue, #2f6bff);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.ms-nav button:hover {
background: rgba(47, 107, 255, 0.12);
border-color: rgba(47, 107, 255, 0.5);
}
.ms-nav-num {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-family: "JetBrains Mono", "Oswald", monospace;
}
.ms-nav-num b {
font-size: 13px;
color: var(--bd-ink, #1d2c44);
}
.ms-nav-num em {
font-style: normal;
font-size: 10.5px;
color: var(--bd-sub, #7d8fa9);
}
.ms-now {
display: flex;
align-items: center;
gap: 6px;
padding-left: 10px;
border-left: 1px solid rgba(47, 107, 255, 0.12);
}
.ms-now-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bd-green, #17b26a);
box-shadow: 0 0 8px rgba(23, 178, 106, 0.8);
animation: msPulse 1.6s ease-in-out infinite;
}
@keyframes msPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.75); }
}
.ms-now-name {
font-size: 11px;
font-weight: 500;
color: var(--bd-sub, #7d8fa9);
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 声音提示 */
.ms-sound {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
font-size: 11px;
font-weight: 500;
color: #4a5b76;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(47, 107, 255, 0.14);
border-radius: 30px;
cursor: pointer;
}
.ms-sound .appica-ico { color: var(--bd-blue, #2f6bff); }
/* 播放控制已上移页眉(见 datascreen.css .bd-hd-media */
/* 页脚 */
.ms-page .bd-strip { z-index: 10; position: relative; }