Video player

Play a video from URL

import React from 'react';
import Video from 'react-native-video';
import { View } from '@evlop/native-components';
import { StyleSheet } from 'react-native';

type Props = {
  data: {
    videoUrl?: string;
    videoAspectRatio?: string | number;
    videoResizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'none';
  };
};

function parseAspectRatio(aspect?: string | number) {
  if (!aspect) return undefined;
  if (typeof aspect === 'number') return aspect;
  // accept formats like "16/9" or "1.77" or "16:9"
  const frac = aspect.toString().trim();
  if (frac.includes('/')) {
    const [w, h] = frac.split('/').map(Number);
    if (Number.isFinite(w) && Number.isFinite(h) && h !== 0) return w / h;
  }
  if (frac.includes(':')) {
    const [w, h] = frac.split(':').map(Number);
    if (Number.isFinite(w) && Number.isFinite(h) && h !== 0) return w / h;
  }
  const n = Number(frac);
  if (Number.isFinite(n) && n > 0) return n;
  return undefined;
}

export default function App(props: Props) {
  const { data = {} } = props as any;
  const { videoUrl, videoAspectRatio, videoResizeMode = 'cover' } = data;
  const aspect = parseAspectRatio(videoAspectRatio);

  return (
    <View style={[styles.container, aspect ? { aspectRatio: aspect } : undefined]}>
      {videoUrl ? (
        <Video
          source={{ uri: videoUrl }}
          style={styles.video}
          resizeMode={videoResizeMode as any}
          repeat={true}
          muted={true}
        />
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    width: '100%',
  },
  video: {
    width: '100%',
    height: '100%',
  },
});