From cd447a1da49645a3966323c73ba18f16bf81fcef Mon Sep 17 00:00:00 2001 From: lukasIO Date: Wed, 3 Jul 2024 16:48:09 +0200 Subject: [PATCH] Fixes for docs package and forwardRefs components (#912) --- .changeset/quick-suns-relate.md | 7 + docs/alpha-docs/README.md | 6 - packages/core/etc/components-core.api.md | 6 +- packages/react/etc/components-react.api.md | 40 ++-- packages/react/src/components/ChatEntry.tsx | 4 +- .../react/src/components/ConnectionState.tsx | 23 +-- packages/react/src/components/LiveKitRoom.tsx | 4 +- packages/react/src/components/RoomName.tsx | 6 +- .../src/components/controls/ChatToggle.tsx | 4 +- .../components/controls/ClearPinButton.tsx | 23 +-- .../components/controls/DisconnectButton.tsx | 23 +-- .../src/components/controls/FocusToggle.tsx | 4 +- .../components/controls/MediaDeviceSelect.tsx | 173 ++++++++--------- .../controls/PaginationIndicator.tsx | 35 ++-- .../controls/SettingsMenuToggle.tsx | 23 +-- .../src/components/controls/StartAudio.tsx | 25 +-- .../components/controls/StartMediaButton.tsx | 31 +-- .../src/components/controls/TrackToggle.tsx | 4 +- .../src/components/participant/AudioTrack.tsx | 4 +- .../participant/AudioVisualizer.tsx | 79 ++++---- .../ConnectionQualityIndicator.tsx | 4 +- .../participant/ParticipantAudioTile.tsx | 83 ++++---- .../participant/ParticipantName.tsx | 47 ++--- .../participant/ParticipantTile.tsx | 181 +++++++++--------- .../participant/TrackMutedIndicator.tsx | 53 ++--- .../src/components/participant/VideoTrack.tsx | 4 +- .../src/documenters/MarkdownDocumenter.ts | 6 +- .../src/livekitUtils/classifiers.ts | 9 +- 28 files changed, 474 insertions(+), 437 deletions(-) create mode 100644 .changeset/quick-suns-relate.md delete mode 100644 docs/alpha-docs/README.md diff --git a/.changeset/quick-suns-relate.md b/.changeset/quick-suns-relate.md new file mode 100644 index 000000000..d6bab3fa4 --- /dev/null +++ b/.changeset/quick-suns-relate.md @@ -0,0 +1,7 @@ +--- +"@livekit/components-core": patch +"@livekit/components-react": patch +"@livekit/api-documenter": patch +--- + +Fix docs package parameter extraction and forwardRefs components typing diff --git a/docs/alpha-docs/README.md b/docs/alpha-docs/README.md deleted file mode 100644 index e1a7b9300..000000000 --- a/docs/alpha-docs/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# LiveKit Components **Docs** at [docs.livekit.io](https://docs.livekit.io) - -> **Info** -> The official documentation is now live at: [https://docs.livekit.io](https://docs.livekit.io) - -This **was** the temporary home for the LiveKit Component documentation, but as you can see from all the links pointing to the new location, it has moved to https://docs.livekit.io. diff --git a/packages/core/etc/components-core.api.md b/packages/core/etc/components-core.api.md index 1491cd6cc..0c6871814 100644 --- a/packages/core/etc/components-core.api.md +++ b/packages/core/etc/components-core.api.md @@ -8,7 +8,6 @@ import type { AudioCaptureOptions } from 'livekit-client'; import { BehaviorSubject } from 'rxjs'; import { ConnectionQuality } from 'livekit-client'; import { ConnectionState } from 'livekit-client'; -import createEmailRegExp from 'email-regex'; import { DataPacket_Kind } from 'livekit-client'; import type { DataPublishOptions } from 'livekit-client'; import { LocalAudioTrack } from 'livekit-client'; @@ -128,7 +127,10 @@ export const createDefaultGrammar: () => { url: RegExp; }; -export { createEmailRegExp } +// @public (undocumented) +export function createEmailRegExp({ exact }?: { + exact?: boolean; +}): RegExp; // Warning: (ae-internal-missing-underscore) The name "createInteractingObservable" should be prefixed with an underscore because the declaration is marked as @internal // diff --git a/packages/react/etc/components-react.api.md b/packages/react/etc/components-react.api.md index bbc16b422..90b75cec1 100644 --- a/packages/react/etc/components-react.api.md +++ b/packages/react/etc/components-react.api.md @@ -51,7 +51,7 @@ export interface AudioConferenceProps extends React_2.HTMLAttributes>; +export const AudioTrack: (props: AudioTrackProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface AudioTrackProps extends React_2.AudioHTMLAttributes { @@ -64,7 +64,7 @@ export interface AudioTrackProps extends React_2.AudioHTMLAttributes>; +export const AudioVisualizer: (props: AudioVisualizerProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface AudioVisualizerProps extends React_2.HTMLAttributes { @@ -103,7 +103,7 @@ export function Chat({ messageFormatter, messageDecoder, messageEncoder, channel export const ChatCloseIcon: (props: SVGProps) => React_2.JSX.Element; // @public -export const ChatEntry: React_2.ForwardRefExoticComponent>; +export const ChatEntry: (props: ChatEntryProps & React_2.RefAttributes) => React_2.ReactNode; // @public export interface ChatEntryProps extends React_2.HTMLAttributes { @@ -137,7 +137,7 @@ export interface ChatProps extends React_2.HTMLAttributes, ChatO } // @public -export const ChatToggle: React_2.ForwardRefExoticComponent>; +export const ChatToggle: (props: ChatToggleProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface ChatToggleProps extends React_2.ButtonHTMLAttributes { @@ -149,14 +149,14 @@ export interface ChatToggleProps extends React_2.ButtonHTMLAttributes) => React_2.JSX.Element; // @public -export const ClearPinButton: React_2.ForwardRefExoticComponent>; +export const ClearPinButton: (props: ClearPinButtonProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface ClearPinButtonProps extends React_2.ButtonHTMLAttributes { } // @public -export const ConnectionQualityIndicator: React_2.ForwardRefExoticComponent>; +export const ConnectionQualityIndicator: (props: ConnectionQualityIndicatorProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface ConnectionQualityIndicatorOptions { @@ -169,7 +169,7 @@ export interface ConnectionQualityIndicatorProps extends React_2.HTMLAttributes< } // @public -export const ConnectionState: React_2.ForwardRefExoticComponent>; +export const ConnectionState: (props: ConnectionStatusProps & React_2.RefAttributes) => React_2.ReactNode; // @public export function ConnectionStateToast(props: ConnectionStateToastProps): React_2.JSX.Element; @@ -209,7 +209,7 @@ export interface ControlBarProps extends React_2.HTMLAttributes } // @public -export const DisconnectButton: React_2.ForwardRefExoticComponent>; +export const DisconnectButton: (props: DisconnectButtonProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface DisconnectButtonProps extends React_2.ButtonHTMLAttributes { @@ -245,7 +245,7 @@ export interface FocusLayoutProps extends React_2.HTMLAttributes { } // @public -export const FocusToggle: React_2.ForwardRefExoticComponent>; +export const FocusToggle: (props: FocusToggleProps & React_2.RefAttributes) => React_2.ReactNode; // Warning: (ae-internal-missing-underscore) The name "FocusToggleIcon" should be prefixed with an underscore because the declaration is marked as @internal // @@ -310,9 +310,7 @@ export type LayoutContextType = { export const LeaveIcon: (props: SVGProps) => React_2.JSX.Element; // @public -export const LiveKitRoom: React_2.ForwardRefExoticComponent>; +export const LiveKitRoom: (props: React_2.PropsWithChildren & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface LiveKitRoomProps extends Omit, 'onError'> { @@ -377,7 +375,7 @@ export interface MediaDeviceMenuProps extends React_2.ButtonHTMLAttributes>; +export const MediaDeviceSelect: (props: MediaDeviceSelectProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface MediaDeviceSelectProps extends Omit, 'onError'> { @@ -430,7 +428,7 @@ export interface MultiBandTrackVolumeOptions { } // @public -export const ParticipantAudioTile: React_2.ForwardRefExoticComponent>; +export const ParticipantAudioTile: (props: ParticipantTileProps & React_2.RefAttributes) => React_2.ReactNode; // Warning: (ae-internal-missing-underscore) The name "ParticipantClickEvent" should be prefixed with an underscore because the declaration is marked as @internal // @@ -468,7 +466,7 @@ export interface ParticipantLoopProps { } // @public -export const ParticipantName: React_2.ForwardRefExoticComponent>; +export const ParticipantName: (props: ParticipantNameProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface ParticipantNameProps extends React_2.HTMLAttributes, UseParticipantInfoOptions { @@ -480,7 +478,7 @@ export interface ParticipantNameProps extends React_2.HTMLAttributes) => React_2.JSX.Element; // @public -export const ParticipantTile: React_2.ForwardRefExoticComponent>; +export const ParticipantTile: (props: ParticipantTileProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface ParticipantTileProps extends React_2.HTMLAttributes { @@ -561,7 +559,7 @@ export interface RoomAudioRendererProps { export const RoomContext: React_2.Context; // @public -export const RoomName: React_2.ForwardRefExoticComponent>; +export const RoomName: (props: RoomNameProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface RoomNameProps extends React_2.HTMLAttributes { @@ -597,7 +595,7 @@ export function setLogLevel(level: LogLevel, options?: SetLogLevelOptions): void export const SpinnerIcon: (props: SVGProps) => React_2.JSX.Element; // @public -export const StartAudio: React_2.ForwardRefExoticComponent>; +export const StartAudio: (props: AllowAudioPlaybackProps & React_2.RefAttributes) => React_2.ReactNode; // @public export function Toast(props: React_2.HTMLAttributes): React_2.JSX.Element; @@ -612,7 +610,7 @@ export interface TrackLoopProps { } // @public -export const TrackMutedIndicator: React_2.ForwardRefExoticComponent>; +export const TrackMutedIndicator: (props: TrackMutedIndicatorProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface TrackMutedIndicatorProps extends React_2.HTMLAttributes { @@ -640,7 +638,7 @@ export type TrackReferenceOrPlaceholder = TrackReference | TrackReferencePlaceho // Warning: (ae-forgotten-export) The symbol "ToggleSource" needs to be exported by the entry point index.d.ts // // @public -export const TrackToggle: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; +export const TrackToggle: (props: TrackToggleProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface TrackToggleProps extends Omit, 'onChange'> { @@ -1162,7 +1160,7 @@ export interface VideoConferenceProps extends React_2.HTMLAttributes>; +export const VideoTrack: (props: VideoTrackProps & React_2.RefAttributes) => React_2.ReactNode; // @public (undocumented) export interface VideoTrackProps extends React_2.VideoHTMLAttributes { diff --git a/packages/react/src/components/ChatEntry.tsx b/packages/react/src/components/ChatEntry.tsx index 5857539e6..90382a10a 100644 --- a/packages/react/src/components/ChatEntry.tsx +++ b/packages/react/src/components/ChatEntry.tsx @@ -33,7 +33,9 @@ export interface ChatEntryProps extends React.HTMLAttributes { * @see `Chat` * @public */ -export const ChatEntry = /* @__PURE__ */ React.forwardRef( +export const ChatEntry: ( + props: ChatEntryProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( function ChatEntry( { entry, hideName = false, hideTimestamp = false, messageFormatter, ...props }: ChatEntryProps, ref, diff --git a/packages/react/src/components/ConnectionState.tsx b/packages/react/src/components/ConnectionState.tsx index 22b5f6c67..bd9ba5d6c 100644 --- a/packages/react/src/components/ConnectionState.tsx +++ b/packages/react/src/components/ConnectionState.tsx @@ -22,14 +22,15 @@ export interface ConnectionStatusProps extends React.HTMLAttributes(function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) { - const connectionState = useConnectionState(room); - return ( -
- {connectionState} -
- ); -}); +export const ConnectionState: ( + props: ConnectionStatusProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) { + const connectionState = useConnectionState(room); + return ( +
+ {connectionState} +
+ ); + }, +); diff --git a/packages/react/src/components/LiveKitRoom.tsx b/packages/react/src/components/LiveKitRoom.tsx index 28f94cda0..71f89415e 100644 --- a/packages/react/src/components/LiveKitRoom.tsx +++ b/packages/react/src/components/LiveKitRoom.tsx @@ -100,7 +100,9 @@ export interface LiveKitRoomProps extends Omit & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef< HTMLDivElement, React.PropsWithChildren >(function LiveKitRoom(props: React.PropsWithChildren, ref) { diff --git a/packages/react/src/components/RoomName.tsx b/packages/react/src/components/RoomName.tsx index fdae07663..f5642f5ca 100644 --- a/packages/react/src/components/RoomName.tsx +++ b/packages/react/src/components/RoomName.tsx @@ -16,8 +16,12 @@ export interface RoomNameProps extends React.HTMLAttributes { * * ``` * @public + * + * @param props - RoomNameProps */ -export const RoomName = /* @__PURE__ */ React.forwardRef( +export const RoomName: ( + props: RoomNameProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( function RoomName( { childrenPosition = 'before', children, ...htmlAttributes }: RoomNameProps, ref, diff --git a/packages/react/src/components/controls/ChatToggle.tsx b/packages/react/src/components/controls/ChatToggle.tsx index 7aa5d875a..49b595dd8 100644 --- a/packages/react/src/components/controls/ChatToggle.tsx +++ b/packages/react/src/components/controls/ChatToggle.tsx @@ -17,7 +17,9 @@ export interface ChatToggleProps extends React.ButtonHTMLAttributes( +export const ChatToggle: ( + props: ChatToggleProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( function ChatToggle(props: ChatToggleProps, ref) { const { mergedProps } = useChatToggle({ props }); diff --git a/packages/react/src/components/controls/ClearPinButton.tsx b/packages/react/src/components/controls/ClearPinButton.tsx index a52f0d53f..c754027ca 100644 --- a/packages/react/src/components/controls/ClearPinButton.tsx +++ b/packages/react/src/components/controls/ClearPinButton.tsx @@ -18,14 +18,15 @@ export interface ClearPinButtonProps extends React.ButtonHTMLAttributes(function ClearPinButton(props: ClearPinButtonProps, ref) { - const { buttonProps } = useClearPinButton(props); - return ( - - ); -}); +export const ClearPinButton: ( + props: ClearPinButtonProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function ClearPinButton(props: ClearPinButtonProps, ref) { + const { buttonProps } = useClearPinButton(props); + return ( + + ); + }, +); diff --git a/packages/react/src/components/controls/DisconnectButton.tsx b/packages/react/src/components/controls/DisconnectButton.tsx index a7aae05d7..ff0840501 100644 --- a/packages/react/src/components/controls/DisconnectButton.tsx +++ b/packages/react/src/components/controls/DisconnectButton.tsx @@ -18,14 +18,15 @@ export interface DisconnectButtonProps extends React.ButtonHTMLAttributes(function DisconnectButton(props: DisconnectButtonProps, ref) { - const { buttonProps } = useDisconnectButton(props); - return ( - - ); -}); +export const DisconnectButton: ( + props: DisconnectButtonProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function DisconnectButton(props: DisconnectButtonProps, ref) { + const { buttonProps } = useDisconnectButton(props); + return ( + + ); + }, +); diff --git a/packages/react/src/components/controls/FocusToggle.tsx b/packages/react/src/components/controls/FocusToggle.tsx index fc0a8fd16..5b0f4f4c8 100644 --- a/packages/react/src/components/controls/FocusToggle.tsx +++ b/packages/react/src/components/controls/FocusToggle.tsx @@ -22,7 +22,9 @@ export interface FocusToggleProps extends React.ButtonHTMLAttributes( +export const FocusToggle: ( + props: FocusToggleProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( function FocusToggle({ trackRef, ...props }: FocusToggleProps, ref) { const trackRefFromContext = useMaybeTrackRefContext(); diff --git a/packages/react/src/components/controls/MediaDeviceSelect.tsx b/packages/react/src/components/controls/MediaDeviceSelect.tsx index de2fc02de..e7abd9c99 100644 --- a/packages/react/src/components/controls/MediaDeviceSelect.tsx +++ b/packages/react/src/components/controls/MediaDeviceSelect.tsx @@ -42,96 +42,97 @@ export interface MediaDeviceSelectProps * ``` * @public */ -export const MediaDeviceSelect = /* @__PURE__ */ React.forwardRef< - HTMLUListElement, - MediaDeviceSelectProps ->(function MediaDeviceSelect( - { - kind, - initialSelection, - onActiveDeviceChange, - onDeviceListChange, - onDeviceSelectError, - exactMatch, - track, - requestPermissions, - onError, - ...props - }: MediaDeviceSelectProps, - ref, -) { - const room = useMaybeRoomContext(); - const handleError = React.useCallback( - (e: Error) => { - if (room) { - // awkwardly emit the event from outside of the room, as we don't have other means to raise a MediaDeviceError - room.emit(RoomEvent.MediaDevicesError, e); +export const MediaDeviceSelect: ( + props: MediaDeviceSelectProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function MediaDeviceSelect( + { + kind, + initialSelection, + onActiveDeviceChange, + onDeviceListChange, + onDeviceSelectError, + exactMatch, + track, + requestPermissions, + onError, + ...props + }: MediaDeviceSelectProps, + ref, + ) { + const room = useMaybeRoomContext(); + const handleError = React.useCallback( + (e: Error) => { + if (room) { + // awkwardly emit the event from outside of the room, as we don't have other means to raise a MediaDeviceError + room.emit(RoomEvent.MediaDevicesError, e); + } + onError?.(e); + }, + [room, onError], + ); + const { devices, activeDeviceId, setActiveMediaDevice, className } = useMediaDeviceSelect({ + kind, + room, + track, + requestPermissions, + onError: handleError, + }); + React.useEffect(() => { + if (initialSelection !== undefined) { + setActiveMediaDevice(initialSelection); } - onError?.(e); - }, - [room, onError], - ); - const { devices, activeDeviceId, setActiveMediaDevice, className } = useMediaDeviceSelect({ - kind, - room, - track, - requestPermissions, - onError: handleError, - }); - React.useEffect(() => { - if (initialSelection !== undefined) { - setActiveMediaDevice(initialSelection); - } - }, [setActiveMediaDevice]); + }, [setActiveMediaDevice]); - React.useEffect(() => { - if (typeof onDeviceListChange === 'function') { - onDeviceListChange(devices); - } - }, [onDeviceListChange, devices]); + React.useEffect(() => { + if (typeof onDeviceListChange === 'function') { + onDeviceListChange(devices); + } + }, [onDeviceListChange, devices]); - React.useEffect(() => { - if (activeDeviceId && activeDeviceId !== '') { - onActiveDeviceChange?.(activeDeviceId); - } - }, [activeDeviceId]); + React.useEffect(() => { + if (activeDeviceId && activeDeviceId !== '') { + onActiveDeviceChange?.(activeDeviceId); + } + }, [activeDeviceId]); - const handleActiveDeviceChange = async (deviceId: string) => { - try { - await setActiveMediaDevice(deviceId, { exact: exactMatch }); - } catch (e) { - if (e instanceof Error) { - onDeviceSelectError?.(e); - } else { - throw e; + const handleActiveDeviceChange = async (deviceId: string) => { + try { + await setActiveMediaDevice(deviceId, { exact: exactMatch }); + } catch (e) { + if (e instanceof Error) { + onDeviceSelectError?.(e); + } else { + throw e; + } } - } - }; - // Merge Props - const mergedProps = React.useMemo( - () => mergeProps(props, { className }, { className: 'lk-list' }), - [className, props], - ); + }; + // Merge Props + const mergedProps = React.useMemo( + () => mergeProps(props, { className }, { className: 'lk-list' }), + [className, props], + ); - function isActive(deviceId: string, activeDeviceId: string, index: number) { - return deviceId === activeDeviceId || (index === 0 && activeDeviceId === 'default'); - } + function isActive(deviceId: string, activeDeviceId: string, index: number) { + return deviceId === activeDeviceId || (index === 0 && activeDeviceId === 'default'); + } - return ( -
    - {devices.map((device, index) => ( -
  • - -
    • - ))} -
- ); -}); + return ( +
    + {devices.map((device, index) => ( +
  • + +
    • + ))} +
+ ); + }, +); diff --git a/packages/react/src/components/controls/PaginationIndicator.tsx b/packages/react/src/components/controls/PaginationIndicator.tsx index b07633b33..0ec62144b 100644 --- a/packages/react/src/components/controls/PaginationIndicator.tsx +++ b/packages/react/src/components/controls/PaginationIndicator.tsx @@ -5,21 +5,22 @@ export interface PaginationIndicatorProps { currentPage: number; } -export const PaginationIndicator = /* @__PURE__ */ React.forwardRef< - HTMLDivElement, - PaginationIndicatorProps ->(function PaginationIndicator({ totalPageCount, currentPage }: PaginationIndicatorProps, ref) { - const bubbles = new Array(totalPageCount).fill('').map((_, index) => { - if (index + 1 === currentPage) { - return ; - } else { - return ; - } - }); +export const PaginationIndicator: ( + props: PaginationIndicatorProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function PaginationIndicator({ totalPageCount, currentPage }: PaginationIndicatorProps, ref) { + const bubbles = new Array(totalPageCount).fill('').map((_, index) => { + if (index + 1 === currentPage) { + return ; + } else { + return ; + } + }); - return ( -
- {bubbles} -
- ); -}); + return ( +
+ {bubbles} +
+ ); + }, +); diff --git a/packages/react/src/components/controls/SettingsMenuToggle.tsx b/packages/react/src/components/controls/SettingsMenuToggle.tsx index 94fa3f8ab..6b6890b63 100644 --- a/packages/react/src/components/controls/SettingsMenuToggle.tsx +++ b/packages/react/src/components/controls/SettingsMenuToggle.tsx @@ -11,15 +11,16 @@ export interface SettingsMenuToggleProps extends React.ButtonHTMLAttributes(function SettingsMenuToggle(props: SettingsMenuToggleProps, ref) { - const { mergedProps } = useSettingsToggle({ props }); +export const SettingsMenuToggle: ( + props: SettingsMenuToggleProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function SettingsMenuToggle(props: SettingsMenuToggleProps, ref) { + const { mergedProps } = useSettingsToggle({ props }); - return ( - - ); -}); + return ( + + ); + }, +); diff --git a/packages/react/src/components/controls/StartAudio.tsx b/packages/react/src/components/controls/StartAudio.tsx index 518adb530..3a251ca5c 100644 --- a/packages/react/src/components/controls/StartAudio.tsx +++ b/packages/react/src/components/controls/StartAudio.tsx @@ -22,16 +22,17 @@ export interface AllowAudioPlaybackProps extends React.ButtonHTMLAttributes(function StartAudio({ label = 'Allow Audio', ...props }: AllowAudioPlaybackProps, ref) { - const room = useRoomContext(); - const { mergedProps } = useStartAudio({ room, props }); +export const StartAudio: ( + props: AllowAudioPlaybackProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function StartAudio({ label = 'Allow Audio', ...props }: AllowAudioPlaybackProps, ref) { + const room = useRoomContext(); + const { mergedProps } = useStartAudio({ room, props }); - return ( - - ); -}); + return ( + + ); + }, +); diff --git a/packages/react/src/components/controls/StartMediaButton.tsx b/packages/react/src/components/controls/StartMediaButton.tsx index 7ab6cd0f2..107f4d7b4 100644 --- a/packages/react/src/components/controls/StartMediaButton.tsx +++ b/packages/react/src/components/controls/StartMediaButton.tsx @@ -22,19 +22,20 @@ export interface AllowMediaPlaybackProps extends React.ButtonHTMLAttributes(function StartMediaButton({ label, ...props }: AllowMediaPlaybackProps, ref) { - const room = useRoomContext(); - const { mergedProps: audioProps, canPlayAudio } = useStartAudio({ room, props }); - const { mergedProps, canPlayVideo } = useStartVideo({ room, props: audioProps }); - const { style, ...restProps } = mergedProps; - style.display = canPlayAudio && canPlayVideo ? 'none' : 'block'; +export const StartMediaButton: ( + props: AllowMediaPlaybackProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function StartMediaButton({ label, ...props }: AllowMediaPlaybackProps, ref) { + const room = useRoomContext(); + const { mergedProps: audioProps, canPlayAudio } = useStartAudio({ room, props }); + const { mergedProps, canPlayVideo } = useStartVideo({ room, props: audioProps }); + const { style, ...restProps } = mergedProps; + style.display = canPlayAudio && canPlayVideo ? 'none' : 'block'; - return ( - - ); -}); + return ( + + ); + }, +); diff --git a/packages/react/src/components/controls/TrackToggle.tsx b/packages/react/src/components/controls/TrackToggle.tsx index c80969f39..079e19b7b 100644 --- a/packages/react/src/components/controls/TrackToggle.tsx +++ b/packages/react/src/components/controls/TrackToggle.tsx @@ -33,7 +33,9 @@ export interface TrackToggleProps * ``` * @public */ -export const TrackToggle = /* @__PURE__ */ React.forwardRef(function TrackToggle< +export const TrackToggle: ( + props: TrackToggleProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef(function TrackToggle< T extends ToggleSource, >({ showIcon, ...props }: TrackToggleProps, ref: React.ForwardedRef) { const { buttonProps, enabled } = useTrackToggle(props); diff --git a/packages/react/src/components/participant/AudioTrack.tsx b/packages/react/src/components/participant/AudioTrack.tsx index cfe404787..9b59df264 100644 --- a/packages/react/src/components/participant/AudioTrack.tsx +++ b/packages/react/src/components/participant/AudioTrack.tsx @@ -36,7 +36,9 @@ export interface AudioTrackProps extends React.AudioHTMLAttributes( +export const AudioTrack: ( + props: AudioTrackProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( function AudioTrack( { trackRef, onSubscriptionStatusChanged, volume, muted, ...props }: AudioTrackProps, ref, diff --git a/packages/react/src/components/participant/AudioVisualizer.tsx b/packages/react/src/components/participant/AudioVisualizer.tsx index 5584882e0..b9201e7e7 100644 --- a/packages/react/src/components/participant/AudioVisualizer.tsx +++ b/packages/react/src/components/participant/AudioVisualizer.tsx @@ -18,45 +18,46 @@ export interface AudioVisualizerProps extends React.HTMLAttributes { * ``` * @public */ -export const AudioVisualizer = /* @__PURE__ */ React.forwardRef< - SVGSVGElement, - AudioVisualizerProps ->(function AudioVisualizer({ trackRef, ...props }: AudioVisualizerProps, ref) { - const svgWidth = 200; - const svgHeight = 90; - const barWidth = 6; - const barSpacing = 4; - const volMultiplier = 50; - const barCount = 7; - const trackReference = useEnsureTrackRef(trackRef); +export const AudioVisualizer: ( + props: AudioVisualizerProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function AudioVisualizer({ trackRef, ...props }: AudioVisualizerProps, ref) { + const svgWidth = 200; + const svgHeight = 90; + const barWidth = 6; + const barSpacing = 4; + const volMultiplier = 50; + const barCount = 7; + const trackReference = useEnsureTrackRef(trackRef); - const volumes = useMultibandTrackVolume(trackReference, { bands: 7, loPass: 300 }); + const volumes = useMultibandTrackVolume(trackReference, { bands: 7, loPass: 300 }); - return ( - - - - {volumes.map((vol, idx) => ( - - ))} - - - ); -}); + + + {volumes.map((vol, idx) => ( + + ))} + + + ); + }, +); diff --git a/packages/react/src/components/participant/ConnectionQualityIndicator.tsx b/packages/react/src/components/participant/ConnectionQualityIndicator.tsx index 7835e6218..a914ffe26 100644 --- a/packages/react/src/components/participant/ConnectionQualityIndicator.tsx +++ b/packages/react/src/components/participant/ConnectionQualityIndicator.tsx @@ -18,7 +18,9 @@ export interface ConnectionQualityIndicatorProps * ``` * @public */ -export const ConnectionQualityIndicator = /* @__PURE__ */ React.forwardRef< +export const ConnectionQualityIndicator: ( + props: ConnectionQualityIndicatorProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef< HTMLDivElement, ConnectionQualityIndicatorProps >(function ConnectionQualityIndicator(props: ConnectionQualityIndicatorProps, ref) { diff --git a/packages/react/src/components/participant/ParticipantAudioTile.tsx b/packages/react/src/components/participant/ParticipantAudioTile.tsx index 7936147f0..bae0e2978 100644 --- a/packages/react/src/components/participant/ParticipantAudioTile.tsx +++ b/packages/react/src/components/participant/ParticipantAudioTile.tsx @@ -21,46 +21,47 @@ import { isTrackReference } from '@livekit/components-core'; * ``` * @public */ -export const ParticipantAudioTile = /* @__PURE__ */ React.forwardRef< - HTMLDivElement, - ParticipantTileProps ->(function ParticipantAudioTile( - { - children, - disableSpeakingIndicator, - onParticipantClick, - trackRef, - ...htmlProps - }: ParticipantTileProps, - ref, -) { - const trackReference = useEnsureTrackRef(trackRef); - const { elementProps } = useParticipantTile({ - trackRef: trackReference, - htmlProps, - disableSpeakingIndicator, - onParticipantClick, - }); +export const ParticipantAudioTile: ( + props: ParticipantTileProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function ParticipantAudioTile( + { + children, + disableSpeakingIndicator, + onParticipantClick, + trackRef, + ...htmlProps + }: ParticipantTileProps, + ref, + ) { + const trackReference = useEnsureTrackRef(trackRef); + const { elementProps } = useParticipantTile({ + trackRef: trackReference, + htmlProps, + disableSpeakingIndicator, + onParticipantClick, + }); - return ( -
- - {children ?? ( - <> - {isTrackReference(trackReference) && ( - - )} - -
-
- - + return ( +
+ + {children ?? ( + <> + {isTrackReference(trackReference) && ( + + )} + +
+
+ + +
+
- -
- - )} - -
- ); -}); + + )} + +
+ ); + }, +); diff --git a/packages/react/src/components/participant/ParticipantName.tsx b/packages/react/src/components/participant/ParticipantName.tsx index 183672a7e..3860b85e4 100644 --- a/packages/react/src/components/participant/ParticipantName.tsx +++ b/packages/react/src/components/participant/ParticipantName.tsx @@ -20,30 +20,31 @@ export interface ParticipantNameProps * ``` * @public */ -export const ParticipantName = /* @__PURE__ */ React.forwardRef< - HTMLSpanElement, - ParticipantNameProps ->(function ParticipantName({ participant, ...props }: ParticipantNameProps, ref) { - const p = useEnsureParticipant(participant); +export const ParticipantName: ( + props: ParticipantNameProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function ParticipantName({ participant, ...props }: ParticipantNameProps, ref) { + const p = useEnsureParticipant(participant); - const { className, infoObserver } = React.useMemo(() => { - return setupParticipantName(p); - }, [p]); + const { className, infoObserver } = React.useMemo(() => { + return setupParticipantName(p); + }, [p]); - const { identity, name } = useObservableState(infoObserver, { - name: p.name, - identity: p.identity, - metadata: p.metadata, - }); + const { identity, name } = useObservableState(infoObserver, { + name: p.name, + identity: p.identity, + metadata: p.metadata, + }); - const mergedProps = React.useMemo(() => { - return mergeProps(props, { className, 'data-lk-participant-name': name }); - }, [props, className, name]); + const mergedProps = React.useMemo(() => { + return mergeProps(props, { className, 'data-lk-participant-name': name }); + }, [props, className, name]); - return ( - - {name !== '' ? name : identity} - {props.children} - - ); -}); + return ( + + {name !== '' ? name : identity} + {props.children} + + ); + }, +); diff --git a/packages/react/src/components/participant/ParticipantTile.tsx b/packages/react/src/components/participant/ParticipantTile.tsx index aa113b724..9a5f3519b 100644 --- a/packages/react/src/components/participant/ParticipantTile.tsx +++ b/packages/react/src/components/participant/ParticipantTile.tsx @@ -90,101 +90,102 @@ export interface ParticipantTileProps extends React.HTMLAttributes(function ParticipantTile( - { - trackRef, - children, - onParticipantClick, - disableSpeakingIndicator, - ...htmlProps - }: ParticipantTileProps, - ref, -) { - const trackReference = useEnsureTrackRef(trackRef); +export const ParticipantTile: ( + props: ParticipantTileProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function ParticipantTile( + { + trackRef, + children, + onParticipantClick, + disableSpeakingIndicator, + ...htmlProps + }: ParticipantTileProps, + ref, + ) { + const trackReference = useEnsureTrackRef(trackRef); - const { elementProps } = useParticipantTile({ - htmlProps, - disableSpeakingIndicator, - onParticipantClick, - trackRef: trackReference, - }); - const isEncrypted = useIsEncrypted(trackReference.participant); - const layoutContext = useMaybeLayoutContext(); + const { elementProps } = useParticipantTile({ + htmlProps, + disableSpeakingIndicator, + onParticipantClick, + trackRef: trackReference, + }); + const isEncrypted = useIsEncrypted(trackReference.participant); + const layoutContext = useMaybeLayoutContext(); - const autoManageSubscription = useFeatureContext()?.autoSubscription; + const autoManageSubscription = useFeatureContext()?.autoSubscription; - const handleSubscribe = React.useCallback( - (subscribed: boolean) => { - if ( - trackReference.source && - !subscribed && - layoutContext && - layoutContext.pin.dispatch && - isTrackReferencePinned(trackReference, layoutContext.pin.state) - ) { - layoutContext.pin.dispatch({ msg: 'clear_pin' }); - } - }, - [trackReference, layoutContext], - ); + const handleSubscribe = React.useCallback( + (subscribed: boolean) => { + if ( + trackReference.source && + !subscribed && + layoutContext && + layoutContext.pin.dispatch && + isTrackReferencePinned(trackReference, layoutContext.pin.state) + ) { + layoutContext.pin.dispatch({ msg: 'clear_pin' }); + } + }, + [trackReference, layoutContext], + ); - return ( -
- - - {children ?? ( - <> - {isTrackReference(trackReference) && - (trackReference.publication?.kind === 'video' || - trackReference.source === Track.Source.Camera || - trackReference.source === Track.Source.ScreenShare) ? ( - - ) : ( - isTrackReference(trackReference) && ( - + + + {children ?? ( + <> + {isTrackReference(trackReference) && + (trackReference.publication?.kind === 'video' || + trackReference.source === Track.Source.Camera || + trackReference.source === Track.Source.ScreenShare) ? ( + - ) - )} -
- -
-
-
- {trackReference.source === Track.Source.Camera ? ( - <> - {isEncrypted && } - - - - ) : ( - <> - - 's screen - - )} + ) : ( + isTrackReference(trackReference) && ( + + ) + )} +
+
- -
- - )} - - - -
- ); -}); +
+
+ {trackReference.source === Track.Source.Camera ? ( + <> + {isEncrypted && } + + + + ) : ( + <> + + 's screen + + )} +
+ +
+ + )} + + + +
+ ); + }, +); diff --git a/packages/react/src/components/participant/TrackMutedIndicator.tsx b/packages/react/src/components/participant/TrackMutedIndicator.tsx index 891ac36cb..6659710ea 100644 --- a/packages/react/src/components/participant/TrackMutedIndicator.tsx +++ b/packages/react/src/components/participant/TrackMutedIndicator.tsx @@ -20,33 +20,34 @@ export interface TrackMutedIndicatorProps extends React.HTMLAttributes(function TrackMutedIndicator( - { trackRef, show = 'always', ...props }: TrackMutedIndicatorProps, - ref, -) { - const { className, isMuted } = useTrackMutedIndicator(trackRef); +export const TrackMutedIndicator: ( + props: TrackMutedIndicatorProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( + function TrackMutedIndicator( + { trackRef, show = 'always', ...props }: TrackMutedIndicatorProps, + ref, + ) { + const { className, isMuted } = useTrackMutedIndicator(trackRef); - const showIndicator = - show === 'always' || (show === 'muted' && isMuted) || (show === 'unmuted' && !isMuted); + const showIndicator = + show === 'always' || (show === 'muted' && isMuted) || (show === 'unmuted' && !isMuted); - const htmlProps = React.useMemo( - () => - mergeProps(props, { - className, - }), - [className, props], - ); + const htmlProps = React.useMemo( + () => + mergeProps(props, { + className, + }), + [className, props], + ); - if (!showIndicator) { - return null; - } + if (!showIndicator) { + return null; + } - return ( -
- {props.children ?? getSourceIcon(trackRef.source, !isMuted)} -
- ); -}); + return ( +
+ {props.children ?? getSourceIcon(trackRef.source, !isMuted)} +
+ ); + }, +); diff --git a/packages/react/src/components/participant/VideoTrack.tsx b/packages/react/src/components/participant/VideoTrack.tsx index 5eee8336d..efc3f7699 100644 --- a/packages/react/src/components/participant/VideoTrack.tsx +++ b/packages/react/src/components/participant/VideoTrack.tsx @@ -25,7 +25,9 @@ export interface VideoTrackProps extends React.VideoHTMLAttributes( +export const VideoTrack: ( + props: VideoTrackProps & React.RefAttributes, +) => React.ReactNode = /* @__PURE__ */ React.forwardRef( function VideoTrack( { onTrackClick, diff --git a/tooling/api-documenter/src/documenters/MarkdownDocumenter.ts b/tooling/api-documenter/src/documenters/MarkdownDocumenter.ts index 1932cf14a..11c41cc6b 100644 --- a/tooling/api-documenter/src/documenters/MarkdownDocumenter.ts +++ b/tooling/api-documenter/src/documenters/MarkdownDocumenter.ts @@ -49,6 +49,7 @@ import { IFindApiItemsResult, Parameter, ApiPropertySignature, + ApiVariable, } from '@microsoft/api-extractor-model'; import { CustomDocNodes } from '../nodes/CustomDocNodeKind'; @@ -322,6 +323,7 @@ export class MarkdownDocumenter { case ApiItemKind.Method: case ApiItemKind.MethodSignature: case ApiItemKind.Function: + case ApiItemKind.Variable: // Print property table into component/prefab page. if (category === 'component' || category === 'prefab') { this._writeComponentPropertyList(output, apiItem as ApiParameterListMixin); @@ -344,8 +346,6 @@ export class MarkdownDocumenter { break; case ApiItemKind.TypeAlias: break; - case ApiItemKind.Variable: - break; default: throw new Error('Unsupported API item kind: ' + apiItem.kind); } @@ -1148,7 +1148,7 @@ export class MarkdownDocumenter { const parameters: ReadonlyArray = apiItem.parameters; - if (parameters.length > 0) { + if (parameters?.length > 0) { const props = parameters[0]; if (props !== undefined) { for (const token of props.parameterTypeExcerpt.tokens) { diff --git a/tooling/api-documenter/src/livekitUtils/classifiers.ts b/tooling/api-documenter/src/livekitUtils/classifiers.ts index 68bed78c0..8812a9e86 100644 --- a/tooling/api-documenter/src/livekitUtils/classifiers.ts +++ b/tooling/api-documenter/src/livekitUtils/classifiers.ts @@ -25,8 +25,9 @@ function isConstDeclarationComponent(apiItem: ApiItem): boolean { apiItem.isReadonly && apiItem.excerptTokens.some( (token) => - token.kind === ExcerptTokenKind.Reference && - ['React.ReactNode', 'React.Context'].includes(token.text), + (token.kind === ExcerptTokenKind.Reference && + ['React.ReactNode', 'React.Context'].includes(token.text)) || + token.text.startsWith('HTML'), ) ); } @@ -84,7 +85,9 @@ export function getCategorySubfolder(apiItem: ApiItem): string { } let category: string = ''; - switch (getFunctionType(apiItem)) { + const functionType = getFunctionType(apiItem); + + switch (functionType) { case 'component': case 'prefab': category = 'component';