33 lines
979 B
TypeScript
33 lines
979 B
TypeScript
import { SunIcon } from "@heroicons/react/24/solid";
|
|
import { useContext } from "react";
|
|
import { VideoPlayerContext } from "../VideoPlayer";
|
|
|
|
export default function Brightness() {
|
|
const { brightness, setBrightness } = useContext(VideoPlayerContext);
|
|
return (
|
|
<>
|
|
{/* 亮度控制 */}
|
|
<div className="relative group flex items-center">
|
|
<button className="text-white hover:text-primaryHover">
|
|
<SunIcon className="w-10 h-10" />
|
|
</button>
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
<div className="bg-black/80 rounded-lg p-2">
|
|
<input
|
|
type="range"
|
|
min="0.1"
|
|
max="2"
|
|
step="0.1"
|
|
value={brightness}
|
|
onChange={(e) =>
|
|
setBrightness(parseFloat(e.target.value))
|
|
}
|
|
className="h-24 w-2 accent-primary-500 [-webkit-appearance:slider-vertical]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|