From 78a437d45d14f14767a51d2495fd6b5b4802d33b Mon Sep 17 00:00:00 2001 From: Petr Vecera Date: Mon, 15 Apr 2024 22:16:59 +0200 Subject: [PATCH] Fix streamer overlay port change & support for Twitch Studio (#313) * Fix the desktop app * Update desktop app * Run prettier * Update version and package lock --- package.json | 3 ++- packages/app/package.json | 4 +++- packages/app/src/main/streamerOverlay/index.ts | 12 +++++++++--- packages/app/src/main/streamerOverlay/renderHtml.tsx | 11 ++++++++++- packages/app/src/renderer/windows/settings/app.tsx | 12 +++++++++--- packages/web/src/components/main-footer.tsx | 2 +- packages/web/src/pages/desktop-app/desktop-app.tsx | 6 +++--- yarn.lock | 7 ++++++- 8 files changed, 43 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 020789d8..c0a88e24 100644 --- 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 index af52069b..80e218fb 100644 --- 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 index 5af596e7..75c18163 100644 --- 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 index 2aae4de1..fbfbf4a7 100644 --- 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 => { - CoH2 Game Stats Streamer Overlay + COH2 Game Stats Streamer Overlay +
diff --git a/packages/app/src/renderer/windows/settings/app.tsx b/packages/app/src/renderer/windows/settings/app.tsx index 40931c8a..8d92998e 100644 --- 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 ( <> @@ -515,12 +521,12 @@ const App = (): JSX.Element => { Math.round(value) + ""} parser={(value) => Number.parseInt(value, 10)} - onChange={handleStreamModePortChange} + onChange={debouncedHandleStreamModePortChange} />
{" => URL: http://localhost:" + settings.streamOverlayPort} diff --git a/packages/web/src/components/main-footer.tsx b/packages/web/src/components/main-footer.tsx index b6a31dfe..af2188da 100644 --- 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 = () => {
See about page for more info.
- © 2023 COH2stats.com + © 2024 COH2stats.com
{"GitHub diff --git a/packages/web/src/pages/desktop-app/desktop-app.tsx b/packages/web/src/pages/desktop-app/desktop-app.tsx index 76a87f73..854f84e0 100644 --- 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 = () => {
  • Game results prediction based on map analysis
  • Loads automatically when joining a new game
  • Twitch stream overlay extension
    • -
  • Streamer mode with OBS support
    • +
  • Streamer mode with OBS and Twitch Studio support

    • @@ -203,8 +203,8 @@ const DesktopApp: React.FC = () => {

    - 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{" "}