Skip to content

Commit 773125d

Browse files
r03ert0r03ert0
committed
rename files
1 parent fe87c0f commit 773125d

6 files changed

Lines changed: 378 additions & 378 deletions

File tree

‎videoconference/index.html‎

Lines changed: 141 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,75 @@
1313

1414
<link rel="stylesheet" type="text/css" href="/css/main.css">
1515
<link rel="stylesheet" type="text/css" href="./videoconference.css">
16+
17+
<style>
18+
#q-app {
19+
margin-top:70px;
20+
}
21+
.room {
22+
color: #ccc;
23+
display: inline-block;
24+
width: 280px;
25+
height: 220px;
26+
background: #1d1d1d;
27+
border: thin solid #333;
28+
border-radius: 5px;
29+
margin: 14px 10px;
30+
text-align: center;
31+
transition: border 0.5s;
32+
}
33+
.room:hover {
34+
border: thin solid white;
35+
}
36+
.animal {
37+
font-size: 3rem;
38+
filter: saturate(0.1) contrast(1.3);
39+
margin-top: -16px;
40+
margin-bottom: 12px;
41+
margin-left: 120px;
42+
margin-right: 120px;
43+
background: #77f;
44+
border-radius: 50px;
45+
width: 50px;
46+
height: 50px;
47+
}
48+
.camera {
49+
margin: 3px;
50+
}
51+
.subject {
52+
color: white;
53+
width: calc( 100% - 20px);
54+
margin: 10px;
55+
padding: 12px;
56+
font-weight: bold;
57+
background: none;
58+
border: none;
59+
}
60+
.subject:placeholder-shown {
61+
opacity: 50%;
62+
border: 1px dashed #555;
63+
font-weight: normal;
64+
}
65+
.button {
66+
border: thin solid #555;
67+
color: white;
68+
background: #373737;
69+
padding: 5px 24px;
70+
border-radius: 20px;
71+
}
72+
.button:hover {
73+
background: #222;
74+
}
75+
#container {
76+
position: absolute;
77+
top: 50%;
78+
left: 50%;
79+
width: 100%;
80+
max-width: 940px;
81+
text-align: center;
82+
transform: translate(-50%, -50%);
83+
}
84+
</style>
1685
</head>
1786

1887
<body>
@@ -60,17 +129,16 @@
60129
</nav>
61130

62131
<div id="q-app">
63-
<!-- part 4 Videoconference -->
64-
<div id="videoconference">
65-
<div id="jitsi"></div>
132+
<!-- part 4 Videoconference rooms -->
133+
<div id="container">
134+
<div class="room" id="orangutan"><div class="animal">🦧</div><b>Orangutan</b> Room<input type=""text class="subject" placeholder="Enter Room Subject" onchange="roomRename(this);"/><button class="button" onclick="openJit('bw-orangutan', 'Orangutan');">Enter</button></div>
135+
<div class="room" id="hippo"><div class="animal">🦛</div><b>Hippo</b> Room<input type="text" class="subject" placeholder="Enter Room Subject" onchange="roomRename(this);"/><button class="button" onclick="openJit('bw-hippo', 'hippo');">Enter</button></div>
136+
<div class="room" id="squid"><div class="animal">🦑</div><b>Squid</b> Room<input type="text" class="subject" placeholder="Enter Room Subject" onchange="roomRename(this);"/><button class="button" onclick="openJit('bw-squid', 'squid');">Enter</button></div>
137+
<div class="room" id="trex"><div class="animal">🦖</div><b>T-Rex</b> Room<input type="text" class="subject" placeholder="Enter Room Subject" onchange="roomRename(this);"/><button class="button" onclick="openJit('bw-trex', 'trex');">Enter</button></div>
138+
<div class="room" id="elephant"><div class="animal">🐘</div><b>Elephant</b> Room<input type="text" class="subject" placeholder="Enter Room Subject" onchange="roomRename(this);"/><button class="button" onclick="openJit('bw-elephant', 'elephant');">Enter</button></div>
139+
<div class="room" id="sloth"><div class="animal">🦥</div><b>Sloth</b> Room<input type="text" class="subject" placeholder="Enter Room Subject" onchange="roomRename(this);"/><button class="button" onclick="openJit('bw-sloth', 'sloth');">Enter</button></div>
66140
</div>
67141

