useDocumentVisibility

import { useDocumentVisibility } from '@kivora/react';

function VideoPlayer({ src }) {
  const visibility = useDocumentVisibility();
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (visibility === 'hidden') {
      videoRef.current?.pause();
    }
  }, [visibility]);

  return <video ref={videoRef} src={src} />;
}

function VideoPlayer() {
  const visibility = useDocumentVisibility();
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (visibility === 'hidden') {
      videoRef.current?.pause();
    } else {
      videoRef.current?.play();
    }
  }, [visibility]);

  return <video ref={videoRef} src="video.mp4" />;
}

function LiveData() {
  const visibility = useDocumentVisibility();
  const [data, setData] = useState([]);

  useEffect(() => {
    if (visibility === 'hidden') return;

    const interval = setInterval(() => {
      fetchData().then(setData);
    }, 5000);

    return () => clearInterval(interval);
  }, [visibility]);

  return <div>{/* Display data */}</div>;
}

function Analytics() {
  const visibility = useDocumentVisibility();
  const [timeSpent, setTimeSpent] = useState(0);

  useEffect(() => {
    if (visibility === 'hidden') return;

    const start = Date.now();
    return () => {
      const duration = Date.now() - start;
      setTimeSpent((prev) => prev + duration);
    };
  }, [visibility]);

  return <div>Time on page: {Math.round(timeSpent / 1000)}s</div>;
}

function Chat() {
  const visibility = useDocumentVisibility();
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    const handleMessage = (msg) => {
      if (visibility === 'hidden') {
        setUnreadCount((count) => count + 1);
      }
    };

    socket.on('message', handleMessage);
    return () => socket.off('message', handleMessage);
  }, [visibility]);

  useEffect(() => {
    if (visibility === 'visible') {
      setUnreadCount(0);
    }
  }, [visibility]);

  return <div>Unread: {unreadCount}</div>;
}

function AnimatedBackground() {
  const visibility = useDocumentVisibility();

  return (
    <div 
      className={`background ${visibility === 'visible' ? 'animated' : ''}`}
    >
      {/* Background content */}
    </div>
  );
}

type DocumentVisibility = 'visible' | 'hidden';

function useDocumentVisibility(): DocumentVisibility;