Implement support for microphone #365 #786 [build]

Implement partial mouse implementation for apps like Edge

main/helpers/xcloudapi.ts

@@ -468,7 +468,7 @@ export default class xCloudApi {
                    },
                    "input":{
                       "minVersion":1,
-                      "maxVersion":7
+                      "maxVersion":8
                    },
                    "message":{
                       "minVersion":1,

package.json

@@ -28,7 +28,7 @@
     "github-url-to-object": "^4.0.6",
     "uplot": "^1.6.24",
     "xbox-webapi": "^1.4.1",
-    "xbox-xcloud-player": "0.2.0-beta7"
+    "xbox-xcloud-player": "0.2.0-beta10"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",

renderer/components/ui/button.tsx

@@ -3,14 +3,16 @@ import Link from 'next/link';
 
 interface ButtonProps {
   label: string;
+  icon?: string;
   title?: string;
   disabled?: boolean;
   className?: string;
-  onClick?: () => void;
+  onClick?: (e) => void;
 }
 
 function Button({
   label,
+  icon,
   title,
   disabled,
   className,
@@ -25,7 +27,14 @@ function Button({
 
   return (
     <React.Fragment>
-        <button className={className} title={title} onClick={onClick} disabled={disabled}>{label}</button>
+        <button className={className} title={title} onClick={onClick} disabled={disabled} style={(icon) ? {
+          backgroundImage: `url(${icon})`,
+          backgroundRepeat: 'no-repeat, no-repeat',
+          backgroundPosition: 'left 10px bottom  50%',
+          backgroundSize: 18,
+          paddingLeft: 35,
+          // height: 41,
+        }:{}}>{label}</button>
     </React.Fragment>
   );
 };

renderer/components/ui/streamcomponent.tsx

@@ -1,6 +1,3 @@
-import { ipcRenderer } from 'electron'
-import Link from 'next/link'
-import Router from 'next/router'
 import React from 'react'
 import Button from './button'
 import xPlayer from 'xbox-xcloud-player'
@@ -11,7 +8,7 @@ import uPlot from 'uplot'
 interface StreamComponentProps {
   hidden?: boolean;
   onDisconnect?: () => void;
-  onMenu?: () => void;
+  onMenu?: (e) => void;
   xPlayer: xPlayer;
 }
 
@@ -28,6 +25,8 @@ function StreamComponent({
   let debugElement = document.getElementById('component_streamcomponent_debug')
   let webRtcStatsInterval
 
+  const [micStatus, setMicStatus] = React.useState(false);
+
   let jitterData = [new Float32Array([performance.now()]), new Float32Array([0.0])]
   let droppedData = [new Float32Array([performance.now()]), new Float32Array([0.0]), new Float32Array([0.0])]
   let framesDroppedBaseline = 0
@@ -195,6 +194,16 @@ function StreamComponent({
     };
   }, []);
 
+  function toggleMic(){
+    if(xPlayer.getChannelProcessor('chat').isPaused === true){
+      xPlayer.getChannelProcessor('chat').startMic()
+      setMicStatus(true)
+    } else {
+      xPlayer.getChannelProcessor('chat').stopMic()
+      setMicStatus(false)
+    }
+  }
+
   function streamDisconnect(){
     // ipcRenderer.send('stream', {
     //   type: 'stop_stream'
@@ -237,14 +246,26 @@ function StreamComponent({
 
         <div id="component_streamcomponent_gamebar">
           <div id="component_streamcomponent_gamebar_menu">
-            <Button label="Disconnect" className='btn-cancel' onClick={ () => { streamDisconnect() } }></Button>
-            <Button label="Menu" onClick={ onMenu }></Button>
+          <div style={{
+              width: '25%'
+            }}>
+              <Button label="Disconnect" className='btn-cancel' onClick={ () => { streamDisconnect() } }></Button>
+            </div>
 
             <div style={{
               marginLeft: 'auto',
-              marginRight: 20
+              marginRight: 'auto'
+            }}>
+              <Button label="Menu" onClick={ (e) => { e.target.blur(); onMenu(e) }}></Button> &nbsp;
+              <Button label='Mic' icon={ (micStatus === false) ? '/images/icons/muted.png' : '/images/icons/unmuted.png' } className={ (micStatus === false) ? 'btn-cancel' : 'btn-primary' } onClick={ (e) => { e.target.blur(); toggleMic() }}></Button>
+            </div>
+
+            <div style={{
+              marginRight: 20,
+              width: '25%',
+              textAlign: 'right'
             }}>
-              <Button label="Debug" onClick={ () => { toggleDebug() } }></Button>
+              <Button label="Debug" onClick={ (e) => { e.target.blur(); toggleDebug() } }></Button>
             </div>
           </div>
         </div>

yarn.lock

@@ -11889,10 +11889,10 @@ xbox-webapi@^1.4.1:
     express "^4.17.1"
     uuid4 "^2.0.2"
 
-[email protected]beta7:
-  version "0.2.0-beta7"
-  resolved "https://registry.yarnpkg.com/xbox-xcloud-player/-/xbox-xcloud-player-0.2.0-beta7.tgz#bbcad4580f5b862503d159952e5dd4b1a5a550d7"
-  integrity sha512-xqK8boN0MJ8q8NKtItT9E50r2DuUxa1CYFKyu7tdnjKXucoKZHY/83E06Kn8nc1Vyws0nvdLxsuS62PjqfgkTg==
+[email protected]beta10:
+  version "0.2.0-beta10"
+  resolved "https://registry.yarnpkg.com/xbox-xcloud-player/-/xbox-xcloud-player-0.2.0-beta10.tgz#609b83124a24cb659ceeebad367f77e4e9fb5cc3"
+  integrity sha512-1YXCa5/qD7Jr7FaozW7nosl1qylyns/VjbekLm3567/erlsBXfFPyB7pv2AQtgJMBMfa4LPmNSZpr2wH1/TtTg==
 
 xmlbuilder@>=11.0.1, xmlbuilder@^15.1.1:
   version "15.1.1"