Function VideoPlayer

src/components/VideoPlayer2.tsx:50–731

({
  setQuality,
  options,
  contentId,
  onReady,
  onVideoEnd,
  appxVideoId,
  appxCourseId,
})

const VOLUME_LEVELS: number[] = [0, 0.2, 0.4, 0.6, 0.8, 1.0];

export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
  setQuality,
  options,
  contentId,
  onReady,
  onVideoEnd,
  appxVideoId,
  appxCourseId,
}) => {
  const videoRef = useRef<HTMLDivElement>(null);
  const playerRef = useRef<Player | null>(null);
  const [player, setPlayer] = useState<any>(null);
  const searchParams = useSearchParams();
  const vidUrl = options.sources[0].src;

  const togglePictureInPicture = async () => {
    try {
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
      } else if (document.pictureInPictureEnabled && playerRef.current) {
        playerRef.current.requestPictureInPicture();
      }
    } catch (error) {
      // Ignore specific errors that might occur during normal operation
      if (
        error instanceof Error &&
        error.name !== 'NotAllowedError' &&
        error.name !== 'NotSupportedError'
      ) {
        console.error('Failed to toggle Picture-in-Picture mode:', error);
        toast.error('Failed to toggle Picture-in-Picture mode.');
      }
    }
  };

  const PipButton = () => (
    <button
      onClick={togglePictureInPicture}
      className="flex items-center justify-center text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-gray-800"
      type="button"
      title="Picture-in-Picture"
    >
      <span className="absolute inset-0 rounded bg-black bg-opacity-50 opacity-0 transition-opacity duration-200 group-hover:opacity-100"></span>
      <PictureInPicture2 className="relative z-10 h-5 w-5" />
      <span className="sr-only">Picture-in-Picture</span>
    </button>
  );

  const createPipButton = (player: Player) => {
    const pipButtonContainer = (player as any).controlBar.addChild('button', {
      clickHandler: (event: any) => {
        event.preventDefault();
        event.stopPropagation();
        togglePictureInPicture();
      },
    });

    const root = createRoot(pipButtonContainer.el());