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

package/prefabs/admin-tools/scripts/admin.tsx

@@ -0,0 +1,253 @@
+import ReactEcs, { Label, ReactEcsRenderer, UiEntity } from '@dcl/sdk/react-ecs'
+import { engine, VideoPlayer, type Entity } from '@dcl/sdk/ecs'
+import { isServer, syncEntity } from '@dcl/sdk/network'
+import { getPlayer } from '@dcl/sdk/players'
+import { listenForKicks } from './tabs/moderation/kick'
+import { Color4 } from '@dcl/sdk/math'
+import {
+  AdminTools,
+  TextAnnouncements,
+  VideoControlState,
+  VIDEO_CONTROL_SYNC_ID,
+  type AdminToolsValue
+} from './components'
+import {
+  getSceneAdmins,
+  getSceneBans,
+  isPreview,
+  isSceneAdmin,
+  loadRealm,
+  toSceneAdmins,
+  type SceneAdmin
+} from './api'
+import { adminIcons, assetBase, type AdminIcons } from './icons'
+import { initAdminMessageBus, type AdminMessageBus } from './message-bus'
+import { createAdminState, drainNextTick, nextTick, TabId, type AdminState } from './state'
+import type { AdminPlayer, TabProps, TabSpec } from './types'
+import { IconButton, PANEL_BACKGROUND, PANEL_WIDTH, TEXT_DIM } from './ui'
+import { moderationTab } from './tabs/Moderation'
+import { rewardsTab } from './tabs/Rewards'
+import { smartItemActionsTab } from './tabs/SmartItemActions'
+import { AnnouncementOverlay, textAnnouncementsTab } from './tabs/TextAnnouncements'
+import { videoControlTab } from './tabs/VideoControl'
+
+const VIRTUAL_CANVAS = { virtualWidth: 1920, virtualHeight: 1080 }
+
+// The panel is scene-wide, and so is everything start() registers: one comms
+// bus, one synced video state under a fixed sync id, one drain system that the
+// engine refuses to add twice. A second item stops here.
+let started = false
+
+const TABS: TabSpec[] = [
+  moderationTab,
+  videoControlTab,
+  smartItemActionsTab,
+  textAnnouncementsTab,
+  rewardsTab
+]
+
+function videoPlayerEntities(): Entity[] {
+  return Array.from(engine.getEntitiesWith(VideoPlayer)).map(([entity]) => entity)
+}
+
+function toAdminPlayer(): AdminPlayer | null {
+  const player = getPlayer()
+  if (player === null) return null
+  return { userId: player.userId, name: player.name }
+}
+
+export class AdminToolsScript {
+  private readonly state: AdminState = createAdminState()
+  private readonly base: string
+  private readonly icons: AdminIcons
+  private bus: AdminMessageBus | null = null
+  private ready = false
+
+  constructor(
+    public src: string,
+    public entity: Entity
+  ) {
+    this.base = assetBase(src)
+    this.icons = adminIcons(this.base)
+  }
+
+  start(): void {
+    // Not free to skip: a realm lookup, two admin fetches, a comms subscription
+    // and a UI diff every frame.
+    if (isServer()) { return }
+    listenForKicks()
+    if (started) {
+      console.log('Admin Tools: this scene already has one — delete this item, the panel it draws is scene-wide.')
+      return
+    }
+    started = true
+
+    if (TextAnnouncements.getOrNull(this.entity) === null) {
+      TextAnnouncements.create(this.entity, { text: '', author: '', id: '' })
+    }
+    if (VideoControlState.getOrNull(this.entity) === null) {
+      VideoControlState.create(this.entity)
+    }
+    syncEntity(this.entity, [VideoControlState.componentId], VIDEO_CONTROL_SYNC_ID)
+
+    engine.addSystem(drainNextTick, Number.POSITIVE_INFINITY)
+
+    void this.initialize()
+  }
+
+  private async initialize(): Promise<void> {
+    await loadRealm()
+    await this.refreshAdmins()
+    await this.refreshBans()
+
+    this.bus = initAdminMessageBus({
+      self: this.entity,
+      admins: this.state.admins,
+      videoEntities: videoPlayerEntities(),
+      onRefetchAdmins: () => {
+        void this.refreshAdmins()
+      }
+    })
+
+    this.ready = true
+    ReactEcsRenderer.addUiRenderer(this.entity, () => this.render(), VIRTUAL_CANVAS)
+  }
+
+  private async refreshAdmins(): Promise<void> {
+    const [error, response] = await getSceneAdmins()
+    const admins: SceneAdmin[] = error === null ? toSceneAdmins(response) : []
+    this.state.admins = admins
+    this.bus?.updateAdminList(admins)
+  }
+
+  private async refreshBans(): Promise<void> {
+    const [error, response] = await getSceneBans()
+    this.state.bans = error === null && Array.isArray(response.results) ? response.results : []
+  }
+
+  private visibleTabs(config: AdminToolsValue): TabSpec[] {
+    return TABS.filter(
+      (tab) => tab.isEnabled(config) && !(tab.hiddenInPreview === true && isPreview())
+    )
+  }
+
+  private selectTab(id: TabId): void {
+    if (this.state.activeTab === id) {
+      this.state.activeTab = TabId.NONE
+      return
+    }
+    this.state.activeTab = TabId.NONE
+    nextTick(() => {
+      this.state.activeTab = id
+    })
+  }
+
+  private render(): ReactEcs.JSX.Element | null {
+    const config: AdminToolsValue | null = AdminTools.getOrNull(this.entity)
+    if (config === null || !this.ready) return null
+
+    const player = toAdminPlayer()
+
+    return (
+      <UiEntity uiTransform={{ positionType: 'absolute', width: '100%', height: '100%' }}>
+        <AnnouncementOverlay
+          self={this.entity}
+          config={config}
+          assetBase={this.base}
+          state={this.state}
+        />
+        {isSceneAdmin(this.state.admins, player?.userId) ? this.panel(config, player) : null}
+      </UiEntity>
+    )
+  }
+
+  private panel(config: AdminToolsValue, player: AdminPlayer | null): ReactEcs.JSX.Element {
+    const tabs = this.visibleTabs(config)
+    const active = tabs.find((tab) => tab.id === this.state.activeTab)
+    const ActiveTab = active?.Component
+    const props: TabProps = {
+      self: this.entity,
+      config,
+      state: this.state,
+      icons: this.icons,
+      assetBase: this.base,
+      bus: this.bus,
+      player
+    }
+
+    return (
+      <UiEntity
+        uiTransform={{
+          positionType: 'absolute',
+          flexDirection: 'row',
+          position: { top: 120, right: 14 }
+        }}
+      >
+        <UiEntity
+          uiTransform={{
+            display: this.state.panelOpen ? 'flex' : 'none',
+            width: PANEL_WIDTH,
+            flexDirection: 'column',
+            pointerFilter: 'block',
+            margin: { right: 8 }
+          }}
+        >
+          <UiEntity
+            uiTransform={{
+              width: '100%',
+              height: 50,
+              flexDirection: 'row',
+              alignItems: 'center',
+              borderRadius: 12,
+              padding: { left: 12, right: 12 }
+            }}
+            uiBackground={{ color: PANEL_BACKGROUND }}
+          >
+            <Label
+              value="ADMIN TOOLS"
+              fontSize={20}
+              color={TEXT_DIM}
+              textAlign="middle-left"
+              uiTransform={{ flexGrow: 1 }}
+            />
+            {tabs.map((tab) => (
+              <IconButton
+                key={tab.id}
+                icon={this.icons[tab.icon]}
+                active={this.state.activeTab === tab.id}
+                onClick={() => this.selectTab(tab.id)}
+              />
+            ))}
+          </UiEntity>
+          {ActiveTab !== undefined ? <ActiveTab {...props} /> : null}
+        </UiEntity>
+        <UiEntity
+          uiTransform={{
+            width: 42,
+            height: 42,
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerFilter: 'block'
+          }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: this.icons.panelBackground },
+            color: Color4.White()
+          }}
+          onMouseDown={() => {
+            this.state.panelOpen = !this.state.panelOpen
+          }}
+        >
+          <UiEntity
+            uiTransform={{ width: 32, height: 32 }}
+            uiBackground={{
+              textureMode: 'stretch',
+              texture: { src: this.icons.panelToggle },
+              color: Color4.White()
+            }}
+          />
+        </UiEntity>
+      </UiEntity>
+    )
+  }
+}

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

