v1.0.1

main/application.ts

@@ -1,4 +1,4 @@
-import { app as ElectronApp, BrowserWindow, dialog } from "electron";
+import { app as ElectronApp, BrowserWindow, dialog, screen } from "electron";
 import serve from "electron-serve";
 import Store from "electron-store";
 import Debug from "debug";
@@ -282,15 +282,12 @@ export default class Application {
       title: "XStreaming",
       backgroundColor: "rgb(26, 27, 30)",
     };
-
-    // Fullscreen
-    // if(this._startupFlags.fullscreen === true){
-    //     windowOptions.fullscreen = true
-    // }
+    const screenWidth = screen.getPrimaryDisplay().workAreaSize.width;
+    const screenHight = screen.getPrimaryDisplay().workAreaSize.height;
 
     this._mainWindow = createWindow("main", {
-      width: 1280,
-      height: 800,
+      width: screenWidth,
+      height: screenHight,
       ...windowOptions,
     });
 

main/helpers/create-window.ts

@@ -70,7 +70,7 @@ export default (windowName: string, options: BrowserWindowConstructorOptions): B
 
     const browserOptions: BrowserWindowConstructorOptions = {
         ...options,
-        ...state,
+        // ...state,
         webPreferences: {
             // nodeIntegration: true,
             // contextIsolation: false,

main/ipc/app.ts

@@ -1,14 +1,5 @@
 import IpcBase from "./base";
 import { session } from "electron";
-import electron from "electron";
-
-interface setForceRegionIpArgs {
-  ip: string;
-}
-
-interface setPreferredGameLanguageArgs {
-  language: string;
-}
 
 export default class IpcApp extends IpcBase {
   // _streamingSessions:any = {}
@@ -127,4 +118,19 @@ export default class IpcApp extends IpcBase {
       resolve({});
     });
   }
+
+  toggleFullscreen() {
+    return new Promise((resolve) => {
+      const isFullScreen = this._application._mainWindow.isFullScreen();
+      this._application._mainWindow.setFullScreen(!isFullScreen);
+      resolve({})
+    });
+  }
+
+  exitFullscreen() {
+    return new Promise((resolve) => {
+      this._application._mainWindow.setFullScreen(false);
+      resolve({})
+    });
+  }
 }

main/ipc/xcloud.ts

@@ -3,10 +3,6 @@ import Application from '../application'
 import TitleManager from '../helpers/titlemanager'
 import xCloudApi from '../helpers/xcloudapi'
 
