You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.2 KiB
33 lines
1.2 KiB
import { Icon, Icons } from "@/components/Icon"; |
|
import { useVideoPlayerDescriptor } from "@/video/state/hooks"; |
|
import { useControls } from "@/video/state/logic/controls"; |
|
import { useInterface } from "@/video/state/logic/interface"; |
|
import { useMediaPlaying } from "@/video/state/logic/mediaplaying"; |
|
|
|
export function VolumeAdjustedAction() { |
|
const descriptor = useVideoPlayerDescriptor(); |
|
const videoInterface = useInterface(descriptor); |
|
const mediaPlaying = useMediaPlaying(descriptor); |
|
|
|
return ( |
|
<div |
|
className={[ |
|
videoInterface.volumeChangedWithKeybind |
|
? "mt-10 scale-100 opacity-100" |
|
: "mt-5 scale-75 opacity-0", |
|
"absolute left-1/2 z-[100] flex -translate-x-1/2 items-center space-x-4 rounded-full bg-bink-300 bg-opacity-50 py-2 px-5 transition-all duration-100", |
|
].join(" ")} |
|
> |
|
<Icon |
|
icon={mediaPlaying.volume > 0 ? Icons.VOLUME : Icons.VOLUME_X} |
|
className="text-xl text-white" |
|
/> |
|
<div className="h-2 w-44 overflow-hidden rounded-full bg-denim-100"> |
|
<div |
|
className="h-full rounded-r-full bg-bink-500 transition-[width] duration-100" |
|
style={{ width: `${mediaPlaying.volume * 100}%` }} |
|
/> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|