stream-cap/js/live.js

// Embed source domain. This should be the domain(s) of the site using this tool
source_domains = ['localhost']

// Dimensions of each embed, used when initializing the embeds
embed_height = 315;
embed_width = 560;

// Twitch player embed objects go here so we can address the four embeds
// with embeds[0] .. embeds[3]
embeds = [];

// Toggles between 4x3 and 16x9 overlays by shuffling CSS stylesheets
// The boolean argument is pretty much "is this widescreen?"
function set_state(widescreen) {
    css_normal = document.getElementById('css_4x3');
    css_wide = document.getElementById('css_16x9');
    if (widescreen) {
        css_normal.disabled = true;
        css_wide.disabled = false;
    } else {
        css_normal.disabled = false;
        css_wide.disabled = true;
    }
}

// Update everything
function update_all() {
    update_globals();
    update_embed(0);
    update_embed(1);
    update_embed(2);
    update_embed(3);
}

// Update all global textual elements
function update_globals() {
    change_game_name();
    change_scientist();
}

// Change embed volume as slider is... slid
function update_volume() {
    vol = document.getElementById('vol_slider').value;
    embeds.forEach(e => e.setVolume(vol / 100));
}

// Update individual textual elements in the overlay
function change_game_name() {
    game_name = document.getElementById('gamename_text').value;
    e = document.getElementById('game');
    e.innerHTML = game_name;
}

function change_scientist() {
    scientist = document.getElementById('scientist_text').value;
    e = document.getElementById('scientist');
    e.innerHTML = "Lead Scientist: " + scientist;
}

function update_embed(embed_num) {
    // Switch channel
    change_embed_channel(embed_num);

    // Update our text fields
    n = document.getElementById('rat' + embed_num + 'name');
    p = document.getElementById('rat' + embed_num + 'pronouns');

    n.innerHTML = document.getElementById('embed' + embed_num + '_name').value;
    p.innerHTML = document.getElementById('embed' + embed_num + '_pronouns').value;
}

// Instruct a given embed to change what channel it's streaming
function change_embed_channel(embed_num) {
    channel_name = document.getElementById('embed' + embed_num + '_stream').value;

    if (channel_name == '' || channel_name == null) {
        return false;
    }

    e = document.getElementById('embed' + embed_num);
    e.style.display = 'block';

    embeds[embed_num].setChannel(channel_name);
    update_volume();
    embeds[embed_num].play();
}

// This is a fast call to immediately halt a stream. It's used as an
// emergency "something bad is happening" button, and can just be used to
// hide one of the embeds if a player isn't available.
// This is overkill: it hides the DOM element, then forces an error to make
// the player crash. This is restorable by using change_embed_channel()
function dump_stream(embed_num) {
    // Hide the element entirely
    document.getElementById('embed' + embed_num).style.display = 'none';

    // Pass an invalid channel to the player so it errors out
    // This is gross but it stops all activity for certain
    embeds[embed_num].setChannel();
}

// A pretty brute force way to make sure one, and only one, embed is playing
// audio. We mute all four embeds then immediately unmute the provided one.
// We also juggle display styling for speaker elements so only the audio source
// has a speaker displayed next to it
function focus_audio(embed_num) {
    embeds.forEach(e => e.setMuted(true));
    embeds[embed_num].setMuted(false);

    // Fire a volume set just to be sure our volume is synced
    // Embeds that are muted or disabled sometimes don't set volume
    update_volume();

    speakers = document.querySelectorAll('.ratspeaker');
    speakers.forEach(e => e.style.display = 'none');

    e = document.getElementById('rat' + embed_num + 'speaker')
    e.style.display = 'block';
}

// This is the primary setup function that runs when the DOM is loaded
// At the moment all it does is set up embeds
function setup() {
    // Setup Embeds
    // These start with JST as the channel because some channel needs to be
    // provided. We simply disable autoplay so we don't get four JSTs.
    // When we switch embed channels, part of that function forces playing
    // to start
    embeds.push(new Twitch.Embed('embed0', {
        height: embed_height,
        width: embed_width,
        autoplay: false,
        muted: false,
        layout: 'video',
        controls: false,
        channel: 'jank_science_theater',
        parent: source_domains
    }));

    embeds.push(new Twitch.Embed('embed1', {
        height: embed_height,
        width: embed_width,
        autoplay: false,
        muted: true,
        layout: 'video',
        controls: false,
        channel: 'jank_science_theater',
        parent: source_domains
    }));

    embeds.push(new Twitch.Embed('embed2', {
        height: embed_height,
        width: embed_width,
        autoplay: false,
        muted: true,
        layout: 'video',
        controls: false,
        channel: 'jank_science_theater',
        parent: source_domains
    }));

    embeds.push(new Twitch.Embed('embed3', {
        height: embed_height,
        width: embed_width,
        autoplay: false,
        muted: true,
        layout: 'video',
        controls: false,
        channel: 'jank_science_theater',
        parent: source_domains
    }));

    // Set up volume slider handler
    document.getElementById('vol_slider').oninput = update_volume
}

document.addEventListener('DOMContentLoaded', setup);