Arash_M
251 lines
20 KiB
JavaScript
251 lines
20 KiB
JavaScript
const addTutorialPanel = () => {
|
|
var e, t;
|
|
e = chrome.runtime.getURL("feature/utilities/packages/html2pdf.bundle.min.js"), (t = document.createElement("script")).type = "application/javascript", t.src = e, document.head.appendChild(t);
|
|
const n = document.getElementById("laxis-root");
|
|
let l = document.getElementById("laxis-mainPanel");
|
|
if (l) l.style.display = "block";
|
|
else {
|
|
l = document.createElement("div"), l.setAttribute("id", "laxis-mainPanel"), l.classList.add("panelBase"), l.style.width = "300px", l.style.backgroundColor = "#454953";
|
|
const e = document.createElement("div");
|
|
e.setAttribute("name", "laxis-rootHeader"), e.style.cursor = "move", e.style.width = "300px", e.style.height = "50px", e.style.backgroundColor = "#454953", e.style.borderRadius = "12px 12px 0 0", e.style.display = "flex", e.style.alignItems = "center", e.style.justifyContent = "space-between";
|
|
const t = document.createElement("div");
|
|
t.style.display = "flex", t.style.alignItems = "center", t.style.paddingLeft = "8px";
|
|
const i = document.createElement("img");
|
|
i.src = chrome.runtime.getURL("image/logo.png"), i.addEventListener("click", (function() {
|
|
window.open(`${domainUrl}/login`)
|
|
})), i.alt = "none", i.style.height = "30px", i.style.width = "90px", i.style.marginLeft = "-16px", i.style.cursor = "pointer", i.style.zIndex = "999", t.appendChild(i), e.appendChild(t);
|
|
const o = document.createElement("div");
|
|
o.style.display = "flex", o.style.alignItems = "center";
|
|
const d = document.createElement("div");
|
|
d.classList.add("imageContainer"), d.title = "Minimize", d.addEventListener("click", minimize);
|
|
const a = createCollapseIcon();
|
|
d.appendChild(a), o.appendChild(d), e.appendChild(o), l.appendChild(e);
|
|
let s = document.createElement("div");
|
|
s.style.padding = "24px", s.style.fontSize = "14px", s.style.color = "#ffffff", s.style.backgroundColor = "#292c35", s.style.borderRadius = "0 0 12px 12px";
|
|
let c = document.createElement("div");
|
|
c.innerHTML = "Highlight with colors", s.appendChild(c);
|
|
let r = document.createElement("div");
|
|
r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "center", bookmarkList.forEach((e => {
|
|
let t = document.createElement("div");
|
|
t.classList.add("tutorialContainer"), t.style.border = "1px solid #9e9e9e", t.style.backgroundColor = "#454953", t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center";
|
|
let n = createSVGIcon(e.attributes, e.content);
|
|
t.appendChild(n), r.appendChild(t)
|
|
})), s.appendChild(r);
|
|
let p = document.createElement("div");
|
|
p.style.textAlign = "center", p.innerHTML = "Use the three main color to hightlight any paragraph during the meeting.", s.appendChild(p);
|
|
let m = document.createElement("div");
|
|
m.innerHTML = "Select language", m.style.paddingTop = "32px", s.appendChild(m);
|
|
let u = document.createElement("div");
|
|
u.style.display = "flex", u.style.alignItems = "center", u.style.justifyContent = "center";
|
|
const y = document.createElement("div");
|
|
y.classList.add("tutorialContainer"), y.style.display = "flex", y.style.alignItems = "center", y.style.justifyContent = "center";
|
|
const g = createCaptionOnIcon();
|
|
y.appendChild(g), u.appendChild(y), s.appendChild(u);
|
|
let h = document.createElement("div");
|
|
h.style.textAlign = "center", h.innerHTML = "Laxis supports 69 languages in Google Meet", s.appendChild(h);
|
|
let x = document.createElement("div");
|
|
x.style.paddingTop = "32px", x.innerHTML = "Download", s.appendChild(x);
|
|
let C = document.createElement("div");
|
|
C.style.display = "flex", C.style.justifyContent = "center";
|
|
let v = document.createElement("div");
|
|
v.classList.add("tutorialContainer"), v.style.display = "flex", v.style.alignItems = "center", v.style.justifyContent = "center";
|
|
let E = createDownloadIcon();
|
|
v.appendChild(E), C.appendChild(v), s.appendChild(C);
|
|
let b = document.createElement("div");
|
|
b.style.textAlign = "center", b.innerHTML = "Laxis provides multiple formats for downloading the transcripts.", s.appendChild(b), l.appendChild(s), n.appendChild(l), dragElement(n)
|
|
}
|
|
};
|
|
|
|
function addRoot() {
|
|
const e = document.createElement("div");
|
|
e.setAttribute("id", "laxis-root"), e.style.position = "absolute", e.style.zIndex = "2000", e.style.right = currentRight, e.style.top = currentTop, e.style.height = "10px", e.style.width = "10px", document.body.appendChild(e)
|
|
}
|
|
|
|
function addMiniPanel() {
|
|
const e = document.getElementById("laxis-root"),
|
|
t = document.createElement("div");
|
|
t.setAttribute("id", "laxis-miniPanel"), t.classList.add("panelBase"), t.style.width = "60px", t.style.paddingBottom = "16px", t.style.backgroundColor = "#292c35";
|
|
const n = document.createElement("div");
|
|
n.setAttribute("name", "laxis-rootHeader"), n.style.cursor = "move", n.classList.add("col-12"), n.style.height = "50px", n.style.width = "50px", n.style.marginBottom = "-10px", n.style.cursor = "move", n.style.zIndex = "999";
|
|
const l = document.createElement("img");
|
|
l.src = chrome.runtime.getURL("image/logo.png"), l.addEventListener("click", (function() {
|
|
window.open(`${domainUrl}/login`)
|
|
})), l.style.cursor = "pointer", l.style.marginTop = "10px", l.style.height = "25px", l.style.width = "75px", l.style.marginLeft = "-16px", l.alt = "none", n.appendChild(l), t.appendChild(n);
|
|
const i = document.createElement("div");
|
|
i.title = "Expand", i.id = "laxis-expandPanel", i.classList.add("miniButtonContainer"), i.addEventListener("click", addTutorialPanel);
|
|
const o = createExpandIcon();
|
|
o.id = "expandInputIcon", i.appendChild(o), t.appendChild(i), e.appendChild(t), dragElement(e)
|
|
}
|
|
const addCaptionPanel = () => {
|
|
const e = findButtonContainer(),
|
|
t = document.getElementById("laxis-root");
|
|
if (e && !e.__gmt_button_added) {
|
|
e.__gmt_button_added = !0;
|
|
const n = document.getElementById("laxis-miniPanel"),
|
|
l = document.createElement("div");
|
|
l.title = "Captions settings", l.setAttribute("id", "laxis-caption-toggle-mini"), l.classList.add("miniButtonContainer"), l.addEventListener("click", getToSettings);
|
|
const i = createCaptionOnIcon();
|
|
i.id = "captionIconMini", l.appendChild(i), n.appendChild(l);
|
|
const o = document.createElement("div");
|
|
o.title = "Download", o.setAttribute("id", "laxis-download-menu-mini"), o.classList.add("miniButtonContainer"), o.addEventListener("click", displayMenu);
|
|
const d = createDownloadIcon();
|
|
d.id = "downloadIconMini", d.style.width = "20px", d.style.height = "20px", o.appendChild(d), n.appendChild(o);
|
|
const a = document.createElement("div");
|
|
a.style.margin = "12px 5px 0px", a.style.padding = "6px 12px", a.style.borderRadius = "12px", a.style.backgroundColor = "#3e4149";
|
|
for (let e = 0; e < bookmarkList.length; e++) {
|
|
const t = document.createElement("div"),
|
|
n = document.createElement("div");
|
|
t.style.display = "flex", t.style.flexDirection = "column", t.style.alignItems = "center", n.title = `Highlight as ${bookmarkList[e].name}`, n.classList.add("flagContainerMini"), n.id = `laxis-highlight-${bookmarkList[e].code}-mini`, n.onclick = () => {
|
|
highlight(e)
|
|
};
|
|
const l = createSVGIcon(bookmarkList[e].attributes, bookmarkList[e].content);
|
|
n.appendChild(l), t.appendChild(n), a.appendChild(t)
|
|
}
|
|
n.appendChild(a), n.style.display = "block";
|
|
let s = document.getElementById("laxis-mainPanel");
|
|
s && t.removeChild(s);
|
|
const c = document.createElement("div");
|
|
c.setAttribute("id", "laxis-mainPanel"), c.classList.add("panelBase"), c.style.width = "300px", c.style.display = "none";
|
|
const r = document.createElement("div");
|
|
r.setAttribute("name", "laxis-rootHeader"), r.style.cursor = "move", r.style.width = "300px", r.style.height = "50px", r.style.backgroundColor = "#454953", r.style.borderRadius = "12px 12px 0 0", r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = "space-between";
|
|
const p = document.createElement("div");
|
|
p.style.display = "flex", p.style.alignItems = "center", p.style.paddingLeft = "8px";
|
|
const m = document.createElement("img");
|
|
m.src = chrome.runtime.getURL("image/logo.png"), m.alt = "none", m.addEventListener("click", (function() {
|
|
window.open(`${domainUrl}/login`)
|
|
})), m.style.height = "30px", m.style.marginLeft = "-16px", m.style.cursor = "pointer", m.style.zIndex = "999", p.appendChild(m), r.appendChild(p);
|
|
const u = document.createElement("div");
|
|
u.style.display = "flex", u.style.alignItems = "center";
|
|
const y = document.createElement("div");
|
|
y.title = "Retrieve local data", y.setAttribute("id", "laxis-repair"), y.classList.add("imageContainer"), y.style.display = "none", y.addEventListener("click", extractLocalStorage);
|
|
const g = document.createElement("img");
|
|
g.id = "restoreIcon", g.src = chrome.runtime.getURL("image/repair.svg"), g.style.width = "15px", g.style.height = "18px", y.appendChild(g), u.appendChild(y);
|
|
const h = document.createElement("div");
|
|
h.title = "Captions settings", h.setAttribute("id", "laxis-caption-toggle"), h.classList.add("imageContainer"), h.addEventListener("click", getToSettings);
|
|
const x = createCaptionOnIcon();
|
|
x.id = "captionIcon", h.appendChild(x), u.appendChild(h);
|
|
const C = document.createElement("div");
|
|
C.title = "Auto-Scroll", C.setAttribute("id", "laxis-autoScroll");
|
|
const v = document.createElement("input");
|
|
v.type = "hidden", v.value = 1, v.setAttribute("id", "autoscroll"), v.onchange = () => autoScroll(), C.appendChild(v), C.classList.add("imageContainer"), C.addEventListener("click", (function() {
|
|
let e = document.getElementById("autoscroll");
|
|
"0" === e.value.toString() ? e.value = 1 : e.value = 0, autoScroll()
|
|
}));
|
|
const E = createAutoScrollIcon();
|
|
E.style.width = "15px", E.style.height = "15px", C.appendChild(E), u.appendChild(C);
|
|
const b = document.createElement("div");
|
|
b.title = "Download", b.id = "laxis-openDownloadMenu", b.classList.add("imageContainer"), b.addEventListener("click", displayMenu);
|
|
const f = createDownloadIcon();
|
|
f.style.width = "15px", f.style.height = "15px", b.appendChild(f), u.appendChild(b);
|
|
const L = document.createElement("div");
|
|
L.title = "Minimize", L.id = "laxis-minimizePanel", L.classList.add("imageContainer"), L.addEventListener("click", minimize);
|
|
const k = createCollapseIcon();
|
|
k.style.width = "15px", k.style.height = "15px", L.appendChild(k), u.appendChild(L), r.appendChild(u), c.appendChild(r);
|
|
const I = document.createElement("div");
|
|
I.style.width = "300px", I.style.backgroundColor = "#292c35", I.style.paddingTop = "8px";
|
|
const w = document.createElement("div");
|
|
w.id = "login-prompt", w.style.display = "none", w.style.margin = "0px 8px", w.style.padding = "4px", w.style.textAlign = "center", w.addEventListener("click", signup), w.style.cursor = "pointer", w.innerHTML = "Please <span style='color:#2196f3'>log in</span> to enable autosave to Laxis Cloud.", w.style.borderRadius = "12px", w.style.border = "1px solid rgba(255, 255, 255, 0.5)", w.style.backgroundColor = "#454953", w.style.color = "#ffffff", w.style.fontSize = "10px";
|
|
const T = document.createElement("div");
|
|
T.id = "google-meet-quota", T.style.display = "none", T.style.margin = "0px 8px", T.style.padding = "4px", T.style.textAlign = "center", T.addEventListener("click", upgrade), T.style.cursor = "pointer", T.innerHTML = "Used Google Meet Quota: ", T.style.borderRadius = "12px", T.style.border = "1px solid rgba(255, 255, 255, 0.5)", T.style.backgroundColor = "#454953", T.style.color = "#ffffff", T.style.fontSize = "10px";
|
|
const M = document.createElement("div");
|
|
M.id = "meeting-name", M.style.fontWeight = "bold", M.style.padding = "8px", M.style.color = "#FFFFFF", I.appendChild(w), I.appendChild(T), I.appendChild(M);
|
|
const B = document.createElement("div");
|
|
B.style.paddingTop = "8px", B.style.width = "25%", I.style.paddingBottom = "8px", c.appendChild(I);
|
|
const S = document.createElement("div");
|
|
S.setAttribute("id", "feature"), S.style.width = "300px", S.style.backgroundColor = "#292c35", S.style.borderRadius = "0 0 12px 12px";
|
|
const A = document.createElement("div");
|
|
A.setAttribute("id", "caption"), A.style.height = "350px", A.style.width = "300px", A.style.overflowY = "auto", A.style.overflowX = "hidden", A.style.color = "#FFFFFF", A.style.paddingRight = "8px", A.onwheel = () => {
|
|
v.value = 0
|
|
}, S.appendChild(A);
|
|
const H = document.createElement("div");
|
|
H.id = "highlight-laxis", H.style.width = "300px", H.style.backgroundColor = "#292c35", H.style.display = "flex", H.style.justifyContent = "space-around", H.style.borderTop = "1px solid #e0e0e0", H.style.paddingTop = "10px", H.style.paddingBottom = "10px", H.classList.add("popup"), H.style.borderRadius = "0 0 12px 12px";
|
|
for (let e = 0; e < bookmarkList.length; e++) {
|
|
const t = document.createElement("div"),
|
|
n = document.createElement("div");
|
|
t.style.display = "flex", t.style.flexDirection = "column", t.style.alignItems = "center", n.style.textAlign = "center", n.style.fontSize = "10px", n.style.color = "#9e9e9e", n.style.marginTop = "4px", n.innerHTML = bookmarkList[e].name, n.id = `laxis-highlight-${bookmarkList[e].code}-title`;
|
|
const l = document.createElement("div");
|
|
l.title = `Highlight as ${bookmarkList[e].name}`, l.classList.add("flagContainer"), l.id = `laxis-highlight-${bookmarkList[e].code}`;
|
|
const i = createSVGIcon(bookmarkList[e].attributes, bookmarkList[e].content);
|
|
l.appendChild(i), l.onclick = () => {
|
|
highlight(e)
|
|
}, t.appendChild(l), t.appendChild(n), H.appendChild(t)
|
|
}
|
|
let N = document.createElement("div");
|
|
N.id = "popup", N.className = "popupText", N.innerHTML = "Test", N.onclick = () => {
|
|
clearTimeout(notificationsTimeout), N.classList.remove("show")
|
|
}, H.appendChild(N), S.appendChild(H), c.appendChild(S), t.appendChild(c), dragElement(t), autoScroll(), document.getElementById("laxis-downloadMenu") || addDownloadMenu(), checkCaptionStatusInterval = setInterval(checkCaptionStatus, 500), turnOnCaptions(), debug("turned on caption"), removeCaptionPanel(), checkToken(), autoSaveInterval = setInterval((() => {
|
|
let e = document.getElementById("autoSaveCheck");
|
|
e && e.checked && Export2App(!0).catch((e => {
|
|
console.error(e);
|
|
const t = get(ERROR_SAVING) || [];
|
|
set(ERROR_SAVING, [...t, e])
|
|
}))
|
|
}), 3e5), setTimeout(updateMeetingName, 500), clearInterval(checkOngoingMeeting)
|
|
}
|
|
},
|
|
addDownloadMenu = () => {
|
|
let e = document.createElement("div");
|
|
e.id = "laxis-downloadMenu", e.className = "modal", e.style.display = "none";
|
|
let t = document.createElement("div");
|
|
t.className = "modal-content", t.id = "laxis-downloadMenuContent";
|
|
let n = document.createElement("div");
|
|
n.className = "modal-header", n.innerHTML = "Download", t.appendChild(n);
|
|
let l = document.createElement("div"),
|
|
i = document.createElement("div");
|
|
i.className = "modal-body", i.innerHTML = "File Type<select name='extension' id='extension' value='txt'><option value='txt'>txt</option><option value='app'>Laxis Cloud</option><option value='doc'>doc</option><option value='pdf'>pdf</option></select>", l.appendChild(i);
|
|
let o = document.createElement("div");
|
|
o.className = "modal-body", o.innerHTML = "<div>Highlights</div><div><input type='checkbox' name='highlightCheck' id='highlightCheck' checked='true'/></div>", l.appendChild(o);
|
|
let d = document.createElement("div");
|
|
d.className = "modal-body", d.innerHTML = "<div>Timestamps</div><div><input type='checkbox' name='timestampCheck' id='timestampCheck'/></div>", l.appendChild(d);
|
|
let a = document.createElement("div");
|
|
a.className = "modal-body", a.title = "Autosave to Laxis every 5 minutes", a.style.cursor = "help", a.innerHTML = "<div>Autosave to Laxis Cloud</div><div><input type='checkbox' name='autoSaveCheck' id='autoSaveCheck'/></div>", l.appendChild(a), t.appendChild(l);
|
|
let s = document.createElement("div");
|
|
s.className = "modal-footer";
|
|
let c = document.createElement("button");
|
|
c.classList.add("modal-button"), c.id = "laxis-close-menu", c.style.border = "solid 2px #292c35", c.style.backgroundColor = "#454953", c.innerHTML = "Cancel", c.onclick = () => {
|
|
document.getElementById("laxis-downloadMenu").style.display = "none"
|
|
}, s.appendChild(c);
|
|
let r = document.createElement("button");
|
|
r.classList.add("modal-button"), r.style.backgroundColor = "#292c35", r.style.boxShadow = "box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29)", r.innerHTML = "Download", r.addEventListener("click", downloadTranscript), r.setAttribute("id", "laxis-confirm-download"), s.appendChild(r), t.appendChild(s), e.appendChild(t);
|
|
const p = document.getElementById("laxis-root");
|
|
p && p.appendChild(e)
|
|
},
|
|
minimize = () => {
|
|
const e = document.getElementById("laxis-mainPanel"),
|
|
t = document.getElementById("laxis-miniPanel");
|
|
e.style.display = "none", t.style.display = "block"
|
|
},
|
|
autoScroll = () => {
|
|
let e = document.getElementById("laxis-autoScroll");
|
|
e.style.border = "1px solid #2196f3";
|
|
const t = document.getElementById("caption"),
|
|
n = document.getElementById("autoscroll"),
|
|
l = setInterval((function() {
|
|
"0" === n.value.toString() ? (clearInterval(l), e.style.border = "1px solid #292c35") : t.scrollTop = t.scrollHeight
|
|
}), 1e3)
|
|
},
|
|
updateMeetingName = () => {
|
|
const e = document.getElementById("meeting-name");
|
|
getMeetingName() ? (e.innerHTML = getMeetingName(), chrome.runtime.sendMessage({
|
|
type: "meetingName",
|
|
meetingName: getMeetingName()
|
|
})) : (e.innerHTML = getDefaultName(), chrome.runtime.sendMessage({
|
|
type: "meetingName",
|
|
meetingName: getDefaultName()
|
|
}))
|
|
},
|
|
highlight = e => {
|
|
let t = document.getElementById("highlight-laxis"),
|
|
n = document.getElementById("popup"),
|
|
l = document.getElementById("laxis-miniPanel");
|
|
weTurnedCaptionsOn ? bookmarkList.forEach(((l, i) => {
|
|
const o = t.childNodes[i].childNodes[0],
|
|
d = t.childNodes[i].childNodes[1],
|
|
a = document.getElementById(`laxis-highlight-${bookmarkList[i].code}-mini`);
|
|
i === e ? l.enable ? (l.enable = !1, o.style.backgroundColor = "", a.style.backgroundColor = "", d.style.color = "#9e9e9e", clearTimeout(notificationsTimeout), n.classList.remove("show")) : (l.enable = !0, o.style.backgroundColor = "#696969", a.style.backgroundColor = "#696969", d.style.color = "#ffffff", n.innerHTML = "Your conversation is being highlighted.", n.style.backgroundColor = "#454953", n.style.color = l.code, n.classList.add("show"), clearTimeout(notificationsTimeout), notificationsTimeout = setTimeout((() => {
|
|
n.classList.remove("show")
|
|
}), notificationsTimeoutDuration)) : (l.enable = !1, o.style.backgroundColor = "", a.style.backgroundColor = "", d.style.color = "#9e9e9e")
|
|
})) : (l.style.display && alert("Your caption is turned off"), n.style.backgroundColor = "#818388", n.style.color = "#292c35", n.innerHTML = "Your caption is turned off", n.classList.add("show"), clearTimeout(notificationsTimeout), notificationsTimeout = setTimeout((() => {
|
|
n.classList.remove("show")
|
|
}), notificationsTimeoutDuration))
|
|
}; |