golightstream · hudbuddy · Oct 28, 2022 · Oct 30, 2022 · Oct 31, 2022 · Oct 31, 2022
diff --git a/.babelrc b/.babelrc
diff --git a/.github/workflows/check-license.yml b/.github/workflows/check-license.yml
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
diff --git a/.github/workflows/deploy-renderer.yml b/.github/workflows/deploy-renderer.yml
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ types
 dist-ssr
 db
 log.txt
+*.TODO
 *.local
 docs/
 .npmrc

diff --git a/.npmignore b/.npmignore
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+tabWidth: 2
+semi: false
+singleQuote: true
+trailingComma: all
+jsxSelfClosing: false
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/LICENSE.txt b/LICENSE.txt
diff --git a/README.md b/README.md
diff --git a/build/LICENSE.header-formatted.txt b/build/LICENSE.header-formatted.txt
diff --git a/build/LICENSE.header.txt b/build/LICENSE.header.txt
diff --git a/build/hosted-renderer/README.md b/build/hosted-renderer/README.md
diff --git a/build/hosted-renderer/directory-to-kv.js b/build/hosted-renderer/directory-to-kv.js
diff --git a/build/hosted-renderer/package-lock.json b/build/hosted-renderer/package-lock.json
diff --git a/build/hosted-renderer/package.json b/build/hosted-renderer/package.json
diff --git a/build/hosted-renderer/src/index.ts b/build/hosted-renderer/src/index.ts
diff --git a/build/hosted-renderer/tsconfig.json b/build/hosted-renderer/tsconfig.json
diff --git a/build/hosted-renderer/wrangler.toml b/build/hosted-renderer/wrangler.toml
diff --git a/build/license-header.json b/build/license-header.json
diff --git a/config.ts b/config.ts
diff --git a/docs.css b/docs.css
diff --git a/examples/studio-kit-demo/.babelrc b/examples/studio-kit-demo/.babelrc
diff --git a/examples/studio-kit-demo/.gitignore b/examples/studio-kit-demo/.gitignore
diff --git a/examples/studio-kit-demo/.prettierrc.json b/examples/studio-kit-demo/.prettierrc.json
diff --git a/examples/studio-kit-demo/Font.ttf b/examples/studio-kit-demo/Font.ttf
diff --git a/examples/studio-kit-demo/README.md b/examples/studio-kit-demo/README.md
diff --git a/examples/studio-kit-demo/compositor/index.html b/examples/studio-kit-demo/compositor/index.html
@@ -0,0 +1,19 @@
+<!--
+---------------------------------------------------------------------------------------------
+Copyright (c) Infiniscene, Inc. All rights reserved.
+Licensed under the MIT License. See License.txt in the project root for license information.
+---------------------------------------------------------------------------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/ico" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Studio Kit Demo - Compositor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/compositor/Compositor.tsx"></script>
+  </body>
+</html>
diff --git a/examples/studio-kit-demo/config.ts b/examples/studio-kit-demo/config.ts
@@ -6,6 +6,7 @@ type Config = {
   env: 'stage' | 'prod'
   logLevel: 'Debug' | 'Info' | 'Warn' | 'Error'
   recaptchaKey: string
+  [prop: string]: any
 }
 
 const LOCAL_ENV: Config['env'] = 'stage'
@@ -14,4 +15,6 @@ export default {
   env: location.hostname === 'live.api.stream' ? 'prod' : LOCAL_ENV,
   logLevel: 'Debug',
   recaptchaKey: '6Lc0HIUfAAAAAIdsyq7vB_3c3skiVvltzdUTCUSx',
+  liveblocksKey:
+    'pk_dev_yf1qXf_yTDHhEcKr1sdtPnOHYGJeEhgL4x8LwaC1bPQeMC2cazP5RYFUJq7sRcTe',
 } as Config
