Initial commit

2024-12-21 22:43:09 +02:00
commit 6f26dced64
8 changed files with 23533 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,121 @@
+<!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(Intermission2.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;
+			}
+		</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
+			})
+		</script>
+	</body>
+</html>