Fix streamer overlay port change & support for Twitch Studio (#313)

* Fix the desktop app * Update desktop app * Run prettier * Update version and package lock
cohstats · Apr 15, 2024 · 78a437d · 78a437d
1 parent 10e12fe
commit 78a437d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,8 @@
     "lint:prettier": "prettier --check .",
     "react-spring-issue-1078": "find node_modules -path \\*@react-spring/\\*/package.json -exec sed -i.bak 's/\"sideEffects\": false/\"sideEffects\": true/g' {} +",
     "clean": "rm -fr node_modules && rm -fr packages/web/node_modules && rm -fr packages/app/node_modules",
-    "reinstall": "yarn run clean && yarn install"
+    "reinstall": "yarn run clean && yarn install",
+    "test-build": "yarn workspace @coh2stats/web build && yarn workspace @coh2stats/app make"
   },
   "version": "0.1.2",
   "description": "FB Project for COH2 ladders",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@coh2stats/app",
   "productName": "Coh2 Game Stats",
-  "version": "1.5.2",
+  "version": "1.5.15",
   "description": "Displays stats of players in the current Coh2 game",
   "main": ".webpack/main",
   "private": true,
@@ -28,6 +28,7 @@
     "@electron-forge/maker-zip": "7.4.0",
     "@electron-forge/plugin-webpack": "7.4.0",
     "@types/sound-play": "1.1.0",
+    "@types/lodash": "4.17.0",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/react-redux": "7.1.22",
@@ -58,6 +59,7 @@
     "firebase": "9.14.0",
     "javascript-time-ago": "2.5.9",
     "mixpanel": "0.18.0",
+    "lodash": "4.17.21",
     "node-machine-id": "1.1.12",
     "react": "17.0.2",
     "react-country-flag": "3.0.2",

