index.ts

/* ---------------------------------------------------------------------------------------------
 * Copyright (c) Infiniscene, Inc. All rights reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 * -------------------------------------------------------------------------------------------- */
import { ApiStream, LayoutApiModel, LiveApiModel } from '@api.stream/sdk'
import config from '../../config'
import { omit, toDataNode, toSceneTree } from '../logic'
import { compositorAdapter, latestUpdateVersion } from './compositor-adapter'
import { CoreContext, log, setAppState } from './context'
import './internal-events'
import { prepareInternalEvents } from './internal-events'
import * as Layouts from './layouts/index'
import * as Sources from './sources/index'
import * as Transforms from './transforms/index'

// Register default scene components
import { render } from '../helpers/compositor'
import { EngineWebsocket } from '../helpers/engine-socket'
import {
  getBaseUser,
  getProject,
  getProjectByLayoutId,
  hydrateProject,
  layerToNode,
  toBaseProject,
} from './data'
import { Compositor, SDK } from './namespaces'
import { GuestOptions, LogLevel } from './types'

export * from './namespaces'

const BroadcastPhase = LiveApiModel.ProjectBroadcastPhase

const { trigger, triggerInternal } = CoreContext

const EventType = LiveApiModel.EventType
const EventSubType = LiveApiModel.EventSubType

/**
 * Basic application settings.
 */
export type Settings = {
  env?: 'dev' | 'stage' | 'prod'
  logLevel?: LogLevel
  guestToken?: string
}

/**
 * @experimental Experimental settings that should be used with caution.
 *
 * ----
 * _Note: Custom layouts and transforms should not be registered
 *  unless the same layouts and transforms are accessible by the
 *  server rendering the output stream._
 */
export type AdvancedSettings = {
  sources?: Compositor.Source.SourceDeclaration[]
  layouts?: Compositor.Layout.LayoutDeclaration[]
  transforms?: Compositor.Transform.TransformDeclaration[]
  defaultTransforms?: Compositor.Transform.DefaultTransformMap
  useLatestRenderer?: boolean
  rendererVersion?: string
}

let initResult: SDK.Studio
let engineSocket: EngineWebsocket
/**
 * Create a singleton {@link Studio} instance to serve as the root for
 * all SDK functionality.
 */
