44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { useContext } from "react";
|
|
import { VideoPlayerContext } from "../VideoPlayer";
|
|
import { SpeakerWaveIcon, SpeakerXMarkIcon } from "@heroicons/react/24/solid";
|
|
|
|
export default function Volume() {
|
|
const { isMuted, setIsMuted, volume, setVolume, videoRef } =
|
|
useContext(VideoPlayerContext);
|
|
return (
|
|
<>
|
|
{/* 音量控制 */}
|
|
<div className="group relative flex items-center">
|
|
<button
|
|
onClick={() => setIsMuted(!isMuted)}
|
|
className="text-white hover:text-primaryHover">
|
|
{isMuted ? (
|
|
<SpeakerXMarkIcon className="w-10 h-10" />
|
|
) : (
|
|
<SpeakerWaveIcon 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"
|
|
max="1"
|
|
step="0.1"
|
|
value={volume}
|
|
onChange={(e) => {
|
|
const newVolume = parseFloat(e.target.value);
|
|
setVolume(newVolume);
|
|
if (videoRef.current) {
|
|
videoRef.current.volume = newVolume;
|
|
}
|
|
}}
|
|
className="h-24 w-2 accent-primary-500 [-webkit-appearance:slider-vertical]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|