Player example

Published: September 03, 2019
Edited: September 03, 2019

Here's an example on how you can create a player with the Lightning-SDK

App.js

export default class App extends Lightning.Component  {
 
    static _template() {
        return {
            Home: {
                // page
            },
            Settings: {
                // page
            },
            Player: {
                type: Player
            }
        }
    }
 
    // to make the example more real-life im going add a Playing state
    _init() {
        this._setState("Playing")
    }
 
    static _states() {
        return [
            class Playing extends this{
                // delegate focuspath to the player
                _getFocused() {
                    return this.tag("Player")
                }
            }
        ]
    }
}

Player.js

The Player component sets the correct stream and receives events


import { Lightning, MediaPlayer } from 'wpe-lightning-sdk'
import Loader from './Loader.js';


export default class Player extends Lightning.Component  {

    static _template () {
        return {
            MediaPlayer: { type: MediaPlayer },
            Loader: {type: Loader}
        };
    }

    _firstActive() {
        this.tag('Loader').start();
        this.tag('MediaPlayer').updateSettings({consumer: this});
        this.tag('MediaPlayer').open('video.mp4');
    }

    $mediaplayerPlaying () {
        this.tag('Loader').stop();
    }
}

Events

The player currently listens to the following media events:

const events = ['timeupdate',
                'error',
                'ended',
                'loadeddata',
                'canplay',
                'play',
                'playing',
                'pause',
                'loadstart',
                'seeking',
                'seeked',
                'encrypted']

When one of these events occurs the mediaplayer will fire a method of the current consumer in this form:

consumer[`$mediaplayer${eventName}`]()

Example:

    // this will be invoked on timeupdate
    $mediaplayerProgress({ currentTime, duration }) {
 
    }
 
    // this will be invoked when the video ends
    $mediaplayerEnded() {
 
    }
 
    // this will be invoked when the video starts playing
    $mediaplayerPlay() {
 
    }
 
    // this will be invoked when the video pauses
    $mediaplayerPause() {
 
    }
 
    // this will be invoked when the video stops
    $mediaplayerStop() {
 
    }
 
    // this will be invoked when the video raises an error
    $mediaplayerError() {
 
    }
    // etc...