For React Native Apps

powered by PlayHub app

Common	Adaptive	Live Streaming

Features

• Easy Customizable: events, icons components, other props.
• Light Animated & Responsive Components
• Controls & UI:
  • Play/Pause & with BigPlay
  • Volume with adaptive icons depending on the sound level & onPress for mute/unmute.
  • Crop (resize mode).
  • Full-screen mode.
  • Overlay Sidebar: You can set you custom content in side bar, e.g. playlist or related videos.
  • Lock: You can lock the control buttons and not show them.
  • Back from full-screen.
  • Title component on full-screen, e.g. text or text with image.
• Custom Events
  • On double taps left/right.
  • On double taps video transform to full-screen, one tab set visible controls.
  • Intercepts a standard gesture/button back during full-screen mode to exit it.
  • e.g. onFullscreen, onPause/onPlay, etc.
• Video types
  • Stream/Online without time controls & mark live.
  • Video ends with time controls & dynamic formatted (h:i:s) duration times (current, end).

Props

• source array of object { size: int, src: string }
• title string
• nativeProps object, available native react-native-video props
• progressComponent component, to set the loading status

Future todo

• playlist, see Playlist Branch
• fullscreenEnabled
• hardwareEnabled
• overlayEnabled
• lockEnabled
• doubleTapFullscreenEnabled
• doubleTapSeekEnabled
• statusBarMode
• adTag, wait PR: #1839

Events

• onEventLoadStart()
• onEventLoad(videoData)
• onEventProgress(currentTime)
• onEventCrop(mode)
• onEventSeek(value)
• onEventDoubleTapSeek(seekValue, direction), direction one of left, right
• onEventFullscreen(isFullscreen)
• onEventDoubleTapFullscreen(isFullscreen)
• onEventPlayPause(isPaused)
• onEventLock(isLocked)
• onEventMute(isMuted)
• onEventVolumeChange(volumeValue)
• onEventAudioBecomingNoisy()
• onEventAudioFocusChanged(hasAudioFocus)
• onEventHardwareBackPress(isFullscreen)
• onEventOverlayClose()
• onEventOverlayOpen()
• onEventShowControls

Installation

Before install dependencies

• prop-types
• react-native-video, see manual: https://github.com/react-native-community/react-native-video
• react-native-orientation, see manual: https://github.com/yamill/react-native-orientation
• react-native-vector-icons, see manual: https://github.com/oblador/react-native-vector-icons
• @react-native-community/slider, see manual: https://github.com/react-native-community/react-native-slider
• react-native-typography, see manual: https://github.com/hectahertz/react-native-typography

Install RePLayer

• npm i @zikwall/re-player
• from git add package.json next line: "@zikwall/re-player": "git+https://git@github.com/zikwall/re-player.git"

Usage is very simple

import React from 'react';
import {
    View,
} from 'react-native';
import RePlayer from '@zikwall/re-player';

const App = () => {
    return (
        <RePlayer
             source={[
                 {
                     size: 576,
                     src: 'http://ultotv.ru:8888/live/uhd/playlist.m3u8'
                 },
                 {
                     size: 720,
                     src: 'https://previews.customer.envatousercontent.com/h264-video-previews/01940919-82fb-43b7-b688-b585f0a0abe9/2158627.mp4'
                 },
                 {
                     size: 1080,
                     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
                 },
                 {
                     size: 1080,
                     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
                 }
             ]}
             title={'Test'}
             nativeProps={{
                 poster: 'https://raw.githubusercontent.com/zikwall/re-player/master/screenshots/re-player-poster-2.png'
            }}
        />
    )
}

16:9 aspect ratio example

   // ...
    
    return (
        <View style={{ paddingTop: '56.25%' }}>
             <View style={{
                 position: 'absolute',
                 left: 0,
                 right:0,
                 bottom: 0,
                 top: 0,
                 backgroundColor: '#000'
              }}>
              <RePlayer
                  {...playerProps}
              />
            </View>
        </View>
    )

   // ...

Screenshots

General	Fullscreen