37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { SubtitleDisplayProps } from "../../types/subtitle";
|
|
import { SubtitleText } from "../atoms/SubtitleText";
|
|
|
|
export function SubtitleArea({ subtitle, onWordClick, settings, className }: SubtitleDisplayProps) {
|
|
const handleWordClick = React.useCallback((word: string) => {
|
|
// 打开有道词典页面查询单词
|
|
window.open(
|
|
`https://www.youdao.com/result?word=${encodeURIComponent(word)}&lang=en`,
|
|
"_blank"
|
|
);
|
|
onWordClick?.(word);
|
|
}, [onWordClick]);
|
|
|
|
const subtitleStyle = React.useMemo(() => {
|
|
if (!settings) return { backgroundColor: 'rgba(0, 0, 0, 0.5)' };
|
|
|
|
return {
|
|
backgroundColor: settings.backgroundColor,
|
|
color: settings.textColor,
|
|
fontSize: `${settings.fontSize}px`,
|
|
fontFamily: settings.fontFamily,
|
|
opacity: settings.opacity,
|
|
};
|
|
}, [settings]);
|
|
|
|
return (
|
|
<SubtitleText
|
|
text={subtitle}
|
|
onWordClick={handleWordClick}
|
|
style={subtitleStyle}
|
|
className={className}
|
|
/>
|
|
);
|
|
} |