<!DOCTYPE html>
<html>
<head>
<style>
@media(prefers-color-scheme: dark) {
body {
background: black;
}
}
div.everything {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 95vw;
}
div.stream {
display: flex;
flex-direction: row;
}
div.stream > div#BLARF {
}
div.stream > div.chat {
flex-grow: 1;
}
div#BLARF {
position: relative;
font-family: sans-serif;
width: fit-content;
}
div#BLARF .MKVControls {
position: absolute;
bottom: 0.5%;
left: 0%;
margin-left: 0;
right: 0%;
width: 100%;
color: white;
font-size: 0.4cm;
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
div#BLARF .MKVControls > * {
vertical-align: middle;
}
div#BLARF .MKVSpeaker {
width: 1em;
text-align: center;
display: inline-block;
cursor: pointer;
font-size: 0.75cm;
}
div#BLARF > canvas {
background: url(intermission.jpg) black;
background-position: 0 30%;
background-size: cover;
width: 100%;
}
/* Pretty bad hack, but this way Converse.js can be unchanged */
div.chatbox-title__text {
text-indent: -99999px;
line-height: 0 !important;
}
div.chatbox-title__text::after {
content: "Chat";
text-indent: 0px;
display: block;
line-height: initial;
}
@media(max-aspect-ratio: 1) {
div.everything {
top: 0;
left: 0;
transform: translate(0, 0);
}
div.stream {
flex-direction: column;
}
div.stream > div.chat {
min-height: 20vh;
}
converse-root {
position: absolute !important;
width: 100%;
height: 100%;
display: inline-block;
}
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/10.1.4/dist/converse.min.css">
<meta charset="UTF-8" />
<title>MWSS Stream</title>
<script>
var STREAM_SOURCE_WS = "wss://iki.mid.net.ua/streamout/"
var ENABLE_CHAT = true
var CHAT_HOST_WS_URL = "wss://mid.net.ua/xmpp"
var CHAT_HOST = "anon.mid.net.ua"
var CHAT_MUC = "stream@muc.anon.mid.net.ua"
</script>
</head>
<body>
<div class="everything">
<header></header>
<div class="stream">
<div class="feed">
<div id="BLARF" data-target=""></div>
</div>
<div class="chat">
<converse-root style="position: relative;"></converse-root>
</div>
</div>
<footer></footer>
</div>
<script src="https://cdn.conversejs.org/10.1.4/dist/converse.min.js" charset="utf-8"></script>
<script>
document.querySelector("#BLARF").setAttribute("data-target", STREAM_SOURCE_WS)
function randomHex(size) {
return [...self.crypto.getRandomValues(new Uint8Array(size))].map(b=>b.toString(16).padStart(2, "0")).join("")
}
const un = 'lol' + randomHex(16)
if(ENABLE_CHAT) {
converse.initialize({
view_mode: 'embedded',
websocket_url: CHAT_HOST_WS_URL,
login: 'anonymous',
jid: un + '@' + CHAT_HOST,
auto_login: true,
password: 'lol',
auto_join_rooms: [CHAT_MUC],
show_message_avatar: false,
show_controlbox_by_default: false,
roster_groups: false,
blacklisted_plugins: ['converse-controlbox', 'converse-fullscreen'],
singleton: true,
discover_connection_methods: false,
keepalive: false,
auto_reconnect: true,
hide_muc_participants: true
})
} else {
document.querySelector("div.everything .chat").style.display = "none"
}
</script>
<script src="blarf.js"></script>
</body>
</html>