+
+
+ )
+}
+
+const ProjectsView = () => {
+ const { compositor } = useApp()
+ const [projects, setProjects] = useState {
+ setIsEditingName(true)
+ }}
+ className={[
+ 'node-item',
+ // isCollapsed && 'collapsed',
+ isSelected && 'active',
+ ].join(' ')}
+ // data-collapsed={isCollapsed}
+ data-active={isSelected}
+ style={{
+ ...(isSelected && {
+ fontWeight: 'bold',
+ }),
+ padding: '3px 6px 3px 3px',
+ alignItems: 'stretch',
+ display: 'flex',
+ flexGrow: 1,
+ // opacity: props.node.hidden ? 0.3 : 1,
+ }}
+ data-node-id={node.id}
+ tabIndex={1}
+ >
+
+
+ {/* {canExpand && (
+
+
+ )} */}
+ {/* {props.node._acceptChildren && (
+
+
+ )} */}
+ {/* Node name */}
+ {isEditingName ? (
+ // {
+ // runAction('SetNodeName', {
+ // id: props.node.id,
+ // name: e.target.value,
+ // })
+ // setIsEditingName(false)
+ // }}
+ // overrides={{
+ // padding: 0,
+ // fontWeight: 700,
+ // }}
+ // />
+ <>
+ ) : (
+ {node.type}
+ )}
+
+
+ {/* {
+ e.stopPropagation()
+ setIsMenuOpen(!isMenuOpen)
+ }}
+ />
+ }
+ onClose={() => {
+ setIsMenuOpen(false)
+ }}
+ >
+
+
+
+
+
+
+
+
+ {
+ setIsEditingName(true)
+ setIsMenuOpen(false)
+ }}
+ text="Rename"
+ />
+
+ {props.node._autonomous && (
+
+ setIsMenuOpen(false)}
+ color="negative"
+ text="Delete"
+ action="Remove"
+ actionArg={props.node.id}
+ />
+
+ )}
+
+ */}
+ {!node.isRoot && (
+ {
+ e.stopPropagation()
+ node.remove()
+ }}
+ >
+
+ )}
+
+
+
+ )
+}
+
+export const Tree = (props: { node: Compositor.SceneNode }) => {
+ const { project, isNodeSelected, resetSelectedNodes, toggleNodeSelected } =
+ useProject()
+ const isSelected = isNodeSelected(props.node.id)
+ const node = project.get(props.node.id)
+ const [isDragging, setIsDragging] = useState(false)
+ const [isDropping, setIsDropping] = useState(false)
+ const [isDroppingChildren, setIsDroppingChildren] = useState(false)
+ // const isHidden = props.node.hidden
+ // const isCollapsed = !editorState.expandedNodes.has(props.node.id)
+
+ return (
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ e.dataTransfer.dropEffect = 'move'
+ setIsDropping(true)
+ }}
+ onDragLeave={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDropping(false)
+ }}
+ onDrop={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDropping(false)
+ const dragNodeId = e.dataTransfer.getData('text/plain')
+ if (e.ctrlKey) {
+ project.get(dragNodeId).move(node.id)
+ } else {
+ project.get(dragNodeId).swap(node.id)
+ }
+ }}
+ onDragStart={(e) => {
+ e.dataTransfer.setData('text/plain', node.id)
+ e.dataTransfer.dropEffect = 'move'
+ e.dataTransfer.setDragImage(dragImage, 90, 15)
+ setIsDragging(true)
+ }}
+ onDragEnd={(e) => {
+ setIsDragging(false)
+ }}
+ style={{
+ height: '100%',
+ ...(isDropping && { outline: '1px solid white' }),
+ ...(isDragging && { background: 'rgba(255,255,255,0.4)' }),
+ opacity: isDragging ? 0.4 : 1,
+ }}
+ >
+
+ {
+ // !isHidden &&
+ // !isCollapsed &&
+ !isDragging && (
+ 0
+ ? { paddingTop: 2, paddingBottom: 6 }
+ : {}),
+ }}
+ onDragOver={(e) => {
+ // TODO: Outline when drag over / unoutline when leave
+ e.preventDefault()
+ e.stopPropagation()
+ e.dataTransfer.dropEffect = 'move'
+ setIsDroppingChildren(true)
+ }}
+ onDragLeave={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDroppingChildren(false)
+ }}
+ onDrop={(e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDroppingChildren(false)
+ const dragNodeId = e.dataTransfer.getData('text/plain')
+ project.get(dragNodeId).move(node.id)
+ }}
+ >
+ {(node.children || []).map((x, i) => (
+
+ )
+ }
+ Guest View
-
+
{isLive &&
+
+
)
}
@@ -73,19 +62,12 @@ export const GuestView = () => {
const { studio, project, room, setStudio, setProject, setRoom } = useStudio()
const [joining, setJoining] = useState(false)
const [displayName, setDisplayName] = useState(DEFAULT_GUEST_NAME)
- const [participant, setParticipant] = useStateYou're live!
}
-
+
- {
>
-
-
+
+
)
}
diff --git a/examples/studio-kit-demo/src/host-main.tsx b/examples/studio-kit-demo/src/host-main.tsx
index 70338ff0..31a5d303 100644
--- a/examples/studio-kit-demo/src/host-main.tsx
+++ b/examples/studio-kit-demo/src/host-main.tsx
@@ -6,7 +6,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import { HostView } from './host/host'
import { AppProvider } from './shared/context'
-import { Helpers } from '../../../'
+import { Helpers } from '@api.stream/studio-kit'
import url from '../logo.png'
import './index.css'
import '../Font.ttf'
@@ -26,7 +26,7 @@ const Content = () => {
- {participant &&
-
+
+
+
-
+
+
+ )
+}
+
+const Bottom = () => {
+ return (
+
Logged in as {localStorage.userName}
-
@@ -248,277 +250,52 @@ const Project = () => {
-
- {
- setRtmpUrl(e.target.value)
- }}
- />
-
- {
- setStreamKey(e.target.value)
- }}
- />
-
+
+ {
+ setRtmpUrl(e.target.value)
+ }}
+ />
+
+ {
+ setStreamKey(e.target.value)
+ }}
+ />
- {!isLive ? (
-
- ) : (
-
- )}
-
-
-
-
-
- Overlays
-
- -
- {overlays.map((overlay) => (
-
- {
- if (selectedImage !== overlay.id) {
- setSelectedImage(overlay.id)
- projectCommands.addImageOverlay2(overlay.id, {
- src: overlay.url,
- })
- } else {
- projectCommands.removeImageOverlay2(selectedImage)
- setSelectedImage(null)
- }
- }}
- >
-
-
- ))}
-
-
- Video clips
-
- -
- {videooverlays.map((overlay) => (
-
- { - if (selectedVideo !== overlay.id) { - setSelectedVideo(overlay.id) - projectCommands.addVideoOverlay2(overlay.id, { - src: overlay.url, - loop: true, - }) - } else { - projectCommands.removeVideoOverlay2(selectedVideo) - setSelectedVideo(null) - } - }} - > - - - ))} -
-
- Logos
-
- -
- {logos.map((logo) => (
-
- {
- if (selectedImage !== logo.id) {
- setSelectedImage(logo.id)
- projectCommands.addLogo(logo.id, {
- src: logo.url,
- })
- } else {
- projectCommands.removeLogo(selectedImage)
- setSelectedImage(null)
- }
- }}
- >
-
-
- ))}
-
-
-
-
-
-
- {
- if (/\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(e.target.value)) {
- // projectCommands.setBackgroundImage(e.target.value)
- projectCommands.setBackgroundImage2(generateId(), {
- src: e.target.value,
- })
- } else {
- // projectCommands.setBackgroundVideo(e.target.value)
- // projectCommands.setBackgroundVideo2(generateId(), {
- // src: e.target.value,
- // })
- projectCommands.addCustomOverlay(generateId(), {
- src: e.target.value,
- width: '1920px',
- height: '1080px',
- })
- }
- }}
- />
-
-
-
- {
- projectCommands.addChatOverlay(generateId(), {
- message: JSON.parse(
- '[{"type":"text","text":"is now live! Streaming Mobile Legends: Bang Bang: My Stream "},{"type":"emoticon","text":"SirUwU","data":{"type":"direct","url":"https://static-cdn.jtvnw.net/emoticons/v2/301544927/default/light/2.0"}},{"type":"text","text":" Hey hey hey!!! this is going live "},{"type":"emoticon","text":"WutFace","data":{"type":"direct","url":"https://static-cdn.jtvnw.net/emoticons/v2/28087/default/light/2.0"}},{"type":"text","text":" , so lets go"}]',
- ),
- username: 'Maddygoround',
- metadata: {
- platform : "twitch",
- variant: 0,
- avatar:
- 'https://inf2userdata0wus.blob.core.windows.net/content/62cc383fec1b480054cc2fde/resources/video/EchoBG.mp4/medium.jpg',
- },
- })
- }}
- />
-
-
-
- {
- projectCommands.addBanner({
- bodyText: `hey hey hey ${Date.now()}`,
- })
- }}
- />
-
-
-
- {
- const randomIndex = randomIntFromInterval(0, banners.length - 1)
- projectCommands.setActiveBanner(banners[randomIndex].id)
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- e.target.select()}
- value={previewUrl}
- readOnly={true}
- style={{ width: 630 }}
- />
+ {!isLive ? (
+
+ ) : (
+
+ )}
@@ -530,25 +307,39 @@ const Project = () => {
style={{ width: 630 }}
/>
-
+
+ Loading SDK...
+ }
+
+ if (!project) {
+ return Loading project...
+ }
+
return (
- {participants.map((x) => (
-
- )
-}
-
-type ParticipantProps = {
- participant: SDK.Participant
- room?: any
- projectCommands?:any
- studio?: any
-}
-export const ParticipantCamera = ({
- participant,
- webcam,
- microphone,
- projectCommands,
- room
-}: ParticipantProps & { webcam: SDK.Track; microphone: SDK.Track }) => {
- const { isHost } = useContext(AppContext)
- const { id, displayName } = participant
- const ref = useRef
-
- ))}
-
-
- )
-}
-
-export const ParticipantScreenshare = ({
- participant,
- screenshare,
-}: ParticipantProps & { screenshare: SDK.Track }) => {
- const { isHost } = useContext(AppContext)
- const { projectCommands } = useStudio()
- const { id, displayName } = participant
- const ref = useRef{displayName}
-
-
- {isEnabled && (
-
- )}
-
- {isHost &&
-
- )
-}
-
-export const Participant = ({ participant , room , projectCommands}: ParticipantProps) => {
- const [tracks, setTracks] = useState([])
- const screenshare = tracks.find((x) => x.type === 'screen_share')
- const webcam = tracks.find((x) => x.type === 'camera')
- const microphone = tracks.find((x) => x.type === 'microphone')
-
- useEffect(() => {
- if (!room) return
- setTracks(participant.trackIds.map(room.getTrack).filter(Boolean))
- }, [participant?.trackIds, room])
-
- return (
- <>
- {displayName} (Screen)
-
-
-
- {isHost &&
-
- )}
-
- )
-}
-
-const HostControls = ({
- participant,
- type,
- projectCommands,
- room
-}: ParticipantProps & { type: 'screen' | 'camera' }) => {
- const { id } = participant
-
- // Get the initial props in case the participant is on stream
- const projectParticipant = useMemo(
- () => projectCommands.getParticipantState(id, type),
- [],
- )
-
-
- const [onStream, setOnStream] = useState(Boolean(projectParticipant))
- const [isMuted, setIsMuted] = useState(projectParticipant?.isMuted ?? false)
- const [volume, setVolume] = useState(projectParticipant?.volume ?? 1)
- const [isShowcase, setIsShowcase] = useState(false)
-
- // Monitor whether the participant has been removed from the stream
- // from some other means (e.g. dragged off canvas by host)
- useEffect(() => {
- return projectCommands.useParticipantState(
- id,
- (x:any) => {
- setOnStream(Boolean(x))
- },
- type,
- )
- }, [])
-
- // Monitor the project's showcase to determine whether this
- // participant/type is active
- useEffect(
- () =>
- projectCommands.useShowcase((showcase:any) => {
- setIsShowcase(showcase.participantId === id && showcase.type === type)
- }),
-
- [],
- )
-
- return (
-
-
- )
-}
diff --git a/examples/studio-kit-demo/src/shared/props.tsx b/examples/studio-kit-demo/src/shared/props.tsx
new file mode 100644
index 00000000..79dbb410
--- /dev/null
+++ b/examples/studio-kit-demo/src/shared/props.tsx
@@ -0,0 +1,34 @@
+/* ---------------------------------------------------------------------------------------------
+ * Copyright (c) Infiniscene, Inc. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * -------------------------------------------------------------------------------------------- */
+import React from 'react'
+import { Compositor } from '@api.stream/studio-kit'
+
+export const Layout = ({
+ component,
+}: {
+ component: Compositor.Component.NodeInterface
+}) => {
+ const layout = component.nodeProps.layout
+ const layouts = component.compositor.layouts.layouts
+
+ return (
+
+ )
+}
diff --git a/examples/studio-kit-demo/src/shared/shared.module.css b/examples/studio-kit-demo/src/shared/shared.module.css
old mode 100644
new mode 100755
diff --git a/examples/studio-kit-demo/src/shared/sources.tsx b/examples/studio-kit-demo/src/shared/sources.tsx
new file mode 100644
index 00000000..7638333a
--- /dev/null
+++ b/examples/studio-kit-demo/src/shared/sources.tsx
@@ -0,0 +1,342 @@
+/* ---------------------------------------------------------------------------------------------
+ * Copyright (c) Infiniscene, Inc. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * -------------------------------------------------------------------------------------------- */
+import React, {
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+import {
+ Sources,
+ Components,
+ Compositor,
+ Elements,
+} from '@api.stream/studio-kit'
+import { ScenelessInterface } from '../components/Sceneless'
+import { Column, Flex, Row } from '../ui/Box'
+import { AppContext } from './context'
+import { useSources } from './hooks'
+
+type Participant = Sources.WebRTC.RoomParticipantSource
+type Image = Sources.Image.ImageSource
+type Video = Sources.Video.VideoSource
+type Banner = Sources.Banner.BannerSource
+
+type NodeInterface = Compositor.Component.NodeInterface
+type ParticipantElementProps = Elements.WebRTC.Props
+type Source = Compositor.Source.Source
+
+type ParticipantNode =
+ Compositor.Component.NodeInterface
- {/* */}
-
-
-
-
-
-
- {type === 'camera' && (
- <>
- {
- const value = Number(e.target.value)
- projectCommands.setParticipantVolume(id, value)
- setVolume(value)
-
- // Unmute when user changes the volume slider
- if (isMuted) {
- projectCommands.setParticipantMuted(id, false)
- setIsMuted(false)
- }
- }}
- />
- {
- const checked = e.target.checked
- projectCommands.setParticipantMuted(id, !checked)
- setIsMuted(!checked)
- }}
- />
-
- )}
-
-