diff --git a/src/core/client/stream/common/UserBox/UserBoxContainer.tsx b/src/core/client/stream/common/UserBox/UserBoxContainer.tsx index 33c3c7620..b90716408 100644 --- a/src/core/client/stream/common/UserBox/UserBoxContainer.tsx +++ b/src/core/client/stream/common/UserBox/UserBoxContainer.tsx @@ -127,7 +127,6 @@ export class UserBoxContainer extends Component { = ({ void; onClose?: () => void; href: string; - features?: string; + features?: Partial; title?: string; } +function reconcileFeatures({ centered, ...options }: WindowFeatures): string { + const features: Record = { + ...options, + left: 0, + top: 0, + }; + if (centered) { + const winLeft = + window.screenLeft !== undefined ? window.screenLeft : window.screenX; + const winTop = + window.screenTop !== undefined ? window.screenTop : window.screenY; + + // If we're centered, then apply the features left/right flags. + features.left = winLeft + window.outerWidth / 2 - options.width / 2; + features.top = winTop + 100; + } + + return Object.keys(features) + .reduce( + (acc, key) => acc.concat([`${key}=${features[key]}`]), + [] as string[] + ) + .join(","); +} + export default class Popup extends Component { private ref: Window | null = null; private detectCloseInterval: any = null; @@ -26,8 +59,21 @@ export default class Popup extends Component { } } - private openWindow(props = this.props) { - this.ref = window.open(props.href, props.title, props.features); + public static defaultFeatures: WindowFeatures = { + resizable: 0, + menubar: 0, + width: 350, + height: 450, + centered: true, + }; + + private openWindow({ features = {}, href, title } = this.props) { + const opts: WindowFeatures = { + ...Popup.defaultFeatures, + ...features, + }; + + this.ref = window.open(href, title, reconcileFeatures(opts)); this.attemptSetCallbacks();