Commit ac8275d8 authored by Simon Kirsten's avatar Simon Kirsten
Browse files

Updated website to new parameter passing and improved resource usage

parent d9ce04cb
......@@ -114,22 +114,31 @@ var website = []byte(`
</div>
</div>
<iframe id="chat" frameborder="0" scrolling="no"></iframe>
<iframe id="chat" frameborder="0" scrolling="no" src="about:blank"></iframe>
<script>
const large_player = new Twitch.Player('large-player', {
width: "",
height: "",
controls: false,
muted: false
});
var large_player;
var small_player;
function newLargePlayer(channel) {
return new Twitch.Player('large-player', {
channel: channel,
width: "",
height: "",
controls: false,
muted: false
});
}
const small_player = new Twitch.Player('small-player', {
width: "",
height: "",
controls: false,
muted: true
});
function newSmallPlayer(channel) {
return new Twitch.Player('small-player', {
channel: channel,
width: "",
height: "",
controls: false,
muted: true
});
}
const large_player_elem = document.getElementById('large-player');
const small_player_elem = document.getElementById('small-player');
......@@ -137,8 +146,8 @@ var website = []byte(`
const chat_elem = document.getElementById('chat');
const defaultState = {
large_channel: null,
small_channel: null,
large_channel: "",
small_channel: "",
volume: 0.5,
small_scale: 0.3,
show_chat: false
......@@ -147,38 +156,72 @@ var website = []byte(`
let state = defaultState;
function updateState(newState) {
// channel and chat setting only if they change
state = newState;
console.log("State:", state);
if (state.large_channel != newState.large_channel) {
large_player.setChannel(newState.large_channel);
large_player.setMuted(false); // TODO: investigate with autoplay
// large player:
if (newState.large_channel) {
chat_elem.src = 'https://www.twitch.tv/embed/' + newState.large_channel + '/chat?darkpopout';
} else {
chat_elem.src = 'about:blank';
}
// we need to destroy the player
if (state.large_channel == "" && large_player) {
large_player.destroy();
large_player = undefined;
chat_elem.src = 'about:blank';
}
if (state.small_channel != newState.small_channel) {
small_player.setChannel(newState.small_channel);
// we should be playing something
if (state.large_channel != "") {
// we need to create the large player
if (!large_player) {
large_player = newLargePlayer(state.large_channel);
}
// the channel needs to be changed
if (large_player.getChannel() != state.large_channel) {
large_player.setChannel(state.large_channel);
}
// the volume needs to be changed
if (large_player.getVolume() != state.volume) {
large_player.setVolume(state.volume);
}
var chat_elem_src = 'https://www.twitch.tv/embed/' + state.large_channel + '/chat?darkpopout';
if (chat_elem_src != chat_elem.src) {
chat_elem.src = chat_elem_src;
}
}
state = newState;
console.log("State:", state);
// small player:
// we need to destroy the player
if (state.small_channel == "" && small_player) {
small_player.destroy();
small_player = undefined;
}
// the other options are lightweight and can be simply overwritten
// we should be playing something
if (state.small_channel != "") {
// we need to create the small player
if (!small_player) {
small_player = newSmallPlayer(state.small_channel);
}
large_player.setVolume(state.volume);
// the channel needs to be changed
if (small_player.getChannel() != state.small_channel) {
small_player.setChannel(state.small_channel);
}
}
const small_player_size = state.small_scale * 100 + '%';
small_player_elem.style.width = small_player_size;
small_player_elem.style.height = small_player_size;
small_player_elem.className = (state.small_channel == null) ? 'hidden' : '';
large_player_elem.className = (state.large_channel == null) ? 'hidden' : '';
overlay_elem.className = (state.large_channel != null || state.small_channel != null) ? 'hidden' : '';
small_player_elem.className = (state.small_channel == "") ? 'hidden' : '';
large_player_elem.className = (state.large_channel == "") ? 'hidden' : '';
overlay_elem.className = (state.large_channel != "" || state.small_channel != "") ? 'hidden' : '';
document.body.className = state.show_chat ? 'with-chat' : '';
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment