@digitalsamba/embedded-sdk 0.0.20 → 0.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -57
- package/dist/cjs/index.d.ts +17 -2
- package/dist/cjs/index.js +97 -10
- package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/cjs/types.d.ts +20 -2
- package/dist/cjs/utils/errors.d.ts +1 -0
- package/dist/cjs/utils/errors.js +6 -2
- package/dist/cjs/utils/vars.js +20 -0
- package/dist/demo/helper.js +126 -0
- package/dist/demo/index.js +1 -0
- package/dist/demo/initial-config.html +299 -0
- package/dist/demo/logo.png +0 -0
- package/dist/demo/managed-state.html +425 -0
- package/dist/demo/style.css +333 -0
- package/dist/demo/videoroom.html +212 -0
- package/dist/esm/index.d.ts +17 -2
- package/dist/esm/index.js +98 -11
- package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/esm/types.d.ts +20 -2
- package/dist/esm/utils/errors.d.ts +1 -0
- package/dist/esm/utils/errors.js +5 -1
- package/dist/esm/utils/vars.js +20 -0
- package/dist/types/index.d.ts +17 -2
- package/dist/types/tsconfig.types.tsbuildinfo +1 -1
- package/dist/types/types.d.ts +20 -2
- package/dist/types/utils/errors.d.ts +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +3 -2
- package/dist/index.html +0 -318
- package/dist/initial-config-demo.html +0 -303
- package/dist/permissions-demo.html +0 -289
- package/dist/tsconfig.tsbuildinfo +0 -1
- package/dist/virtual-background-demo.html +0 -290
|
@@ -0,0 +1,425 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
7
|
+
<title>Managed state</title>
|
|
8
|
+
<!-- <script src="https://unpkg.com/@digitalsamba/embedded-sdk"></script>-->
|
|
9
|
+
<script src="./index.js"></script>
|
|
10
|
+
<script src="./helper.js"></script>
|
|
11
|
+
<script defer data-domain="digitalsamba.github.io" src="https://plausible.wbcnf.net/js/script.js"></script>
|
|
12
|
+
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
|
|
13
|
+
<link rel="stylesheet" href="./style.css">
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<nav class="topbar">
|
|
18
|
+
<div class="container">
|
|
19
|
+
<img class="logo" src="logo.png" alt="DigitalSamba">
|
|
20
|
+
<a href="https://github.com/digitalsamba/embedded-sdk" target="_blank" rel="noopener nofollow">View on GitHub</a>
|
|
21
|
+
</div>
|
|
22
|
+
</nav>
|
|
23
|
+
|
|
24
|
+
<div class="screen room-url-field show">
|
|
25
|
+
<div class="container">
|
|
26
|
+
<div class="vertical">
|
|
27
|
+
<label for="custom-room-url">
|
|
28
|
+
<span><b>Room URL</b></span>
|
|
29
|
+
<span>Can be found in <a href="https://dashboard.digitalsamba.com/" target="_blank" rel="noopener nofollow">dashboard</a></span>.
|
|
30
|
+
</label>
|
|
31
|
+
<div>
|
|
32
|
+
<input type="text" id="custom-room-url" name="custom-room-url" onkeydown="onURLChange()">
|
|
33
|
+
<!-- kicks off loading -->
|
|
34
|
+
<button onclick="loadCustomRoom()">load room</button>
|
|
35
|
+
</div>
|
|
36
|
+
<p class="room-url-error"></p>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="screen room-frame">
|
|
41
|
+
<div class="container">
|
|
42
|
+
<div class="room-content">
|
|
43
|
+
<div class="frame-area">
|
|
44
|
+
<div class="frame-parent">
|
|
45
|
+
<!-- our frame will load here -->
|
|
46
|
+
</div>
|
|
47
|
+
<div class="frame-controls" style="display: none">
|
|
48
|
+
<button onclick="sambaEmbedded.toggleVideo()">toggle video</button>
|
|
49
|
+
<button onclick="sambaEmbedded.toggleAudio()">toggle audio</button>
|
|
50
|
+
<button onclick="sambaEmbedded.toggleToolbar()">toggle toolbar</button>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="sidebar">
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<script async defer>
|
|
61
|
+
let ROOM_URL = "https://localhost:3000/Public";
|
|
62
|
+
|
|
63
|
+
var sambaEmbedded;
|
|
64
|
+
|
|
65
|
+
// if room is predefined in search params, skip room URL field;
|
|
66
|
+
checkDynamicRoomURL();
|
|
67
|
+
|
|
68
|
+
function loadCustomRoom() {
|
|
69
|
+
const input = document.querySelector("#custom-room-url");
|
|
70
|
+
|
|
71
|
+
if (input.value) {
|
|
72
|
+
ROOM_URL = input.value;
|
|
73
|
+
loadRoom();
|
|
74
|
+
} else {
|
|
75
|
+
updateError("Please enter room URL");
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
function loadRoom() {
|
|
80
|
+
try {
|
|
81
|
+
const parent = document.querySelector(".frame-parent");
|
|
82
|
+
parent.innerHTML = null;
|
|
83
|
+
|
|
84
|
+
// create pre-configured controller instance using given URL;
|
|
85
|
+
// if no frame specified, this pre-creates a frame but doesn't load it yet;
|
|
86
|
+
// other init strategies are available, along with more detailed customization
|
|
87
|
+
// see https://docs.digitalsamba.com/reference/sdk/digitalsambaembedded-class
|
|
88
|
+
sambaEmbedded = DigitalSambaEmbedded.createControl(
|
|
89
|
+
{ url: ROOM_URL, root: parent, roomSettings: { showToolbar: false } },
|
|
90
|
+
{ reportErrors: true }
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
// controller instance exposes the frame, so we can customize it a little bit
|
|
94
|
+
sambaEmbedded.frame.width = 1000;
|
|
95
|
+
sambaEmbedded.frame.height = 700;
|
|
96
|
+
sambaEmbedded.frame.style.border = "5px solid #f06859";
|
|
97
|
+
sambaEmbedded.frame.style.borderRadius = "8px";
|
|
98
|
+
|
|
99
|
+
// load samba frame
|
|
100
|
+
sambaEmbedded.load();
|
|
101
|
+
logRoomLoad();
|
|
102
|
+
|
|
103
|
+
addJoiningHint(ROOM_URL);
|
|
104
|
+
initializeParticipantList();
|
|
105
|
+
initializeLogs();
|
|
106
|
+
|
|
107
|
+
// after loading, controller will start emitting events
|
|
108
|
+
// event listeners can be set up prior to loading;
|
|
109
|
+
setupCustomEventListeners();
|
|
110
|
+
|
|
111
|
+
showScreen(".room-frame");
|
|
112
|
+
} catch (e) {
|
|
113
|
+
updateError(e.message);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function setupCustomEventListeners() {
|
|
118
|
+
// catch all events. Useful for logging or debugging;
|
|
119
|
+
sambaEmbedded.on("*", (data) => {
|
|
120
|
+
const logList = document.querySelector(".log-list");
|
|
121
|
+
|
|
122
|
+
if (logList) {
|
|
123
|
+
logList.innerHTML += `<div>
|
|
124
|
+
<p>[${(new Date).toLocaleTimeString()}] event: <b>${data?.type}</b></p>
|
|
125
|
+
${data.data ? `<p>payload: ${JSON.stringify(data.data)}</p>` : ""}
|
|
126
|
+
</div>`;
|
|
127
|
+
|
|
128
|
+
logList.scrollTop = logList.scrollHeight;
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
// `roomJoined` is fired when local user has joined the room
|
|
133
|
+
// this listener is used to display media device controls after joining
|
|
134
|
+
sambaEmbedded.on("roomJoined", () => {
|
|
135
|
+
const controls = document.querySelector(".frame-controls");
|
|
136
|
+
|
|
137
|
+
controls.style.display = "flex";
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
sambaEmbedded.on('usersUpdated', ({ data: { users } }) => {
|
|
141
|
+
const participantList = document.querySelector(".participants");
|
|
142
|
+
participantList.innerHTML = "";
|
|
143
|
+
participantList.className += " show";
|
|
144
|
+
|
|
145
|
+
users.forEach(user => {
|
|
146
|
+
const row = document.createElement('div');
|
|
147
|
+
row.className = 'user-list-row';
|
|
148
|
+
const subButtons = document.createElement('div')
|
|
149
|
+
row.appendChild(subButtons);
|
|
150
|
+
|
|
151
|
+
const avatar = document.createElement('span');
|
|
152
|
+
avatar.className = 'user-list-avatar';
|
|
153
|
+
avatar.style.background = user.avatarColor;
|
|
154
|
+
avatar.innerHTML = user.name[0];
|
|
155
|
+
row.appendChild(avatar);
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
const name = document.createElement('span');
|
|
159
|
+
name.className = 'user-list-name';
|
|
160
|
+
name.innerText = user.name;
|
|
161
|
+
row.appendChild(name);
|
|
162
|
+
|
|
163
|
+
const speakerIndicator = document.createElement('span')
|
|
164
|
+
speakerIndicator.className = `speaker-indicator speaker-indicator-${user.id}`;
|
|
165
|
+
row.appendChild(speakerIndicator);
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
if (user.kind === 'local') {
|
|
169
|
+
const label = document.createElement('span');
|
|
170
|
+
label.className = 'user-list-label';
|
|
171
|
+
label.innerText = '(you)'
|
|
172
|
+
label.style.color = '#777';
|
|
173
|
+
row.appendChild(label);
|
|
174
|
+
} else {
|
|
175
|
+
const micControl = document.createElement('button');
|
|
176
|
+
micControl.innerHTML = 'toggle mic'
|
|
177
|
+
micControl.style.margin = '0 4px';
|
|
178
|
+
micControl.onclick = () => {
|
|
179
|
+
sambaEmbedded.requestToggleAudio(user.id)
|
|
180
|
+
}
|
|
181
|
+
row.appendChild(micControl);
|
|
182
|
+
|
|
183
|
+
if (sambaEmbedded.permissionManager.hasPermissions('remove_participant', { targetRole: user.role })) {
|
|
184
|
+
const kickControl = document.createElement('button');
|
|
185
|
+
kickControl.innerHTML = 'kick'
|
|
186
|
+
kickControl.style.margin = '0 4px';
|
|
187
|
+
kickControl.onclick = () => {
|
|
188
|
+
sambaEmbedded.removeUser(user.id)
|
|
189
|
+
}
|
|
190
|
+
row.appendChild(kickControl);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
if (sambaEmbedded.permissionManager.hasPermissions("manage_broadcast", { targetRole: user.role })) {
|
|
194
|
+
if (sambaEmbedded.permissionManager.hasPermissions("broadcast", { userId: user.id })) {
|
|
195
|
+
const disallowBroadcastControl = document.createElement("button");
|
|
196
|
+
disallowBroadcastControl.innerHTML = "disallow broadcast";
|
|
197
|
+
disallowBroadcastControl.style.margin = "0 4px";
|
|
198
|
+
disallowBroadcastControl.onclick = () => {
|
|
199
|
+
sambaEmbedded.disallowBroadcast(user.id);
|
|
200
|
+
};
|
|
201
|
+
subButtons.appendChild(disallowBroadcastControl);
|
|
202
|
+
} else {
|
|
203
|
+
const allowBroadcastControl = document.createElement("button");
|
|
204
|
+
allowBroadcastControl.innerHTML = "allow broadcast";
|
|
205
|
+
allowBroadcastControl.style.margin = "0 4px";
|
|
206
|
+
allowBroadcastControl.onclick = () => {
|
|
207
|
+
sambaEmbedded.allowBroadcast(user.id);
|
|
208
|
+
};
|
|
209
|
+
subButtons.appendChild(allowBroadcastControl);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
if (sambaEmbedded.permissionManager.hasPermissions("manage_screenshare", { targetRole: user.role })) {
|
|
213
|
+
if (sambaEmbedded.permissionManager.hasPermissions("screenshare", { userId: user.id })) {
|
|
214
|
+
const disallowScreenshareControl = document.createElement("button");
|
|
215
|
+
disallowScreenshareControl.innerHTML = "disallow screenshare";
|
|
216
|
+
disallowScreenshareControl.style.margin = "0 4px";
|
|
217
|
+
disallowScreenshareControl.onclick = () => {
|
|
218
|
+
sambaEmbedded.disallowScreenshare(user.id);
|
|
219
|
+
};
|
|
220
|
+
subButtons.appendChild(disallowScreenshareControl);
|
|
221
|
+
} else {
|
|
222
|
+
const allowScreenshareControl = document.createElement("button");
|
|
223
|
+
allowScreenshareControl.innerHTML = "allow screenshare";
|
|
224
|
+
allowScreenshareControl.style.margin = "0 4px";
|
|
225
|
+
allowScreenshareControl.onclick = () => {
|
|
226
|
+
sambaEmbedded.allowScreenshare(user.id);
|
|
227
|
+
};
|
|
228
|
+
subButtons.appendChild(allowScreenshareControl);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
if(sambaEmbedded.featureEnabled('pin')) {
|
|
235
|
+
const pinControl = document.createElement('button');
|
|
236
|
+
pinControl.innerHTML = 'pin';
|
|
237
|
+
pinControl.style.margin = '0 4px';
|
|
238
|
+
pinControl.className = 'pin-' + user.id;
|
|
239
|
+
|
|
240
|
+
pinControl.onclick = () => {
|
|
241
|
+
sambaEmbedded.pinUser(user.id)
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
row.appendChild(pinControl);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
if(sambaEmbedded.featureEnabled('fullScreen')) {
|
|
248
|
+
const fsControl = document.createElement('button');
|
|
249
|
+
fsControl.innerHTML = 'maximize';
|
|
250
|
+
fsControl.style.margin = '0 4px';
|
|
251
|
+
fsControl.className = 'fs-' + user.id;
|
|
252
|
+
|
|
253
|
+
fsControl.onclick = () => {
|
|
254
|
+
sambaEmbedded.maximizeUser(user.id)
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
row.appendChild(fsControl);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
const ssControls = document.createElement('div');
|
|
261
|
+
ssControls.className = 'screenshare-buttons-' + user.id;
|
|
262
|
+
ssControls.style.opacity = 0;
|
|
263
|
+
|
|
264
|
+
row.appendChild(ssControls);
|
|
265
|
+
|
|
266
|
+
if(sambaEmbedded.featureEnabled('screenshare')) {
|
|
267
|
+
if(sambaEmbedded.featureEnabled('pin')) {
|
|
268
|
+
const ssPinControl = document.createElement('button');
|
|
269
|
+
ssPinControl.innerHTML = 'pin screenshare';
|
|
270
|
+
ssPinControl.style.margin = '0 4px';
|
|
271
|
+
ssPinControl.className = 'ss-pin-' + user.id;
|
|
272
|
+
|
|
273
|
+
ssPinControl.onclick = () => {
|
|
274
|
+
sambaEmbedded.pinUser(user.id, 'screenshare')
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
ssControls.appendChild(ssPinControl);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
if(sambaEmbedded.featureEnabled('fullScreen')) {
|
|
281
|
+
const ssFsControl = document.createElement('button');
|
|
282
|
+
ssFsControl.innerHTML = 'maximize screenshare';
|
|
283
|
+
ssFsControl.style.margin = '0 4px';
|
|
284
|
+
ssFsControl.className = 'ss-fs-' + user.id;
|
|
285
|
+
|
|
286
|
+
ssFsControl.onclick = () => {
|
|
287
|
+
sambaEmbedded.maximizeUser(user.id, 'screenshare')
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
ssControls.appendChild(ssFsControl);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
const raisedHandControl = document.createElement('button');
|
|
296
|
+
raisedHandControl.id = 'lower-hand-' + user.id;
|
|
297
|
+
raisedHandControl.innerHTML = 'lower hand'
|
|
298
|
+
raisedHandControl.style.margin = '0 4px';
|
|
299
|
+
raisedHandControl.style.display = 'none';
|
|
300
|
+
raisedHandControl.onclick = () => {
|
|
301
|
+
sambaEmbedded.lowerHand(user.id)
|
|
302
|
+
}
|
|
303
|
+
row.appendChild(raisedHandControl);
|
|
304
|
+
|
|
305
|
+
participantList.appendChild(row);
|
|
306
|
+
participantList.appendChild(subButtons);
|
|
307
|
+
|
|
308
|
+
});
|
|
309
|
+
});
|
|
310
|
+
|
|
311
|
+
sambaEmbedded.on("activeSpeakerChanged", ({ data }) => {
|
|
312
|
+
const currentIndicator = document.querySelector(".speaker-indicator.show");
|
|
313
|
+
if (currentIndicator) {
|
|
314
|
+
currentIndicator.className = currentIndicator.className.replace(" show", "");
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
const newIndicator = document.querySelector(`.speaker-indicator-${data.user.id}`);
|
|
318
|
+
newIndicator.className = newIndicator.className + " show";
|
|
319
|
+
});
|
|
320
|
+
|
|
321
|
+
sambaEmbedded.on("audioDisabled", ({ data }) => {
|
|
322
|
+
const currentIndicator = document.querySelector(`.speaker-indicator-${data.user.id}`);
|
|
323
|
+
|
|
324
|
+
if (currentIndicator && currentIndicator.className.includes(' show')) {
|
|
325
|
+
currentIndicator.className = currentIndicator.className.replace(" show", "");
|
|
326
|
+
}
|
|
327
|
+
});
|
|
328
|
+
|
|
329
|
+
sambaEmbedded.on("audioEnabled", ({ data }) => {
|
|
330
|
+
if(data.user.id === sambaEmbedded.stored.activeSpeaker) {
|
|
331
|
+
const currentIndicator = document.querySelector(`.speaker-indicator-${sambaEmbedded.stored.activeSpeaker}`);
|
|
332
|
+
|
|
333
|
+
if (currentIndicator ) {
|
|
334
|
+
currentIndicator.className += " show";
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
const resetButtons = () => {
|
|
340
|
+
const pinButton = document.querySelector(`.pin-${exposedUser}`);
|
|
341
|
+
const ssPinButton = document.querySelector(`.ss-pin-${exposedUser}`);
|
|
342
|
+
const fsButton = document.querySelector(`.fs-${exposedUser}`);
|
|
343
|
+
const ssFsButton = document.querySelector(`.ss-fs-${exposedUser}`);
|
|
344
|
+
|
|
345
|
+
if(pinButton) {
|
|
346
|
+
pinButton.innerHTML = 'pin'
|
|
347
|
+
const uid = exposedUser;
|
|
348
|
+
pinButton.onclick = () => sambaEmbedded.pinUser(uid);
|
|
349
|
+
}
|
|
350
|
+
if(ssPinButton) {
|
|
351
|
+
ssPinButton.innerHTML = 'pin screenshare'
|
|
352
|
+
const uid = exposedUser;
|
|
353
|
+
ssPinButton.onclick = () => sambaEmbedded.pinUser(uid, 'screenshare');
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
if(fsButton) {
|
|
357
|
+
fsButton.innerHTML = 'maximize';
|
|
358
|
+
const uid = exposedUser;
|
|
359
|
+
fsButton.onclick = () => sambaEmbedded.maximizeUser(uid);
|
|
360
|
+
}
|
|
361
|
+
if(ssFsButton) {
|
|
362
|
+
ssFsButton.innerHTML = 'maximize screenshare'
|
|
363
|
+
const uid = exposedUser;
|
|
364
|
+
ssFsButton.onclick = () => sambaEmbedded.maximizeUser(uid, 'screenshare');
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
exposedUser = '';
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
let exposedUser = '';
|
|
372
|
+
|
|
373
|
+
sambaEmbedded.on('userMaximized', ({ data }) => {
|
|
374
|
+
resetButtons();
|
|
375
|
+
|
|
376
|
+
const pinButton = document.querySelector(data.type === 'media' ? `.pin-${data.userId}`: `.ss-pin-${data.userId}`);
|
|
377
|
+
const fsButton = document.querySelector(data.type === 'media' ? `.fs-${data.userId}`: `.ss-fs-${data.userId}`);
|
|
378
|
+
exposedUser = data.userId;
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
if(data.mode === 'pin') {
|
|
382
|
+
if(pinButton) {
|
|
383
|
+
pinButton.innerHTML = data.type === 'media' ? 'unpin' :'unpin screenshare'
|
|
384
|
+
pinButton.onclick = sambaEmbedded.minimizeUser;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
if(fsButton) {
|
|
388
|
+
fsButton.innerHTML = data.type === 'media' ? 'maximize' : 'maximize screenshare'
|
|
389
|
+
fsButton.onclick = () => sambaEmbedded.maximizeUser(data.userId, data.type);
|
|
390
|
+
}
|
|
391
|
+
} else {
|
|
392
|
+
if(pinButton) {
|
|
393
|
+
pinButton.innerHTML = data.type === 'media' ? 'pin' : 'pin screnshare'
|
|
394
|
+
pinButton.onclick = () => sambaEmbedded.pinUser(data.userId, data.type);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
if(fsButton) {
|
|
398
|
+
fsButton.innerHTML = data.type === 'media' ? 'minimize' : 'minimize screenshare'
|
|
399
|
+
fsButton.onclick = sambaEmbedded.minimizeUser
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
})
|
|
403
|
+
|
|
404
|
+
sambaEmbedded.on('userMinimized', resetButtons)
|
|
405
|
+
|
|
406
|
+
sambaEmbedded.on('screenshareStarted', ({data}) => {
|
|
407
|
+
const ssControls = document.querySelector('.screenshare-buttons-' + data.user.id);
|
|
408
|
+
|
|
409
|
+
if(ssControls) {
|
|
410
|
+
ssControls.style.opacity = 1;
|
|
411
|
+
}
|
|
412
|
+
})
|
|
413
|
+
|
|
414
|
+
sambaEmbedded.on('screenshareStopped', ({data}) => {
|
|
415
|
+
const ssControls = document.querySelector('.screenshare-buttons-' + data.user.id);
|
|
416
|
+
|
|
417
|
+
if(ssControls) {
|
|
418
|
+
ssControls.style.opacity = 0;
|
|
419
|
+
}
|
|
420
|
+
})
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
</script>
|
|
424
|
+
</body>
|
|
425
|
+
</html>
|