maksim-lipenka/rn-player

A cross-platform video player with customizable controls for React Native

rn-player

A cross-platform video player with customizable controls for React Native.

Installation

yarn add @randomdotcom/rn-player or npm i --save @randomdotcom/rn-player

If you use the bare React Native, you should install the react-native-unimodules library. (BUT compatibility with bare react native has not yet been tested)

Usage

The <Video /> component that library provides is wrapper around expo-av video component.

Basic usage (without fullscreen ability):

<Video
  defaultSource={props.video.defaultSource}
  showControlsOnLoad
  shouldPlay
 />

Fullscreen example:

  import React, { useEffect, useState } from 'react';
  import { View, ActivityIndicator, Dimensions, TouchableOpacity } from 'react-native';
  import { ScreenOrientation } from 'expo'; // You can replace this library by an alternative one
  import Video from '@randomdotcom/rn-player';
  
  const HomeScreen = props => {
  const [inFullscreen, setInFullscreen] = useState(false);
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);

  useEffect(() => {
    props.getVideo(videoId);
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN);

    const orientationListener = event => {
      setScreenWidth(Dimensions.get('window').width);
      if (event.orientationInfo.orientation === 'LANDSCAPE') setInFullscreen(true);
      else setInFullscreen(false);
    };

    let subscription = ScreenOrientation.addOrientationChangeListener(orientationListener);

    return () => {
      ScreenOrientation.removeOrientationChangeListener(subscription);
    };
  }, []);

  const fullscreenOn = async () => {
    setInFullscreen(true);
    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.LANDSCAPE_RIGHT).then(() => {
      setScreenWidth(Dimensions.get('window').width);
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN);
    });
  };

  const fullscreenOff = async () => {
    setInFullscreen(false);
    ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT_UP).then(() => {
      setScreenWidth(Dimensions.get('window').width);
      ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.ALL_BUT_UPSIDE_DOWN);
    });
  };

  return props.video ? (
    <View style={{ height: '100%', backgroundColor: '#000' }}>
      <Video
        defaultSource={props.video.defaultSource}
        sources={props.video.sources}
        preview={props.video.preview}
        id={props.video.id}
        title={props.video.title}
        showControlsOnLoad
        width={screenWidth}
        inFullscreen={inFullscreen}
        onFullscreenOn={fullscreenOn}
        onFullscreenOff={fullscreenOff}
        shouldPlay
      />
    </View>
  ) : (
    <ActivityIndicator />
  );
};

video props from example

  {
  defaultSource: "https://59vod-adaptive.akamaized.net/exp=1580153415~acl=%2F226958858%2F%2A~hmac=1a1b393af9ce48f4a67447ac82f8090302bfd88f83d8db3d35a0de27229beb52/226958858/video/1309466738,798109508,798109507,798109503,798109502,798109500,798109498/master.m3u8",
  id: 226958858,
  preview: "https://i.vimeocdn.com/video/824127146_1280.jpg",
  sources: [
    {
      cdn: "akamai_interconnect",
      fps: 29,
      height: 1080,
      id: 798109503,
      mime: "video/mp4",
      origin: "gcs",
      profile: 175,
      quality: "1080p",
      url: "https://vod-progressive.akamaized.net/exp=1580153415~acl=%2A%2F798109503.mp4%2A~hmac=32ef482a50babdb19aad1493c10b2a14226859155eb8fddca8a44d5ab68922ed/vimeo-prod-skyfire-std-us/01/391/9/226958858/798109503.mp4",
      width: 1920,
    },
    {
      cdn: "akamai_interconnect",
      fps: 29,
      height: 720,
      id: 798109498,
      mime: "video/mp4",
      origin: "gcs",
      profile: 174,
      quality: "720p",
      url: "https://vod-progressive.akamaized.net/exp=1580153415~acl=%2A%2F798109498.mp4%2A~hmac=41ac793c71bb5ef15c4a2786d2e1fc8e3a09de8257a6b09ec6736fe48273d438/vimeo-prod-skyfire-std-us/01/391/9/226958858/798109498.mp4",
      width: 1280,
    },
  ],
  title: "Pursuit (4K)",
  url: "https://vimeo.com/226958858",
}

Props

prop	type	description
title	String	A title of the video on the top left
preview	Image source	A poster of the video, 'http://path/to/image'
defaultSource*	Video source	Default source of the video, 'http://path/to/video'
sources	Array<{quality, url}: {String, String}>	Additional sources of the video, [{quality: "1080p", url: 'http://path/to/video'}, {quality: "720p", uri: 'http://path/to/video'}]
width*	Number	Width of the video, pass Dimensions.get('window').width
height	Number	Default calculating from video width: width * 0.563
inFullscreen	Boolean	Is video in fullscreen? Needs to support fullscreen mode
onFullscreenOn	Function	Function that changes inFullscreen prop
onFullscreenOff	Function	Function that changes inFullscreen prop
topControlsAdditionalComponent	Component	Additional component on the top right
bottomControlsAdditionalComponent	Component	Additional component on the bottom right
minimizeIcon	Component	Custom icon
maximizeIcon	Component	Custom icon
pauseIcon	Component	Custom icon
playIcon	Component	Custom icon
replayIcon	Component	Custom icon
settingsIcon	Component	Custom icon
acitivityIndicator	Component	Custom activity indicator
sliderProps	SliderProps
sliderStyles	StyleObj
durationTextStyles	StyleObj
positionTextStyles	StyleObj
titleStyles	StyleObj

Inherits VideoProps

rn-player's Issues

Add vertical video support for full screen mode

Show replay button at the end of the video