Fix ref type for AudioPlayer

packages/ui/src/components/AudioPost.tsx

@@ -1,9 +1,9 @@
-import { ElementRef, useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { View } from 'tamagui';
 
 import { RenderItemType } from '../contexts/componentsKits';
 import { ChatAuthorRow } from './AuthorRow';
-import { AudioPlayer } from './Embed/AudioEmbed';
+import { AudioPlayer, AudioPlayerHandle } from './Embed/AudioEmbed';
 import { convertContent } from './PostContent/contentUtils';
 
 export const AudioPost: RenderItemType = (props) => {
@@ -15,7 +15,7 @@ export const AudioPost: RenderItemType = (props) => {
     return null;
   }, [props.post.content]);
 
-  const playerRef = useRef<ElementRef<typeof AudioPlayer>>(null);
+  const playerRef = useRef<AudioPlayerHandle>(null);
 
   const togglePlayback = useCallback(async () => {
     const player = playerRef.current;

packages/ui/src/components/Embed/AudioEmbed.native.tsx

@@ -22,6 +22,8 @@ import { LoadingSpinner } from '../LoadingSpinner';
 import * as shared from './AudioEmbedShared';
 import { Embed } from './Embed';
 
+export type { AudioPlayerHandle } from './AudioEmbedShared';
+
 const AudioEmbed: shared.AudioEmbed = ({ url }: { url: string }) => {
   const [showModal, setShowModal] = useState(false);
   const playerRef = useRef<ElementRef<typeof AudioPlayer>>(null);

packages/ui/src/components/Embed/AudioEmbed.tsx

@@ -2,6 +2,8 @@ import { forwardRef } from 'react';
 
 import * as shared from './AudioEmbedShared';
 
+export type { AudioPlayerHandle } from './AudioEmbedShared';
+
 const AudioEmbed: shared.AudioEmbed = ({ url }: { url: string }) => {
   // TODO: This is a placeholder for web. Implement a better audio player.
 

packages/ui/src/components/Embed/AudioEmbedShared.ts

@@ -1,12 +1,12 @@
-import { ComponentType, ForwardRefExoticComponent } from 'react';
+import { ComponentType, Ref } from 'react';
 
 export type AudioEmbed = ComponentType<{ url: string }>;
-export type AudioPlayer = ForwardRefExoticComponent<
-  {
-    url: string;
-    canUnload?: boolean | undefined;
-  } & React.RefAttributes<{
-    togglePlayPause: () => Promise<{ isPlaying: boolean }>;
-    stop: () => void;
-  }>
->;
+export type AudioPlayerHandle = {
+  togglePlayPause: () => Promise<{ isPlaying: boolean }>;
+  stop: () => void;
+};
+export type AudioPlayer = ComponentType<{
+  url: string;
+  canUnload?: boolean | undefined;
+  ref?: Ref<AudioPlayerHandle>;
+}>;