Allow Popping Out the Timer Into a Separate Window

This adds a new button to the sidebar that allows the user to pop out
the entire layout into a separate child window. This makes it take up
less of the screen and capture it more easily in OBS. I'm not sure if
the button should be in the sidebar or not, but it's good enough for an
initial implementation.

Changelog: You can now pop out the timer into a separate window.

Author: CryZe

livesplit-core

@@ -45,4 +45,5 @@ $selected-row-hover-color: linear-gradient(
     largeMargin: $ui-large-margin;
     manualGameTimeHeight: $manual-game-time-height;
     contributorAvatarSize: $contributor-avatar-size;
+    mainBackgroundColor: $main-background-color;
 }

src/css/variables.icss.scss

@@ -69,8 +69,7 @@ try {
         // as otherwise information may be cached incorrectly.
         try {
             const promises = [];
-            // TypeScript doesn't seem to know that the fonts are iterable.
-            for (const fontFace of document.fonts as any as Iterable<FontFace>) {
+            for (const fontFace of document.fonts) {
                 if (fontFace.family === "timer" || fontFace.family === "fira") {
                     promises.push(fontFace.load());
                 }

src/index.tsx

@@ -2,6 +2,7 @@ import { CommandSinkRef, HotkeyConfig, HotkeySystem } from "../livesplit-core";
 import { expect } from "../util/OptionUtil";
 
 export interface HotkeyImplementation {
+    ptr: number;
     config(): Promise<HotkeyConfig> | HotkeyConfig;
     setConfig(config: HotkeyConfig): void;
     activate(): void;
@@ -10,7 +11,10 @@ export interface HotkeyImplementation {
 }
 
 class GlobalHotkeys implements HotkeyImplementation {
-    constructor(private hotkeySystem?: HotkeySystem) {}
+    public ptr: number;
+    constructor(private hotkeySystem?: HotkeySystem) {
+        this.ptr = hotkeySystem?.ptr ?? 0;
+    }
 
     public async config(): Promise<HotkeyConfig> {
         return expect(

src/platform/Hotkeys.ts

@@ -0,0 +1,5 @@
+declare module "*.scss";
+declare module "*.css";
+declare module "*.woff";
+declare module "*.svg";
+declare module "*.wasm";

src/type-definitions/assets.d.ts

@@ -13,7 +13,9 @@ import {
     TimingMethod,
     TimerPhase,
     Event,
+    LayoutRefMut,
 } from "../livesplit-core";
+import { Layout as ShowLayout } from "./components/Layout";
 import {
     FILE_EXT_LAYOUTS,
     convertFileToArrayBuffer,
@@ -41,15 +43,24 @@ import { LayoutView } from "./views/LayoutView";
 import { ToastContainer, toast } from "react-toastify";
 import * as Storage from "../storage";
 import { UrlCache } from "../util/UrlCache";
-import { ServerProtocol, WebRenderer } from "../livesplit-core/livesplit_core";
+import {
+    HotkeySystem_add_window,
+    ServerProtocol,
+    WebRenderer,
+} from "../livesplit-core/livesplit_core";
 import { LiveSplitServer } from "../api/LiveSplitServer";
 import { LSOCommandSink } from "../util/LSOCommandSink";
 import { DialogContainer } from "./components/Dialog";
 import { createHotkeys, HotkeyImplementation } from "../platform/Hotkeys";
 import { Menu } from "lucide-react";
+import { createRoot } from "react-dom/client";
 
 import * as variables from "../css/variables.icss.scss";
 
+import LiveSplitIcon from "../assets/icon.svg";
+import timerFont from "../css/timer.woff";
+import firaFont from "../css/FiraSans-Regular.woff";
+
 import "react-toastify/dist/ReactToastify.css";
 import * as classes from "../css/LiveSplit.module.scss";
 import * as sidebarClasses from "../css/Sidebar.module.scss";
@@ -1068,4 +1079,112 @@ export class LiveSplit extends React.Component<Props, State> {
             document.title = "LiveSplit One";
         }
     }
+
+    popOut(): void {
+        const { layoutWidth, layoutHeight, generalSettings } = this.state;
+        popOut(
+            this.state.commandSink,
+            () => this.state.layout,
+            generalSettings,
+            layoutWidth,
+            layoutHeight,
+        );
+    }
+}
+
+async function popOut(
+    commandSink: LSOCommandSink,
+    getLayout: () => LayoutRefMut,
+    generalSettings: GeneralSettings,
+    width: number,
+    height: number,
+) {
+    const childWindow = window.open(
+        "",
+        "_blank",
+        `popup,width=${width},height=${height}`,
+    );
+    if (!childWindow) {
+        return;
+    }
+
+    const childDoc = childWindow.document;
+
+    childDoc.title = "LiveSplit One";
+
+    const link = childDoc.createElement("link");
+    link.rel = "icon";
+    link.type = "image/svg+xml";
+    link.href = LiveSplitIcon;
+    childDoc.head.appendChild(link);
+
+    childDoc.body.style.margin = "0";
+    childDoc.body.style.background = variables.mainBackgroundColor;
+
+    const timerFontFace = new FontFace("timer", `url(${timerFont})`);
+    const firaFontFace = new FontFace("fira", `url(${firaFont})`);
+    childDoc.fonts.add(timerFontFace);
+    childDoc.fonts.add(firaFontFace);
+    await Promise.all([timerFontFace.load(), firaFontFace.load()]);
+
+    const layoutState = LayoutState.new();
+    const urlCache = new UrlCache();
+
+    const renderer = new WebRenderer();
+    childWindow.addEventListener("unload", async () => {
+        async function sleep(ms: number) {
+            return new Promise((resolve) => setTimeout(resolve, ms));
+        }
+        while (!childWindow.closed) {
+            await sleep(1);
+        }
+        renderer.free();
+        layoutState[Symbol.dispose]();
+        urlCache.imageCache[Symbol.dispose]();
+    });
+
+    const element = renderer.element();
+    element.style.width = "100%";
+    element.style.height = "100%";
+
+    if (hotkeySystem) HotkeySystem_add_window(hotkeySystem.ptr, childWindow);
+
+    createRoot(childDoc.body).render(
+        <ShowLayout
+            getState={() => {
+                const layout = getLayout();
+                if (layout.ptr !== 0) {
+                    commandSink.updateLayoutState(
+                        layout,
+                        layoutState,
+                        urlCache.imageCache,
+                    );
+                    urlCache.collect();
+                }
+                return layoutState;
+            }}
+            layoutUrlCache={urlCache}
+            allowResize={false}
+            width="100%"
+            height="100%"
+            generalSettings={generalSettings}
+            renderer={renderer}
+            onResize={(width, height) =>
+                childWindow.resizeTo(
+                    width + childWindow.outerWidth - childWindow.innerWidth,
+                    height + childWindow.outerHeight - childWindow.innerHeight,
+                )
+            }
+            onScroll={(e) => {
+                const delta = Math.sign(-e.deltaY);
+                const layout = getLayout();
+                if (delta === 1) {
+                    layout.scrollUp();
+                } else if (delta === -1) {
+                    layout.scrollDown();
+                }
+            }}
+            window={childWindow}
+        />,
+    );
 }

src/type-definitions/images.d.ts

@@ -8,7 +8,7 @@ import { GeneralSettings } from "../views/MainSettings";
 
 import * as classes from "../../css/Layout.module.scss";
 
-export default function Layout({
+export function Layout({
     getState,
     layoutUrlCache,
     allowResize,
@@ -17,16 +17,24 @@ export default function Layout({
     generalSettings,
     renderer,
     onResize,
+    onScroll,
+    window,
 }: {
     getState: () => LayoutStateRef;
     layoutUrlCache: UrlCache;
-    allowResize: boolean;
-    width: number;
-    height: number;
     generalSettings: GeneralSettings;
     renderer: WebRenderer;
     onResize: (width: number, height: number) => void;
-}) {
+    onScroll?: (e: WheelEvent) => void;
+    window: Window;
+} & (
+    | {
+          allowResize: false;
+          width: string | number;
+          height: string | number;
+      }
+    | { allowResize: true; width: number; height: number }
+)) {
     const update = () => {
         const layoutState = getState();
         const newDims = renderer.render(
@@ -39,12 +47,19 @@ export default function Layout({
     };
 
     return (
-        <AutoRefresh frameRate={generalSettings.frameRate} update={update}>
+        <AutoRefresh
+            frameRate={generalSettings.frameRate}
+            update={update}
+            window={window}
+        >
             <div style={{ width, height }}>
                 <div
                     style={{ width, height }}
                     ref={(element) => {
                         element?.appendChild(renderer.element());
+                        if (onScroll) {
+                            element?.addEventListener("wheel", onScroll);
+                        }
                     }}
                 />
                 {allowResize && (