@@ -0,0 +1,125 @@
+// Decentraland service endpoints the admin panel talks to, plus the signedFetch
+// wrapper every call goes through. The hosts are hardcoded on purpose — they are
+// hardcoded in the Creator Hub runtime too, and the scene has no way to discover
+// them. `getDomain()` switches org/zone off the realm's network id.
+import { signedFetch } from '~system/SignedFetch'
+import type { SignedFetchRequest } from '~system/SignedFetch'
+import { getRealm } from '~system/Runtime'
+import type { PBRealmInfo } from '~system/Runtime'
+
+export type Result<T> = [null, T] | [string, null]
+
+let realmCache: PBRealmInfo | undefined
+
+export async function loadRealm(): Promise<PBRealmInfo | undefined> {
+  if (realmCache !== undefined) return realmCache
+  const info = await getRealm({})
+  realmCache = info.realmInfo
+  return realmCache
+}
+
+export function isPreview(): boolean {
+  return realmCache?.isPreview === true
+}
+
+export function getDomain(): string {
+  if (realmCache === undefined || realmCache.networkId === 1) return 'org'
+  return 'zone'
+}
+
+export function gatekeeperUrl(path: string): string {
+  return `https://comms-gatekeeper.decentraland.${getDomain()}${path}`
+}
+
+export function rewardsUrl(path: string): string {
+  return `https://rewards.decentraland.${getDomain()}${path}`
+}
+
+export const ENDPOINTS = {
+  sceneAdmin: (): string => gatekeeperUrl('/scene-admin'),
+  sceneBans: (): string => gatekeeperUrl('/scene-bans'),
+  streamAccess: (): string => gatekeeperUrl('/scene-stream-access'),
+  castStreamLink: (): string => gatekeeperUrl('/cast/generate-stream-link'),
+  castPresenters: (): string => gatekeeperUrl('/cast/presenters'),
+  rewardsCampaignKeys: (): string => rewardsUrl('/api/campaigns/keys'),
+  rewardsCaptcha: (): string => rewardsUrl('/api/captcha'),
+  rewardsAssign: (): string => rewardsUrl('/api/rewards')
+}
+
+// signedFetch is unavailable in local preview (no wallet-signed identity), so the
+// caller gets an explanatory failure instead of a stack trace.
+export async function request<T>(req: SignedFetchRequest): Promise<Result<T>> {
+  await loadRealm()
+  if (isPreview()) return ['Not available in local preview — try it in a World or Genesis City.', null]
+
+  try {
+    const response = await signedFetch(req)
+    if (!response.ok) return [response.body === '' ? `request to ${req.url} failed` : response.body, null]
+    return [null, JSON.parse(response.body === '' ? '{}' : response.body) as T]
+  } catch (error) {
+    console.log(`admin-tools: ${req.url} failed`, error)
+    return [error instanceof Error ? error.message : String(error), null]
+  }
+}
+
+export interface SceneAdminResponse {
+  id: string
+  name: string
+  admin: string
+  canBeRemoved: boolean
+}
+
+export interface SceneAdmin {
+  address: string
+  name: string
+  verified: boolean
+  canBeRemoved: boolean
+}
+
+export async function getSceneAdmins(): Promise<Result<SceneAdminResponse[]>> {
+  return request<SceneAdminResponse[]>({ url: ENDPOINTS.sceneAdmin() })
+}
+
+export async function addSceneAdmin(admin: string): Promise<Result<unknown>> {
+  return request({
+    url: ENDPOINTS.sceneAdmin(),
+    init: { method: 'POST', headers: {}, body: JSON.stringify({ admin }) }
+  })
+}
+
+export async function removeSceneAdmin(admin: string): Promise<Result<unknown>> {
+  return request({
+    url: ENDPOINTS.sceneAdmin(),
+    init: { method: 'DELETE', headers: {}, body: JSON.stringify({ admin }) }
+  })
+}
+
+export interface SceneBanUser {
+  bannedAddress: string
+  name: string
+}
+
+export async function getSceneBans(): Promise<Result<{ results: SceneBanUser[] }>> {
+  return request<{ results: SceneBanUser[] }>({ url: ENDPOINTS.sceneBans() })
+}
+
+// Who gets to see the panel. Local preview has no wallet-signed identity to check
+// against /scene-admin, so everyone is an admin there — the Creator Hub runtime
+// makes the same call, and without it the panel would be untestable offline.
+export function isSceneAdmin(admins: SceneAdmin[], address: string | undefined): boolean {
+  if (isPreview()) return true
+  if (address === undefined) return false
+  const lower = address.toLowerCase()
+  return admins.some((admin) => admin.address === lower)
+}
+
+export function toSceneAdmins(response: SceneAdminResponse[]): SceneAdmin[] {
+  return response
+    .map((entry) => ({
+      address: entry.admin.toLowerCase(),
+      name: entry.name,
+      verified: !entry.name.includes('#'),
+      canBeRemoved: entry.canBeRemoved === true
+    }))
+    .sort((a) => (a.canBeRemoved ? 1 : -1))
+}

