Tons of refactoring and redesign

Mafrans · Jul 31, 2021 · ffde383 · ffde383
1 parent 27d9aa3
commit ffde383
Show file tree

Hide file tree

Showing 35 changed files with 916 additions and 10,167 deletions.
diff --git a/custom.d.ts b/custom.d.ts
@@ -14,7 +14,7 @@ declare module '*.jpg' {
 }
 
 declare module '*.css' {
-    const content: never;
+    const content: any;
     export default content;
 }
 
@@ -23,16 +23,16 @@ declare module '*.scss' {
     export default content;
 }
 
-declare module '*.txtjs' {
-    const content: string;
-    export default content;
-}
-
 declare module '*.json' {
     const value: never;
     export default value;
 }
 
+declare module 'bundle-text:*' {
+    const content: string;
+    export default content;
+}
+
 declare module 'tailwind.macro' {
     const value: any;
     export default value;

diff --git a/manifest.json b/manifest.json
@@ -49,6 +49,9 @@
             ],
             "js": [
                 "dist/main/index.js"
+            ],
+            "css": [
+                "dist/main/index.css"
             ]
         }
     ],

diff --git a/modules/main/src/MonitorRunnable.txtjs → modules/main/src/MonitorRunnable.txt b/modules/main/src/MonitorRunnable.txtjs → modules/main/src/MonitorRunnable.txt
@@ -1,4 +1,4 @@
-class StadiaPlusNetworkMonitor {
+class NetworkMonitor {
     originalRTC = [];
     peerConnections = [];
     timer = 0;
@@ -16,15 +16,26 @@ class StadiaPlusNetworkMonitor {
             };
             RTCPeerConnection.prototype = OriginalRTCConnection.prototype;
         }(RTCPeerConnection));
+    }
 
