@ekolabs/eko-react-sdk v0.1.0

eko-react-sdk

A React component wrapper for eko-js-sdk which enables easy integration of eko videos into React apps

Demo (Storybook) available here

Installation

From your favorite CLI tool:

npm install @ekolabs/eko-react-sdk

Simple usecase

import { EkoVideo } from '@ekolabs/eko-react-sdk';
<div className="myVideoContainer">
    <EkoVideo id="VyYYl0"/>
</div>

Props

Common use cases

Using a custom loading cover

By default every project loads with the default eko experience cover. This cover gets removed to display the video itself (if autoplay is available) or the play cover if it's not. You can supply your own loading cover component:

import MyLoadingCover from "./MyLoadingCover";
<EkoVideo id="AWLLK1" loadingCover={MyLoadingCover}/>

Working example

Using a custom out transition in a custom loading cover

demo

If you wish to have animate an out transition once the project is a available to play, be it a CSS animation or JS based - It's possible to do so using the registerTransition function passed on to every cover. This function receives a function which takes a transitionComplete callback function as a parameter (phew). The transitionComplete() should be called once the animation is completed and it's safe to unmount the cover element.

Note that if you don't call transitionComplete(), the cover component will not be unmounted.

Here's an example implementation using a CSS animation:

export default function MyLoadingCoverWithCustomTransition(props){
    let loadingCoverRef = useRef();

    // example of a css-based fade out transition
    props.registerTransitionOut(transitionComplete => {
        let loadingCoverEl = loadingCoverRef.current;

        // register handler for when the transition ends
        // we let eko-react-sdk know that the loading cover can now be removed
        loadingCoverEl.addEventListener('transitionend', () => transitionComplete(), { once: true });

        // add a class which starts the transition animation
        loadingCoverEl.classList.add("loaded");
    })

    return <div className="my_loading_cover" ref={loadingCoverRef}></div>
}

Interacting with the player

To get a reference to the underlying EkoPlayer that's exposed by the eko-js-sdk, use onPlayerInit or use the EkoPlayerContext.

Example implementation saving a reference to the EkoPlayer using the useRef hook:

import { useRef } from "react";

function myEkoVideo() {
    const ekoPlayer = useRef();
    const onPlayerInit = player => ekoPlayer.current = player;

    return (
        <div>
            <EkoVideo id="AWLLK1" onPlayerInit={onPlayerInit}/>
            <button onClick={() =>  ekoPlayer.current.pause()}>pause</button>
            <button onClick={() =>  ekoPlayer.current.play()}>play</button>
        </div>
    );
}

Example implementation using the EkoPlayerContext to access the player from different components:

// MyPlayButton.jsx
import { useContext } from "react";
import { EkoPlayerContext } from "@ekolabs/eko-react-sdk";

function MyPlayButton() {
    const {playerState} = useContext(EkoPlayerContext);
    return (
        <button onClick={() =>  playerState.player.play()}>play</button>
    );
}

// MyEkoVideo.jsx
import MyPlayButton from './PlayButton';
import { EkoPlayerProvider, EkoVideo } from "@ekolabs/eko-react-sdk";

function MyEkoVideo() {
    return (
        <div>
            <EkoPlayerProvider>
                <EkoVideo id="AWLLK1"/>
                <MyPlayButton />
            </EkoPlayerProvider>
        </div>
    );
}

Listening to player events

To listen and react to events originating in the eko player inside the iframe, use the events prop. It's a dictionary of player event names to handler functions.

Example:

let playerEventHandlers = {
    play: () => console.log("Video is playing"),
    pause: () => console.log("Video is paused"),
    nodestart: node => console.log(`Node ${node.id} has started playing`)
};
<EkoVideo id="AWLLK1" events={playerEventHandlers}/>

External subtitles

If necessary, you can render the subtitles outside of the player using the EkoSubtitles component.

Props

Note: If you are using the EkoSubtitles component, you must also use EkoPlayerProvider so the subtitles component can access the player. See below for example usage.

Example:

<EkoPlayerProvider>
    <EkoVideo id="AWLLK1"/>
    <EkoSubtitles style = {{color: 'white', background: 'black'}} initialVisibility={true}/>
</EkoPlayerProvider>