react-native-green-video

React Native wrapper for the GreenVideo SDK.

[TOC]

Installation

Yarn

Run this command:

yarn add @xymatic/react-native-green-video

npm

Run this command:

npm install @xymatic/react-native-green-video

iOS

In your ios/Podfile raise your minimum supported iOS version to 14.0 by changing this line:

platform :ios, min_ios_version_supported

to:

platform :ios, 14.0

Run pod install --repo-update in your ios subdirectory.

Android

Generally, Android should work out of the box without any changes needed. If you are getting an error about kotlin version mismatch, set a matching version inside android/build.gradle file in buildscript > ext for example:

kotlinVersion = "2.1.0"

Upgrading

Note that yarn will save the commit SHA in yarn.lock. In order to get the latest version from the main branch, you will have to delete the lockfile, remove the entry, or re-install the package.

Usage

Example

Make sure to set your own embedId and licenseKey.

import * as React from 'react';

import {
  Dimensions,
  Button,
  ActivityIndicator,
  StyleSheet,
  View,
} from 'react-native';
import {GreenVideo, type TimeUpdate} from '@xymatic/react-native-green-video';

import {
  defaultEmbedId,
  defaultContentId,
  defaultLicenseKey,
} from './src/constants';

const Example = () => {
  const [isReady, setIsReady] = React.useState(false);
  const [isPlaying, setIsPlaying] = React.useState(false);
  const [timeInfo, setTimeInfo] = React.useState({
    currentTime: 0,
    duration: 0,
  });
  const testRef = React.useRef<GreenVideo>(null);

  const play = () => {
    testRef?.current?.play();
  };

  const pause = () => {
    testRef?.current?.pause();
  };

  const seek = (position: number) => {
    testRef?.current?.seek(Math.round(position));
  };

  const onPlay = () => {
    setIsPlaying(true);
  };

  const onPause = () => {
    setIsPlaying(false);
  };

  const onReady = () => {
    setIsReady(true);
  };

  const onTimeUpdate = (event: TimeUpdate) => {
    const {currentTime, duration} = event;

    setTimeInfo({
      currentTime,
      duration,
    });
  };

  const renderControls = () => {
    if (isReady) {
      return (
        <View style={styles.buttonContainer}>
          <Button
            onPress={() => seek(timeInfo.currentTime - 15)}
            title="-15s"
          />
          <Button disabled={isPlaying} onPress={play} title="Play" />
          <Button disabled={!isPlaying} onPress={pause} title="Pause" />
          <Button
            onPress={() => seek(timeInfo.currentTime + 15)}
            title="+15s"
          />
        </View>
      );
    }

    return <ActivityIndicator />;
  };

  return (
    <View style={styles.container}>
      <GreenVideo
        ref={testRef}
        licenseKey={defaultLicenseKey}
        embedId={defaultEmbedId}
        contentId={defaultContentId}
        onPlay={onPlay}
        onPause={onPause}
        onReady={onReady}
        onTimeUpdate={onTimeUpdate}
        onSeek={time => console.log(time)}
        onMilestoneReached={milestone => console.log(milestone)}
        style={styles.video}
      />
      {renderControls()}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    marginHorizontal: 8,
    height: Dimensions.get('window').height / 2,
    width: Dimensions.get('window').width - 64,
  },
  buttonContainer: {
    height: 96,
    flexDirection: 'row',
    gap: 16,
  },
});

export default Example;

Props

| Prop | Required | Default | Type | Description | | :-------------------------- | :------: | :-----: | :-------: | :---------------------------------------------------------------- | | licenseKey | yes | none | string | Your Green Video license key | | embedId | yes | none | string | An embed id | | mixId | no | none | string | A mix id. Overrides the value in the configuration | | contentId | no | none | string | A content id | | adTagUrl | no | none | string | Url for getting ad tags | | environment | no | prod | 'staging' \| 'prod' | Which environment to use | | adsDisallowed | no | false | boolean | Disable ads | | debug | no | false | boolean | Enables detailed logging |

Functions

| Function | Arguments | Description | | :-------------------------- | :--------------: | :---------------------------------------------------------------- | | play | none | Start playback | | pause | none | Stop playback | | seek | (position: number) | Seek to position in Video in s | | seekForward | (time: number) | Seek forward from current position | | seekBackward | (time: number) | Seek backward from current position | | mute | none | Mute audio | | unmute | none | Unmute audio | | enterFullscreen | none | Enter fullscreen video | | exitFullscreen | none | Exit fullscreen video | | showUi | none | Show native player controls | | hideUi | none | Hide native player controls | | startContent | (contentIndex: number, startPaused: boolean) | Start a content by index | | startNextContent | none | Start next content | | startPreviousContent | none | Start previous content |

Events

| Events | arguments | Description | | :-------------------------- | :--------------: | :---------------------------------------------------------------- | | onPlay | none | Playback has started | | onPause | none | Playback has paused | | onMute | none | Audio was muted | | onUnmute | none | Audio was unmuted | | onEnterFullscreen | none | Player has entered fullscreen | | onExitFullscreen | none | Player has left fullscreen | | onShowUi | none | Native controls have become visible | | onHideUi | none | Native controls have disappeared | | onReplay | none | Replay has started | | onSeek | none | Seek to position / forward / backward completed | | onTimeUpdate | (timeUpdate: { currentTime: number, duration: number } | Playback time changed | | onMilestoneReached | (milestone: 'ms5' \| 'ms25' \| 'ms50' \| 'ms75' \| 'ms100') | Playback milestone reached |