cdosea-play/cdoseaplay/static/subtitles.js

'use strict'

var app = {}

app.status = {
    currentTime: 0,
    path: null,
    subtitles: {}
}

app.render = function() {

    var html = ''

    //html += 'Current Time: ' + app.status.currentTime + '<br>'
    //
    var showNext = 0
    var update = false

    if (app.status.subtitles[app.status.current]) {
        app.status.subtitles[app.status.current].forEach(function(sub) {
            if (app.status.currentTime >= sub['in'] && app.status.currentTime < sub.out) {
                //html += '<br><br><b>' + sub['in'] + ' ' + sub.out + ': ' + sub.value + '</b>'
                html += '<br><br><b>' + sub.value + '</b>'
                showNext = 10
                update = true
            } else if (showNext) {
                //html += '<br><br>' + sub['in'] + ' ' + sub.out + ': ' + sub.value
                html += '<br><br>' + sub.value
                showNext -= 1
            }
        })
    }
    if (app.status.subtitles[app.status.next]) {
        app.status.subtitles[app.status.next].forEach(function(sub) {
            if (showNext) {
                //html += '<br><br>' + sub['in'] + ' ' + sub.out + ': ' + sub.value
                html += '<br><br>' + sub.value
                showNext -= 1
            }
        })
    }
    if (update) {
        document.body.innerHTML = html
    }
}

app.connectWS = function() {
    app.ws = new WebSocket('ws://' + document.location.host + '/ws/')
    app.ws.onopen = function() {
        //console.log('open')
    }
    app.ws.onerror = function(event) {
        //console.log('error')
        ws.close()
    }
    app.ws.onclose = function(event) {
        //console.log('closed')
        setTimeout(app.connectWS, 1000)
    }
    app.ws.onmessage = function(event) {
        var request
        try {
            request = JSON.parse(event.data)
        } catch(e) {
            request = {
                'error': {},
                'debug': event.data
            }
        }
        //console.log('message', request)
        app.status.currentTime = request.currentTime

        if (request.current) {
            app.status.current = request.current
        }
        if (request.next) {
            app.status.next = request.next
        }
        if (request.subtitles) {
            Object.keys(request.subtitles).forEach(function(name) {
                app.status.subtitles[name] = request.subtitles[name]
            })
        }
        app.render()
    }
}

app.connectWS()
window.addEventListener('load', app.render, false)