Skip to content

Commit 4e2865e

Browse files
adamagnoliaadamagnolia
committed
bring login back, fix resize
1 parent ca58153 commit 4e2865e

File tree

3 files changed

+250
-227
lines changed

3 files changed

+250
-227
lines changed

‎videoconference/index.html

Lines changed: 76 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -12,239 +12,88 @@
1212
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,900" rel="stylesheet">
1313

1414
<link rel="stylesheet" type="text/css" href="/css/main.css">
15-
</head>
16-
17-
<style>
18-
html {
19-
height:100%;
20-
}
21-
body {
22-
height:100%;
23-
}
24-
#q-app {
25-
height:100%;
26-
}
27-
#videoconference {
28-
height: 100%;
29-
margin-top:4rem;
30-
}
31-
.userIcon {
32-
width: 32px;
33-
height: 32px;
34-
clip-path: circle(16px at center);
35-
}
36-
#userAvatar {
37-
display: none;
38-
}
39-
.auth-dialog > div:first-child {
40-
position: absolute;
41-
left: 50%;
42-
top: 50%;
43-
background: rgba(0,0,0,0.5);
44-
border: thin solid #777;
45-
transform: translate(-50%, -50%);
46-
z-index: 1050;
47-
}
48-
#loginStatus a {
49-
border-bottom: none;
50-
}
51-
#loginStatus a:hover {
52-
border-bottom: 1px solid white;
53-
}
54-
#jitsi {
55-
width: 100%;
56-
height: calc( 100% - 4rem );
57-
}
58-
59-
[v-cloak] {
60-
display: none
61-
}
62-
.row {
63-
margin-left: 0 !important;
64-
margin-right: 0 !important;
65-
}
66-
.col {
67-
padding-left: 0 !important;
68-
padding-right: 0 !important;
69-
}
70-
</style>
15+
<link rel="stylesheet" type="text/css" href="./videoconference.css">
16+
</head>
7117

7218
<body>
7319

