Cursor Player

1'use client';
2 
3import * as React from 'react';
4import { Pause, Play, Square } from 'lucide-react';
5import { Slot } from 'radix-ui';
6 
7import { Button } from '@/components/ui/button';
8import { cn } from '@/lib/utils';
9import { type CursorPlayerRuntime, useCursorPlayer } from './use-cursor-player';
10 
11interface CursorPlayerRootProps<TCursor extends CursorPlayerRuntime> {
12  createCursor: (anchorElement: HTMLElement) => TCursor;
13  buildSequence: (cursor: TCursor, anchorElement: HTMLElement) => void;
14  onError?: (error: unknown) => void;
15  children: React.ReactNode;
16}
17 
18interface CursorPlayerPartProps extends React.HTMLAttributes<HTMLDivElement> {
19  asChild?: boolean;
20}
21 
22type CursorPlayerHotspot = 'top-left' | 'center' | { x: number; y: number };
23 
24interface CursorPlayerCursorProps extends CursorPlayerPartProps {
25  hotspot?: CursorPlayerHotspot;
26}
27 
28interface CursorPlayerButtonProps extends React.ComponentProps<typeof Button> {
29  children?: React.ReactNode;
30}
31 
32interface CursorPlayerIconProps extends React.HTMLAttributes<HTMLElement> {
33  asChild?: boolean;
34  children?: React.ReactNode;
35}
36 
37const CursorPlayerContext = React.createContext<CursorPlayerContextValue | null>(null);
38 
39function useCursorPlayerContext() {
40  const value = React.useContext(CursorPlayerContext);
41 
42  if (!value) {
43    throw new Error('CursorPlayer components must be used inside <CursorPlayer>.');
44  }
45 
46  return value;
47}
48 
49function isPlayVisible(state: CursorPlayerContextValue['state']) {
50  return state !== 'running';
51}
52 
53function isPauseVisible(state: CursorPlayerContextValue['state']) {
54  return state === 'running';
55}
56 
57type CursorPlayerContextValue = ReturnType<typeof useCursorPlayer>;
58type CursorPlayerRootComponent = <TCursor extends CursorPlayerRuntime>(
59  props: CursorPlayerRootProps<TCursor>,
60) => React.ReactElement;
61 
62const CursorPlayerRoot: CursorPlayerRootComponent = ({
63  createCursor,
64  buildSequence,
65  onError,
66  children,
67}) => {
68  const controls = useCursorPlayer({ createCursor, buildSequence, onError });
69 
70  return <CursorPlayerContext.Provider value={controls}>{children}</CursorPlayerContext.Provider>;
71};
72 
73function getHotspotPosition(hotspot: CursorPlayerHotspot | undefined): {
74  left: string;
75  top: string;
76} {
77  if (hotspot === 'center') {
78    return { left: '50%', top: '50%' };
79  }
80 
81  if (hotspot && typeof hotspot === 'object') {
82    return { left: `${hotspot.x}px`, top: `${hotspot.y}px` };
83  }
84 
85  return { left: '0px', top: '0px' };
86}
87 
88function CursorPlayerCursor({
89  className,
90// … truncated