JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<script src="http://player.ooyala.com/v3/b02b206743c64734828648c0e5879d69?platform=html5-priority"></script>
<div id="playerwrapper">
    <div id='ooyalaplayer' style='width:640px;height:360px'></div>
    <div id="playerchrome">
        <button id="pause">Pause</button>
        <button id="play">Play</button>
        <button id="restart">Restart</button>
        <div id="timeline">
            <span id="time">0:00</span>
            <div id="timeline-position"></div>
        </div>
    </div>
</div>

CSS

#playerwrapper {
    position: relative;
}
#playerchrome {
    position: fixed;
}
#time {
    color: white;
}
#timeline {
    background-color: black;
    position: relative;
    width: 90%;
    height: 20px;
}
#timeline-position {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    top:0;
    left: 25%;
    background-color: yellow;
}

JavaScript

OO.plugin("AA-UI", function (OO, _, $, W) {
    var Sample = {};
    Sample.SampleUIModule = function (mb, id) {
        this.mb = mb; // save message bus reference for later use
        this.id = id;
        this.duration = NaN;
        this.playing = false;
        this.init(); // subscribe to relevant events
    };

    // public functions of the module object
    Sample.SampleUIModule.prototype = {
        init: function () {
            // subscribe to relevant player events
            this.mb.subscribe(OO.EVENTS.PLAYER_CREATED, 'customerUi',
            _.bind(this.onPlayerCreate, this));
            this.mb.subscribe(OO.EVENTS.PLAYHEAD_TIME_CHANGED,
                'customerUi', _.bind(this.onTimeUpdate, this));
            console.log("before CONTENT_TREE_FETCHED");
            this.mb.subscribe(OO.EVENTS.CONTENT_TREE_FETCHED,
                'customerUi', _.bind(this.onContentReady, this));
        },

        onPlayerCreate: function (event, elementId, params) {
            this.playerRoot = $("#" + elementId);
            this.rootElement = this.playerRoot.parent();

            console.log("hello, init here!!!", this.rootElement, this.id);

            this.playButton = $('#play');
            this.pauseButton = $('#pause');
            this.playButton.click(_.bind(this.onPlay, this));
            this.pauseButton.click(_.bind(this.onPause, this));
        },


        // Handles CONTENT_TREE_FETCHED event
        // Second parameter is a content object with details about the
        // content that was loaded into the player
        // In this example, we use the parameter to update duration
        onContentReady: function (event, content) {
            this.duration = content.duration / 1000;
        },

        // Handles PLAYHEAD_TIME_CHANGED event
        // In this example, we use it to move the slider as content is played
        onTimeUpdate: function (event, time, duration, buffer) {
            console.log(event, time, duration)
          ...