diff --git a/examples/studio-kit-demo/favicon.ico b/examples/studio-kit-demo/favicon.ico
diff --git a/examples/studio-kit-demo/guest/index.html b/examples/studio-kit-demo/guest/index.html
diff --git a/examples/studio-kit-demo/index.html b/examples/studio-kit-demo/index.html
diff --git a/examples/studio-kit-demo/logo.png b/examples/studio-kit-demo/logo.png
diff --git a/examples/studio-kit-demo/package.json b/examples/studio-kit-demo/package.json
@@ -9,18 +9,26 @@
   },
   "dependencies": {
     "@api.stream/studio-kit": "file:../../",
+    "@liveblocks/client": "^0.19.1",
+    "@liveblocks/react": "^0.19.0",
     "axios": "^0.26.1",
+    "install": "^0.13.0",
+    "jsoneditor": "^9.9.2",
+    "jsoneditor-react": "^3.1.2",
     "nanoid": "^3.3.3",
+    "npm": "^9.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-google-recaptcha": "^2.1.0"
+    "react-google-recaptcha": "^2.1.0",
+    "react-json-editor-ajrm": "^2.5.13"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^5.3.0",
     "@types/node": "^16.11.7",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-google-recaptcha": "^2.1.5",
+    "@types/react-json-editor-ajrm": "^2.5.3",
     "@vitejs/plugin-react": "1.0.8",
     "babel-plugin-wildcard": "^7.0.0",
     "csstype": "^3.0.8",

diff --git a/examples/studio-kit-demo/public/bg.png b/examples/studio-kit-demo/public/bg.png
diff --git a/examples/studio-kit-demo/src/components/MultiScene.tsx b/examples/studio-kit-demo/src/components/MultiScene.tsx
@@ -0,0 +1,67 @@
+/* ---------------------------------------------------------------------------------------------
+ * Copyright (c) Infiniscene, Inc. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * -------------------------------------------------------------------------------------------- */
+import React, { useEffect, useRef, useState } from 'react'
+import { Components, Sources, SDK, Compositor } from '@api.stream/studio-kit'
+import { Column, Flex, Row } from '../ui/Box'
+import { Component } from '.'
+import { ScenelessProps } from './Sceneless'
+import { SourceList } from '../shared/sources'
+
+export type MultiSceneInterface = Components.MultiScene.Interface
+
+export const SceneList = ({
+  component,
+}: {
+  component: MultiSceneInterface
+}) => {
+  const activeScene = component.getChild(component.props.activeSceneId)
+
+  return (
+    <Column>
+      <Row>
+        {component.children.map((x) => (
+          <Flex
+            key={x.id}
+            width={50}
+            height={50}
+            style={{
+              cursor: 'pointer',
+              background:
+                component.props.activeSceneId === x.id
+                  ? 'rgba(255,255,255,0.5)'
+                  : 'rgba(255,255,255,0.1)',
+            }}
+            onClick={(e) => {
+              component.execute.setActiveScene(x.id)
+            }}
+          />
+        ))}
+        <button onClick={(e) => component.addChildComponent('Sceneless', {})}>
+          Add scene
+        </button>
+      </Row>
+      <Row>
+        {activeScene && (
+          <Column>
+            <div>Scene ID: {activeScene.id}</div>
+            <Component component={activeScene} />
+          </Column>
+        )}
+      </Row>
+    </Column>
+  )
+}
+
+export const MultiSceneComponent = ({
+  component,
+}: {
+  component: MultiSceneInterface
+}) => {
+  return (
+    <Column>
+      <SceneList component={component} />
+    </Column>
+  )
+}
diff --git a/examples/studio-kit-demo/src/components/Sceneless.tsx b/examples/studio-kit-demo/src/components/Sceneless.tsx
@@ -0,0 +1,58 @@
+/* ---------------------------------------------------------------------------------------------
+ * Copyright (c) Infiniscene, Inc. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * -------------------------------------------------------------------------------------------- */
+import React, { useEffect, useRef, useState } from 'react'
+import { Components, Sources } from '@api.stream/studio-kit'
+import { Column, Flex } from '../ui/Box'
+import { BackgroundSelect, BannerSelect, SourceList } from '../shared/sources'
+import { Layout } from '../shared/props'
+
+export type ScenelessInterface = Components.Sceneless.Interface
+export type ScenelessProps = Components.Sceneless.Props
+
+const overlays = [
+  {
+    id: '123',
+    url: 'https://www.pngmart.com/files/12/Twitch-Stream-Overlay-PNG-Transparent-Picture.png',
+  },
+  {
+    id: '124',
+    url: 'https://www.pngmart.com/files/12/Stream-Overlay-Transparent-PNG.png',
+  },
+]
+
+const logos = [
+  {
+    id: '128',
+    url: 'https://www.pngmart.com/files/12/Twitch-Stream-Overlay-PNG-Transparent-Picture.png',
+  },
+  {
+    id: '129',
+    url: 'https://www.pngmart.com/files/12/Stream-Overlay-Transparent-PNG.png',
+  },
+]
+
+export const ScenelessComponent = ({
+  component,
+}: {
+  component: ScenelessInterface
+}) => {
+  return (
+    <Column>
+      <SourceList component={component} sourceType="RoomParticipant" />
+      <Column>
+        <label>Layout</label>
+        <Flex padding={8} style={{ background: 'rgba(0, 0, 0, 0.2)' }}>
+          <Layout component={component} />
+        </Flex>
+      </Column>
+      <Column>
+        <label>Background</label>
+        <Flex padding={8} style={{ background: 'rgba(0, 0, 0, 0.2)' }}>
+          <BackgroundSelect component={component} />
+        </Flex>
+      </Column>
+    </Column>
+  )
+}
diff --git a/examples/studio-kit-demo/src/components/index.tsx b/examples/studio-kit-demo/src/components/index.tsx
@@ -0,0 +1,42 @@
+/* ---------------------------------------------------------------------------------------------
+ * Copyright (c) Infiniscene, Inc. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * -------------------------------------------------------------------------------------------- */
+import { Compositor, SDK } from '@api.stream/studio-kit'
+import { useEffect, useState } from 'react'
+import { useRenderRef, useUpdate } from '../shared/hooks'
+import { MultiSceneComponent } from './MultiScene'
+import { ScenelessComponent } from './Sceneless'
+
+const components = {
+  Sceneless: ScenelessComponent,
+  MultiScene: MultiSceneComponent,
+}
+
+export const Component = ({
+  component,
+}: {
+  component: Compositor.Component.NodeInterface
+}) => {
+  const [updatedComponent, setComponent] =
+    useState<Compositor.Component.NodeInterface>(component)
+
+  useEffect(() => {
+    if (!component?.id) return
+    return component.project.useComponent(component.id, setComponent)
+  }, [component?.id])
+
+  if (!component) return null
+
+  // @ts-ignore
+  const Component = components[component.type]
+  if (!Component) return null
+
+  return <Component component={updatedComponent} />
+}
+
+export const Renderer = ({ scene }: { scene: Compositor.Project }) => {
+  const renderContainer = useRenderRef(scene)
+
+  return <div ref={renderContainer} style={{ width: 840, height: 500 }}></div>
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ types @@
     dist-ssr
     db
     log.txt
+    *.TODO
     *.local
     docs/
     .npmrc
@@ Expand Down @@