package/prefabs/admin-tools/scripts/components.ts

@@ -0,0 +1,190 @@
+// The asset-packs:: components this prefab reads and writes, defined on the scene
+// engine. A component's numeric id is derived from its name, so these decode the
+// exact bytes the editor authored — but FIELD ORDER MATTERS (Schemas.Map serializes
+// in insertion order), so every spec here is a verbatim copy of the editor registry
+// in packages/scene/src/custom-registry.ts, which itself mirrors the Creator Hub.
+import { engine, Schemas } from '@dcl/sdk/ecs'
+
+export enum AdminPermissions {
+  PUBLIC = 'PUBLIC',
+  PRIVATE = 'PRIVATE'
+}
+
+export enum MediaSource {
+  VideoURL,
+  LiveStream
+}
+
+export const Actions = engine.defineComponent('asset-packs::Actions', {
+  id: Schemas.Int,
+  value: Schemas.Array(
+    Schemas.Map({
+      name: Schemas.String,
+      type: Schemas.String,
+      jsonPayload: Schemas.String,
+      allowedInBasicView: Schemas.Optional(Schemas.Boolean),
+      basicViewId: Schemas.Optional(Schemas.String),
+      default: Schemas.Optional(Schemas.Boolean)
+    })
+  )
+})
+
+export const States = engine.defineComponent('asset-packs::States', {
+  id: Schemas.Number,
+  value: Schemas.Array(Schemas.String),
+  defaultValue: Schemas.Optional(Schemas.String),
+  currentValue: Schemas.Optional(Schemas.String),
+  previousValue: Schemas.Optional(Schemas.String)
+})
+
+export const AdminTools = engine.defineComponent('asset-packs::AdminTools', {
+  adminPermissions: Schemas.EnumString<AdminPermissions>(AdminPermissions, AdminPermissions.PUBLIC),
+  authorizedAdminUsers: Schemas.Map({
+    me: Schemas.Boolean,
+    sceneOwners: Schemas.Boolean,
+    allowList: Schemas.Boolean,
+    adminAllowList: Schemas.Array(Schemas.String)
+  }),
+  moderationControl: Schemas.Map({
+    isEnabled: Schemas.Boolean,
+    kickCoordinates: Schemas.Map({
+      x: Schemas.Number,
+      y: Schemas.Number,
+      z: Schemas.Number
+    }),
+    allowNonOwnersManageAdminAllowList: Schemas.Boolean
+  }),
+  textAnnouncementControl: Schemas.Map({
+    isEnabled: Schemas.Boolean,
+    playSoundOnEachAnnouncement: Schemas.Boolean,
+    showAuthorOnEachAnnouncement: Schemas.Boolean
+  }),
+  videoControl: Schemas.Map({
+    isEnabled: Schemas.Boolean,
+    disableVideoPlayersSound: Schemas.Boolean,
+    showAuthorOnVideoPlayers: Schemas.Boolean,
+    linkAllVideoPlayers: Schemas.Boolean,
+    videoPlayers: Schemas.Optional(
+      Schemas.Array(
+        Schemas.Map({
+          entity: Schemas.Int,
+          customName: Schemas.String
+        })
+      )
+    )
+  }),
+  smartItemsControl: Schemas.Map({
+    isEnabled: Schemas.Boolean,
+    linkAllSmartItems: Schemas.Boolean,
+    smartItems: Schemas.Optional(
+      Schemas.Array(
+        Schemas.Map({
+          entity: Schemas.Int,
+          customName: Schemas.String,
+          defaultAction: Schemas.String
+        })
+      )
+    )
+  }),
+  rewardsControl: Schemas.Map({
+    isEnabled: Schemas.Boolean,
+    rewardItems: Schemas.Optional(
+      Schemas.Array(
+        Schemas.Map({
+          entity: Schemas.Int,
+          customName: Schemas.String
+        })
+      )
+    )
+  })
+})
+
+export const VideoScreen = engine.defineComponent('asset-packs::VideoScreen', {
+  thumbnail: Schemas.String,
+  defaultMediaSource: Schemas.EnumNumber<MediaSource>(MediaSource, MediaSource.VideoURL),
+  defaultURL: Schemas.String
+})
+
+export const Rewards = engine.defineComponent('asset-packs::Rewards', {
+  campaignId: Schemas.String,
+  dispenserKey: Schemas.String,
+  testMode: Schemas.Boolean
+})
+
+export const TextAnnouncements = engine.defineComponent('asset-packs::TextAnnouncements', {
+  text: Schemas.String,
+  author: Schemas.Optional(Schemas.String),
+  id: Schemas.String
+})
+
+export const VideoControlState = engine.defineComponent('asset-packs::VideoControlState', {
+  endsAt: Schemas.Optional(Schemas.Int64),
+  streamKey: Schemas.Optional(Schemas.String)
+})
+
+// syncEntity needs a network id every client agrees on before any of them has
+// seen the scene. The editor allocates scene entities from 8001 up, so 8000 is
+// reserved for the admin entity's shared video state (same value the Hub uses).
+export const VIDEO_CONTROL_SYNC_ID = 8000
+
+// Plain mirrors of the schemas above. The component getters return DeepReadonly
+// views; these are what the tabs and the message bus pass around.
+export interface ActionEntry {
+  name: string
+  type: string
+  jsonPayload: string
+}
+
+// Everything is readonly because this is what AdminTools.get() hands back
+// (DeepReadonly of the schema) — the tabs receive that value directly, no cast.
+export interface VideoPlayerRef {
+  readonly entity: number
+  readonly customName: string
+}
+
+export interface SmartItemRef {
+  readonly entity: number
+  readonly customName: string
+  readonly defaultAction: string
+}
+
+export interface RewardItemRef {
+  readonly entity: number
+  readonly customName: string
+}
+
+export interface AdminToolsValue {
+  readonly adminPermissions: AdminPermissions
+  readonly authorizedAdminUsers: {
+    readonly me: boolean
+    readonly sceneOwners: boolean
+    readonly allowList: boolean
+    readonly adminAllowList: readonly string[]
+  }
+  readonly moderationControl: {
+    readonly isEnabled: boolean
+    readonly kickCoordinates: { readonly x: number; readonly y: number; readonly z: number }
+    readonly allowNonOwnersManageAdminAllowList: boolean
+  }
+  readonly textAnnouncementControl: {
+    readonly isEnabled: boolean
+    readonly playSoundOnEachAnnouncement: boolean
+    readonly showAuthorOnEachAnnouncement: boolean
+  }
+  readonly videoControl: {
+    readonly isEnabled: boolean
+    readonly disableVideoPlayersSound: boolean
+    readonly showAuthorOnVideoPlayers: boolean
+    readonly linkAllVideoPlayers: boolean
+    readonly videoPlayers?: readonly VideoPlayerRef[]
+  }
+  readonly smartItemsControl: {
+    readonly isEnabled: boolean
+    readonly linkAllSmartItems: boolean
+    readonly smartItems?: readonly SmartItemRef[]
+  }
+  readonly rewardsControl: {
+    readonly isEnabled: boolean
+    readonly rewardItems?: readonly RewardItemRef[]
+  }
+}

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

