143 lines
3.2 KiB
HTML
143 lines
3.2 KiB
HTML
<!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>Title</title>
|
|
</head>
|
|
<body>
|
|
<div class="everything">
|
|
<header></header>
|
|
<div class="stream">
|
|
<div class="feed">
|
|
<div id="BLARF" data-target="wss://iki.mid.net.ua/streamout/"></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 src="blarf.js"></script>
|
|
|
|
<script>
|
|
function randomHex(size) {
|
|
return [...self.crypto.getRandomValues(new Uint8Array(size))].map(b=>b.toString(16).padStart(2, "0")).join("");
|
|
}
|
|
const un = 'lol' + randomHex(16)
|
|
|
|
converse.initialize({
|
|
view_mode: 'embedded',
|
|
websocket_url: 'wss://mid.net.ua/xmpp',
|
|
login: 'anonymous',
|
|
jid: un + '@anon.mid.net.ua',
|
|
auto_login: true,
|
|
password: 'lol',
|
|
auto_join_rooms: ['stream@muc.anon.mid.net.ua'],
|
|
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
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|