EventPlayer

gistfile1.js

/** @jsx React.DOM */

var EventPlayer = React.createClass({
    componentDidUpdate: function() { this.update_player(); },
    componentDidMount: function() {
        var self = this;
        self.update_player();
        $(window).on('resize', function(){
            self.resize_player();
        });
    },
    componentDidUnmount: function() {
        // if (jwplayer().remove) jwplayer().remove();
    },
    componentWillUnmount: function() {
        $(window).off('resize');
    },
    calc_player_dimensions: function() {
        var self = this, data = self.props.data;
        var event = data.events[data.active_event];

        // Calculate the video dimensions in accordance with dom component size
        var win_width = $('#event_video_player_container').parent().parent().width();
        var stream_width = event.streams[0].video.width;
        var stream_height = event.streams[0].video.height;
        var player_width = (win_width < stream_width)? win_width : stream_width;
        var aspect = stream_width / stream_height;
        var player_height = player_width / aspect;
        return {
            // Reduce size by 10%
            width:      Math.round(player_width*0.9),
            height:     Math.round(player_height*0.9),
        };
    },
    resize_player: function() {
        var self = this, data = self.props.data;

        // Check that the video is available on server
        if (!data.video_available()) return;

        // Sanity check
        if (!$('#event_video_player').length) return;

        var player_size = self.calc_player_dimensions();
        jwplayer().resize(player_size.width, player_size.height);
    },
    update_player: function() {
        var self = this, data = self.props.data;
        var channel = data.channels[data.active_channel];
        var event = data.events[data.active_event];

        // Check that the video is available on server
        if (!data.video_available()) return;

        // Sanity check
        if (!$('#event_video_player').length) return;

        // Calculate the video dimensions in accordance with dom component size
        var player_size = self.calc_player_dimensions();

        var add_query = '';
        if (self.props.clips) {
            add_query += '&clips='+self.props.clips;
        } else if (event.clips) {
            if (event.clips.exact) {
                add_query += '&clips='+event.clips.exact.from+':'+event.clips.exact.to;
            }
        }
        if (self.props.prepend) add_query += '&prepend='+self.props.prepend;
        if (self.props.extend) add_query += '&extend='+self.props.extend;
        if (!self.props.prepend && !self.props.extend && event.clips && event.clips.prepex) {
            add_query +=
                '&prepend='+event.clips.prepex.prepend+
                '&extend='+event.clips.prepex.extend;
        }

        var title = channel.name+': '+event_get_ref_field(event, 'name');
        if (self.props.title) title = self.props.title;

        var image = null;
        if (self.props.image) image = self.props.image;

        var video_stream = event_get_stream(event, 'HLS');
        var video_url = video_stream.url+add_query;
        // var video_url = event.streams[0].url.replace('edgeidx.bcast.ws', 'lw03.bcast.ws:9999')+add_query`;
        // var vtt_url = event.streams[1].url.replace('edgeidx.bcast.ws', 'lw03.bcast.ws:9999')+add_query;
        var vtt_url = null;
        if (!self.props.novtt) {
            var thumbs_stream = event_get_stream(event, 'VTT');
            vtt_url = thumbs_stream.url+add_query;
            console.debug('VTT: ', vtt_url);
        }

        console.debug('Player: ', video_url);

        // Initialize JWPlayer on page (binds to #event_video_player)
        // NOTE: JWPlayer changes the DOM structure ! So React may not be happy with it..
        // FIXIT: how ?
        jwplayer('event_video_player').setup({
            file: video_url,
            tracks: [{
                file: vtt_url,
                kind: "thumbnails"
            }],
            fallback: false,
            image: image,
            title: title,
            autostart: false,
            width:  player_size.width,
            height: player_size.height,
            skin: "bekle"
        });
    },
    render: function() {
        var self = this, data = self.props.data;
        return (
            <div id="event_video_player_container">
                {get_video_ready_placeholder(self)}
                <div id="event_video_player">
                </div>
            </div>
        );
    },
});