Skip to content
GitLab
Commit af77de8a authored by Simon Kirsten's avatar Simon Kirsten
Browse files

Formatted static files

parent 6d246305
Hide whitespace changes
Inline Side-by-side
internal/static/index.html
View file @ af77de8a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stream Server</title>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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">
</head>
<body>
<div id="large-player" class="hidden">
<div id="small-player-container">
<div id="small-player" class="hidden"></div>
</div>
</div>
<iframe id="chat" frameborder="0" scrolling="no" src="about:blank"></iframe>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="large-player" class="hidden">
<div id="small-player-container">
<div id="small-player" class="hidden"></div>
</div>
</div>
<iframe id="chat" frameborder="0" scrolling="no" src="about:blank"></iframe>
<div id="overlay">
<h2>Loading...</h2>
<p>
<a href="https://stream-server.h-da.io">Documentation</a> ·
<a href="https://stream-server.h-da.io/reference">Reference</a>
</p>
<small>
<a href="javascript:toggleFullscreen()">toggle fullscreen</a>
</small>
</div>
<div id="overlay">
<h2>Loading...</h2>
<p>
<a href="https://stream-server.h-da.io">Documentation</a> ·
<a href="https://stream-server.h-da.io/reference">Reference</a>
</p>
<small>
<a href="javascript:toggleFullscreen()">toggle fullscreen</a>
</small>
</div>
<script src="main.js"></script>
</body>
</html>
\ No newline at end of file
<script src="main.js"></script>
</body>
</html>
internal/static/main.js
View file @ af77de8a
"use strict";
var large_player;
var small_player;
let large_player;
let small_player;
function newLargePlayer(channel) {
return new Twitch.Player('large-player', {
channel: channel,
width: '',
height: '',
controls: false,
muted: false
});
return new Twitch.Player("large-player", {
channel: channel,
width: "",
height: "",
controls: false,
muted: false
});
}
function newSmallPlayer(channel) {
return new Twitch.Player('small-player', {
channel: channel,
width: '',
height: '',
controls: false,
muted: true
});
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');
const overlay_elem = document.getElementById('overlay');
const chat_elem = document.getElementById('chat');
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");
const defaultState = {
large_channel: '',
small_channel: '',
volume: 0.5,
small_scale: 0.3,
show_chat: false
large_channel: "",
small_channel: "",
volume: 0.5,
small_scale: 0.3,
show_chat: false
};
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';
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 (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
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 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;
}
// 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();
}
// small player:
// we need to destroy the player
if (state.small_channel == '' && small_player) {
small_player.destroy();
small_player = undefined;
}
let chat_elem_src =
"https://www.twitch.tv/embed/" + state.large_channel + "/chat?darkpopout";
// 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();
}
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);
}
}
const small_player_size = state.small_scale * 100 + '%';
small_player_elem.style.width = small_player_size;
small_player_elem.style.height = small_player_size;
// 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' : '';
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' : '';
document.body.className = state.show_chat ? "with-chat" : "";
}
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 {
const events = new EventSource('/display');
const events = new EventSource("/display");
events.onmessage = m => {
updateState(JSON.parse(m.data));
};
events.onmessage = m => {
updateState(JSON.parse(m.data));
};
events.onopen = () => {
overlay_elem.firstElementChild.innerText = 'Nothing playing';
};
events.onopen = () => {
overlay_elem.firstElementChild.innerText = "Nothing playing";
};
events.onerror = err => {
console.error(err);
events.onerror = err => {
console.error(err);
updateState(defaultState);
overlay_elem.firstElementChild.innerText = 'Connection to stream-server failed. Make sure it\'s running.';
};
updateState(defaultState);
overlay_elem.firstElementChild.innerText =
"Connection to stream-server failed. Make sure it's running.";
};
}
function toggleFullscreen() {
if (!document.fullscreenElement) { // we are not in fullscreen
document.documentElement.requestFullscreen()
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
if (!document.fullscreenElement) {
// we are not in fullscreen
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
large_player_elem.addEventListener('mousedown', (event) => {
if (event.detail > 1) { // double click
toggleFullscreen();
large_player_elem.addEventListener("mousedown", event => {
if (event.detail > 1) {
// double click
toggleFullscreen();
event.preventDefault();
}
});
\ No newline at end of file
event.preventDefault();
}
});
internal/static/style.css
View file @ af77de8a
body {
display: flex;
display: flex;
margin: 0;
padding: 0;
height: 100vh;
width: calc(100vw + 21.25rem); /* without chat the body is 21.25rem (the size of the chat) wider */
margin: 0;
padding: 0;
height: 100vh;
background-color: black;
overflow: hidden;
transition: width 0.3s; /* width changes are animated */
/* without chat the body is 21.25rem (the size of the chat) wider */
width: calc(100vw + 21.25rem);
background-color: black;
overflow: hidden;
transition: width 0.3s; /* width changes are animated */
}
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 {
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 */
display: flex;
flex-grow: 1; /* #large-player fills remaining space while #chat does not */
/* 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 */
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 */
position: absolute;
width: 100%;
height: 0;
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 */
#small-player-container {
/* this container is necessary for the #small-player to keep an 16:9 aspect ratio */
position: absolute;
width: 100%;
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 {
position: absolute;
top: 0; /* pin small player to the top right */
right: 0;
/* Note: the width and height property get set via script */
transition: width 0.3s, height 0.3s; /* width and height changes are animated */
display: flex;
position: absolute;
top: 0; /* pin small player to the top right */
right: 0;
/* Note: the width and height property get set via script */
transition: width 0.3s, height 0.3s; /* width and height changes are animated */
display: flex;
}
#small-player > iframe,
#large-player > iframe { /* the iframes always grow to the parents size */
flex-grow: 1;
#large-player > iframe {
/* the iframes always grow to the parents size */
flex-grow: 1;
pointer-events: none;
pointer-events: none;
}
.hidden > iframe {
display: none;
display: none;
}
#overlay {
font-family: Roboto, Helvetica, Arial, sans-serif;
color: white;
/* center the content */
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
color: white;
/* center the content */
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#overlay.hidden {
display: none;
display: none;
}
#chat {
width: 21.25rem;
width: 21.25rem;
}
a:link, a:active, a:visited, a:hover {
color: inherit;
}
\ No newline at end of file
a:link,
a:active,
a:visited,
a:hover {
color: inherit;
}
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