Skip to content

Commit 7852aa2

Browse files
mickel8mickel8
committed
Unify HTML ids
1 parent 7d104ea commit 7852aa2

File tree

2 files changed

+70
-71
lines changed

2 files changed

+70
-71
lines changed

‎assets/publisher.js

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,47 @@ export const Publisher = {
22
async mounted() {
33
const view = this;
44

5-
this.audioDevices = document.getElementById("audioDevices");
6-
this.videoDevices = document.getElementById("videoDevices");
5+
view.audioDevices = document.getElementById("lex-audio-devices");
6+
view.videoDevices = document.getElementById("lex-video-devices");
77

8-
this.echoCancellation = document.getElementById("echoCancellation");
9-
this.autoGainControl = document.getElementById("autoGainControl");
10-
this.noiseSuppression = document.getElementById("noiseSuppression");
8+
view.echoCancellation = document.getElementById("lex-echo-cancellation");
9+
view.autoGainControl = document.getElementById("lex-auto-gain-control");
10+
view.noiseSuppression = document.getElementById("lex-noise-suppression");
1111

12-
this.width = document.getElementById("width");
13-
this.height = document.getElementById("height");
14-
this.fps = document.getElementById("fps");
15-
this.bitrate = document.getElementById("bitrate");
12+
view.width = document.getElementById("lex-width");
13+
view.height = document.getElementById("lex-height");
14+
view.fps = document.getElementById("lex-fps");
15+
view.bitrate = document.getElementById("lex-bitrate");
1616

17-
this.previewPlayer = document.getElementById("previewPlayer");
17+
view.previewPlayer = document.getElementById("lex-preview-player");
1818

19-
this.audioBitrate = document.getElementById("audio-bitrate");
20-
this.videoBitrate = document.getElementById("video-bitrate");
21-
this.packetLoss = document.getElementById("packet-loss");
22-
this.status = document.getElementById("status");
23-
this.time = document.getElementById("time");
19+
view.audioBitrate = document.getElementById("lex-audio-bitrate");
20+
view.videoBitrate = document.getElementById("lex-video-bitrate");
21+
view.packetLoss = document.getElementById("lex-packet-loss");
22+
view.status = document.getElementById("lex-status");
23+
view.time = document.getElementById("lex-time");
2424

25-
this.audioApplyButton = document.getElementById("audioApplyButton");
26-
this.videoApplyButton = document.getElementById("videoApplyButton");
27-
this.button = document.getElementById("button");
25+
view.audioApplyButton = document.getElementById("lex-audio-apply-button");
26+
view.videoApplyButton = document.getElementById("lex-video-apply-button");
27+
view.button = document.getElementById("lex-button");
2828

29-
this.audioDevices.onchange = function () {
29+
view.audioDevices.onchange = function () {
3030
view.setupStream(view);
3131
};
3232

33-
this.videoDevices.onchange = function () {
33+
view.videoDevices.onchange = function () {
3434
view.setupStream(view);
3535
};
3636

37-
this.audioApplyButton.onclick = function () {
37+
view.audioApplyButton.onclick = function () {
3838
view.setupStream(view);
3939
};
4040

41-
this.videoApplyButton.onclick = function () {
41+
view.videoApplyButton.onclick = function () {
4242
view.setupStream(view);
4343
};
4444

45-
this.button.onclick = function () {
45+
view.button.onclick = function () {
4646
view.startStreaming(view);
4747
};
4848

@@ -64,17 +64,20 @@ export const Publisher = {
6464
});
6565

6666
try {
67-
await this.findDevices(this);
67+
await view.findDevices(view);
6868
try {
6969
await view.setupStream(view);
70-
button.disabled = false;
71-
audioApplyButton.disabled = false;
72-
videoApplyButton.disabled = false;
70+
view.button.disabled = false;
71+
view.audioApplyButton.disabled = false;
72+
view.videoApplyButton.disabled = false;
7373
} catch (error) {
74-
console.error("Couldn't setup stream");
74+
console.error("Couldn't setup stream, reason:", error.stack);
7575
}
7676
} catch (error) {
77-
console.error("Couldn't find audio and/or video devices");
77+
console.error(
78+
"Couldn't find audio and/or video devices, reason: ",
79+
error.stack
80+
);
7881
}
7982
},
8083

@@ -119,15 +122,11 @@ export const Publisher = {
119122
const devices = await navigator.mediaDevices.enumerateDevices();
120123
devices.forEach((device) => {
121124
if (device.kind === "videoinput") {
122-
view.videoDevices.options[videoDevices.options.length] = new Option(
123-
device.label,
124-
device.deviceId
125-
);
125+
view.videoDevices.options[view.videoDevices.options.length] =
126+
new Option(device.label, device.deviceId);
126127
} else if (device.kind === "audioinput") {
127-
view.audioDevices.options[audioDevices.options.length] = new Option(
128-
device.label,
129-
device.deviceId
130-
);
128+
view.audioDevices.options[view.audioDevices.options.length] =
129+
new Option(device.label, device.deviceId);
131130
}
132131
});
133132

‎lib/live_ex_webrtc/publisher.ex

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ defmodule LiveExWebRTC.Publisher do
1111
<summary class="font-bold text-[#0d0d0d] py-2.5">Devices</summary>
1212
<div class="text-[#606060] flex flex-col gap-6 py-2.5">
1313
<div class="flex gap-2.5 items-center">
14-
<label for="audioDevices" class="font-medium">Audio Device</label>
14+
<label for="lex-audio-devices" class="font-medium">Audio Device</label>
1515
<select
16-
id="audioDevices"
16+
id="lex-audio-devices"
1717
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
1818
>
1919
</select>
2020
</div>
2121
<div class="flex gap-2.5 items-center">
22-
<label for="videoDevices" class="">Video Device</label>
22+
<label for="lex-video-devices" class="">Video Device</label>
2323
<select
24-
id="videoDevices"
24+
id="lex-video-devices"
2525
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
2626
>
2727
</select>
@@ -32,91 +32,91 @@ defmodule LiveExWebRTC.Publisher do
3232
<summary class="font-bold text-[#0d0d0d] py-2.5">Audio Settings</summary>
3333
<div class="text-[#606060] flex flex-col gap-6 py-2.5">
3434
<div class="flex gap-2.5 items-center">
35-
<label for="echoCancellation">Echo Cancellation</label>
36-
<input type="checkbox" id="echoCancellation" class="rounded-full" checked />
35+
<label for="lex-echo-cancellation">Echo Cancellation</label>
36+
<input type="checkbox" id="lex-echo-cancellation" class="rounded-full" checked />
3737
</div>
3838
<div class="flex gap-2.5 items-center">
39-
<label for="autoGainControl">Auto Gain Control</label>
40-
<input type="checkbox" id="autoGainControl" class="rounded-full" checked />
39+
<label for="lex-auto-gain-control">Auto Gain Control</label>
40+
<input type="checkbox" id="lex-auto-gain-control" class="rounded-full" checked />
4141
</div>
4242
<div class="flex gap-2.5 items-center">
43-
<label for="noiseSuppression">Noise Suppression</label>
44-
<input type="checkbox" id="noiseSuppression" class="rounded-full" checked />
43+
<label for="lex-noise-suppression">Noise Suppression</label>
44+
<input type="checkbox" id="lex-noise-suppression" class="rounded-full" checked />
4545
</div>
4646
</div>
47-
<button id="audioApplyButton" class="rounded-lg px-10 py-2.5 bg-brand disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold" disabled>Apply</button>
47+
<button id="lex-audio-apply-button" class="rounded-lg px-10 py-2.5 bg-brand disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold" disabled>Apply</button>
4848
</details>
4949
<details>
5050
<summary class="font-bold text-[#0d0d0d] py-2.5">Video Settings</summary>
5151
<div class="text-[#606060] flex flex-col gap-6 py-2.5">
52-
<div id="resolution" class="flex gap-2.5 items-center">
53-
<label for="width">Width</label>
52+
<div id="lex-resolution" class="flex gap-2.5 items-center">
53+
<label for="lex-width">Width</label>
5454
<input
5555
type="text"
56-
id="width"
56+
id="lex-width"
5757
value="1280"
5858
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
5959
/>
60-
<label for="height">Height</label>
60+
<label for="lex-height">Height</label>
6161
<input
6262
type="text"
63-
id="height"
63+
id="lex-height"
6464
value="720"
6565
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
6666
/>
6767
</div>
6868
<div class="flex gap-2.5 items-center">
69-
<label for="fps">FPS</label>
69+
<label for="lex-fps">FPS</label>
7070
<input
7171
type="text"
72-
id="fps"
72+
id="lex-fps"
7373
value="24"
7474
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
7575
/>
7676
</div>
7777
<div class="flex gap-2.5 items-center">
78-
<label for="bitrate">Max Bitrate (kbps)</label>
78+
<label for="lex-bitrate">Max Bitrate (kbps)</label>
7979
<input
8080
type="text"
81-
id="bitrate"
81+
id="lex-bitrate"
8282
value="1500"
8383
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
8484
/>
8585
</div>
8686
</div>
87-
<button id="videoApplyButton" class="rounded-lg px-10 py-2.5 bg-brand disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold" disabled>Apply</button>
87+
<button id="lex-video-apply-button" class="rounded-lg px-10 py-2.5 bg-brand disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold" disabled>Apply</button>
8888
</details>
89-
<div id="videoplayer-wrapper" class="flex flex-1 flex-col min-h-0 pt-2.5">
90-
<video id="previewPlayer" class="m-auto rounded-lg bg-black h-full" autoplay controls muted>
89+
<div id="lex-videoplayer-wrapper" class="flex flex-1 flex-col min-h-0 pt-2.5">
90+
<video id="lex-preview-player" class="m-auto rounded-lg bg-black h-full" autoplay controls muted>
9191
</video>
9292
</div>
93-
<div id="stats", class="flex justify-between w-full text-[#606060] ">
93+
<div id="lex-stats", class="flex justify-between w-full text-[#606060] ">
9494
<div class="flex p-1 gap-4">
9595
<div class="flex flex-col">
96-
<label for="audio-bitrate">Audio Bitrate (kbps): </label>
97-
<span id="audio-bitrate">0</span>
96+
<label for="lex-audio-bitrate">Audio Bitrate (kbps): </label>
97+
<span id="lex-audio-bitrate">0</span>
9898
</div>
9999
<div class="flex flex-col">
100-
<label for="video-bitrate">Video Bitrate (kbps): </label>
101-
<span id="video-bitrate">0</span>
100+
<label for="lex-video-bitrate">Video Bitrate (kbps): </label>
101+
<span id="lex-video-bitrate">0</span>
102102
</div>
103103
<div class="flex flex-col">
104-
<label for="packet-loss">Packet loss (%): </label>
105-
<span id="packet-loss">0</span>
104+
<label for="lex-packet-loss">Packet loss (%): </label>
105+
<span id="lex-packet-loss">0</span>
106106
</div>
107107
<div class="flex flex-col">
108-
<label for="time">Time: </label>
109-
<span id="time">00:00:00</span>
108+
<label for="lex-time">Time: </label>
109+
<span id="lex-time">00:00:00</span>
110110
</div>
111111
</div>
112112
<div class="p-1 flex items-center">
113-
<div id="status" class="w-3 h-3 rounded-full bg-red-500">
113+
<div id="lex-status" class="w-3 h-3 rounded-full bg-red-500">
114114
</div>
115115
</div>
116116
</div>
117117
<div class="py-2.5">
118118
<button
119-
id="button"
119+
id="lex-button"
120120
class="rounded-lg w-full px-2.5 py-2.5 bg-brand/100 disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold"
121121
disabled
122122
>

0 commit comments

Comments
 (0)