Skip to content

Commit 53b0549

Browse files
r03ert0r03ert0
committed
ohbm poster room
1 parent 18d4a1c commit 53b0549

File tree

4 files changed

+62914
-0
lines changed

4 files changed

+62914
-0
lines changed

‎ohbm2020/index.html‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<html>
2+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
3+
<style>
4+
.dot {
5+
display: inline-block;
6+
width: 14px;
7+
height: 14px;
8+
/* border-radius: 50%; */
9+
background: #bbaaaa;
10+
margin:1px;
11+
font-size: 12px;
12+
font-family: sans-serif;
13+
vertical-align: middle;
14+
text-align: center;
15+
}
16+
.dot.connected {
17+
background: #00ff00;
18+
}
19+
#poster {
20+
display:none;
21+
position: absolute;
22+
top:50%;
23+
left:50%;
24+
transform: translate( -50%, -50%);
25+
width:33%;
26+
font-family: sans-serif;
27+
background: white;
28+
padding: 16px;
29+
box-shadow: 5px 5px 10px grey;
30+
}
31+
.small {
32+
display: block;
33+
margin-bottom: 1rem;
34+
color:#999;
35+
font-size: 0.8rem;
36+
}
37+
.medium {
38+
display: block;
39+
margin-bottom: 1rem;
40+
color:#555;
41+
font-size: 1rem;
42+
}
43+
.title {
44+
display: block;
45+
margin-bottom: 1rem;
46+
color: #000;
47+
font-size: 1.2rem;
48+
}
49+
.pdf, .video {
50+
display: inline-block;
51+
padding:5px 10px;
52+
background:#ddd;
53+
border-radius:3px;
54+
font-size: 1rem;
55+
border: thin solid #777;
56+
box-shadow: 2px 2px 2px #ddd;
57+
}
58+
.pdf > a, .video > a {
59+
color: #444;
60+
}
61+
.pdf > a:hover, .video > a:hover {
62+
color: rgb(75, 183, 233);
63+
}
64+
</style>
65+
66+
<div id="room">
67+
</div>
68+
69+
<div id="poster" onclick="closePoster()">
70+
</div>
71+
72+
<script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
73+
<script>
74+
let posters;
75+
76+
async function getPosters() {
77+
let res = await fetch("posters.json");
78+
const data = await res.json();
79+
80+
res = await fetch("posters-overrides.json");
81+
const override = await res.json();
82+
override.posters.forEach(o => {
83+
let p = data.posters.find(p=>p.number === o.number);
84+
const {videochat, pdf} = o;
85+
if(videochat) {
86+
p.videochat = `<a href=\"https://meet.jit.si/${videochat}\" target=\"_${videochat}\">${videochat}</a>`;
87+
}
88+
if(pdf) {
89+
p.pdf = o.pdf;
90+
}
91+
});
92+
return data.posters;
93+
}
94+
95+
function displayPosters(el) {
96+
let str = ""
97+
for(p of posters) {
98+
str += `<div class="dot" id="${p.number}" title="[${p.number}] ${p.title}"></div>`;
99+
}
100+
el.innerHTML = str;
101+
}
102+
103+
function displayPoster(p) {
104+
const el = document.getElementById("poster");
105+
const dot = document.getElementById(p.number);
106+
const {connected} = dot.dataset;
107+
const roomName = p.videochat.match(/>([^<]+)</)[1].replace("jitsi:","");
108+
const roomLink = `<a href="#" onclick="openJit('${p.number}', '${roomName}')"><i class="fas fa-video"></i></a>`;
109+
const videoLink =
110+
el.innerHTML = `
111+
<div class="small">Poster #${p.number} [${connected|0} connected]</div>
112+
<div class="title">${p.title}</div>
113+
<div class="medium">${p.authors.join(", ")}</div>
114+
<div class="pdf"><a href="${p.pdf}"><i class="far fa-file-pdf"></i></a></div>
115+
<div class="video">${roomLink}</div>
116+
`;
117+
el.style.display="inline-block";
118+
}
119+
120+
function closePoster() {
121+
document.getElementById("poster").style.display="none";
122+
}
123+
124+
function websocketDump(dump) {
125+
for(key in dump) {
126+
if({}.hasOwnProperty.call(dump, key)) {
127+
const el = document.getElementById(`${key}`);
128+
el.classList.add("connected");
129+
el.innerText=dump[key];
130+
el.dataset.connected = dump[key];
131+
}
132+
}
133+
}
134+
135+
function websocketUpdate(update) {
136+
const {id: key, count} = update;
137+
const el = document.getElementById(`${key}`);
138+
if(count === 0) {
139+
el.classList.remove("connected");
140+
el.innerText = "";
141+
delete el.dataset.connected;
142+
} else {
143+
el.classList.add("connected");
144+
el.innerText = count;
145+
el.dataset.connected = count;
146+
}
147+
}
148+
149+
function websocketOnMessage(e) {
150+
let msg = JSON.parse(e.data);
151+
if(msg.dump) {
152+
websocketDump(msg.dump);
153+
}
154+
if(msg.update) {
155+
websocketUpdate(msg.update);
156+
}
157+
}
158+
159+
function connectToWebsocket() {
160+
wss = new ReconnectingWebSocket("wss://dev1.soichi.us/ohbm2020/");
161+
// wss = new WebSocket("wss://dev1.soichi.us/ohbm2020/");
162+
wss.onopen = () => {
163+
console.log("send dump");
164+
wss.send(JSON.stringify({action: "dump"}));
165+
}
166+
wss.onmessage = websocketOnMessage;
167+
}
168+
169+
function clickHandler(e) {
170+
const {id} = e.target;
171+
console.log(id);
172+
173+
if(document.getElementById("poster").style.display !== "none") {
174+
document.getElementById("poster").style.display = "none";
175+
return;
176+
}
177+
178+
const poster = posters.filter((o)=>o.number === parseInt(id));
179+
if(poster.length) {
180+
displayPoster(poster[0]);
181+
}
182+
}
183+
184+
function openJit(id, name) {
185+
window.open("room.html#"+id+"."+name);
186+
}
187+
188+
async function main() {
189+
posters = await getPosters();
190+
const room = document.querySelector("#room");
191+
displayPosters(room);
192+
document.getElementById("poster").style.display = "none";
193+
document.addEventListener('click', clickHandler);
194+
connectToWebsocket();
195+
}
196+
197+
main();
198+
</script>
199+
</html>

0 commit comments

Comments
 (0)