-        this.timer = setInterval(this.poll.bind(this), 1000);
+    start() {
+        if (this.timer === 0) {
+            this.timer = setInterval(this.poll.bind(this), 1000);
+            console.log(this);
+        }
     }
 
     stop() {
-        clearInterval(this.timer);
+        if (this.timer !== 0) {
+            clearInterval(this.timer);
+            this.timer = 0;
+        }
     }
 
     async poll() {
+        console.log('poll');
+        if (!this.peerConnections) return;
+
         const data = [];
         for (const connection of this.peerConnections.filter(it => it.connectionState === 'connected')) {
             data.push(Array.from(await connection.getStats()));
@@ -37,4 +48,4 @@ class StadiaPlusNetworkMonitor {
     }
 }
 
-window.StadiaPlusNetworkMonitor = new StadiaPlusNetworkMonitor();
+window.StadiaPlusNetworkMonitor = new NetworkMonitor();
diff --git a/modules/main/src/StadiaPage.ts b/modules/main/src/StadiaPage.ts
@@ -1,6 +1,4 @@
-import { triggerPageChangeEvent } from './events/PageChangeEvent';
-import Logger from '../../shared/Logger';
-import Util from './Util';
+import { stateStore } from './state/StateStore';
 
 export type StadiaPage = null | 'home' | 'player' | 'library';
 
@@ -73,9 +71,11 @@ export function findPage(pathName: string): StadiaPage {
 }
 
 export function setPage(newPage: StadiaPage) {
+    console.log(newPage);
     if(newPage === page) return;
 
-    triggerPageChangeEvent({ page: newPage, lastPage: page })
+    stateStore.setPage(newPage);
+
     page = newPage || null;
     return page;
 }

diff --git a/modules/main/src/Util.ts b/modules/main/src/Util.ts
@@ -1,120 +1,124 @@
-import { triggerRendererChangeEvent } from './events/RendererChangeEvent';
-
-export default class Util {
-    static renderer: HTMLElement | null = null;
-
-    /**
-     * Finds and caches the current web renderer.
-     */
-    static async updateRenderer(): Promise<void> {
-        const renderers = document.querySelectorAll('.lhsE4e>c-wiz');
-        let newRenderer = renderers.item(0) as HTMLElement;
-        if (renderers.length > 1) {
-            newRenderer = Array.from(renderers).find((renderer: Element) => (renderer as HTMLElement).style.opacity === '1') as HTMLElement;
-        }
-
-        if (newRenderer != null) this.setRenderer(newRenderer);
+import { stateStore } from './state/StateStore';
+import { DependencyList, useEffect } from 'react';
+
+export let renderer: HTMLElement | null = null;
+
+/**
+ * Finds and caches the current web renderer.
+ */
+export async function updateRenderer(): Promise<void> {
+    const renderers = document.querySelectorAll('.lhsE4e>c-wiz');
+    let newRenderer = renderers.item(0) as HTMLElement;
+    if (renderers.length > 1) {
+        newRenderer = Array.from(renderers).find((renderer: Element) => (renderer as HTMLElement).style.opacity === '1') as HTMLElement;
     }
 
-    static getPlayerGameId() {
-        return location.pathname.substring('/player/'.length, '/player/'.length + 36);
-    }
+    if (newRenderer != null) setRenderer(newRenderer);
+}
 
-    static async setRenderer(renderer: HTMLElement): Promise<void> {
-        if (renderer.isEqualNode(this.renderer)) {
-            return;
-        }
+export function getPlayerGameId() {
+    return location.pathname.substring('/player/'.length, '/player/'.length + 36);
+}
 
-        triggerRendererChangeEvent({
-            renderer,
-            lastRenderer: this.renderer
-        })
-        this.renderer = renderer;
+export async function setRenderer(newRenderer: HTMLElement): Promise<void> {
+    if (newRenderer.isEqualNode(renderer)) {
+        return;
     }
 
-    static desandbox(data: string | object | Function, options?: { immediate?: boolean, name?: string }): string {
-        const script = document.createElement('script');
-        const name = options?.name || this.randomString(8, Alphabet.LOWERCASE);
-
-        switch(typeof data) {
-            case 'string':
-                script.innerHTML = data;
-                break;
-
-            case 'object':
-                script.innerHTML = `window.${name} = ${JSON.stringify(data)};`;
-                break;
-
-            case 'function':
-                script.innerHTML = `window.${name} = ${data.toString()};`;
-                if (options?.immediate) {
-                    script.innerHTML += `window.${name}();`;
-                }
-                break;
-        }
+    stateStore.setRenderer(newRenderer)
+    renderer = newRenderer;
+}
 
-        script.innerHTML = `
-            try {
-                ${script.innerHTML}
-            }
-            catch(e) {
-                console.error(e);
-            }
-        `
+export function desandbox(data: string | object | Function, options?: { immediate?: boolean, name?: string }): string {
+    const script = document.createElement('script');
+    const name = options?.name || randomString(8, Alphabet.LOWERCASE);
+
+    switch(typeof data) {
+        case 'string':
+            script.innerHTML = data;
+            break;
 
-        document.body.appendChild(script);
-        script.remove();
+        case 'object':
+            script.innerHTML = `window.${name} = ${JSON.stringify(data)};`;
+            break;
 
-        return `window.${name}`;
+        case 'function':
+            script.innerHTML = `window.${name} = ${data.toString()};`;
+            if (options?.immediate) {
+                script.innerHTML += `window.${name}();`;
+            }
+            break;
     }
 
-    static randomString(length: number, alphabet?: Alphabet) {
-        let result = '';
-        const chars = alphabet || Alphabet.ASCII;
-        for (let i = 0; i < length; i++) {
-            result += chars.charAt(Math.floor(Math.random() * length));
+    script.innerHTML = `
+        try {
+            ${script.innerHTML}
+        }
+        catch(e) {
+            console.error(e);
         }
+    `
 
-        return result;
-    }
+    document.body.appendChild(script);
+    script.remove();
 
-    static observe(element: Element, mutationType: MutationRecordType, nodeType: number, callback: (mutation: MutationRecord, node: Node) => void) {
-        const observer = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.type === mutationType) {
-                    mutation.addedNodes.forEach(node => {
-                        if (node.nodeType === nodeType) {
-                            callback(mutation, node);
-                        }
-                    });
-                }
-            });
-        });
+    return `window.${name}`;
+}
 
-        observer.observe(element, {
-            childList: mutationType === 'childList',
-            attributes: mutationType === 'attributes',
-            characterData: mutationType === 'characterData'
-        });
+export function randomString(length: number, alphabet?: Alphabet) {
+    let result = '';
+    const chars = alphabet || Alphabet.ASCII;
+    for (let i = 0; i < length; i++) {
+        result += chars.charAt(Math.floor(Math.random() * length));
     }
 
-    static parent(element: Element, amount: number) {
-        let it = element;
-        for (let i = 0; i < amount; i++) {
-            if (it.parentElement) {
-                it = it.parentElement;
-            }
-            else {
-                return null;
+    return result;
+}
+
+export function observeAddedNodes(element: Element, mutationType: MutationRecordType, nodeType: number, callback: (mutation: MutationRecord, node: Node) => void) {
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            if (mutation.type === mutationType) {
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === nodeType) {
+                        callback(mutation, node);
+                    }
+                });
             }
-        }
+        });
+    });
 