@@ -0,0 +1,53 @@
+// UI textures ship inside the prefab folder instead of the builder-items CDN, so
+// a placed scene stays self-contained. The prefab folder is discovered at runtime
+// from the script's own location (sdk-commands passes the script's *directory* as
+// the first constructor argument) — it has to be, because placing the prefab twice
+// gives the second copy a different folder (custom/admin-tools_2/…).
+const SCRIPTS_SEGMENT = '/scripts'
+
+export function assetBase(scriptSrc: string): string {
+  const slash = scriptSrc.lastIndexOf('/')
+  const dir = /\.tsx?$/.test(scriptSrc) && slash > -1 ? scriptSrc.slice(0, slash) : scriptSrc
+  const trimmed = dir.replace(/\/+$/, '')
+  if (trimmed === 'scripts') return ''
+  return trimmed.endsWith(SCRIPTS_SEGMENT) ? trimmed.slice(0, -SCRIPTS_SEGMENT.length) : trimmed
+}
+
+// Every texture in the prefab lives under <assetBase>/icons/. Tabs that ship
+// their own glyphs build their paths with this instead of re-deriving the root.
+export function iconPath(base: string, name: string): string {
+  return base === '' ? `icons/${name}` : `${base}/icons/${name}`
+}
+
+export interface AdminIcons {
+  panelBackground: string
+  panelToggle: string
+  tabModeration: string
+  tabVideo: string
+  tabSmartItems: string
+  tabTextAnnouncements: string
+  tabRewards: string
+  headerModeration: string
+  headerVideo: string
+  headerSmartItems: string
+  headerTextAnnouncements: string
+  headerRewards: string
+}
+
+export function adminIcons(base: string): AdminIcons {
+  const icon = (name: string): string => iconPath(base, name)
+  return {
+    panelBackground: icon('admin-tool-background.png'),
+    panelToggle: icon('admin-panel-control-button.png'),
+    tabModeration: icon('admin-panel-moderation-control-button.png'),
+    tabVideo: icon('admin-panel-video-control-button.png'),
+    tabSmartItems: icon('admin-panel-smart-item-control-button.png'),
+    tabTextAnnouncements: icon('admin-panel-text-announcement-control-button.png'),
+    tabRewards: icon('admin-panel-rewards-control-button.png'),
+    headerModeration: icon('moderation-control-icon.png'),
+    headerVideo: icon('video-control.png'),
+    headerSmartItems: icon('smart-item-control.png'),
+    headerTextAnnouncements: icon('text-announcement-control.png'),
+    headerRewards: icon('rewards-control.png')
+  }
+}