68-
<div id="extras">
69-
<div class="tool" onclick="feedback('🧠')">🧠</div>
70-
<div class="tool" onclick="feedback('🥰')">🥰</div>
71-
<div class="tool" onclick="feedback('🦦')">🦦</div>
72-
<div class="tool" onclick="feedback('🚀')">🚀</div>
73-
</div>
74142
</div>
75143

76144
<script src="/js/sentry.min.js" data-lazy="no"></script>
@@ -84,7 +152,70 @@
84152
<script src="https://meet.jit.si/external_api.js"></script>
85153

86154
<script defer src="/js/init-firebase.js"></script>
87-
<script type="module" src="./index.js"></script>
155+
<script type="module" src="./index2.js"></script>
156+
<script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
157+
<script>
158+
function openJit(id, name) {
159+
window.open("room.html#"+id+"."+name);
160+
}
161+
162+
const updateVideochatIcon = (sel, count) => {
163+
const el = document.querySelector(sel);
164+
if(!el) {
165+
return;
166+
}
167+
168+
if (count === 0) {
169+
el.querySelector("text").innerHTML = "";
170+
el.querySelector(".bubble").setAttribute("fill", "rgba(255,255,255,0.4)");
171+
el.classList.remove("connected");
172+
} else {
173+
el.querySelector("text").innerHTML = count;
174+
el.querySelector(".bubble").setAttribute("fill", "rgb(0, 220, 0)");
175+
el.classList.add("connected");
176+
}
177+
}
178+
179+
function websocketDump(dump) {
180+
for(key in dump) {
181+
if(key !== "" && {}.hasOwnProperty.call(dump, key)) {
182+
console.log("dump", key, dump[key]);
183+
updateVideochatIcon(`#${key}`, parseInt(dump[key]));
184+
}
185+
}
186+
}
187+
188+
function websocketUpdate(update) {
189+
const {id: key, count} = update;
190+
191+
if (key.split("-")[0] !== "bw") {
192+
return;
193+
}
194+
195+
console.log("update", key, count);
196+
updateVideochatIcon(`#${key}`, parseInt(count));
197+
}
198+
199+
function websocketOnMessage(e) {
200+
let msg = JSON.parse(e.data);
201+
if(msg.dump) {
202+
websocketDump(msg.dump);
203+
}
204+
if(msg.update) {
205+
websocketUpdate(msg.update);
206+
}
207+
}
208+
209+
function connectToWebsocket() {
210+
wss = new ReconnectingWebSocket("wss://brainspell.org/vcrooms");
211+
wss.onopen = () => {
212+
console.log("send dump request");
213+
wss.send(JSON.stringify({action: "dump"}));
214+
}
215+
wss.onmessage = websocketOnMessage;
216+
}
217+
connectToWebsocket();
218+
</script>
88219

89220
<!-- Global site tag (gtag.js) - Google Analytics -->
90221
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138729622-3"></script>

‎videoconference/index.js‎

