refactor: 弱化媒体播放控制区 + MQTT 客户端 ID 唯一化
播放控制区：
- 从底部中央移到右下角，整体缩小（播放键 42→30px、导航键 34→26px）
- 背景更透（0.8→0.55）、阴影更轻，视觉弱化不抢内容
- 播放名不再显示完整地址：URL 媒体只显示文件名（cleanName 清洗，去掉协议/路径/查询）
MQTT 客户端 ID：
- 后端 client_id 由固定 dpm-backend 改为 dpm-backend-{pid}-{随机}，多实例不互踢
- 前端 client_id 增加时间戳 + 更高熵随机，避免多屏/多标签竞争
This commit is contained in:
Pine
+7
-1
@@ -6,6 +6,7 @@
|
||||
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
import threading
|
||||
import time
|
||||
import uuid
|
||||
@@ -22,6 +23,11 @@ def new_cmd_id():
|
||||
return uuid.uuid4().hex[:12]
|
||||
|
||||
|
||||
def _unique_client_id(base):
|
||||
"""每个客户端进程使用唯一 client_id，避免与其它实例竞争被 broker 踢下线"""
|
||||
return f"{base}-{os.getpid()}-{uuid.uuid4().hex[:6]}"
|
||||
|
||||
|
||||
class MqttHub:
|
||||
def __init__(self):
|
||||
self.client = None
|
||||
@@ -37,7 +43,7 @@ class MqttHub:
|
||||
return
|
||||
try:
|
||||
self.client = mqtt.Client(
|
||||
client_id=settings.MQTT_CLIENT_ID,
|
||||
client_id=_unique_client_id(settings.MQTT_CLIENT_ID),
|
||||
clean_session=True,
|
||||
protocol=mqtt.MQTTv311,
|
||||
)
|
||||
|
||||
@@ -16,6 +16,19 @@ import '../styles/mediascreen.css';
|
||||
页脚（园区概览条）按需保留，中间为全屏媒体播放器
|
||||
========================================================= */
|
||||
|
||||
/** 展示名清洗：URL 只取文件名，不显示完整播放地址 */
|
||||
function cleanName(name) {
|
||||
if (!name) return '';
|
||||
const text = String(name);
|
||||
try {
|
||||
const u = new URL(text);
|
||||
const last = decodeURIComponent(u.pathname.split('/').filter(Boolean).pop() || '');
|
||||
return last ? `${last}${u.search ? ' …' : ''}` : text;
|
||||
} catch {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
export default function MediaScreen() {
|
||||
const d = useParkSim();
|
||||
const navigate = useNavigate();
|
||||
@@ -496,33 +509,33 @@ export default function MediaScreen() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 中央播放控制（悬浮层） */}
|
||||
{/* 右下角轻量播放控制（弱化） */}
|
||||
<div className={`ms-controls${loaded ? ' visible' : ''}`}>
|
||||
{/* 播放/暂停 */}
|
||||
<button className="ms-play" onClick={togglePlayPause} title={paused ? '播放' : '暂停'}>
|
||||
<Icon name={paused ? 'play' : 'pause'} size={18} />
|
||||
<Icon name={paused ? 'play' : 'pause'} size={15} />
|
||||
</button>
|
||||
{/* 上一段 / 下一段 */}
|
||||
<div className="ms-nav">
|
||||
<button onClick={() => skip(-1)} title="上一段">
|
||||
<Icon name="chevron-left" size={16} />
|
||||
<Icon name="chevron-left" size={13} />
|
||||
</button>
|
||||
<span className="ms-nav-num">
|
||||
<b>{currentItem ? `${index + 1}` : '0'}</b>
|
||||
<em>/ {list.length}</em>
|
||||
</span>
|
||||
<button onClick={() => skip(1)} title="下一段">
|
||||
<Icon name="chevron-right" size={16} />
|
||||
<Icon name="chevron-right" size={13} />
|
||||
</button>
|
||||
</div>
|
||||
{/* 当前播放名 + LIVE（点击进入后台登录） */}
|
||||
{/* 当前播放（仅文件名，不显示完整地址；点击进入后台） */}
|
||||
<div className="ms-now" onClick={handleTitleClick} title="点击进入后台" style={{ cursor: 'pointer' }}>
|
||||
<span className="ms-now-dot" />
|
||||
<span className="ms-now-name">{currentItem ? currentItem.name : '等待播放…'}</span>
|
||||
<span className="ms-now-name">{currentItem ? cleanName(currentItem.name) : '等待播放…'}</span>
|
||||
</div>
|
||||
{/* 声音 */}
|
||||
<div id="soundHint" className="ms-sound" style={{ display: soundBlocked && loaded ? 'flex' : 'none' }} onClick={enableSound}>
|
||||
<Icon name="volume" size={16} />
|
||||
<Icon name="volume" size={13} />
|
||||
点击开启声音
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+39
-38
@@ -109,31 +109,32 @@
|
||||
border-bottom: 1px solid rgba(47, 107, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 中央播放控制层（悬浮） */
|
||||
/* 右下角轻量播放控制（弱化悬浮） */
|
||||
.ms-controls {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 22px;
|
||||
transform: translateX(-50%);
|
||||
right: 16px;
|
||||
bottom: 14px;
|
||||
left: auto;
|
||||
transform: none;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 18px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(120, 160, 220, 0.2);
|
||||
border-radius: 40px;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 12px 40px rgba(56, 100, 170, 0.18);
|
||||
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: 42px;
|
||||
height: 42px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
display: flex;
|
||||
@@ -142,7 +143,7 @@
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, var(--bd-blue, #2f6bff), var(--bd-cyan, #4cc2ff));
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 20px rgba(47, 107, 255, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.ms-play:hover { transform: scale(1.08); }
|
||||
@@ -150,14 +151,14 @@
|
||||
.ms-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
.ms-nav button {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(47, 107, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
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;
|
||||
@@ -172,32 +173,32 @@
|
||||
.ms-nav-num {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
gap: 3px;
|
||||
font-family: "JetBrains Mono", "Oswald", monospace;
|
||||
}
|
||||
.ms-nav-num b {
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
}
|
||||
.ms-nav-num em {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
font-size: 10.5px;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
}
|
||||
|
||||
.ms-now {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid rgba(47, 107, 255, 0.14);
|
||||
gap: 6px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid rgba(47, 107, 255, 0.12);
|
||||
}
|
||||
.ms-now-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--bd-green, #17b26a);
|
||||
box-shadow: 0 0 10px rgba(23, 178, 106, 0.8);
|
||||
box-shadow: 0 0 8px rgba(23, 178, 106, 0.8);
|
||||
animation: msPulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes msPulse {
|
||||
@@ -205,10 +206,10 @@
|
||||
50% { opacity: 0.4; transform: scale(0.75); }
|
||||
}
|
||||
.ms-now-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--bd-ink, #1d2c44);
|
||||
max-width: 280px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--bd-sub, #7d8fa9);
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -218,13 +219,13 @@
|
||||
.ms-sound {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12.5px;
|
||||
gap: 6px;
|
||||
padding: 5px 11px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #4a5b76;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(47, 107, 255, 0.16);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid rgba(47, 107, 255, 0.14);
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
+2
-1
@@ -20,7 +20,8 @@ function notifyStatus() {
|
||||
export function connectMqtt() {
|
||||
if (client) return;
|
||||
try {
|
||||
clientId = `dpm-screen-${Math.random().toString(16).slice(2, 8)}`;
|
||||
// 每个页面会话生成唯一 client_id（时间戳 + 高熵随机），避免多屏/多实例竞争
|
||||
clientId = `dpm-screen-${Date.now().toString(36)}-${Math.random().toString(16).slice(2, 12)}`;
|
||||
client = mqtt.connect(MQTT_URL, {
|
||||
reconnectPeriod: 3000,
|
||||
connectTimeout: 8000,
|
||||
|
||||
Reference in New Issue
Block a user