@dcl-regenesislabs/web-editor 0.0.0-stage → 0.1.0

package/prefabs/admin-tools/scripts/tabs/video/api.ts

@@ -0,0 +1,172 @@
+// Video-tab endpoints: the stream key lifecycle (/scene-stream-access) and the
+// DCL Cast room (/cast/*), both on comms-gatekeeper. Port of @dcl/asset-packs
+// src/admin-toolkit-ui/VideoControl/api.ts.
+//
+// The gatekeeper answers in snake_case; the Hub runs every body through a generic
+// toCamelCase. Reading both spellings per field keeps the payload typed instead of
+// pushing an `any` through a key rewriter.
+import { getActiveVideoStreams } from '~system/CommsApi'
+import { ENDPOINTS, request, type Result } from '../../api'
+
+export interface StreamKey {
+  streamingUrl: string
+  streamingKey: string
+  createdAt: number
+  endsAt: number
+}
+
+export interface CastRoom {
+  streamLink: string
+  watcherLink: string
+  streamingKey: string
+  placeId: string
+  placeName: string
+  expiresAt: number
+  expiresInDays: number
+}
+
+export interface CastTrack {
+  sid: string
+  identity: string
+  sourceType: number
+  name: string
+}
+
+export interface CastParticipant {
+  identity: string
+  name: string
+  tracks: CastTrack[]
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function readString(source: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = source[key]
+    if (typeof value === 'string') return value
+  }
+  return ''
+}
+
+function readNumber(source: Record<string, unknown>, ...keys: string[]): number {
+  for (const key of keys) {
+    const value = source[key]
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+  }
+  return 0
+}
+
+function toStreamKey(body: unknown): StreamKey {
+  const source = isRecord(body) ? body : {}
+  return {
+    streamingUrl: readString(source, 'streamingUrl', 'streaming_url'),
+    streamingKey: readString(source, 'streamingKey', 'streaming_key'),
+    createdAt: readNumber(source, 'createdAt', 'created_at'),
+    endsAt: readNumber(source, 'endsAt', 'ends_at')
+  }
+}
+
+function toCastRoom(body: unknown): CastRoom {
+  const source = isRecord(body) ? body : {}
+  return {
+    streamLink: readString(source, 'streamLink', 'stream_link'),
+    watcherLink: readString(source, 'watcherLink', 'watcher_link'),
+    streamingKey: readString(source, 'streamingKey', 'streaming_key'),
+    placeId: readString(source, 'placeId', 'place_id'),
+    placeName: readString(source, 'placeName', 'place_name'),
+    expiresAt: readNumber(source, 'expiresAt', 'expires_at'),
+    expiresInDays: readNumber(source, 'expiresInDays', 'expires_in_days')
+  }
+}
+
+async function streamKeyRequest(method?: string): Promise<Result<StreamKey>> {
+  const init = method === undefined ? undefined : { method, headers: {} }
+  const [error, body] = await request<unknown>({ url: ENDPOINTS.streamAccess(), init })
+  return error === null ? [null, toStreamKey(body)] : [error, null]
+}
+
+export async function getStreamKey(): Promise<Result<StreamKey>> {
+  return streamKeyRequest()
+}
+
+export async function generateStreamKey(): Promise<Result<StreamKey>> {
+  return streamKeyRequest('POST')
+}
+
+export async function revokeStreamKey(): Promise<Result<StreamKey>> {
+  return streamKeyRequest('DELETE')
+}
+
+export async function resetStreamKey(): Promise<Result<StreamKey>> {
+  return streamKeyRequest('PUT')
+}
+
+export async function getCastRoom(): Promise<Result<CastRoom>> {
+  const [error, body] = await request<unknown>({ url: ENDPOINTS.castStreamLink() })
+  return error === null ? [null, toCastRoom(body)] : [error, null]
+}
+
+export async function getPresenters(): Promise<Result<string[]>> {
+  const [error, body] = await request<unknown>({ url: ENDPOINTS.castPresenters() })
+  if (error !== null) return [error, null]
+  const list = Array.isArray(body) ? body : isRecord(body) ? body.addresses : undefined
+  if (!Array.isArray(list)) return [null, []]
+  return [null, list.filter((item): item is string => typeof item === 'string')]
+}
+
+export async function promotePresenter(address: string): Promise<Result<unknown>> {
+  return request({
+    url: `${ENDPOINTS.castPresenters()}/${address}`,
+    init: { method: 'PUT', headers: {} }
+  })
+}
+
+// A cast admin has to hold the presenter role before their browser tab can push a
+// track into the room; the Hub promotes silently on every mount.
+export async function ensurePresenterRole(address: string): Promise<void> {
+  const [error, presenters] = await getPresenters()
+  if (error !== null) return
+  const lower = address.toLowerCase()
+  if (presenters.some((presenter) => presenter.toLowerCase() === lower)) return
+  await promotePresenter(lower)
+}
+
+export const SOURCE_LABELS: Record<number, string> = {
+  1: 'Camera',
+  2: 'Screen',
+  3: 'Presentation'
+}
+
+export function sourceLabel(sourceType: number): string {
+  return SOURCE_LABELS[sourceType] ?? 'Unknown'
+}
+
+export function trackName(track: CastTrack): string {
+  return `${track.name} - ${sourceLabel(track.sourceType)}`
+}
+
+export async function getActiveStreams(): Promise<CastTrack[]> {
+  try {
+    const response = await getActiveVideoStreams({})
+    return response.streams.map((stream) => ({
+      sid: stream.trackSid,
+      identity: stream.identity,
+      sourceType: stream.sourceType,
+      name: stream.identity
+    }))
+  } catch {
+    return []
+  }
+}
+
+export function groupTracks(tracks: CastTrack[]): CastParticipant[] {
+  const byIdentity = new Map<string, CastParticipant>()
+  for (const track of tracks) {
+    const existing = byIdentity.get(track.identity)
+    if (existing !== undefined) existing.tracks.push(track)
+    else byIdentity.set(track.identity, { identity: track.identity, name: track.name, tracks: [track] })
+  }
+  return Array.from(byIdentity.values())
+}

