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

Removed duplicate file

parent 75b91a58
Hide whitespace changes
Inline Side-by-side
internal/website/index.html deleted 100644 → 0
View file @ 75b91a58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stream TV</title>
<!-- Twitch embed -->
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: black;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
pointer-events: none;
}
#small-player iframe {
position: absolute;
left: 0;
top: 0;
}
#large-player {
width: 100%;
height: 100%;
}
#small-player {
position: absolute;
display: none;
width: 100%;
height: 0;
padding-bottom: 56.25%;
transition: transform 300ms;
transform-origin: top right;
transform: scale(0.2) translate(-16%, 16%); /* will be changed by js */
}
#overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
a:link { color:inherit; }
a:active { color:inherit; }
a:visited { color:inherit; }
a:hover { color:inherit; }
</style>
</head>
<body>
<div id="large-player" onmousedown="toggleFullscreen(event)">
<div id="small-player"></div>
<div id="overlay">
<h3>Nothing playing</h3>
<p>Documentation at <a href="https://simons-nzse-2.h-da.io/stream-tv">https://simons-nzse-2.h-da.io/stream-tv</a></p>
</div>
</div>
<script>
const large_player = new Twitch.Player('large-player', {
width: 0,
height: 0,
controls: false,
muted: false
});
const small_player = new Twitch.Player('small-player', {
width: 0,
height: 0,
controls: false,
muted: true
});
const small_player_elem = document.getElementById('small-player');
const overlay_elem = document.getElementById('overlay');
let state = {
large_channel: null,
small_channel: null
};
function updateState(newState) {
if (state.large_channel != newState.large_channel) {
large_player.setChannel(newState.large_channel);
large_player.setMuted(false); // TODO: investigate with autoplay
}
if (state.small_channel != newState.small_channel) {
small_player.setChannel(newState.small_channel);
}
state = newState;
console.log("State:", state);
large_player.setVolume(state.volume);
const inset_percent = (1.0 - state.small_scale) * 20;
small_player_elem.style.transform = 'scale(' + state.small_scale + ') translate(-' + inset_percent + '%, ' + inset_percent + '%)';
small_player_elem.style.display = (state.small_channel != null) ? 'block' : 'none';
overlay_elem.style.display = (state.large_channel != null || state.small_channel != null) ? 'none' : 'block';
}
fetch("/tv/state").then(resp => {
if (!resp.ok) {
throw Error(resp.statusText);
}
return resp;
}).then(resp => resp.json()).then(state => {
updateState(state)
const updateEventSource = new EventSource("/tv/events");
updateEventSource.onmessage = m => {
updateState(JSON.parse(m.data));
};
// TODO this could not exist
updateEventSource.onerror = err => {
console.error(err);
};
}).catch(err => {
console.error(err);
overlay_elem.firstElementChild.innerText = "Failed to connect to stream-tv-server. Make sure it's running and reload the page.";
});
// TODO: what happens if user returns after channel(s) went offline?
large_player.addEventListener(Twitch.Player.ENDED, () => {
});
small_player.addEventListener(Twitch.Player.ENDED, () => {
});
function toggleFullscreen(event) {
if (event.detail > 1) {
if (!document.fullscreenElement) {
document.getElementById('large-player').requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
event.preventDefault();
}
}
</script>
</body>
</html>
\ No newline at end of file
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