VideoSurface

You.i TV’s implementation of a video surface that can take any player resource created by the PlayerManager. The PlayerManager module handles the lifecycle of a PlayerResource, and the state of the video is configured via the PlayerResource methods.

Note that a video player can only render to one surface at a time.

Example Usage

import React from "react";
import { PlayerManager, VideoSurface } from "@youi/react-native-youi";
import { View } from "react-native";

// Each player resource must be created with a unique tag
const VIDEO_TAG = "UNIQUE_VIDEO_TAG";
const App = () => { 
  const ref = React.useRef()
  const [resource, setResource] = React.useState(null)

  React.useEffect(()=>{
    // Ensure the resource exists
    let myPlayerResource = PlayerManager.create(VIDEO_TAG);  
    setResource(myPlayerResource)
    return () => {
      // Frees the player resource
      // Automatically removes the `playing` listener that wasn't manually cleared
      PlayerManager.destroy(myPlayerResource.tag);
    }
  },[])

  React.useEffect(()=>{ 
    if (!ref.current || !resource) return;
    resource.loadSource({
      uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', 
      type: 'HLS'
    });
    // Ensure your code creates the resource BEFORE setting
    // the component's player to the resource's tag
    ref.current.setPlayer(VIDEO_TAG)
    let readyListener = resource.addEventListener('ready', () => { 
      resource.play();
      readyListener.remove();
    });

    let playListener = resource.addEventListener('playing', () => { 
      playListener.remove();
    }); 
  },[ref.current, resource])

  return (
    <VideoSurface
      style={{width:300, height:200}}
      ref={ref} 
    />
  );
}

Props

Inherits the props of the View Component.

Methods

setPlayer

An imperative command to attach a player resource associated with the given resourceTag to the surface. If null is passed, the surface will detach from the currently set player resource.

Definition

setPlayer(resourceTag) -> void

Parameters

Name	Type	Required	Description
`resourceTag`	string	Yes	Unique and non-empty tag associated with the `PlayerResource` you want to attach. The resource must exist beforehand.