package/prefabs/admin-tools/scripts/tabs/video/controls.ts

@@ -0,0 +1,108 @@
+// Everything that mutates a video screen goes through the admin message bus, so
+// the change is validated against the sender's wallet on every client instead of
+// riding the CRDT channel. Local-only writes here would desync the scene.
+import { engine, Name, VideoPlayer, type Entity } from '@dcl/sdk/ecs'
+import type { AdminToolsValue, VideoPlayerRef } from '../../components'
+import type { AdminMessageBus, VideoState } from '../../message-bus'
+
+export const LIVEKIT_STREAM_SRC = 'livekit-video://current-stream'
+export const CAST_SRC_PREFIX = 'livekit-video://'
+export const VIDEO_URL_PREFIX = 'https://'
+export const DEFAULT_VOLUME = 1
+export const VOLUME_STEP = 0.1
+
+export interface VideoScreenRef {
+  entity: Entity
+  customName: string
+}
+
+export interface VideoControls {
+  play: () => void
+  pause: () => void
+  restart: () => void
+  setSource: (src: string) => void
+  setLoop: (loop: boolean) => void
+  stepVolume: (step: number) => void
+  setVolume: (volume: number) => void
+}
+
+function entityName(entity: Entity, index: number): string {
+  const named = Name.getOrNull(entity)
+  if (named !== null && named.value !== '') return named.value
+  return `Screen ${index + 1}`
+}
+
+// `linkAllVideoPlayers` puts every screen in the scene under admin control; the
+// authored list still wins on naming and ordering.
+export function managedScreens(config: AdminToolsValue): VideoScreenRef[] {
+  const authored: readonly VideoPlayerRef[] = config.videoControl.videoPlayers ?? []
+  const screens: VideoScreenRef[] = authored.map((ref, index) => ({
+    entity: ref.entity as Entity,
+    customName: ref.customName !== '' ? ref.customName : entityName(ref.entity as Entity, index)
+  }))
+  if (!config.videoControl.linkAllVideoPlayers) return screens
+
+  const known = new Set(screens.map((screen) => screen.entity))
+  for (const [entity] of engine.getEntitiesWith(VideoPlayer)) {
+    if (known.has(entity)) continue
+    known.add(entity)
+    screens.push({ entity, customName: entityName(entity, screens.length) })
+  }
+  return screens
+}
+
+// A cast room and a plain RTMP stream share `livekit-video://current-stream`, so
+// src alone cannot tell them apart — callers break the tie with the media source
+// the admin picked, exactly like the Hub's `selectedStream`.
+export function isCastSource(src: string): boolean {
+  return src.startsWith(CAST_SRC_PREFIX)
+}
+
+export function isLiveSource(src: string): boolean {
+  return src === LIVEKIT_STREAM_SRC
+}
+
+export function isVideoUrl(src: string): boolean {
+  return src.startsWith(VIDEO_URL_PREFIX)
+}
+
+export function volumeOf(entity: Entity): number {
+  return VideoPlayer.getOrNull(entity)?.volume ?? DEFAULT_VOLUME
+}
+
+// Sound-off scenes never want an unmuted screen, not even for the admin who
+// opened the panel — mute on sight, the same check the Hub runs per render.
+export function enforceMute(screens: VideoScreenRef[]): void {
+  for (const screen of screens) {
+    const video = VideoPlayer.getOrNull(screen.entity)
+    if (video === null || video.volume === 0) continue
+    VideoPlayer.getMutable(screen.entity).volume = 0
+  }
+}
+
+export function createControls(
+  bus: AdminMessageBus | null,
+  entity: Entity,
+  soundDisabled: boolean
+): VideoControls {
+  const send = (command: Partial<VideoState>): void => {
+    bus?.setVideo(entity, command)
+  }
+  return {
+    play: () => send({ playing: true }),
+    pause: () => send({ playing: false }),
+    restart: () => send({ playing: true, position: 0 }),
+    setSource: (src) => send({ src, playing: true }),
+    setLoop: (loop) => send({ loop }),
+    stepVolume: (step) => {
+      if (soundDisabled) return
+      const steps = Math.round(volumeOf(entity) * 10)
+      const next = Math.max(0, Math.min(10, steps + Math.round(step * 10)))
+      send({ volume: next / 10 })
+    },
+    setVolume: (volume) => {
+      if (soundDisabled) return
+      send({ volume })
+    }
+  }
+}

