Newer
Older
// When the chat loads faster than the stream, the stream would be out to the left of the window.
// This fixes the scrolling...
window.onscroll = () => {
window.scrollTo(0, 0);
};
return new Twitch.Player("large-player", {
channel: channel,
width: "",
height: "",
controls: false,
theme: "dark",
allowfullscreen: false,
return new Twitch.Player("small-player", {
channel: channel,
width: "",
height: "",
controls: false,
theme: "dark",
allowfullscreen: false,
const large_player_elem = document.getElementById("large-player");
const small_player_elem = document.getElementById("small-player");
const overlay_elem = document.getElementById("overlay");
const chat_elem = document.getElementById("chat");
large_channel: "",
small_channel: "",
volume: 0.5,
small_scale: 0.3,
};
let state = defaultState;
function updateState(newState) {
state = newState;
console.log("State:", state);
// large player:
// we need to destroy the player
if (state.large_channel == "" && large_player) {
large_player.destroy();
large_player = undefined;
chat_elem.src = "about:blank";
}
// we should be playing something
if (state.large_channel != "") {
function update() {
// the volume needs to be changed
if (state.volume == 0) {
large_player.setMuted(true);
} else {
large_player.setMuted(false);
large_player.setVolume(state.volume);
}
// the channel needs to be changed
if (large_player.getChannel() != state.large_channel) {
large_player.setChannel(state.large_channel);
}
// we need to create the large player
if (!large_player) {
large_player = newLargePlayer(state.large_channel);
large_player.addEventListener(Twitch.Player.READY, update);
large_player.addEventListener(Twitch.Player.PLAY, update);
} else {
update();
"https://www.twitch.tv/embed/" +
state.large_channel +
"/chat?darkpopout&parent=" +
location.hostname;
if (chat_elem_src != chat_elem.src) {
chat_elem.src = chat_elem_src;
}
}
// small player:
// we need to destroy the player
if (state.small_channel == "" && small_player) {
small_player.destroy();
small_player = undefined;
}
// we should be playing something
if (state.small_channel != "") {
function update() {
// the channel needs to be changed
if (small_player.getChannel() != state.small_channel) {
small_player.setChannel(state.small_channel);
}
// we need to create the small player
if (!small_player) {
small_player = newSmallPlayer(state.small_channel);
small_player.addEventListener(Twitch.Player.READY, update);
small_player.addEventListener(Twitch.Player.PLAY, update);
} else {
update();
}
}
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 == "" ? "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" : "";
overlay_elem.firstElementChild.innerText =
"Your browser (probably IE / Edge) does not support EventSource. Please try any other modern browser.";
events.onopen = () => {
overlay_elem.firstElementChild.innerText = "Nothing playing";
};
updateState(defaultState);
overlay_elem.firstElementChild.innerText =
"Connection to stream-server failed. Make sure it's running.";
};
if (!document.fullscreenElement) {
// we are not in fullscreen
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();