74-
<!-- Firebase authentication -->
75-
<div id="firebaseui-auth-container" class="auth-dialog"></div>
76-
77-
<!-- navigation bar -->
78-
<!-- currently, the fixed top class is added, so it sticks to the top -->
79-
<!-- data value of nav bar corresponds to id in each section -->
80-
<nav class="navbar navbar-expand-lg fixed-top ">
81-
82-
<a class="navbar-brand" href="/" >
83-
<div class="logo_brainweb"><p style="padding-left:4em;color:white;cursor:pointer;font-size:14px;font-weight:300;line-height:2.7;vertical-align: middle;">BrainWeb</p></div>
84-
</a>
85-
86-
<button class="navbar-toggler landing-page myCollapsedMenuBarIcon" id="myMenuBtn" type="button" data-toggle="collapse" data-target="#myMenu" aria-controls="myMenu" aria-expanded="false" aria-label="Toggle navigation" style="padding:0;border:none; width:1.5em;height:1.5em;" onclick="this.blur();">
87-
</button>
88-
89-
<div class="collapse navbar-collapse" id="myMenu" style="width:100%;">
90-
<ul class="navbar-nav mr-4" >
91-
<li class="nav-item">
92-
<a class="nav-link" href="/">BrainWeb</a>
93-
</li>
94-
<li class="nav-item">
95-
<a class="nav-link" href="/#events">Events</a>
96-
</li>
97-
<li class="nav-item">
98-
<a class="nav-link" href="/projects/">Projects</a>
99-
</li>
100-
<li class="nav-item">
101-
<a class="nav-link" href="/community/">Community</a>
102-
</li>
103-
<li class="nav-item">
104-
<a class="nav-link" href="/videoconference/">Videoconference</a>
105-
</li>
106-
<li class="nav-item">
107-
<span class="nav-link" id="loginStatus" style="border-bottom:none"><a style="color:white" href="#" onclick="signIn()">Sign In</a></span>
108-
</li>
109-
<li class="nav-item" id="userAvatar">
110-
<img class="userIcon"/>
111-
</li>
112-
</ul>
113-
</div>
114-
</nav>
115-
116-
<div id="q-app">
117-
<!-- part 4 Videoconference -->
118-
<div id="videoconference">
119-
<div id="jitsi"></div>
120-
</div>
121-
122-
<style>
123-
#extras {
124-
display:block;
125-
position: absolute;
126-
top: 50%;
127-
left: -5px;
128-
transform: translate( 0, -50% );
129-
width:53px;
130-
height:250px;
131-
background:black;
132-
border-top-right-radius: 10px;
133-
border-bottom-right-radius: 10px;
134-
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
135-
}
136-
.tool {
137-
margin: 10px;
138-
width: 48px;
139-
height: 48px;
140-
font-size:38px;
141-
cursor: pointer;
142-
}
143-
.feedback {
144-
position: absolute;
145-
width: 96px;
146-
height: 96px;
147-
font-size: 96px;
148-
z-index:100;
149-
}
150-
</style>
151-
<div id="extras">
152-
<div class="tool" onclick="feedback('🧠')">🧠</div>
153-
<div class="tool" onclick="feedback('🥰')">🥰</div>
154-
<div class="tool" onclick="feedback('😍')">😍</div>
155-
<div class="tool" onclick="feedback('🚀')">🚀</div>
156-
</div>
20+
<!-- Firebase authentication -->
21+
<div id="firebaseui-auth-container" class="auth-dialog"></div>
22+
23+
<!-- navigation bar -->
24+
<!-- currently, the fixed top class is added, so it sticks to the top -->
25+
<!-- data value of nav bar corresponds to id in each section -->
26+
<nav class="navbar navbar-expand-lg fixed-top ">
27+
28+
<a class="navbar-brand" href="/" >
29+
<div class="logo_brainweb"><p style="padding-left:4em;color:white;cursor:pointer;font-size:14px;font-weight:300;line-height:2.7;vertical-align: middle;">BrainWeb</p></div>
30+
</a>
31+
32+
<button class="navbar-toggler landing-page myCollapsedMenuBarIcon" id="myMenuBtn" type="button" data-toggle="collapse" data-target="#myMenu" aria-controls="myMenu" aria-expanded="false" aria-label="Toggle navigation" style="padding:0;border:none; width:1.5em;height:1.5em;" onclick="this.blur();">
33+
</button>
34+
35+
<div class="collapse navbar-collapse" id="myMenu" style="width:100%;">
36+
<ul class="navbar-nav mr-4" >
37+
<li class="nav-item">
38+
<a class="nav-link" href="/">BrainWeb</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link" href="/#events">Events</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link" href="/projects/">Projects</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="/community/">Community</a>
48+
</li>
49+
<li class="nav-item">
50+
<a class="nav-link" href="/videoconference/">Videoconference</a>
51+
</li>
52+
<li class="nav-item">
53+
<span class="nav-link" id="loginStatus" style="border-bottom:none"><a style="color:white" href="#" onclick="signIn()">Sign In</a></span>
54+
</li>
55+
<li class="nav-item" id="userAvatar">
56+
<img class="userIcon"/>
57+
</li>
58+
</ul>
15759
</div>
60+
</nav>
15861

