带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(2)

// ...
const StatusButton = forwardRef<IStatusButtonRef>((_, ref) => {
 const [status, setStatus] = useState<EStatus>(EStatus.PLAY);
 useImperativeHandle(ref, () => ({
 setStatus,
 }));
 return (
 <div className={styles.statusButton}>
 {(() => {
 switch (status) {
 case EStatus.PAUSE:
 return <div>{/* 暂停Icon */}</div>;
 case EStatus.WAITING:
 return <div>{/* 缓冲Icon */}</div>;
 default:
 return null;
 }
 })()}
 </div>
);
});
export default memo(StatusButton);

// ...
const VideoPlayer: FC<IVideoPlayer> = (props) => {
 const { source } = props;
 const videoPlayerRef = useRef<HTMLVideoElement | null>(null);
 const statusButtonRef = useRef<IStatusButtonRef | null>(null);
 const onPlay = () => {
 statusButtonRef.current?.setStatus(EPlayerStatus.PLAY);
 };
 useEffect(() => {
 videoPlayerRef.current?.addEventListener('play', onPlay);
 // 暂停(pause)和缓冲(waiting)监听方法类似
 // ...
 return () => {
 videoPlayerRef.current?.removeEventListener('play', onPlay);
 };
 }, []);
 return (
 <div className={styles.videoPlayerContainer}>
 {/* 播放器 */}
 <video
 ref={videoPlayerRef}
 className={styles.item}
 src={source}
 playsInline
 autoPlay
 />
 {/* 播放器状态按钮 */}
 <StatusButton ref={statusButtonRef} />
 </div>
 );
};
export default memo(VideoPlayer);