Merge pull request #42 from markolofsen/dev

fix
markolofsen · Mar 30, 2023 · 7da4a76 · 7da4a76
2 parents cfd4e40 + e087ef5
commit 7da4a76
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/src/views/ConnectionForm/EmbedSample.tsx b/src/views/ConnectionForm/EmbedSample.tsx
@@ -17,26 +17,40 @@ export default function EmbedSample({ config }: Props) {
   const copy = useCopy()
 
   const preview = `
+import * as React from "react";
 import "rsuite/dist/rsuite.min.css";
 import { Button } from "rsuite";
-import { MetaProvider, MetaEditor, Hooks, IApplication } from "pixel-streaming";
+import { MetaProvider, MetaEditor, Hooks, Context } from 'pixel-streaming'
 
 const PlayerView = () => {
   const refPlayer = React.useRef(null)
-  const { emitUi } = Hooks.actions();
+  
+  // context
+  const global = Context.global()
+  const stream = Context.stream()
+
+  // hooks
+  const actions = Hooks.actions()
+  const events = Hooks.events()
+  const listener = Hooks.listener()
 
   return (
     <MetaEditor
       ref={refPlayer}
       debugMode="${config.debugMode}"
       showToolbar={${config.showToolbar}}
-      onLoad={(app: IApplication) => {
+      onLoad={() => {
         console.log('@'.repeat(30))
-        console.log('app', app)
+        console.dir(refPlayer.current)
+        console.dir(global) 
+        console.dir(stream)
+        console.dir(actions)
+        console.dir(events)
+        console.dir(listener)
       }}
       psHost="${decodeURIComponent(config.psHost)}"
       psConfig={${JSON.stringify(config.psConfig, null, 4).replace(/(?:\r\n|\r|\n)/g, '\n    ')}}>
-      <Button onClick={() => emitUi({ action: "ui_command" })}>
+      <Button onClick={() => actions.emitUi({ action: "ui_command" })}>
         Send action
       </Button>
     </MetaEditor>

diff --git a/src/views/Player/index.tsx b/src/views/Player/index.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 
 // libs
 import "rsuite/dist/rsuite.min.css";
-import { MetaProvider, MetaEditor, PlayerConfigProps } from 'pixel-streaming'
-import type { IApplication } from 'pixel-streaming'
+import { MetaProvider, MetaEditor, PlayerConfigProps, Hooks, Context } from 'pixel-streaming'
 
 // layouts
 import UserBar from './UserBar'
@@ -24,25 +23,37 @@ const PlayerView = ({ config }: Props) => {
 
   const refPlayer = React.useRef(null)
 
-  const newConfig: PlayerConfigProps = {
-    ...defaultConfig,
-    ...config,
-  }
+  // context
+  const global = Context.global()
+  const stream = Context.stream()
 
-  // alert(JSON.stringify(newConfig, null, 2))
+  // hooks
+  const actions = Hooks.actions()
+  const events = Hooks.events()
+  const listener = Hooks.listener()
 
-  const handleLoad = (app: IApplication) => {
+  const handleLoad = () => {
     console.log('@'.repeat(30))
-    console.log('app', app)
-    console.log(refPlayer.current)
+    console.dir(refPlayer.current)
+    console.dir(global)
+    console.dir(stream)
+    console.dir(actions)
+    console.dir(events)
+    console.dir(listener)
+  }
+
+  // render
+  const newConfig: PlayerConfigProps = {
+    ...defaultConfig,
+    ...config,
   }
 
   return (
     <>
       <MetaEditor
-        {...newConfig}
         ref={refPlayer}
-        onLoad={handleLoad}>
+        onLoad={handleLoad}
+        {...newConfig}>
         <>
           <Preloader />
           <UserBar />