package/prefabs/admin-tools/scripts/tabs/video/icons.ts

@@ -0,0 +1,59 @@
+import { iconPath } from '../../icons'
+
+export interface VideoIcons {
+  play: string
+  pause: string
+  loop: string
+  mute: string
+  volumeMinus: string
+  volumePlus: string
+  sourceVideo: string
+  sourceLive: string
+  sourceCast: string
+  info: string
+  help: string
+  eyeShow: string
+  eyeHide: string
+  copy: string
+  star: string
+  chevronUp: string
+  chevronDown: string
+  person: string
+  error: string
+}
+
+function build(base: string): VideoIcons {
+  const icon = (name: string): string => iconPath(base, `video/${name}`)
+  return {
+    play: icon('video-control-play-button.png'),
+    pause: icon('video-control-pause-button.png'),
+    loop: icon('video-control-loop.png'),
+    mute: icon('video-control-mute.png'),
+    volumeMinus: icon('video-control-volume-minus-button.png'),
+    volumePlus: icon('video-control-volume-plus-button.png'),
+    sourceVideo: icon('video-control-video-icon.png'),
+    sourceLive: icon('video-control-live.png'),
+    sourceCast: icon('video-control-dcl-cast.png'),
+    info: icon('info.png'),
+    help: icon('help.png'),
+    eyeShow: icon('eye.png'),
+    eyeHide: icon('eye-off.png'),
+    copy: icon('copy-to-clipboard.png'),
+    star: icon('star.png'),
+    chevronUp: icon('chevron-up.png'),
+    chevronDown: icon('chevron-down.png'),
+    person: icon('person-outline.png'),
+    error: icon('error.png')
+  }
+}
+
+// Rebuilt only when the prefab folder changes — this runs on every rendered frame.
+let cachedKey: string | undefined
+let cached: VideoIcons = build('')
+
+export function videoIcons(base: string): VideoIcons {
+  if (base === cachedKey) return cached
+  cachedKey = base
+  cached = build(base)
+  return cached
+}