159-
<script src="/js/sentry.min.js" data-lazy="no"></script>
160-
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
161-
<script src="https://cdn.jsdelivr.net/npm/quasar@1.9.10/dist/icon-set/svg-material-icons.umd.min.js"></script>
162-
<script defer src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
163-
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css" />
164-
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
165-
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
166-
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-database.js"></script>
167-
<script src="https://meet.jit.si/external_api.js"></script>
168-
169-
<script>
170-
const {offsetWidth: width, offsetHeight: height} = document.querySelector("#jitsi");
171-
console.log(width, height);
172-
const domain = 'meet.jit.si';
173-
const options = {
174-
roomName: 'BrainWeb',
175-
width,
176-
height,
177-
parentNode: document.querySelector('#jitsi')
178-
};
179-
const api = new JitsiMeetExternalAPI(domain, options);
180-
181-
function feedbackAnimationStep(timer, elem) {
182-
const dx = 500 * Math.random() - 250;
183-
const x = parseInt("0" + elem.style.left);
184-
const y = parseInt("0" + elem.style.top);
185-
const newx = 0.9*x + 0.1*(x+dx);
186-
const newy = y - 25;
187-
elem.style.left = newx + "px";
188-
elem.style.top = newy + "px";
189-
if(newy <= 0 ) {
190-
clearInterval(timer);
191-
elem.remove();
192-
}
193-
}
194-
function feedbackAnimation(emoji) {
195-
const elem = document.createElement('div');
196-
elem.innerText = emoji;
197-
elem.classList.add("feedback");
198-
document.body.appendChild(elem);
199-
elem.style.left = window.innerWidth/2.0 + "px";
200-
elem.style.top = window.innerHeight + "px";
201-
const timer = setInterval( () => {
202-
feedbackAnimationStep(timer, elem);
203-
}, 25);
204-
}
205-
function feedback(emoji) {
206-
feedbackAnimation(emoji);
207-
broadcastMessage({type:"feedback", emoji});
208-
}
209-
api.addEventListener('endpointTextMessageReceived', (rawMsg) => {
210-
const text = rawMsg.data.eventData.text;
211-
const msg = JSON.parse(text);
212-
switch(msg.type) {
213-
case "feedback":
214-
const emoji = msg.emoji;
215-
feedbackAnimation(emoji);
216-
break;
217-
case "clap":
218-
playClapSound();
219-
break;
220-
}
221-
});
222-
function broadcastMessage(msg) {
223-
for(const participant in api._participants) {
224-
let send = true;
225-
if(!{}.hasOwnProperty.call(api._participants, participant)) {
226-
continue;
227-
}
228-
const itsme = (api._participants[participant].formattedDisplayName.slice(-5) === " (me)");
229-
if(itsme) {
230-
continue;
231-
}
232-
api.executeCommand('sendEndpointTextMessage', participant, JSON.stringify(msg));
233-
}
234-
}
235-
</script>
236-
<script defer src="/js/init-firebase.js"></script>
237-
238-
239-
<!-- Global site tag (gtag.js) - Google Analytics -->
240-
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138729622-3"></script>
241-
<script>
242-
window.dataLayer = window.dataLayer || [];
243-
function gtag(){dataLayer.push(arguments);}
244-
gtag('js', new Date());
62+
<div id="q-app">
63+
<!-- part 4 Videoconference -->
64+
<div id="videoconference">
65+
<div id="jitsi"></div>
66+
</div>
24567

246-
gtag('config', 'UA-138729622-3');
247-
</script>
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>
74+
</div>
75+
76+
<script src="/js/sentry.min.js" data-lazy="no"></script>
77+
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
78+
<script src="https://cdn.jsdelivr.net/npm/quasar@1.9.10/dist/icon-set/svg-material-icons.umd.min.js"></script>
79+
<script defer src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
80+
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css" />
81+
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
82+
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
83+
<script defer src="https://www.gstatic.com/firebasejs/7.12.0/firebase-database.js"></script>
84+
<script src="https://meet.jit.si/external_api.js"></script>
85+
86+
<script defer src="/js/init-firebase.js"></script>
87+
<script type="module" src="./index.js"></script>
88+
89+
<!-- Global site tag (gtag.js) - Google Analytics -->
90+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138729622-3"></script>
91+
<script>
92+
window.dataLayer = window.dataLayer || [];
93+
function gtag(){dataLayer.push(arguments);}
94+
gtag('js', new Date());
95+
gtag('config', 'UA-138729622-3');
96+
</script>
24897

24998
</body>
25099
</html>

0 commit comments

Comments
 (0)