Merge branch 'assist-chat' of github.com:openreplay/openreplay into assist-chat
This commit is contained in:
ShiKhu
commit
900ae10885
2 changed files with 104 additions and 63 deletions
|
|
@ -2,75 +2,94 @@ import type { Properties } from 'csstype';
|
|||
|
||||
import { declineCall, acceptCall, cross, remoteControl } from './icons.js'
|
||||
|
||||
type ButtonOptions = HTMLButtonElement | string | {
|
||||
innerHTML: string,
|
||||
style?: Properties,
|
||||
}
|
||||
const TEXT_GRANT_REMORTE_ACCESS = "Grant Remote Access";
|
||||
const TEXT_REJECT = "Reject";
|
||||
const TEXT_ANSWER_CALL = `${acceptCall}   Answer`;
|
||||
|
||||
type ButtonOptions =
|
||||
| HTMLButtonElement
|
||||
| string
|
||||
| {
|
||||
innerHTML: string;
|
||||
style?: Properties;
|
||||
};
|
||||
|
||||
// TODO: common strategy for InputOptions/defaultOptions merging
|
||||
interface ConfirmWindowOptions {
|
||||
text: string,
|
||||
style?: Properties,
|
||||
confirmBtn: ButtonOptions,
|
||||
declineBtn: ButtonOptions,
|
||||
text: string;
|
||||
style?: Properties;
|
||||
confirmBtn: ButtonOptions;
|
||||
declineBtn: ButtonOptions;
|
||||
}
|
||||
|
||||
export type Options = string | Partial<ConfirmWindowOptions>
|
||||
export type Options = string | Partial<ConfirmWindowOptions>;
|
||||
|
||||
function confirmDefault(
|
||||
opts: Options,
|
||||
confirmBtn: ButtonOptions,
|
||||
declineBtn: ButtonOptions,
|
||||
text: string,
|
||||
text: string
|
||||
): ConfirmWindowOptions {
|
||||
const isStr = typeof opts === "string"
|
||||
return Object.assign({
|
||||
text: isStr ? opts : text,
|
||||
confirmBtn,
|
||||
declineBtn,
|
||||
}, isStr ? undefined : opts)
|
||||
const isStr = typeof opts === "string";
|
||||
return Object.assign(
|
||||
{
|
||||
text: isStr ? opts : text,
|
||||
confirmBtn,
|
||||
declineBtn
|
||||
},
|
||||
isStr ? undefined : opts
|
||||
);
|
||||
}
|
||||
|
||||
export const callConfirmDefault = (opts: Options) =>
|
||||
confirmDefault(opts, acceptCall, declineCall, "You have an incoming call. Do you want to answer?")
|
||||
export const controlConfirmDefault = (opts: Options) =>
|
||||
confirmDefault(opts, remoteControl, cross, "Allow remote control?")
|
||||
export const callConfirmDefault = (opts: Options) =>
|
||||
confirmDefault(
|
||||
opts,
|
||||
TEXT_ANSWER_CALL,
|
||||
TEXT_REJECT,
|
||||
"You have an incoming call. Do you want to answer?"
|
||||
);
|
||||
export const controlConfirmDefault = (opts: Options) =>
|
||||
confirmDefault(
|
||||
opts,
|
||||
TEXT_GRANT_REMORTE_ACCESS,
|
||||
TEXT_REJECT,
|
||||
"Allow remote control?"
|
||||
);
|
||||
|
||||
function makeButton(options: ButtonOptions): HTMLButtonElement {
|
||||
if (options instanceof HTMLButtonElement) {
|
||||
return options
|
||||
return options;
|
||||
}
|
||||
const btn = document.createElement('button')
|
||||
const btn = document.createElement("button");
|
||||
Object.assign(btn.style, {
|
||||
background: "transparent",
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
border: 0,
|
||||
padding: "10px 14px",
|
||||
fontSize: "14px",
|
||||
borderRadius: "3px",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
borderRadius: "50%",
|
||||
width: "22px",
|
||||
height: "22px",
|
||||
color: "white", // TODO: nice text button in case when only text is passed
|
||||
})
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
textTransform: "uppercase",
|
||||
marginRight: "10px"
|
||||
});
|
||||
if (typeof options === "string") {
|
||||
btn.innerHTML = options
|
||||
btn.innerHTML = options;
|
||||
} else {
|
||||
btn.innerHTML = options.innerHTML
|
||||
Object.assign(btn.style, options.style)
|
||||
btn.innerHTML = options.innerHTML;
|
||||
Object.assign(btn.style, options.style);
|
||||
}
|
||||
return btn
|
||||
return btn;
|
||||
}
|
||||
|
||||
export default class ConfirmWindow {
|
||||
private wrapper: HTMLDivElement;
|
||||
|
||||
constructor(options: ConfirmWindowOptions) {
|
||||
const wrapper = document.createElement('div');
|
||||
const popup = document.createElement('div');
|
||||
const p = document.createElement('p');
|
||||
const wrapper = document.createElement("div");
|
||||
const popup = document.createElement("div");
|
||||
const p = document.createElement("p");
|
||||
p.innerText = options.text;
|
||||
const buttons = document.createElement('div');
|
||||
const buttons = document.createElement("div");
|
||||
const confirmBtn = makeButton(options.confirmBtn);
|
||||
const declineBtn = makeButton(options.declineBtn);
|
||||
buttons.appendChild(confirmBtn);
|
||||
|
|
@ -78,37 +97,54 @@ export default class ConfirmWindow {
|
|||
popup.appendChild(p);
|
||||
popup.appendChild(buttons);
|
||||
|
||||
Object.assign(confirmBtn.style, {
|
||||
background: "rgba(0, 167, 47, 1)",
|
||||
color: "white"
|
||||
});
|
||||
|
||||
Object.assign(declineBtn.style, {
|
||||
background: "#FFE9E9",
|
||||
color: "#CC0000"
|
||||
});
|
||||
|
||||
Object.assign(buttons.style, {
|
||||
marginTop: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-evenly",
|
||||
// justifyContent: "space-evenly",
|
||||
backgroundColor: "white",
|
||||
padding: "10px",
|
||||
boxShadow: "0px 0px 3.99778px 1.99889px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "6px"
|
||||
});
|
||||
|
||||
Object.assign(popup.style, {
|
||||
position: "relative",
|
||||
pointerEvents: "auto",
|
||||
margin: "4em auto",
|
||||
width: "90%",
|
||||
maxWidth: "400px",
|
||||
padding: "25px 30px",
|
||||
background: "black",
|
||||
opacity: ".75",
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
borderRadius: ".25em .25em .4em .4em",
|
||||
boxShadow: "0 0 20px rgb(0 0 0 / 20%)",
|
||||
}, options.style);
|
||||
Object.assign(
|
||||
popup.style,
|
||||
{
|
||||
font: "14px 'Roboto', sans-serif",
|
||||
position: "relative",
|
||||
pointerEvents: "auto",
|
||||
margin: "4em auto",
|
||||
width: "90%",
|
||||
maxWidth: "fit-content",
|
||||
padding: "20px",
|
||||
background: "#F3F3F3",
|
||||
opacity: ".75",
|
||||
color: "black",
|
||||
borderRadius: "3px",
|
||||
boxShadow: "0px 0px 3.99778px 1.99889px rgba(0, 0, 0, 0.1)"
|
||||
},
|
||||
options.style
|
||||
);
|
||||
|
||||
Object.assign(wrapper.style, {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
pointerEvents: "none",
|
||||
zIndex: 2147483647 - 1,
|
||||
})
|
||||
zIndex: 2147483647 - 1
|
||||
});
|
||||
|
||||
wrapper.appendChild(popup);
|
||||
this.wrapper = wrapper;
|
||||
|
|
@ -116,18 +152,19 @@ export default class ConfirmWindow {
|
|||
confirmBtn.onclick = () => {
|
||||
this._remove();
|
||||
this.resolve(true);
|
||||
}
|
||||
};
|
||||
declineBtn.onclick = () => {
|
||||
this._remove();
|
||||
this.resolve(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
private resolve: (result: boolean) => void = ()=>{};
|
||||
private reject: ()=>void = ()=>{};
|
||||
private resolve: (result: boolean) => void = () => {};
|
||||
private reject: () => void = () => {};
|
||||
|
||||
mount(): Promise<boolean> {
|
||||
document.body.appendChild(this.wrapper);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.resolve = resolve;
|
||||
this.reject = reject;
|
||||
|
|
@ -135,7 +172,9 @@ export default class ConfirmWindow {
|
|||
}
|
||||
|
||||
private _remove() {
|
||||
if (!this.wrapper.parentElement) { return; }
|
||||
if (!this.wrapper.parentElement) {
|
||||
return;
|
||||
}
|
||||
document.body.removeChild(this.wrapper);
|
||||
}
|
||||
remove() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
// TODO: something with these big strings in bundle?
|
||||
|
||||
export const declineCall = `<svg xmlns="http://www.w3.org/2000/svg" height="22" width="22" viewBox="0 0 128 128" ><g id="Circle_Grid" data-name="Circle Grid"><circle cx="64" cy="64" fill="#ef5261" r="64"/></g><g id="icon"><path d="m57.831 70.1c8.79 8.79 17.405 12.356 20.508 9.253l4.261-4.26a7.516 7.516 0 0 1 10.629 0l9.566 9.566a7.516 7.516 0 0 1 0 10.629l-7.453 7.453c-7.042 7.042-27.87-2.358-47.832-22.319-9.976-9.981-16.519-19.382-20.748-28.222s-5.086-16.091-1.567-19.61l7.453-7.453a7.516 7.516 0 0 1 10.629 0l9.566 9.563a7.516 7.516 0 0 1 0 10.629l-4.264 4.271c-3.103 3.1.462 11.714 9.252 20.5z" fill="#eeefee"/></g></svg>`;
|
||||
export const declineCall = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
|
||||
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
|
||||
</svg>`;
|
||||
|
||||
export const acceptCall = declineCall.replace('fill="#ef5261"', 'fill="green"')
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue