overte-HifiExperiments/scripts/system/html/js/record.js

"use strict";

//
//  record.js
//
//  Created by David Rowe on 5 Apr 2017.
//  Copyright 2017 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//

var isUsingToolbar = false,
    numberOfPlayers = 0,
    recordingsBeingPlayed = [],
    elEnableRecording,
    elInstructions,
    elRecordingsPlaying,
    elNumberOfPlayers,
    elLoadButton,
    EVENT_BRIDGE_TYPE = "record",
    BODY_LOADED_ACTION = "bodyLoaded",
    USING_TOOLBAR_ACTION = "usingToolbar",
    ENABLE_RECORDING_ACTION = "enableRecording",
    RECORDINGS_BEING_PLAYED_ACTION = "recordingsBeingPlayed",
    NUMBER_OF_PLAYERS_ACTION = "numberOfPlayers",
    STOP_PLAYING_RECORDING_ACTION = "stopPlayingRecording",
    LOAD_RECORDING_ACTION = "loadRecording",
    TABLET_INSTRUCTIONS = "Close the tablet to start recording",
    WINDOW_INSTRUCTIONS = "Close the window to start recording";

function updateInstructions() {
    elInstructions.innerHTML = elEnableRecording.checked ? (isUsingToolbar ? WINDOW_INSTRUCTIONS : TABLET_INSTRUCTIONS) : "";
}

function stopPlayingRecording(event) {
    var playerID = event.target.getElementsByTagName("input")[0].value;
    EventBridge.emitWebEvent(JSON.stringify({
        type: EVENT_BRIDGE_TYPE,
        action: STOP_PLAYING_RECORDING_ACTION,
        value: playerID
    }));
}

function orderRecording(a, b) {
    return a.filename > b.filename ? 1 : -1;
}

function updateRecordings() {
    var tbody,
        tr,
        td,
        span,
        input,
        length,
        i;

    recordingsBeingPlayed.sort(orderRecording);

    tbody = document.createElement("tbody");

    for (i = 0, length = recordingsBeingPlayed.length; i < length; i += 1) {
        tr = document.createElement("tr");
        td = document.createElement("td");
        td.innerHTML = recordingsBeingPlayed[i].filename.slice(4);
        tr.appendChild(td);
        td = document.createElement("td");
        span = document.createElement("span");
        span.innerHTML = "x";
        span.addEventListener("click", stopPlayingRecording);
        input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("value", recordingsBeingPlayed[i].playerID);
        span.appendChild(input);
        td.appendChild(span);
        tr.appendChild(td);
        tbody.appendChild(tr);
    }

    elRecordingsPlaying.replaceChild(tbody, elRecordingsPlaying.getElementsByTagName("tbody")[0]);
}

function updateLoadButton() {
    if (numberOfPlayers > recordingsBeingPlayed.length) {
        elLoadButton.removeAttribute("disabled");
    } else {
        elLoadButton.setAttribute("disabled", "disabled");
    }
}

function onScriptEventReceived(data) {
    var message = JSON.parse(data);
    if (message.type === EVENT_BRIDGE_TYPE) {
        switch (message.action) {
        case ENABLE_RECORDING_ACTION:
            elEnableRecording.checked = message.value;
            updateInstructions();
            break;
        case USING_TOOLBAR_ACTION:
            isUsingToolbar = message.value;
            updateInstructions();
            break;
        case RECORDINGS_BEING_PLAYED_ACTION:
            recordingsBeingPlayed = JSON.parse(message.value);
            updateRecordings();
            updateLoadButton();
            break;
        case NUMBER_OF_PLAYERS_ACTION:
            numberOfPlayers = message.value;
            elNumberOfPlayers.innerHTML = numberOfPlayers;
            updateLoadButton();
            break;
        }
    }
}

function onBodyLoaded() {

    EventBridge.scriptEventReceived.connect(onScriptEventReceived);

    elEnableRecording = document.getElementById("enable-recording");
    elEnableRecording.onchange = function () {
        updateInstructions();
        EventBridge.emitWebEvent(JSON.stringify({
            type: EVENT_BRIDGE_TYPE,
            action: ENABLE_RECORDING_ACTION,
            value: elEnableRecording.checked
        }));
    };

    elInstructions = document.getElementById("instructions");
    elRecordingsPlaying = document.getElementById("recordings-playing");
    elNumberOfPlayers = document.getElementById("number-of-players");

    elLoadButton = document.getElementById("load-button");
    elLoadButton.onclick = function () {
        EventBridge.emitWebEvent(JSON.stringify({
            type: EVENT_BRIDGE_TYPE,
            action: LOAD_RECORDING_ACTION
        }));
    }

    EventBridge.emitWebEvent(JSON.stringify({
        type: EVENT_BRIDGE_TYPE,
        action: BODY_LOADED_ACTION
    }));
}