keystone-app/components/MediaViewer.tsx

import React from 'react';
import { StyleSheet } from 'react-native';
import { Image } from 'expo-image';
import CustomVideoPlayer from './CustomVideoPlayer';

interface MediaViewerProps {
  asset: any;
  shouldPlay?: boolean;
  isActive?: boolean;
}

export default function MediaViewer({ asset, shouldPlay = true, isActive = true }: MediaViewerProps) {
  if (!asset) return null;

  const isVideo = 
    asset.mediaType === 'video' || 
    asset.filename?.toLowerCase().match(/\.(mp4|mov|avi|webm)$/i);

  if (isVideo && isActive) {
    return <CustomVideoPlayer uri={asset.uri} shouldPlay={shouldPlay} />;
  }

  // expo-image natively supports GIFs and handles caching perfectly.
  return (
    <Image
      source={{ uri: asset.uri }}
      placeholder={asset.cloudThumbUri ? { uri: asset.cloudThumbUri } : undefined}
      style={{ flex: 1, width: '100%', height: '100%' }}
      contentFit="contain"
      cachePolicy="memory-disk"
      transition={200}
      backgroundColor="transparent"
      allowDownscaling={false}
    />
  );
}