chore: add gamesource to drag list, hide alert on canvas

Author: maddygoround

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.stream/studio-kit",
-  "version": "3.0.21",
+  "version": "3.0.22",
   "description": "Client SDK for building studio experiences with API.stream",
   "license": "MIT",
   "private": false,

src/core/layouts/index.ts

@@ -18,7 +18,7 @@ const getPresetStyle = (preset: string) => {
   const project = getProject(CoreContext.state.activeProjectId)
   const root = project.compositor.getRoot()
   const { x: rootWidth, y: rootHeight } = root.props.size
-  const scaleTo = (rootWidth ?? 1920) / 1280
+  const scaleTo = 1;
   const alertWidthPercentage = ((633 * scaleTo) / rootWidth) * 100
   const alertHeightPercentage = ((290 * scaleTo) / rootHeight) * 100
 

src/core/transforms/Alert.tsx

@@ -6,10 +6,7 @@ import React, { useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import { APIKitAnimationTypes } from '../../animation/core/types'
 import APIKitAnimation from '../../compositor/html/html-animation'
-import CoreContext from '../context'
-import { getProject } from '../data'
 import { Compositor } from '../namespaces'
-import { Role } from '../types'
 import Iframe from './components/Iframe'
 export type AlertOverlayProps = {
     src?: string
@@ -35,8 +32,7 @@ export const Alert = {
     ) {
 
         const root = document.createElement('div')
-        const role = getProject(CoreContext.state.activeProjectId).role
-
+    
         const Alert = ({ source }: { source: AlertOverlaySource }) => {
             const { id } = source || {}
             const [startAnimation, setStartAnimation] = React.useState(false)
@@ -48,13 +44,9 @@ export const Alert = {
             const queryParams = React.useMemo(() => {
                 return Object.entries(settings)
                     .map((e) => e.join('='))
-                    .concat(
-                        role === Role.ROLE_RENDERER
-                            ? [`mode=engine`]
-                            : [`mode=lightstream`],
-                    )
+                    .concat( [`mode=engine`])
                     .join('&')
-            }, [settings, role])
+            }, [settings])
 
             const resizeIframe = React.useCallback(() => {
                 if (iframeRef.current) {

src/helpers/compositor.tsx

@@ -630,13 +630,13 @@ const scenelessProjectDragCheck = (node: SceneNode) => {
     node.props.name === 'Participant' ||
     node.props.sourceType === 'RoomParticipant' ||
     node.props.sourceType === 'RTMP' ||
-    node.props.sourceType === 'Alert'
+    node.props.sourceType === 'Game'
   )
 }
 
 /** This is a default check based on legacy behavior */
 const scenelessProjectDropCheck = (node: SceneNode) => {
-  return node.props.name === 'Content' || node.props.name === 'AlertContainer'
+  return node.props.name === 'Content'
 }
 
 type CompositorContext = {

src/helpers/sceneless-project.ts

@@ -1241,7 +1241,7 @@ export const commands = (_project: ScenelessProject) => {
       }
 
       const { x: rootWidth } = root.props.size
-      const scaleTo = (rootWidth ?? 1920) / 1280
+      const scaleTo = (rootWidth ?? 1920) / 1920
 
       if (!existingForegroundNode) {
         await CoreContext.Command.createNode({