Lines changed: 44 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,23 @@
1-
/* eslint-disable radix */
2-
3-
const domain = 'meet.jit.si';
4-
const options = {
5-
roomName: 'BrainWeb',
6-
width: "100%",
7-
height: "100%",
8-
parentNode: document.querySelector('#jitsi')
9-
};
10-
11-
// eslint-disable-next-line no-undef
12-
const api = new JitsiMeetExternalAPI(domain, options);
13-
14-
const feedbackAnimationStep = (timer, elem) => {
15-
const dx = 500 * Math.random() - 250;
16-
const x = parseInt("0" + elem.style.left);
17-
const y = parseInt("0" + elem.style.top);
18-
const newx = 0.9*x + 0.1*(x+dx);
19-
const newy = y - 25;
20-
elem.style.left = newx + "px";
21-
elem.style.top = newy + "px";
22-
if(newy <= 0 ) {
23-
clearInterval(timer);
24-
elem.remove();
25-
}
26-
};
27-
28-
const feedbackAnimation = (emoji) => {
29-
const elem = document.createElement('div');
30-
elem.innerText = emoji;
31-
elem.classList.add("feedback");
32-
document.body.appendChild(elem);
33-
elem.style.left = window.innerWidth/2.0 + "px";
34-
elem.style.top = window.innerHeight + "px";
35-
const timer = setInterval( () => {
36-
feedbackAnimationStep(timer, elem);
37-
}, 25);
38-
};
39-
40-
const broadcastMessage = (msg) => {
41-
// eslint-disable-next-line guard-for-in
42-
for(const participant in api._participants) {
43-
if(!{}.hasOwnProperty.call(api._participants, participant)) {
44-
continue;
45-
}
46-
const itsme = (api._participants[participant].formattedDisplayName.slice(-5) === " (me)");
47-
if(itsme) {
48-
continue;
49-
}
50-
api.executeCommand('sendEndpointTextMessage', participant, JSON.stringify(msg));
51-
}
1+
const configureRooms = () => {
2+
document.querySelectorAll(".room").forEach((el) => {
3+
const roomID = "bw-" + el.id;
4+
const svg = `
5+
<svg class="camera" width=48 height=32 style="display:block">
6+
<g id="${roomID}" transform="translate(0,0) scale(0.4)">
7+
<path class="bubble" d="M 31.848061,7.6290677 A 28.403238,22.039304 0 0 0 3.596657,29.668006 28.403238,22.039304 0 0 0 10.583386,44.14469 L 7.6648251,56.370967 20.270838,49.740068 A 28.403238,22.039304 0 0 0 32,51.707502 28.403238,22.039304 0 0 0 60.403343,29.668006 28.403238,22.039304 0 0 0 32,7.6290677 a 28.403238,22.039304 0 0 0 -0.151939,0 z"
8+
fill="rgba(255,255,255,0.4)"></path>
9+
<path class="video" d="m 16.837732,20.440612 v 19.377113 h 24.589197 v -8.876977 l 3.412712,1.970421 5.397084,3.11609 v -6.232178 -6.232178 l -5.397084,3.116088 -3.412712,1.970423 v -8.208802 z"
10+
fill="white" stroke-width="5"></path>
11+
<text font-size="30" x="70" y="50" fill="white"></text>
12+
<g transform="translate(30,30)"><circle cx="0" cy="0" r="1" stroke-width="0.1" fill="none" stroke="white" /></g>
13+
</g>
14+
</svg>`;
15+
el.innerHTML = svg + el.innerHTML;
16+
});
5217
};
18+
configureRooms();
5319

54-
// eslint-disable-next-line no-unused-vars
55-
const feedback = (emoji) => {
56-
feedbackAnimation(emoji);
57-
broadcastMessage({type:"feedback", emoji});
58-
};
59-
window.feedback = feedback;
60-
61-
api.addEventListener('endpointTextMessageReceived', (rawMsg) => {
62-
const {text} = rawMsg.data.eventData;
63-
const msg = JSON.parse(text);
64-
switch(msg.type) {
65-
case "feedback": {
66-
const {emoji} = msg;
67-
feedbackAnimation(emoji);
68-
break;
69-
}
70-
case "clap":
71-
// playClapSound();
72-
break;
73-
}
74-
});
20+
let rooms;
7521

7622
// eslint-disable-next-line no-undef
7723
startFirebase();
@@ -91,4 +37,30 @@ window.addEventListener('load', () => {
9137
document.querySelectorAll(".logged").forEach((el) => { el.classList.remove("logged"); });
9238
}
9339
});
40+
41+
rooms = firebase.database().ref('rooms');
42+
rooms.on('value', (s) => {
43+
const val = s.val();
44+
if (val === null) {
45+
return;
46+
}
47+
console.log(val);
48+
for(const key in val) {
49+
if ({}.hasOwnProperty.call(val, key)) {
50+
document.querySelector(`#${key} > .subject`).value = val[key];
51+
console.log(key, val[key]);
52+
}
53+
}
54+
});
9455
});
56+
57+
const roomRename = (ev) => {
58+
const key = ev.parentElement.id;
59+
const value = ev.value;
60+
const object = {};
61+
object[key] = value;
62+
console.log(`roomRename id=${key} value=${value}`);
63+
ev.blur();
64+
rooms.update(object);
65+
};
66+
window.roomRename = roomRename;

0 commit comments

Comments
 (0)