fix

README.md

@@ -1,82 +1,40 @@
+# Pixel Streaming with Nextjs & MUI5
+[![npm](https://img.shields.io/npm/v/pixel-streaming.svg)](https://npmjs.com/package/ccxt) [![Discord](https://img.shields.io/discord/952562085848567830?logo=discord&logoColor=white)](https://discord.gg/ccxt) [![Twitter Follow](https://img.shields.io/twitter/follow/unrealos.svg?style=social&label=MetaEditor)](https://twitter.com/metaunreal)
 
-# Pixel Streaming Reactjs plugin for Unreal Engine 5.2
+Welcome to this demo implementation of the pixel-streaming library for Nextjs, complete with the popular Material theme already configured! By using this implementation, you are just one step away from launching a fully functional Unreal Engine project right in your web interface.
 
 ## Installation
-Install with npm:
-```shell
-npm install rsuite pixel-streaming --save
-```
-Install with yarn:
-```shell
-yarn add rsuite pixel-streaming
-```
 
-## Links:
-* [Online Player](https://player.metaeditor.io)
-* [CodeSandBox](https://codesandbox.io/s/pixel-streaming-react-xldl33)
-* [Nextjs Sample](https://github.com/markolofsen/metaeditor/blob/main/INSTALLATION.md)
-* [Signalling Server App](https://github.com/markolofsen/metaeditor/releases/tag/signaling-server)
-* [Plugin for Unreal Engine](https://github.com/markolofsen/metaplugin-pixel-streaming)
-* [Documentation](https://metaeditor.io/docs)
-* [Discord Community](https://discordapp.com/invite/eGHKuQ3BHM)
+[Make a fork](https://github.com/markolofsen/metaeditor/fork) —  it's more convenient!
 
+```bash
+git clone https://github.com/markolofsen/metaeditor.git
 
-## Usage
-```typescript
-import "rsuite/dist/rsuite.min.css";
-import { ButtonGroup, Button } from "rsuite";
-import { MetaProvider, MetaEditor, Hooks } from "pixel-streaming";
+cd ./metaeditor
+yarn && yarn dev
+yarn start
+```
 
-const PlayerView = () => {
-  const { emitUi } = Hooks.actions();
+## 
 
-  return (
-    <MetaEditor
-      debugMode="on"
-      showToolbar={true}
-      psHost="ws://127.0.0.1:80"
-      psConfig={{
-        // https://metaeditor.io/docs/metaeditor/settings/player
-      }}
-    >
-      <Button onClick={() => emitUi({ action: "ui_command" })}>
-        Send action
-      </Button>
-    </MetaEditor>
-  );
-};
 
-export default function AppHOC() {
-  return (
-    <MetaProvider>
-      <PlayerView />
-    </MetaProvider>
-  );
-}
-```
+## Links
+
+* [Documentation](https://metaeditor.io/docs) — Pixel Streaming by MetaEditor
+* [Demo](https://unrealos.com/demo/) — Unreal Engine demonstration with Pixel Streaming
+* [Pixel Streaming Reactjs](https://www.npmjs.com/package/pixel-streaming) — Npm module
+* [Online Player](https://player.metaeditor.io) — Online player to access your local project
+* [Unreal Engine Project](https://drive.google.com/file/d/1krBII0i-ha7_wBVW8DW9UvG5VvdH8kch/view?usp=share_link) — Compiled Unreal Engine project with plugin installed
 
 
-## About Pixel Streaming for Unreal Engine
-Pixel streaming is a powerful technology that enables remote rendering and streaming of real-time 3D graphics to any device, anywhere in the world. It has many applications, including online gaming, remote work, and virtual events. However, setting up a pixel streaming environment can be challenging, especially for those who are not familiar with complex server configurations and network setups.
-This library provides a simple and easy-to-use solution for streaming real-time 3D content over the internet. It allows users to set up a pixel streaming server with just a few clicks, and then stream the content to any device with a compatible web browser.
-The Pixel Streaming Plugin for Unreal Engine can save developers a significant amount of time and effort when it comes to configuring a pixel streaming environment. This is because the library comes with pre-built configurations and settings that work out of the box, meaning developers don't need to spend time tinkering with complex server configurations or network setups.
-One of the key benefits of using the Pixel Streaming Plugin is that it eliminates the need for users to install any additional software or plugins on their devices. All they need is a compatible web browser and an internet connection, and they can access the streaming content from anywhere in the world.
-<p align="center">
-  <img src="https://metaeditor.io/assets/preview.png?v=1" width="100%" title="Pixel Streaming">
-</p>
+## Social
 
-### Attention!
-- React `18.1.0`
-- Node `16.*`
+- [Follow us on Twitter](https://twitter.com/metaunreal)
+- <sub>[![Discord](https://img.shields.io/discord/952562085848567830?logo=MetaEditor&logoColor=white)](https://discord.gg/eGHKuQ3BHM)</sub>
+- [MetaEditor Chat on Telegram](https://t.me/unrealos) (technical support)
 
-### Built With
-- [React](https://reactjs.org/) — A JavaScript library for building user interfaces
-- [MetaEditor](https://metaeditor.io/) — Complete set of tools for professional developing and running the Unreal Engine’s Applications in browsers.
-- [Unreal Engine Pixel Streaming](https://docs.unrealengine.com/5.1/en-US/pixel-streaming-in-unreal-engine/) — Library for Unreal Engine.
-- [React Suite](https://www.npmjs.com/package/rsuite) — Set of react component libraries for enterprise system products.
 
-## Thank you!
-[Github profile](https://github.com/markolofsen)
+## Contact Us
 
-## License
-Pixel Streaming for React.js is licensed under the [MIT License](https://github.com/markolofsen/metaeditor/blob/main/LICENSE.md).
+For business inquiries:  [[email protected]](mailto:[email protected])
+Made by [Unrealos](https://unrealos.com)

src/views/Player/UserBar/index.tsx

@@ -60,7 +60,7 @@ export default function UserBar() {
 
   // render
   const isMuted = stream.state.playerConfig?.psConfig.startMuted
-  const disabled = !stream.isWebrtcConnected
+  const show = stream.isWebrtcConnected
 
   const list = [
     {
@@ -86,14 +86,15 @@ export default function UserBar() {
     },
   ]
 
+  if (!show) return null
+
   return (
     <Portal container={window.player?.rootElement}>
       <ToolsList>
         {list.map((item, index) => (
           <li key={index}>
             <Tooltip title={item.title} placement="left">
               <IconButton
-                disabled={disabled}
                 onClick={item.onClick}
                 color="inherit">
                 {item.icon}