-        return it;
-    }
+    observer.observe(element, {
+        childList: mutationType === 'childList',
+        attributes: mutationType === 'attributes',
+        characterData: mutationType === 'characterData'
+    });
+}
 
-    static lerp(a: number, b: number, time: number) {
-        return a + (b - a) * time;
+export function parent(element: Element, amount: number) {
+    let it = element;
+    for (let i = 0; i < amount; i++) {
+        if (it.parentElement) {
+            it = it.parentElement;
+        }
+        else {
+            return null;
+        }
     }
+
+    return it;
+}
+
+export function lerp(a: number, b: number, time: number) {
+    return a + (b - a) * time;
+}
+
+export function asyncEffect(fn: () => Promise<void>, deps: DependencyList) {
+    return useEffect(() => {fn()}, deps);
+}
+
+export function clamp(val: number, min: number, max: number) {
+    return Math.min(Math.max(val, min), max);
 }
 
 export enum Alphabet {

diff --git a/modules/main/src/components/CodecComponent.ts b/modules/main/src/components/CodecComponent.ts
@@ -1,8 +1,9 @@
 import { Config } from '../../../shared/Config';
 import Logger from '../../../shared/Logger';
-import { onPageChanged } from '../events/PageChangeEvent';
-import Util from '../Util';
-import { StadiaCodec } from '../../../shared/models/StadiaCodec';
+import { useEffect } from 'react';
+import { StadiaPage } from '../StadiaPage';
+import { asyncEffect } from '../Util';
+import { WithStore } from '../state/StateStore';
 
 type StadiaCodecData = {
     h264?: 'ExternalDecoder'
@@ -11,9 +12,11 @@ type StadiaCodecData = {
     'vp9-profile2'?: 'SoftwareDecoder' | 'libvpx'
 }
 
-const CodecComponent = () => {
-    onPageChanged(async event => {
-        if (event.page !== 'player') {
+const CodecComponent = (props: WithStore<{}>) => {
+    const { page } = props.store;
+
+    asyncEffect(async () => {
+        if (page !== 'player') {
             return;
         }
 
@@ -47,7 +50,9 @@ const CodecComponent = () => {
             }
         }, 1000)
         Logger.info(`Using codec '${codec}'`);
-    });
+    }, [page]);
+
+    return null;
 }
 
 export default CodecComponent;
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,6 +49,9 @@ @@
                 ],
                 "js": [
                     "dist/main/index.js"
+                ],
+                "css": [
+                    "dist/main/index.css"
                 ]
             }
         ],
@@ Expand Down @@