${dismissHTML}
`;
var ModalWrapper = ({ children, wrapperStyle = {}, dismissStyle = {} }) => m3`
x
${children}
`;
// ../../src/components/styles.js
var flex = { display: "flex" };
var fc = { ...flex, flexDirection: "column" };
var fr = { ...flex, flexDirection: "row" };
var fcenter = { ...flex, alignItems: "center", justifyContent: "center" };
var ffill = { ...flex, alignItems: "stretch", justifyContent: "space-around" };
var fullscreen = { height: "100vh", left: 0, position: "fixed", top: 0, width: "100vw", zIndex: 1 };
var colors = {
orange: "#e31d48",
purple: "#3c1d4a",
white: "#fff",
agm21Color: "#1994AC"
};
var rounded = { borderRadius: "1vw" };
var bg = (color) => ({ backgroundColor: color });
var whitewash = { backgroundColor: "rgba(255, 255, 255, 0.4" };
var pad = (size) => ({ padding: size });
var rel = { position: "relative" };
var abs = { position: "absolute" };
// ../../src/components/layout.js
var Row = ({ children, styleOverride = {}, ...props }) => /* @__PURE__ */ v("div", {
style: { ...fr, ...styleOverride },
...props
}, children);
var Column = ({ children, styleOverride = {}, ...props }) => /* @__PURE__ */ v("div", {
style: { ...fc, ...styleOverride },
...props
}, children);
// ../../src/components/http.js
var request2 = async (url, options) => fetch(url, {
headers: { "Content-Type": "application/json" },
...options
}).then((res) => {
if (res.status < 300) {
try {
return res.json();
} catch (e4) {
try {
return res.body();
} catch (e22) {
throw e22;
}
}
} else {
return { status: res.status };
}
}).catch(console.error);
var qs2 = (obj = {}) => new URLSearchParams(obj).toString();
var get2 = (url, body = {}, options = {}) => request2(`${url}${body ? `?${qs2(body)}` : ""}`, { ...options, method: "GET" });
// ../../src/components/jitsi/api.js
var getJaaSToken = async () => {
const [{
"Registrant ID": id,
"First & Last Name": name,
"Email Address": email,
"Please make it more personal by uploading a head and shoulders photo:": avatar
}] = window.dataLayer;
const response = await get2("https://isf2021.swoogo-retrofit.tkevents.io/rt/getToken", { avatar, email, id, name });
if (!response.token) {
throw response;
} else {
return response.token;
}
};
// ../../src/utils/socket.js
function socket_default(datasource) {
const url = new URL(datasource);
url.protocol = "wss";
const ws = new WebSocket(url.toString());
ws.onopen = () => {
console.log("Connection opened!");
};
ws.onclose = () => {
console.log("ws closed");
};
return { ws, isActive: () => ws.readyState == 1 };
}
// ../../src/components/Roundtables.js
var Others = ({ participants, tableName }) => {
const [othersCard, setOthersCard] = l3(false);
const close = (e4) => {
e4.stopPropagation();
setOthersCard(false);
};
return /* @__PURE__ */ v("div", {
className: "participant others",
onclick: (e4) => {
e4.stopPropagation();
setOthersCard(true);
}
}, /* @__PURE__ */ v("span", {
className: "others_text"
}, "and ", participants.length - 7, /* @__PURE__ */ v("br", null), "others"), othersCard ? /* @__PURE__ */ v(Modal, {
dismiss: close
}, /* @__PURE__ */ v(ModalWrapper, null, /* @__PURE__ */ v(OthersCard, {
participants,
tableName,
dismiss: close
}))) : null);
};
var OthersCard = ({ participants, dismiss, tableName }) => /* @__PURE__ */ v(Column, {
styleOverride: { ...fcenter, margin: "5px", padding: "5px", width: "400px" }
}, /* @__PURE__ */ v("h3", {
style: { margin: "5px", padding: "5px" }
}, tableName), /* @__PURE__ */ v(Row, {
styleOverride: { flexWrap: "wrap" }
}, participants.map(({ name }, i4) => /* @__PURE__ */ v("p", {
key: i4,
className: "otherscard_name",
style: { margin: "5px", padding: "5px" }
}, name))), /* @__PURE__ */ v("button", {
className: "otherscard_close",
style: {
background: "none",
border: "2px solid white",
borderRadius: "6px",
margin: "5px",
padding: "5px"
},
onclick: dismiss
}, "Close"));
var InfoCard = ({ participant, hide }) => /* @__PURE__ */ v("div", {
style: {
...fcenter,
...fullscreen,
...whitewash
}
}, /* @__PURE__ */ v("div", {
style: {
...fr,
...fcenter,
...rounded,
...bg(colors.agm21Color),
...pad("2vw"),
...rel
}
}, /* @__PURE__ */ v("p", {
style: {
...abs,
right: "10px",
top: "4px"
},
onclick: hide
}, "X"), participant.headshot && /* @__PURE__ */ v("img", {
src: participant.headshot,
style: { height: "18vw" }
}), /* @__PURE__ */ v("div", {
style: { ...fc, ...fcenter, alignItems: "stretch" }
}, /* @__PURE__ */ v("p", null, "Company: ", participant.company), /* @__PURE__ */ v("p", null, "Name: ", participant.name))));
var Participant = (participant) => {
const [isActive, setIsActive] = l3(false);
const show = (event) => {
event.stopPropagation();
setIsActive(!isActive);
};
const hide = (event) => {
event.stopPropagation();
setIsActive(false);
};
return /* @__PURE__ */ v("div", {
className: `participant participant${participant.id + 1}`,
onclick: show
}, isActive ? /* @__PURE__ */ v(InfoCard, {
participant,
hide
}) : null, participant.headshot ? /* @__PURE__ */ v("img", {
style: { maxHeight: "100%", maxWidth: "100%" },
src: participant.headshot,
title: "click me for participant info"
}) : participant.initials);
};
var Table = ({ id, participants = [], joinCall, seatsPerTable }) => {
const overflowed = participants.length >= seatsPerTable;
return /* @__PURE__ */ v("div", {
id: `table${id + 1}`,
style: { cursor: "pointer" },
class: "hotspot _gtm-event",
"data-event-category": "Networking",
"data-event-action": "Link Click",
"data-event-label": `table${id + 1}`,
onclick: () => {
console.log("test");
joinCall(id);
}
}, participants.slice(0, overflowed ? seatsPerTable - 1 : seatsPerTable).map(({ id: id2, ...rest }, i4) => /* @__PURE__ */ v(Participant, {
id: i4,
...rest,
userRegID: id2
})), overflowed ? /* @__PURE__ */ v(Others, {
participants,
tableName: `Table ${id + 1}`
}) : null);
};
var RoundTables = ({
numTables = 4,
seatsPerTable = 8,
dataSource = "https://db.swoogo-retrofit.tkevents.io",
roomBasename = "",
allowComunication = true
}) => {
const [dataLayer] = window.dataLayer;
const {
"First & Last Name": name,
"Headshot": headshot,
"Company": company,
"Registrant ID": userRegID,
"Event ID": eventID
} = dataLayer;
const [ws, setWs] = l3(null);
if (ws == null)
setWs(socket_default(dataSource));
const { current: jitsiWindowID } = s3(Math.floor(Math.random() * 1e5));
const [callNumber, setCallNumber] = l3(null);
const [jwt, updatejwt] = l3("");
y3(async () => {
const interval = window.setInterval(async () => {
updatejwt(await getJaaSToken());
}, 72e5);
updatejwt(await getJaaSToken());
return () => window.clearInterval(interval);
}, []);
const options = {
jwt,
parentNode: document.getElementById(`${jitsiWindowID}`),
roomName: callNumber === null ? null : `${jwt_decode_esm_default(jwt).sub}/${roomBasename} ${callNumber + 1}`
};
useJitsi(options, "8x8.vc", {
allowComunication,
onDisconnect: () => {
ws.ws.send(JSON.stringify({
type: "quit",
user: { id: userRegID },
message: {}
}));
}
});
const [tables, setTables] = l3(new Array(numTables).fill([]));
useInterval(async () => {
try {
const newParticipants = (await get(`${dataSource}/rt`, { active: true, eventID })).sort((a4, b3) => a4.createdAt < b3.createdAt ? 1 : -1).filter((ping, index, arr) => index === arr.findIndex((p3) => p3.name === ping.name));
const newTables = new Array(numTables).fill(null).map((_2) => []);
newParticipants.forEach(({ tableID, ...rest }) => {
newTables[tableID].push(rest);
});
setTables(newTables);
} catch (e4) {
if (e4.status != 404) {
throw e4;
}
}
}, 1e3);
const joinCall = (number) => {
const initials = name.split(" ").reduce((acc, val) => `${acc}${val[0]}`, "");
if (!ws.isActive())
throw "Socket offline";
ws.ws.send(JSON.stringify({
type: "jump-in",
user: { id: userRegID, company, eventID, headshot, initials, name, tableID: number },
message: {}
}));
setCallNumber(number);
};
window.joincall = (arg) => {
joinCall(arg);
};
return /* @__PURE__ */ v(d, null, /* @__PURE__ */ v("div", {
id: jitsiWindowID,
className: "jitsi-screen"
}), Array(numTables).fill([]).map((_2, i4) => /* @__PURE__ */ v(Table, {
joinCall,
id: i4,
participants: tables[i4],
seatsPerTable: seatsPerTable.length ? seatsPerTable[i4] : seatsPerTable,
onclick: console.log
})));
};
// skeleton.js
var init = (domNode, allowComunication = true) => {
S(/* @__PURE__ */ v(RoundTables, {
numTables: 3,
seatsPerTable: 6,
roomBasename: "Dell TTF 2022",
allowComunication
}), domNode);
};
export {
init
};
//# sourceMappingURL=output.js.map