package/prefabs/admin-tools/scripts/tabs/video/speakers.ts

@@ -0,0 +1,43 @@
+// Live participants of the DCL Cast room, refreshed from the explorer's comms
+// state. The Hub polls on a 5s interval; scenes have no setInterval, so the poll
+// rides one engine system registered once for the lifetime of the scene and does
+// nothing unless the speaker list is on screen.
+import { engine } from '@dcl/sdk/ecs'
+import { getActiveStreams, groupTracks } from './api'
+import { videoTab } from './state'
+
+const POLL_SECONDS = 5
+
+let registered = false
+let countdown = 0
+let inFlight = false
+
+async function poll(): Promise<void> {
+  inFlight = true
+  try {
+    videoTab.participants = groupTracks(await getActiveStreams())
+  } finally {
+    inFlight = false
+  }
+}
+
+export function refreshSpeakers(): void {
+  if (inFlight) return
+  countdown = POLL_SECONDS
+  void poll()
+}
+
+export function ensureSpeakerPolling(): void {
+  if (registered) return
+  registered = true
+  engine.addSystem((dt: number) => {
+    if (!videoTab.showSpeakers) {
+      countdown = 0
+      return
+    }
+    countdown -= dt
+    if (countdown > 0 || inFlight) return
+    countdown = POLL_SECONDS
+    void poll()
+  })
+}

package/prefabs/admin-tools/scripts/tabs/video/state.ts

@@ -0,0 +1,82 @@
+// Tab-scoped state. The shared AdminState carries the selected screen index (and
+// nothing else this tab needs), while everything below outlives a tab remount and
+// is deliberately module-level: the panel is a singleton, and hook state resets
+// every time the shell re-mounts the tab.
+import type { CastParticipant, CastRoom } from './api'
+
+export type MediaSource = 'video-url' | 'live' | 'dcl-cast'
+
+export interface VideoTabState {
+  source: MediaSource | undefined
+  streamKeyLoaded: boolean
+  hasStreamKey: boolean
+  streamKeyEndsAt: number
+  revealedKey: string
+  revealUntil: number
+  confirmReset: boolean
+  castRoom: CastRoom | undefined
+  castError: string
+  castMinimized: boolean
+  participants: CastParticipant[]
+  activeTrackSid: string | undefined
+  showSpeakers: boolean
+  copiedAt: Map<string, number>
+  error: string
+}
+
+export const videoTab: VideoTabState = {
+  source: undefined,
+  streamKeyLoaded: false,
+  hasStreamKey: false,
+  streamKeyEndsAt: 0,
+  revealedKey: '',
+  revealUntil: 0,
+  confirmReset: false,
+  castRoom: undefined,
+  castError: '',
+  castMinimized: false,
+  participants: [],
+  activeTrackSid: undefined,
+  showSpeakers: false,
+  copiedAt: new Map(),
+  error: ''
+}
+
+export const REVEAL_SECONDS = 30
+const FEEDBACK_MS = 1500
+
+export function markCopied(id: string): void {
+  videoTab.copiedAt.set(id, Date.now())
+}
+
+export function wasCopied(id: string): boolean {
+  const at = videoTab.copiedAt.get(id)
+  return at !== undefined && Date.now() - at < FEEDBACK_MS
+}
+
+export function revealKey(key: string): void {
+  videoTab.revealedKey = key
+  videoTab.revealUntil = Date.now() + REVEAL_SECONDS * 1000
+}
+
+export function hideKey(): void {
+  videoTab.revealedKey = ''
+  videoTab.revealUntil = 0
+}
+
+// The UI re-renders every frame, so "is the key still visible" is a function of
+// the clock — no timer system, no cleanup to leak. Expiry also drops the key from
+// memory, which is the point of the auto-hide.
+export function revealRemaining(): number {
+  if (videoTab.revealedKey === '') return 0
+  const remaining = (videoTab.revealUntil - Date.now()) / 1000
+  if (remaining <= 0) {
+    hideKey()
+    return 0
+  }
+  return remaining
+}
+
+export function isKeyVisible(): boolean {
+  return revealRemaining() > 0
+}