-interface getTitleArgs {
-    titleId: string;
-}
-
 export default class IpcxCloud extends IpcBase {
 
     _titleManager:TitleManager
@@ -55,7 +51,10 @@ export default class IpcxCloud extends IpcBase {
     }
 
     setXhomeTokenDefault(name: string) {
-        this._application.streamingTokens.xHomeToken.setDefaultRegion(name)
+        return new Promise(resolve => {
+            this._application.streamingTokens.xHomeToken.setDefaultRegion(name)
+            resolve(null)
+        })
     }
 
     getXcloudToken() {
@@ -70,9 +69,12 @@ export default class IpcxCloud extends IpcBase {
     }
 
     setXcloudTokenDefault(name: string) {
-        if (this._application.streamingTokens.xCloudToken) {
-            this._application.streamingTokens.xCloudToken.setDefaultRegion(name)
-        }
+        return new Promise(resolve => {
+            if (this._application.streamingTokens.xCloudToken) {
+                this._application.streamingTokens.xCloudToken.setDefaultRegion(name)
+            }
+            resolve({})
+        })
     }
 
     getTitles() {

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "xstreaming",
   "description": "xstreaming",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Geocld <[email protected]>",
   "main": "app/background.js",
   "scripts": {
@@ -37,7 +37,7 @@
     "uplot": "^1.6.30",
     "uuid-1345": "^1.0.2",
     "xbox-webapi": "^1.4.1",
-    "xstreaming-player": "^0.2.0",
+    "xstreaming-player": "^0.2.1",
     "xvfb-maybe": "^0.2.1"
   },
   "devDependencies": {

renderer/common/settings.ts

@@ -51,6 +51,16 @@ const getSettingsMetas = (t) => {
           {value: 'zh-TW', label: '繁體中文'},
         ],
       },
+      // {
+      //   name: 'theme',
+      //   type: 'radio',
+      //   title: t('Theme'),
+      //   description: t('Set the app theme'),
+      //   data: [
+      //     {value: 'dark', label: t('Dark')},
+      //     {value: 'light', label: t('Light')},
+      //   ],
+      // },
     ],
     streaming: [
       {

renderer/components/ActionBar.tsx

@@ -7,6 +7,7 @@ import {
   DropdownMenu,
   DropdownItem,
 } from "@nextui-org/react";
+import Ipc from "../lib/ipc";
 
 function ActionBar(props) {
   const { t } = useTranslation('cloud');
@@ -19,6 +20,13 @@ function ActionBar(props) {
     window.addEventListener("mousemove", mouseEvent);
     window.addEventListener("mousedown", mouseEvent);
 
+    const escEvent = (event) => {
+      if (event.key === 'Escape') {
+        Ipc.send('app', 'exitFullscreen')
+      }
+    }
+    window.addEventListener('keydown', escEvent)
+
     const mouseInterval = setInterval(() => {
       const gamebarElement = document.getElementById("actionBar");
       if (gamebarElement === null) {
@@ -38,11 +46,17 @@ function ActionBar(props) {
 
     return () => {
       if (mouseInterval) clearInterval(mouseInterval);
+
+      window.removeEventListener("mousemove", mouseEvent);
+      window.removeEventListener("mousedown", mouseEvent);
+      window.removeEventListener('keydown', escEvent)
     };
   }, []);
 
   const handleDisconnect = () => {
     props.onDisconnect && props.onDisconnect();
+
+    Ipc.send('app', 'exitFullscreen');
   };
 
   const handleTogglePerformance = () => {
@@ -61,6 +75,10 @@ function ActionBar(props) {
     props.onLongPressNexus && props.onLongPressNexus();
   };
 
+  const handleToggleFullscreen = () => {
+    Ipc.send('app', 'toggleFullscreen')
+  }
+
   return (
     <div id="actionBar">
       <Dropdown>
@@ -82,6 +100,9 @@ function ActionBar(props) {
           <DropdownItem key="longPressNexus" onClick={handleLongPressNexus}>
             {t("Long press Nexus")}
           </DropdownItem>
+          <DropdownItem key="fullscreen" onClick={handleToggleFullscreen}>
+            {t("Toggle fullscreen")}
+          </DropdownItem>
           <DropdownItem
             key="disconnect"
             className="text-danger"

renderer/components/Nav.tsx

@@ -55,7 +55,7 @@ const Nav = ({ current, isLogined }) => {
   }
 
   return (
-    <Navbar isBordered style={{ justifyContent: "flex-start", zIndex: 100 }}>
+    <Navbar isBordered maxWidth="full" style={{ justifyContent: "flex-start", zIndex: 100 }}>
       <NavbarBrand className="grow-0">
         <p className="font-bold text-inherit pr-20">XStreaming</p>
       </NavbarBrand>

renderer/components/SettingItem.tsx

@@ -21,7 +21,14 @@ const SettingItem = (props) => {
   const [defaultValue, setDefaultValue] = useState(settings[item.name]);
 
   useEffect(() => {
-    setDefaultValue(settings[item.name])
+    if (item.name === 'theme') {
+      const localTheme = localStorage.getItem('theme') || 'dark'
+      console.log('localTheme:', localTheme)
+      setDefaultValue(localTheme)
+    } else {
+      setDefaultValue(settings[item.name])
+    }
+
     if (item.name === "signaling_cloud" || item.name === "signaling_home") {
       const method =
         item.name === "signaling_cloud" ? "getXcloudToken" : "getXhomeToken";
@@ -56,6 +63,8 @@ const SettingItem = (props) => {
             ? "setXcloudTokenDefault"
             : "setXhomeTokenDefault";
         Ipc.send("xCloud", method, value);
+      } else if (key === 'theme') {
+        localStorage.setItem('theme', value)
       } else {
         setSettings({
           ...settings,
@@ -97,7 +106,7 @@ const SettingItem = (props) => {
           {item.type === "radio" && (
             <RadioGroup
               orientation="horizontal"
-              defaultValue={defaultValue}
+              value={defaultValue}
               onValueChange={(value) => {
                 handleChangeSetting(value);
               }}

renderer/pages/[locale]/home.tsx

@@ -7,6 +7,7 @@ import {
   Divider,
   Chip,
 } from "@nextui-org/react";
+import { useTheme } from "next-themes";
 import { useTranslation } from "next-i18next";
 import { useRouter } from 'next/router';
 import Layout from "../../components/Layout";
@@ -23,6 +24,7 @@ function Home() {
   const { t, i18n: {language: locale} } = useTranslation('home');
 
   const router = useRouter();
+  const { setTheme } = useTheme();
   const [loading, setLoading] = useState(false);
   const [loadingText, setLoadingText] = useState("");
   const [isLogined, setIsLogined] = useState(false);
@@ -32,6 +34,10 @@ function Home() {
   const authInterval = useRef(null);
 
   useEffect(() => {
+    const theme = localStorage.getItem('theme');
+    if (theme === 'light') {
+      setTheme('xbox-light')
+    }
     setLoading(true);
     setLoadingText(t("Loading..."));
 
@@ -91,7 +97,7 @@ function Home() {
     return () => {
       if (authInterval.current) clearInterval(authInterval.current);
     };
-  }, [t]);
+  }, [t, setTheme]);
 
   const handleLogin = () => {
     setLoading(true);

renderer/pages/_app.tsx

@@ -42,7 +42,7 @@ const  App = ({ Component, pageProps }) => {
 
   return (
     <NextUIProvider>
-      <NextThemesProvider attribute="class" defaultTheme="xbox">
+      <NextThemesProvider attribute="class" defaultTheme={'xbox'}>
         <UserProvider>
           <Component {...pageProps} />
         </UserProvider>

renderer/public/locales/en/cloud.json

@@ -6,6 +6,7 @@
   "Toggle Performance": "Toggle Performance",
   "Toggle Virtual Gamepad": "Toggle Virtual Gamepad",
   "Press Nexus": "Press Nexus",
+  "Toggle fullscreen": "Toggle fullscreen",
   "Display settings": "Display settings",
   "Long press Nexus": "Long press Nexus",
   "Disconnect": "Disconnect",

renderer/public/locales/en/settings.json

@@ -17,6 +17,10 @@
   "Others": "Others",
   "Enable": "Enable",
   "Disable": "Disable",
+  "Theme": "Theme",
+  "Set the app theme": "Set the app theme",
+  "Dark": "Dark",
+  "Light": "Light",
   "Gamepad tester": "Gamepad tester",
   "Gamepad mapping": "Gamepad mapping",
   "Mapping key of gamepad": "Mapping key of gamepad",

renderer/public/locales/zh/cloud.json

@@ -9,6 +9,7 @@
   "Press Nexus": "按下西瓜键",
   "Long press Nexus": "长按西瓜键",
   "Display settings": "画面设置",
+  "Toggle fullscreen": "进入/退出全屏",
   "Disconnect": "断开连接",
   "Display": "画面",
   "Sharpness": "锐化",

renderer/public/locales/zh/settings.json

@@ -17,6 +17,10 @@
   "Others": "其他",
   "Enable": "开",
   "Disable": "关",
+  "Theme": "主题",
+  "Set the app theme": "设置应用主题",
+  "Dark": "暗黑",
+  "Light": "明亮",
   "Gamepad tester": "手柄测试",
   "Gamepad mapping": "手柄映射",
   "Mapping key of gamepad": "映射手柄按键",

renderer/tailwind.config.js

@@ -33,6 +33,24 @@ module.exports = {
             foreground: "#ffffff",
           },
         }
+      },
+      "xbox-light": {
+        extend: "light",
+        colors: {
+          primary: {
+            50: "#DCF8CD",
+            100: "#DCF8CD",
+            200: "#B3F19D",
+            300: "#7AD766",
+            400: "#47B03D",
+            500: "#107C10",
+            600: "#0B6A13",
+            700: "#085916",
+            800: "#054716",
+            900: "#033B16",
+            DEFAULT: "#107C10",
+          },
+        }
       }
     }
   })]