Picture-in-Picture Control

import { PictureInPictureIcon } from "@phosphor-icons/react"

import { Button } from "@/components/ui/button"
import { usePictureInPictureStore } from "@/hooks/limeplay/use-picture-in-picture"
import { PictureInPictureControl } from "@/components/limeplay/picture-in-picture-control"

export function PipButton() {
  const active = usePictureInPictureStore(s => s.active)

  return (
    <PictureInPictureControl asChild shortcut="P">
      <Button variant="ghost" size="icon">
        <PictureInPictureIcon
          weight={active ? "fill" : "regular"}
          size={18}
        />
      </Button>
    </PictureInPictureControl>
  )
}