Pine
55 lines
1.9 KiB
React
55 lines
1.9 KiB
React
import { useState, useEffect } from 'react';
|
|
import Icon from './Icons';
|
|
import { onMediaUiState, mediaCommand } from '../utils/mediaControl';
|
|
|
|
/* =========================================================
|
|
页眉媒体控制区 —— 仅媒体轮播页显示
|
|
订阅媒体页播放状态（paused/index/total/name/soundBlocked），
|
|
点击通过 mediaCommand() 下发指令，由 MediaScreen 执行
|
|
========================================================= */
|
|
|
|
export default function MediaHeaderControls() {
|
|
const [st, setSt] = useState(null);
|
|
|
|
useEffect(() => onMediaUiState(setSt), []);
|
|
|
|
if (!st || !st.loaded) {
|
|
return (
|
|
<div className="bd-hd-media" title="媒体播放控制">
|
|
<Icon name="player-play" size={13} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bd-hd-media">
|
|
{/* 播放 / 暂停 */}
|
|
<button
|
|
className={`bd-hd-media-btn ${st.paused ? 'primary' : ''}`}
|
|
onClick={() => mediaCommand(st.paused ? 'play' : 'pause')}
|
|
title={st.paused ? '播放' : '暂停'}
|
|
>
|
|
<Icon name={st.paused ? 'play' : 'pause'} size={14} />
|
|
</button>
|
|
{/* 上一段 */}
|
|
<button className="bd-hd-media-btn" onClick={() => mediaCommand('prev')} title="上一段">
|
|
<Icon name="chevron-left" size={13} />
|
|
</button>
|
|
{/* 序号 */}
|
|
<span className="bd-hd-media-num">
|
|
<b>{st.index + 1}</b>/<em>{st.total}</em>
|
|
</span>
|
|
{/* 下一段 */}
|
|
<button className="bd-hd-media-btn" onClick={() => mediaCommand('next')} title="下一段">
|
|
<Icon name="chevron-right" size={13} />
|
|
</button>
|
|
{/* 声音解锁 */}
|
|
{st.soundBlocked && (
|
|
<button className="bd-hd-media-btn warn" onClick={() => mediaCommand('enable_sound')} title="点击开启声音">
|
|
<Icon name="volume" size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|