export const init = async (
  settings: Settings & AdvancedSettings = {},
): Promise<SDK.Studio> => {
  if (initResult) return initResult

  prepareInternalEvents()

  // Default env to prod
  const env = settings.env || 'prod'
  const logLevel: LogLevel = settings.logLevel || 'Warn'
  // Update log levels
  const livekitLogger = log.getLogger('livekit')
  livekitLogger.setLevel(logLevel as any)
  log.setLevel(logLevel as any)
  log.info('Initializing Studio SDK...')

  const {
    layouts = [],
    transforms = [],
    sources = [],
    defaultTransforms = {},
    useLatestRenderer = false,
    guestToken,
    rendererVersion,
  } = settings

  const client = new ApiStream({
    sdkVersion: CoreContext.version,
    env: env,
    logLevel,
  })

  const conf = config(env)

  const compositor = Compositor.start({
    dbAdapter: compositorAdapter,
    transformSettings: {
      defaultTransforms: {
        ...defaultTransforms,
        ...conf.defaults.transforms,
      },
    },
  })

  CoreContext.config = conf
  CoreContext.clients = client
  CoreContext.compositor = compositor
  CoreContext.logLevel = logLevel
  CoreContext.Request = await import('./requests')
  CoreContext.Command = await import('./commands')
  CoreContext.rendererVersion = useLatestRenderer
    ? 'latest-v2'
    : rendererVersion || CoreContext.version

  // Tie context to global scope for debugging purposes
  window.__StudioKit = {
    ...CoreContext,
  }

  if (compositor) {
    compositor.registerSource([...Object.values(Sources), ...sources])
    compositor.registerTransform([...Object.values(Transforms), ...transforms])
    compositor.registerLayout([...Object.values(Layouts), ...layouts])
  }

  const guestProject = await client.load(guestToken)
  let initialProject: SDK.Project
  if (guestProject) {
    await client
      .LiveApi()
      .project.getProject({ ...guestProject })
      .then((resp) => hydrateProject(resp.project, guestProject.role))
      .then(async (project) => {
        setAppState({
          // As a contributor, `user` refers to the collection
          //  that the project belongs to. This will be referenced
          //  when making requests requiring `collectionId`.
          user: {
            id: guestProject.collectionId,
            props: {},
            name: null,
            metadata: {},
          },
          // TODO: Populate
          sources: [],
          projects: [project],
          activeProjectId: null,
        })

        project.isInitial = true
        initialProject = await CoreContext.Command.setActiveProject({
          projectId: project.id,
        })
      })
  }

  /**
   * Collection events from the Event API
   */
  client.LiveApi().on(EventType.EVENT_TYPE_COLLECTION, (event, type) => {
    log.info('Received: Collection event', type, event)
    switch (type) {
      case EventSubType.EVENT_SUB_TYPE_UPDATE: {
        triggerInternal('UserChanged', event.update.collection)
        return
      }
    }
  })

  /**
   * Destination events from the Event API
   */
  client.LiveApi().on(EventType.EVENT_TYPE_DESTINATION, (event, type) => {
    log.info('Received: Destination event', type, event)
    switch (type) {
      case EventSubType.EVENT_SUB_TYPE_CREATE: {
        const { destination } = event.create
        triggerInternal('DestinationAdded', destination)
        return
      }
      case EventSubType.EVENT_SUB_TYPE_UPDATE: {
        const { destination } = event.update
        triggerInternal('DestinationChanged', destination)
        return
      }
      case EventSubType.EVENT_SUB_TYPE_DELETE: {
        triggerInternal('DestinationRemoved', event.delete)
        return
      }
    }
  })

  /**
   * Source events from the Event API
   */
  client.LiveApi().on(EventType.EVENT_TYPE_SOURCE, (event, type) => {
    log.info('Received: Source event', type, event)
    switch (type) {
      case EventSubType.EVENT_SUB_TYPE_CREATE: {
        triggerInternal('SourceAdded', event.create.source)
        return
      }
      case EventSubType.EVENT_SUB_TYPE_UPDATE: {
        triggerInternal('SourceChanged', event.update.source)
        return
      }
      case EventSubType.EVENT_SUB_TYPE_DELETE: {
        triggerInternal('SourceRemoved', event.delete.sourceId)
        return
      }
      case EventSubType.EVENT_SUB_TYPE_ADD: {
        triggerInternal('ProjectSourceAdded', {
          projectId: event.add.projectId,
          source: event.add.source,
        })
        return
      }
      case EventSubType.EVENT_SUB_TYPE_REMOVE: {
        triggerInternal('ProjectSourceRemoved', {
          projectId: event.remove.projectId,
          sourceId: event.remove.sourceId,
        })
        return
      }
    }
  })

  /**
   * Project events from the Event API
   */
  client.LiveApi().on(EventType.EVENT_TYPE_PROJECT, (event, type) => {
    log.info('Received: Project event', type, event)
    switch (type) {
      case EventSubType.EVENT_SUB_TYPE_CREATE: {
        const project = event.create.project
        // Ignore the event if we already have the project in state
        if (getProject(project.projectId)) return
        triggerInternal('ProjectAdded', project)
        return
      }
      case EventSubType.EVENT_SUB_TYPE_UPDATE: {
        const { project } = event.update
        const existingProject = getProject(project.projectId)
        if (!existingProject) return

        triggerInternal('ProjectChanged', {
          project,
          phase: existingProject.videoApi.phase,
        })
        return
      }
      case EventSubType.EVENT_SUB_TYPE_DELETE: {
        triggerInternal('ProjectRemoved', { projectId: event.delete.projectId })
        return
      }
      case EventSubType.EVENT_SUB_TYPE_STATE: {
        // Get the project from memory since it is not included in event subtype `state`
        const project = getProject(event.state?.projectId)
        if (!project) return
        let broadcastId = event.state.broadcastId

        // Emit explicit external events for broadcast start/stop/error
        if (event.state.error) {
          trigger('BroadcastError', {
            projectId: project.id,
            broadcastId: event.state.broadcastId,
            error: event.state.error,
          })
        }
        if (event.state.phase) {
          const phase = event.state.phase
          if (phase === BroadcastPhase.PROJECT_BROADCAST_PHASE_RUNNING) {
            trigger('BroadcastStarted', {
              projectId: project.id,
              broadcastId: event.state.broadcastId,
            })
          } else if (phase === BroadcastPhase.PROJECT_BROADCAST_PHASE_STOPPED) {
            broadcastId = null
            trigger('BroadcastStopped', {
              projectId: project.id,
              broadcastId: event.state.broadcastId,
            })
          }
        }

        triggerInternal('ProjectChanged', {
          project: project.videoApi.project,
          phase: event.state.phase,
          broadcastId,
        })
        return
      }
    }
  })

  /**
   * Layout events from the Event API
   * Listen for remote changes to nodes within a project.
   **/
  client
    .LayoutApi()
    .on(LayoutApiModel.EventType.EVENT_TYPE_LAYER, (layer, type) => {
      if (type === LayoutApiModel.EventSubType.EVENT_SUB_TYPE_CREATE) {
        log.debug('Received: Node Insert', layer.create)
        const { connectionId, layoutId } = layer.create.requestMetadata
        if (CoreContext.connectionId === connectionId) return

        const node = layerToNode(layer.create)
        const project = getProjectByLayoutId(layoutId)
        if (project) {
          const nodes = [node, ...project?.compositor.nodes.map(toDataNode)]
          const tree = toSceneTree(nodes, node.id)
          project.compositor.local.insert(tree)
          triggerInternal('NodeAdded', {
            projectId: project.id,
            nodeId: node.id,
          })
        }
      } else if (type === LayoutApiModel.EventSubType.EVENT_SUB_TYPE_UPDATE) {
        log.debug('Received: Node Update', layer.update)
        const {
          connectionId,
          layoutId,
          updateVersions = {},
        } = layer.update?.requestMetadata || {}
        if (CoreContext.connectionId === connectionId) return

        const node = layerToNode(layer.update)

        // Check whether we have a more recent change and ignore if we do
        const latestUpdateId = latestUpdateVersion[node.id] || 0
        if (latestUpdateId > updateVersions[node.id]) {
          return log.info(
            'Ignoring node update - updateID is less than latest.',
          )
        }
        latestUpdateVersion[node.id] = updateVersions[node.id]

        const project = getProjectByLayoutId(layoutId)
        if (project) {
          project.compositor.local.update(
            layer.update.id,
            node.props,
            node.childIds,
          )
          triggerInternal('NodeChanged', {
            projectId: project.id,
            nodeId: node.id,
          })
        }
      } else if (type === LayoutApiModel.EventSubType.EVENT_SUB_TYPE_DELETE) {
        log.debug('Received: Node Delete', layer.delete)
        const { connectionId, layoutId } = layer.delete.requestMetadata
        if (CoreContext.connectionId === connectionId) return

        const project = getProjectByLayoutId(layoutId)
        if (project) {
          project.compositor.local.remove(layer.delete.id)
          triggerInternal('NodeRemoved', {
            projectId: project.id,
            nodeId: layer.delete.id,
          })
        }
      } else if (type === LayoutApiModel.EventSubType.EVENT_SUB_TYPE_BATCH) {
        log.debug('Received: Node Batch Update', layer.batch)
        const {
          connectionId,
          layoutId,
          updateVersions = {},
        } = layer.batch.requestMetadata
        if (CoreContext.connectionId === connectionId) return

        const project = getProjectByLayoutId(layoutId)
        layer.batch.layers.forEach((batch) => {
          try {
            const [type, args] = Object.entries(batch)[0]
            if (type === 'create') {
              const node = layerToNode(args)
              if (project) {
                project.compositor.local.insert(node)
                triggerInternal('NodeAdded', {
                  projectId: project.id,
                  nodeId: node.id,
                })
              }
            } else if (type === 'update') {
              const node = layerToNode(args)

              // Check whether we have a more recent change and ignore if we do
              const latestUpdateId = latestUpdateVersion[node.id] || 0
              if (latestUpdateId > updateVersions[node.id]) {
                return log.info(
                  'Ignoring node update - updateID is less than latest.',
                )
              }
              latestUpdateVersion[node.id] = updateVersions[node.id]

              if (project) {
                project.compositor.local.update(
                  node.id,
                  node.props,
                  node.childIds,
                )
                triggerInternal('NodeChanged', {
                  projectId: project.id,
                  nodeId: node.id,
                })
              }
            } else if (type === 'delete') {
              if (project) {
                project.compositor.local.remove(args.id)
                triggerInternal('NodeRemoved', {
                  projectId: project.id,
                  nodeId: args.id,
                })
              }
            }
          } catch (e) {
            log.warn('Error handling batch item', e, { item: batch })
          }
        })

        // Trigger a single change on the root node
        if (project)
          triggerInternal('NodeChanged', {
            projectId: project.id,
            nodeId: project?.compositor.getRoot().id,
          })
      }
    })

  const createGuestCode = (options: GuestOptions = {}, url?: string) => {
    const {
      displayName,
      role,
      maxDuration = CoreContext.config.defaults.guestTokenDuration,
      projectId = CoreContext.state.activeProjectId,
    } = options
    const project = getProject(projectId)

    const token = displayName
      ? {
          direct: {
            displayName,
          },
        }
      : {
          exchange: {
            maxDuration,
          },
        }

    return client.LiveApi().authentication.createGuestCode({
      projectId,
      token,
      url,
      collectionId: project.videoApi.project.collectionId,
      maxDuration,
      role: (role || LiveApiModel.Role.ROLE_GUEST) as LiveApiModel.Role,
    })
  }

  const createGuestToken = (options: GuestOptions = {}, url?: string) => {
    const {
      displayName,
      role,
      maxDuration = CoreContext.config.defaults.guestTokenDuration,
      projectId = CoreContext.state.activeProjectId,
    } = options
    const project = getProject(projectId)

    const token = displayName
      ? {
          direct: {
            displayName,
          },
        }
      : {
          exchange: {
            maxDuration,
          },
        }

    return client.LiveApi().authentication.createGuestAccessToken({
      projectId,
      token,
      url,
      collectionId: project.videoApi.project.collectionId,
      maxDuration,
      role: (role || LiveApiModel.Role.ROLE_GUEST) as LiveApiModel.Role,
    })
  }

  return {
    ...omit(CoreContext, [
      'clients',
      'config',
      'connectionId',
      'Request',
      'state',
      'trigger',
    ]),
    createDemoToken: async () => {
      console.warn('createDemoToken() is currently unavailable.')
      return ''
    },
    createPreviewLink: async (request = {}) => {
      const { maxDuration, projectId = CoreContext.state.activeProjectId } =
        request
      const project = getProject(projectId)
      const url = project.videoApi.project.composition.studioSdk.rendererUrl
      let response = await client
        .LiveApi()
        .authentication.createGuestAccessToken({
          projectId,
          token: {
            direct: {
              displayName: 'Preview',
            },
          },
          url,
          collectionId: project.videoApi.project.collectionId,
          maxDuration:
            maxDuration || CoreContext.config.defaults.previewTokenDuration,
          role: LiveApiModel.Role.ROLE_VIEWER,
        })
      return response.url
    },
    createGuestLink: async (baseUrl, options = {}) => {
      const response = await createGuestCode(options, baseUrl)
      return response.guestCode.linkUrl
    },
    deleteGuestLink: async (code: string) => {
      await client.LiveApi().authentication.deleteGuestCode({ code })
    },
    getGuestLinks: async (options = {}) => {
      const { projectId = CoreContext.state.activeProjectId } = options
      const project = getProject(projectId)
      return await client.LiveApi().authentication.getGuestCodes({
        projectId: projectId,
        collectionId: project?.videoApi.project.collectionId!,
      })
    },
    createGuestToken: async (options = {}) => {
      const response = await createGuestToken(options)
      return response.accessToken
    },
    initialProject,
    getProject: (id: string) => toBaseProject(getProject(id)),
    load,
    render,
  }
}

