63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { useContext } from "react";
|
|
import { VideoPlayerContext } from "../VideoPlayer";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { Cog6ToothIcon } from "@heroicons/react/24/solid";
|
|
|
|
export default function Setting() {
|
|
const {
|
|
isSettingsOpen,
|
|
setIsSettingsOpen,
|
|
resolution,
|
|
setResolution,
|
|
resolutions,
|
|
} = useContext(VideoPlayerContext);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative flex items-center">
|
|
<button
|
|
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
|
|
className="text-white hover:text-primaryHover">
|
|
<Cog6ToothIcon className="w-10 h-10" />
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{isSettingsOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 10 }}
|
|
className="absolute right-0 bottom-full mb-2 bg-black/90 rounded-lg p-4 min-w-[200px]">
|
|
{/* 清晰度选择器 */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="text-white text-sm mb-2">
|
|
清晰度
|
|
</div>
|
|
{resolutions.map((res) => (
|
|
<button
|
|
key={res.id}
|
|
onClick={() => {
|
|
setResolution(res.id);
|
|
setIsSettingsOpen(false); // 选择后关闭菜单
|
|
}}
|
|
className={`
|
|
w-full text-left px-3 py-2 rounded
|
|
${
|
|
resolution === res.id
|
|
? "bg-primary text-white"
|
|
: "text-white/90 hover:bg-white/20"
|
|
}
|
|
transition-colors duration-200
|
|
`}>
|
|
{res.label || `${res.height}p`}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|