import { Platform, Pressable, View, type StyleProp, type ViewStyle } from "react-native"; import { cn } from "../lib/cn";import type { DraftComposerFileAttachment } from "../lib/composerImages";import { useMediaActions, type MediaActionsSource } from "../lib/mediaActions";import { SymbolView } from "./AppSymbol";import { AppText } from "./AppText";import { MediaActionsMenu } from "./MediaActionsMenu";import { PresentationSource } from "./NativePresentation";import { VideoThumbnailImage } from "./VideoThumbnailImage"; export function VideoAttachmentTile(props: {  readonly name: string;  readonly sourceIdentifier: string;  readonly thumbnailSource: string | DraftComposerFileAttachment | null;  readonly actionsSource?: MediaActionsSource;  readonly compact?: boolean;  readonly onPress: (sourceIdentifier: string) => void;  readonly disabled?: boolean;  readonly className?: string;  readonly style?: StyleProp<ViewStyle>;}) {  const mediaActions = useMediaActions(props.disabled ? undefined : props.actionsSource);  const hasActions = mediaActions.actions.length > 0;  return (    <PresentationSource      identifier={props.sourceIdentifier}      accessible={Platform.OS === "ios"}      accessibilityRole="button"      accessibilityLabel={`Play ${props.name}`}      accessibilityState={{ disabled: props.disabled ?? false }}      onAccessibilityTap={() => {        if (!props.disabled) props.onPress(props.sourceIdentifier);      }}      accessibilityActions={mediaActions.actions.map(({ id, title }) => ({        name: id,        label: title,      }))}      onAccessibilityAction={({ nativeEvent }) => {        if (props.disabled) return;        mediaActions.actions.find(({ id }) => id === nativeEvent.actionName)?.run();      }}    >      <MediaActionsMenu media={mediaActions}>        <Pressable          accessibilityRole="button"          accessibilityLabel={`Play ${props.name}`}          accessibilityHint={hasActions ? "Touch and hold for media actions" : undefined}          accessibilityState={{ disabled: props.disabled ?? false }}          disabled={props.disabled}          onPress={() => props.onPress(props.sourceIdentifier)}          className={cn("items-center justify-center overflow-hidden bg-black/80", props.className)}          style={props.style}        >          <VideoThumbnailImage cacheKey={props.sourceIdentifier} source={props.thumbnailSource} />          <View            className={cn(              "items-center justify-center rounded-full bg-black/45",              props.compact ? "size-6" : "size-12",            )}          >            <SymbolView              name="play"              size={props.compact ? 15 : 24}              tintColor="#ffffff"              type="monochrome"            />          </View>          {!props.compact ? (            <View className="absolute inset-x-0 bottom-0 bg-black/55 px-2 py-1.5">              <AppText className="text-center text-xs text-white" numberOfLines={1}>                {props.name}              </AppText>            </View>          ) : null}        </Pressable>      </MediaActionsMenu>    </PresentationSource>  );}