CoreContext.on('ActiveProjectChanged', ({ projectId }) => {
  const project = toBaseProject(getProject(projectId))
  if (project.role === SDK.Role.ROLE_RENDERER) {
    log.info('Connecting to engine websocket...')
    if (engineSocket) {
      log.info('Disconnecting existing engine websocket...')
      engineSocket.disconnect()
      engineSocket = null
    }
    if (!engineSocket) {
      log.info('Creating new engine websocket...')
      engineSocket = setupEngineWebsocket(
        async function connectSource(id) {
          triggerInternal('SourceConnected', id)
        },
        async function disconnectSource(id) {
          triggerInternal('SourceDisconnected', id)
        },
      )
      engineSocket.connect()
    }
  }
})

function setupEngineWebsocket(
  connectSource: (id: string) => Promise<void>,
  disconnectSource: (id: string) => Promise<void>,
) {
  return new EngineWebsocket(connectSource, disconnectSource)
}

/**
 * Register the access token and make API request to gather user data.
 */
const load = async (
  accessToken: string,
  size?: {
    x: number
    y: number
  },
  options?: {
    updateLayoutOnly?: boolean
  }
): Promise<SDK.User> => {
  let user = getBaseUser()
  if (user) {
    log.info('Attempted to load user again - returning existing user')
    return user
  }

  if (!accessToken) {
    log.warn('Access token required for load()')
    return
  }
  log.info('Loading user...')

  const client = CoreContext.clients

  // Init API clients with this jwt
  await client.load(accessToken)

  // Load the projects and user data
  const result = await CoreContext.Request.loadUser(size, options)

  // TODO: Move to UserLoaded event handler
  setAppState({
    user: result.user,
    sources: result.sources,
    projects: result.projects,
    activeProjectId: null,
  })

  user = getBaseUser()

  trigger('UserLoaded', user)
  return user
}