diff --git a/internal/static/index.html b/internal/static/index.html
index 4f9d22233b88e24bfdde24bfc352809f39641057..738b40cd0cc9bb6b5882067eb6a1e7520fc2bf23 100644
--- a/internal/static/index.html
+++ b/internal/static/index.html
@@ -1,33 +1,34 @@
<!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>
diff --git a/internal/static/main.js b/internal/static/main.js
index 85442b8d8a36d9752e444cdbc0235a21bdafc605..9dd6b0031cdd960b5dc8fa0aa5e4cf54f901d14a 100644
--- a/internal/static/main.js
+++ b/internal/static/main.js
@@ -1,164 +1,167 @@
"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();
+ }
+});
diff --git a/internal/static/style.css b/internal/static/style.css
index 421fc818fdfa8d228e59712655fa313d9d8bb113..b590bd51a5bccdf37728704aa6f2751cadbf5f52 100644
--- a/internal/static/style.css
+++ b/internal/static/style.css
@@ -1,81 +1,92 @@
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;
+}