Skip to content
Snippets Groups Projects
Commit af77de8a authored by Simon Kirsten's avatar Simon Kirsten
Browse files

Formatted static files

parent 6d246305
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stream Server</title> <title>Stream Server</title>
<script src="https://player.twitch.tv/js/embed/v1.js"></script> <!-- twitch embed --> <!-- twitch embed -->
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div id="large-player" class="hidden"> <div id="large-player" class="hidden">
<div id="small-player-container"> <div id="small-player-container">
<div id="small-player" class="hidden"></div> <div id="small-player" class="hidden"></div>
</div> </div>
</div> </div>
<iframe id="chat" frameborder="0" scrolling="no" src="about:blank"></iframe> <iframe id="chat" frameborder="0" scrolling="no" src="about:blank"></iframe>
<div id="overlay"> <div id="overlay">
<h2>Loading...</h2> <h2>Loading...</h2>
<p> <p>
<a href="https://stream-server.h-da.io">Documentation</a> · <a href="https://stream-server.h-da.io">Documentation</a> ·
<a href="https://stream-server.h-da.io/reference">Reference</a> <a href="https://stream-server.h-da.io/reference">Reference</a>
</p> </p>
<small> <small>
<a href="javascript:toggleFullscreen()">toggle fullscreen</a> <a href="javascript:toggleFullscreen()">toggle fullscreen</a>
</small> </small>
</div> </div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
"use strict"; "use strict";
var large_player; let large_player;
var small_player; let small_player;
function newLargePlayer(channel) { function newLargePlayer(channel) {
return new Twitch.Player('large-player', { return new Twitch.Player("large-player", {
channel: channel, channel: channel,
width: '', width: "",
height: '', height: "",
controls: false, controls: false,
muted: false muted: false
}); });
} }
function newSmallPlayer(channel) { function newSmallPlayer(channel) {
return new Twitch.Player('small-player', { return new Twitch.Player("small-player", {
channel: channel, channel: channel,
width: '', width: "",
height: '', height: "",
controls: false, controls: false,
muted: true muted: true
}); });
} }
const large_player_elem = document.getElementById('large-player'); const large_player_elem = document.getElementById("large-player");
const small_player_elem = document.getElementById('small-player'); const small_player_elem = document.getElementById("small-player");
const overlay_elem = document.getElementById('overlay'); const overlay_elem = document.getElementById("overlay");
const chat_elem = document.getElementById('chat'); const chat_elem = document.getElementById("chat");
const defaultState = { const defaultState = {
large_channel: '', large_channel: "",
small_channel: '', small_channel: "",
volume: 0.5, volume: 0.5,
small_scale: 0.3, small_scale: 0.3,
show_chat: false show_chat: false
}; };
let state = defaultState; let state = defaultState;
function updateState(newState) { function updateState(newState) {
state = newState; state = newState;
console.log('State:', state); console.log("State:", state);
// large player: // large player:
// we need to destroy the player // we need to destroy the player
if (state.large_channel == '' && large_player) { if (state.large_channel == "" && large_player) {
large_player.destroy(); large_player.destroy();
large_player = undefined; large_player = undefined;
chat_elem.src = 'about:blank'; chat_elem.src = "about:blank";
}
// we should be playing something
if (state.large_channel != "") {
function update() {
// the volume needs to be changed
if (large_player.getVolume() != state.volume) {
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 should be playing something // we need to create the large player
if (state.large_channel != '') { if (!large_player) {
large_player = newLargePlayer(state.large_channel);
function update() { large_player.addEventListener(Twitch.Player.READY, update);
// the volume needs to be changed large_player.addEventListener(Twitch.Player.PLAY, update);
if (large_player.getVolume() != state.volume) { } else {
large_player.setVolume(state.volume); update();
}
// 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();
}
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;
}
} }
// small player: let chat_elem_src =
"https://www.twitch.tv/embed/" + state.large_channel + "/chat?darkpopout";
// we need to destroy the player
if (state.small_channel == '' && small_player) {
small_player.destroy();
small_player = undefined;
}
// we should be playing something if (chat_elem_src != chat_elem.src) {
if (state.small_channel != '') { chat_elem.src = chat_elem_src;
}
function update() { }
// the channel needs to be changed
if (small_player.getChannel() != state.small_channel) { // small player:
small_player.setChannel(state.small_channel);
} // we need to destroy the player
} if (state.small_channel == "" && small_player) {
small_player.destroy();
// we need to create the small player small_player = undefined;
if (!small_player) { }
small_player = newSmallPlayer(state.small_channel);
// we should be playing something
small_player.addEventListener(Twitch.Player.READY, update); if (state.small_channel != "") {
small_player.addEventListener(Twitch.Player.PLAY, update); function update() {
} else { // the channel needs to be changed
update(); if (small_player.getChannel() != state.small_channel) {
} small_player.setChannel(state.small_channel);
}
} }
const small_player_size = state.small_scale * 100 + '%'; // we need to create the small player
small_player_elem.style.width = small_player_size; if (!small_player) {
small_player_elem.style.height = small_player_size; 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' : ''; small_player_elem.className = state.small_channel == "" ? "hidden" : "";
large_player_elem.className = (state.large_channel == '') ? 'hidden' : ''; large_player_elem.className = state.large_channel == "" ? "hidden" : "";
overlay_elem.className = (state.large_channel != '' || state.small_channel != '') ? 'hidden' : ''; overlay_elem.className =
state.large_channel != "" || state.small_channel != "" ? "hidden" : "";
document.body.className = state.show_chat ? 'with-chat' : ''; document.body.className = state.show_chat ? "with-chat" : "";
} }
if (!window.EventSource) { if (!window.EventSource) {
overlay_elem.firstElementChild.innerText = 'Your browser (probably IE / Edge) does not support EventSource. Please try any other modern browser.'; overlay_elem.firstElementChild.innerText =
"Your browser (probably IE / Edge) does not support EventSource. Please try any other modern browser.";
} else { } else {
const events = new EventSource('/display'); const events = new EventSource("/display");
events.onmessage = m => { events.onmessage = m => {
updateState(JSON.parse(m.data)); updateState(JSON.parse(m.data));
}; };
events.onopen = () => { events.onopen = () => {
overlay_elem.firstElementChild.innerText = 'Nothing playing'; overlay_elem.firstElementChild.innerText = "Nothing playing";
}; };
events.onerror = err => { events.onerror = err => {
console.error(err); console.error(err);
updateState(defaultState); updateState(defaultState);
overlay_elem.firstElementChild.innerText = 'Connection to stream-server failed. Make sure it\'s running.'; overlay_elem.firstElementChild.innerText =
}; "Connection to stream-server failed. Make sure it's running.";
};
} }
function toggleFullscreen() { function toggleFullscreen() {
if (!document.fullscreenElement) { // we are not in fullscreen if (!document.fullscreenElement) {
document.documentElement.requestFullscreen() // we are not in fullscreen
} else { document.documentElement.requestFullscreen();
if (document.exitFullscreen) { } else {
document.exitFullscreen(); if (document.exitFullscreen) {
} document.exitFullscreen();
} }
}
} }
large_player_elem.addEventListener('mousedown', (event) => { large_player_elem.addEventListener("mousedown", event => {
if (event.detail > 1) { // double click if (event.detail > 1) {
toggleFullscreen(); // double click
toggleFullscreen();
event.preventDefault(); event.preventDefault();
} }
}); });
\ No newline at end of file
body { body {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
width: calc(100vw + 21.25rem); /* without chat the body is 21.25rem (the size of the chat) wider */
background-color: black; /* without chat the body is 21.25rem (the size of the chat) wider */
overflow: hidden; width: calc(100vw + 21.25rem);
transition: width 0.3s; /* width changes are animated */
background-color: black;
overflow: hidden;
transition: width 0.3s; /* width changes are animated */
} }
body.with-chat { body.with-chat {
width: 100vw; /* with chat the width is the normal 100vw */ width: 100vw; /* with chat the width is the normal 100vw */
} }
#large-player { #large-player {
position: relative; /* while this 'relative' has no impact for #large-player it is the reference point for the #small-player-container which is positioned absolute to this element */ /* while this 'relative' has no impact for #large-player it is the reference point for the */
display: flex; /* #small-player-container which is positioned absolute to this element */
flex-grow: 1; /* #large-player fills remaining space while #chat does not */ position: relative;
display: flex;
flex-grow: 1; /* #large-player fills remaining space while #chat does not */
} }
#small-player-container { /* this container is necessary for the #small-player to keep an 16:9 aspect ratio */ #small-player-container {
position: absolute; /* this container is necessary for the #small-player to keep an 16:9 aspect ratio */
width: 100%; position: absolute;
height: 0; width: 100%;
padding-top: 56.25%; /* this is the trick that keeps the child in a 16:9 ratio - read more here https://www.w3schools.com/howto/howto_css_aspect_ratio.asp */ height: 0;
/* this is the trick that keeps the child in a 16:9 ratio - read more here https://www.w3schools.com/howto/howto_css_aspect_ratio.asp */
padding-top: 56.25%;
} }
#small-player { #small-player {
position: absolute; position: absolute;
top: 0; /* pin small player to the top right */ top: 0; /* pin small player to the top right */
right: 0; right: 0;
/* Note: the width and height property get set via script */ /* Note: the width and height property get set via script */
transition: width 0.3s, height 0.3s; /* width and height changes are animated */ transition: width 0.3s, height 0.3s; /* width and height changes are animated */
display: flex; display: flex;
} }
#small-player > iframe, #small-player > iframe,
#large-player > iframe { /* the iframes always grow to the parents size */ #large-player > iframe {
flex-grow: 1; /* the iframes always grow to the parents size */
flex-grow: 1;
pointer-events: none; pointer-events: none;
} }
.hidden > iframe { .hidden > iframe {
display: none; display: none;
} }
#overlay { #overlay {
font-family: Roboto, Helvetica, Arial, sans-serif; font-family: Roboto, Helvetica, Arial, sans-serif;
color: white; color: white;
/* center the content */ /* center the content */
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#overlay.hidden { #overlay.hidden {
display: none; display: none;
} }
#chat { #chat {
width: 21.25rem; width: 21.25rem;
} }
a:link, a:active, a:visited, a:hover { a:link,
color: inherit; a:active,
} a:visited,
\ No newline at end of file a:hover {
color: inherit;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment