Skip to content

Commit fe36ad5

Browse files
LValaLVala
authored
[Broadcaster] Improve the UX and styling of admin panel (#44)
* Rename player to panel, allow for remving chat messages by admin * Improve admin panel styling * Minor improvements
1 parent 17515c5 commit fe36ad5

File tree

4 files changed

+86
-36
lines changed

4 files changed

+86
-36
lines changed

‎broadcaster/assets/css/app.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@
1818
font-weight: 600;
1919
}
2020

21+
.chat-bar {
22+
width: 100%;
23+
display: flex;
24+
}
25+
26+
.chat-remove {
27+
font-weight: 800;
28+
margin-left: auto;
29+
}
30+
2131
/* from https://stackoverflow.com/a/38994837/9620900 */
2232
/* Hiding scrollbar for Chrome, Safari and Opera */
2333
#chat-messages::-webkit-scrollbar {

‎broadcaster/assets/js/chat.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,13 @@ function appendChatMessage(chatMessages, msg, isAdmin) {
7676
chatMessage.classList.add('chat-message');
7777
chatMessage.setAttribute('data-id', msg.id);
7878

79+
const bar = document.createElement('div');
80+
bar.classList.add('chat-bar');
81+
7982
const nickname = document.createElement('div');
8083
nickname.classList.add('chat-nickname');
8184
nickname.innerText = msg.nickname;
82-
chatMessage.appendChild(nickname);
85+
bar.appendChild(nickname);
8386

8487
if (isAdmin) {
8588
const remove = document.createElement('button');
@@ -94,9 +97,11 @@ function appendChatMessage(chatMessages, msg, isAdmin) {
9497
console.warn('Deleting message failed');
9598
}
9699
};
97-
chatMessage.appendChild(remove);
100+
bar.appendChild(remove);
98101
}
99102

103+
chatMessage.appendChild(bar);
104+
100105
const body = document.createElement('div');
101106
body.innerText = msg.body;
102107
chatMessage.appendChild(body);

‎broadcaster/assets/js/panel.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ async function startStreaming() {
9595
.filter((sender) => sender.track.kind === 'video')
9696
.forEach(async (sender) => {
9797
const params = sender.getParameters();
98-
console.log(params.encodings);
9998
params.encodings.find((e) => e.rid === 'h').maxBitrate =
10099
parseInt(highVideoBitrate.value) * 1024;
101100
params.encodings.find((e) => e.rid === 'm').maxBitrate =
@@ -123,10 +122,14 @@ async function startStreaming() {
123122
if (response.status == 201) {
124123
const sdp = await response.text();
125124
await pc.setRemoteDescription({ type: 'answer', sdp: sdp });
125+
button.innerText = 'Stop Streaming';
126+
button.onclick = stopStreaming;
127+
} else {
128+
console.error('Request to server failed with response:', response);
129+
pc.close();
130+
pc = undefined;
131+
enableControls();
126132
}
127-
128-
button.innerText = 'Stop Streaming';
129-
button.onclick = stopStreaming;
130133
} catch (err) {
131134
console.error(err);
132135
pc.close();

‎broadcaster/lib/broadcaster_web/controllers/page_html/panel.html.heex‎

Lines changed: 62 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,73 @@
1-
<div id="panel" phx-hook="Panel" class="p-10">
2-
<h1>WHIP Player</h1>
3-
<div>
4-
<div class="p-2">
5-
<label for="audioDevices">Audio Input Device:</label>
6-
<select id="audioDevices"></select>
1+
<div id="panel" phx-hook="Panel" class="h-full flex justify-between">
2+
<div class="flex flex-col gap-6">
3+
<div class="flex gap-6">
4+
<div>
5+
<label for="audioDevices" class="font-semibold text-brand/100">Audio Device</label>
6+
<select id="audioDevices" class="border-brand/50 text-brand/90 rounded-xl"></select>
7+
</div>
8+
<div>
9+
<label for="videoDevices" class="font-semibold text-brand/100">Video Device</label>
10+
<select id="videoDevices" class="border-brand/50 text-brand/90 rounded-xl"></select>
11+
</div>
712
</div>
8-
<div class="p-2">
9-
<label for="videoDevices">Video Input Device:</label>
10-
<select id="videoDevices"></select>
13+
<div class="flex flex-col gap-2">
14+
<p class="font-semibold text-brand/100">Max bitrate (kbps)</p>
15+
<div class="flex gap-6">
16+
<div>
17+
<label for="highVideoBitrate" class="font-semibold text-brand/100">High</label>
18+
<input
19+
type="text"
20+
id="highVideoBitrate"
21+
value="1500"
22+
class="border-brand/50 text-brand/90 rounded-xl"
23+
/>
24+
</div>
25+
<div>
26+
<label for="mediumVideoBitrate" class="font-semibold text-brand/100">Medium</label>
27+
<input
28+
type="text"
29+
id="mediumVideoBitrate"
30+
value="600"
31+
class="border-brand/50 text-brand/90 rounded-xl"
32+
/>
33+
</div>
34+
<div>
35+
<label for="lowVideoBitrate" class="font-semibold text-brand/100">Low</label>
36+
<input
37+
type="text"
38+
id="lowVideoBitrate"
39+
value="200"
40+
class="border-brand/50 text-brand/90 rounded-xl"
41+
/>
42+
</div>
43+
</div>
1144
</div>
12-
<div class="p-2">
13-
<label for="highVideoBitrate">Max Video Bitrate (high, kbps):</label>
14-
<input type="text" id="highVideoBitrate" value="1500" />
15-
<label for="mediumVideoBitrate">Max Video Bitrate (medium, kbps):</label>
16-
<input type="text" id="mediumVideoBitrate" value="600" />
17-
<label for="lowVideoBitrate">Max Video Bitrate (low, kbps):</label>
18-
<input type="text" id="lowVideoBitrate" value="200" />
45+
<div class="flex gap-6 justify-items">
46+
<div>
47+
<label for="serverUrl" class="font-semibold text-brand/100">Server URL</label>
48+
<input type="text" id="serverUrl" class="border-brand/50 text-brand/90 rounded-xl" />
49+
</div>
50+
<div>
51+
<label for="serverToken" class="font-semibold text-brand/100"> Server Token</label>
52+
<input type="password" id="serverToken" class="border-brand/50 text-brand/90 rounded-xl" />
53+
</div>
1954
</div>
20-
<div class="p-2">
21-
<label for="serverUrl">Server URL</label>
22-
<input type="text" id="serverUrl" />
55+
<div>
56+
<button
57+
id="button"
58+
class="rounded-lg bg-brand/10 px-2 py-1 hover:bg-brand/20 text-brand/80 font-bold"
59+
>
60+
Start streaming
61+
</button>
2362
</div>
24-
<div class="p-2">
25-
<label for="serverToken"> Server Token </label>
26-
<input type="password" id="serverToken" />
27-
</div>
28-
<div class="p-2">
29-
<button id="button">Start streaming</button>
30-
</div>
31-
<div class="p-2">
32-
<h3>Preview</h3>
33-
<video id="previewPlayer" controls autoplay muted></video>
63+
<div id="videoplayer-wrapper" class="flex-1 min-h-0">
64+
<video id="previewPlayer" class="m-auto rounded-xl bg-black h-full" autoplay controls muted>
65+
</video>
3466
</div>
3567
</div>
3668
<div
3769
id="chat"
38-
class="hidden lg:flex flex-col overflow-hidden justify-end h-full text-wrap break-words w-96 p-4 border-brand/50 border-2 rounded-xl"
70+
class="flex flex-col overflow-hidden justify-end h-full text-wrap break-words w-96 p-4 border-brand/50 border-2 rounded-xl"
3971
>
4072
<div id="chat-messages" class="overflow-y-scroll justify-end"></div>
4173
</div>

0 commit comments

Comments
 (0)