diff --git a/packages/app/src/main/streamerOverlay/index.ts b/packages/app/src/main/streamerOverlay/index.ts
@@ -31,10 +31,15 @@ export class StreamerOverlay {
     const settings = this.applicationStore.getState().settings;
     if (settings.streamOverlay) {
       if (this.running && this.currentPort !== settings.streamOverlayPort) {
+        console.debug(
+          `Stream overlay - change of port - Starting stream overlay server on port ${settings.streamOverlayPort}`,
+        );
         this.stop();
         this.start();
-      }
-      if (!this.running) {
+      } else if (!this.running) {
+        console.debug(
+          `Stream overlay not running - Starting stream overlay server on port ${settings.streamOverlayPort}`,
+        );
         this.start();
       }
       if (this.running) {
@@ -56,7 +61,7 @@ export class StreamerOverlay {
         app.use("/antd", express.static(getAntdDistPath()));
         app.use("/", this.renderPage);
         this.expressServer = app.listen(port, () => {
-          console.log("Stream overlay server is running!");
+          console.log(`Stream overlay server is running! http://localhost:${port}`);
         });
         this.socketIoServer = new socketIo.Server(this.expressServer);
         this.socketIoServer.on("connection", (socket) => {
@@ -106,6 +111,7 @@ export class StreamerOverlay {
 
   protected stop(): void {
     if (this.running) {
+      console.debug(`Stopping stream overlay server on port ${this.currentPort}`);
       this.socketIoServer.close();
       this.expressServer.close();
     }

diff --git a/packages/app/src/main/streamerOverlay/renderHtml.tsx b/packages/app/src/main/streamerOverlay/renderHtml.tsx
@@ -11,8 +11,17 @@ export const renderHtml = (state: ApplicationState): string => {
         <head>
           <meta charSet="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <title>CoH2 Game Stats Streamer Overlay</title>
+          <title>COH2 Game Stats Streamer Overlay</title>
           <link rel="stylesheet" href={"/antd/antd.dark.min.css"} />
+          <style>
+            {`
+              body {
+                background-color: rgba(0, 0, 0, 0);
+                margin: 0px auto;
+                overflow: hidden;
+              }
+            `}
+          </style>
         </head>
         <body>
           <div dangerouslySetInnerHTML={{ __html: content }} />

diff --git a/packages/app/src/renderer/windows/settings/app.tsx b/packages/app/src/renderer/windows/settings/app.tsx
@@ -10,13 +10,14 @@ import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { StreamOverlayPositions } from "../../../redux/state";
 import { actions, selectSettings } from "../../../redux/slice";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { events, firebaseInit } from "../../firebase/firebase";
 import { Helper } from "@coh2stats/shared/src/components/helper";
 import { Collapse, Divider, Result, Slider, Spin, Steps, Tooltip, Typography } from "antd";
 import { ExclamationCircleOutlined, LoadingOutlined } from "@ant-design/icons";
 import WindowTitlebar from "../../titlebar/window-titlebar";
 import config from "../../../main/config";
+import { debounce } from "lodash";
 
 const { Text } = Typography;
 
@@ -122,6 +123,11 @@ const App = (): JSX.Element => {
     setTwitchEPassword(event.target.value);
   };
 
+  const debouncedHandleStreamModePortChange = useCallback(
+    debounce(handleStreamModePortChange, 1000),
+    [],
+  );
+
   return (
     <>
       <WindowTitlebar windowName="settings" cantMaximize>
@@ -515,12 +521,12 @@ const App = (): JSX.Element => {
               <Form.Item label={"Streamer view server port"}>
                 <InputNumber
                   disabled={!settings.streamOverlay}
-                  min={0}
+                  min={1024}
                   max={65535}
                   value={settings.streamOverlayPort}
                   formatter={(value) => Math.round(value) + ""}
                   parser={(value) => Number.parseInt(value, 10)}
-                  onChange={handleStreamModePortChange}
+                  onChange={debouncedHandleStreamModePortChange}
                 />
                 <br />
                 {" => URL: http://localhost:" + settings.streamOverlayPort}

diff --git a/packages/web/src/components/main-footer.tsx b/packages/web/src/components/main-footer.tsx
@@ -19,7 +19,7 @@ export const MainFooter: React.FC = () => {
       <br />
       See <RouterLink to={"/about"}>about page</RouterLink> for more info.
       <br />
-      © 2023 COH2stats.com
+      © 2024 COH2stats.com
       <br />
       <a href={"https://github.com/cohstats/coh2stats"} target="_blank" rel="noopener noreferrer">
         <img width={30} height={30} src={"/resources/github-dark.png"} alt={"GitHub Logo"} />

diff --git a/packages/web/src/pages/desktop-app/desktop-app.tsx b/packages/web/src/pages/desktop-app/desktop-app.tsx
@@ -67,7 +67,7 @@ const DesktopApp: React.FC = () => {
                 <li>Game results prediction based on map analysis</li>
                 <li>Loads automatically when joining a new game</li>
                 <li>Twitch stream overlay extension</li>
-                <li>Streamer mode with OBS support</li>
+                <li>Streamer mode with OBS and Twitch Studio support</li>
               </ul>
               <br />
             </Col>
@@ -203,8 +203,8 @@ const DesktopApp: React.FC = () => {
                 </a>
               </div>
               <p style={{ fontSize: "20px" }}>
-                An easy to configure overlay for OBS that shows the players and their ranking when
-                in game. Learn more{" "}
+                An easy to configure overlay for OBS or Twitch Studio that shows the players and
+                their ranking when in game. Learn more{" "}
                 <Link
                   href={
                     "https://github.com/cohstats/coh2stats/blob/master/packages/app/README.md#stream-overlay"

diff --git a/yarn.lock b/yarn.lock
@@ -4651,6 +4651,11 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.5.tgz#1e78a3ac2428e6d7e6c05c1665c242023a4601d8"
   integrity sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==
 
+"@types/[email protected]":
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
+  integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
+
 "@types/long@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
@@ -12299,7 +12304,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==