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

package/prefabs/admin-tools/scripts/tabs/video/LiveStream.tsx

@@ -0,0 +1,284 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { VideoPlayer, type Entity } from '@dcl/sdk/ecs'
+import { copyToClipboard, openExternalUrl } from '~system/RestrictedActions'
+import { VideoControlState } from '../../components'
+import { generateStreamKey, getStreamKey, resetStreamKey } from './api'
+import { isLiveSource, LIVEKIT_STREAM_SRC, type VideoControls } from './controls'
+import type { VideoIcons } from './icons'
+import {
+  hideKey,
+  isKeyVisible,
+  markCopied,
+  REVEAL_SECONDS,
+  revealKey,
+  revealRemaining,
+  videoTab,
+  wasCopied
+} from './state'
+import { Volume } from './Volume'
+import { Button, COLORS, Column, ErrorNote, Hint, Row, SectionLabel, SubHeader, ReadOnlyField } from './ui'
+
+const RTMP_SERVER_URL = 'rtmps://dcl.rtmp.livekit.cloud/x'
+const SUPPORT_URL = 'https://docs.decentraland.org//creator/editor/live-streaming'
+
+function formatRemaining(endsAt: number): string {
+  const remaining = Math.max(0, endsAt - Date.now())
+  const days = Math.floor(remaining / 86_400_000)
+  if (days >= 1) return `${days} ${days === 1 ? 'day' : 'days'}`
+  const hours = Math.floor(remaining / 3_600_000)
+  const minutes = Math.floor((remaining % 3_600_000) / 60_000)
+  const seconds = Math.floor((remaining % 60_000) / 1000)
+  return [hours, minutes, seconds].map((part) => part.toString().padStart(2, '0')).join(':')
+}
+
+function storeEndsAt(self: Entity, endsAt: number | undefined): void {
+  const state = VideoControlState.getMutableOrNull(self)
+  if (state === null) return
+  state.endsAt = endsAt
+}
+
+export function LiveStream(props: {
+  self: Entity
+  entity: Entity
+  icons: VideoIcons
+  controls: VideoControls
+  soundDisabled: boolean
+}): ReactEcs.JSX.Element {
+  const [loading, setLoading] = ReactEcs.useState(!videoTab.streamKeyLoaded)
+  const [busy, setBusy] = ReactEcs.useState(false)
+  const [error, setError] = ReactEcs.useState('')
+
+  ReactEcs.useEffect(() => {
+    if (videoTab.streamKeyLoaded) return
+    void (async () => {
+      const [failure, data] = await getStreamKey()
+      videoTab.streamKeyLoaded = true
+      videoTab.hasStreamKey = failure === null
+      videoTab.streamKeyEndsAt = failure === null ? data.endsAt : 0
+      storeEndsAt(props.self, failure === null ? data.endsAt : undefined)
+      setLoading(false)
+    })()
+  }, [])
+
+  const video = VideoPlayer.getOrNull(props.entity)
+  const active = isLiveSource(video?.src ?? '')
+  const visible = isKeyVisible()
+  const endsAt = VideoControlState.getOrNull(props.self)?.endsAt ?? videoTab.streamKeyEndsAt
+
+  if (videoTab.confirmReset) {
+    return (
+      <Column uiTransform={{ alignItems: 'center', padding: { top: 24, bottom: 24 } }}>
+        <Label
+          value="<b>Are you sure you want to reset your Stream Key?</b>"
+          fontSize={16}
+          color={COLORS.offWhite}
+        />
+        <Hint
+          text="Active streams using this stream key will be disconnected."
+          uiTransform={{ margin: { top: 6, bottom: 20 } }}
+        />
+        <Row uiTransform={{ justifyContent: 'center' }}>
+          <Button
+            label="Cancel"
+            variant="primary"
+            disabled={busy}
+            uiTransform={{ width: 'auto', margin: { right: 16 } }}
+            onClick={() => {
+              videoTab.confirmReset = false
+            }}
+          />
+          <Button
+            label="Reset"
+            variant="danger"
+            disabled={busy}
+            uiTransform={{ width: 'auto' }}
+            onClick={() => {
+              setBusy(true)
+              void (async () => {
+                const [failure, data] = await resetStreamKey()
+                setBusy(false)
+                if (failure !== null) {
+                  setError(failure)
+                  return
+                }
+                hideKey()
+                videoTab.hasStreamKey = true
+                videoTab.streamKeyEndsAt = data.endsAt
+                storeEndsAt(props.self, data.endsAt)
+                videoTab.confirmReset = false
+              })()
+            }}
+          />
+        </Row>
+        {error !== '' ? <ErrorNote icon={props.icons.error} text={error} /> : null}
+      </Column>
+    )
+  }
+
+  return (
+    <Column>
+      <SubHeader
+        icon={props.icons.sourceLive}
+        title="Stream"
+        helpIcon={props.icons.help}
+        onHelp={() => {
+          void openExternalUrl({ url: SUPPORT_URL })
+        }}
+      />
+      <Hint text="Use the RTMP server and stream key below in your broadcasting software to start streaming to this screen." />
+
+      {loading ? <Hint text="Loading stream key…" uiTransform={{ margin: { top: 16 } }} /> : null}
+
+      {!loading && !videoTab.hasStreamKey ? (
+        <Column uiTransform={{ alignItems: 'center', margin: { top: 16 } }}>
+          <Button
+            label={busy ? 'Generating…' : 'Get Stream Key'}
+            variant="primary"
+            disabled={busy}
+            fontSize={17}
+            uiTransform={{ width: 'auto', height: 46 }}
+            onClick={() => {
+              setBusy(true)
+              setError('')
+              void (async () => {
+                const [failure, data] = await generateStreamKey()
+                setBusy(false)
+                if (failure !== null) {
+                  setError(failure)
+                  return
+                }
+                videoTab.hasStreamKey = true
+                videoTab.streamKeyEndsAt = data.endsAt
+                storeEndsAt(props.self, data.endsAt)
+              })()
+            }}
+          />
+          <Hint
+            text="Do not share your stream key with anyone, and be careful not to display it on screen while streaming."
+            color={COLORS.danger}
+            uiTransform={{ margin: { top: 16 } }}
+          />
+        </Column>
+      ) : null}
+
+      {!loading && videoTab.hasStreamKey ? (
+        <Column>
+          <SectionLabel text="RTMP Server" />
+          <ReadOnlyField
+            value={RTMP_SERVER_URL}
+            actionLabel={wasCopied('rtmp') ? 'Copied!' : 'Copy'}
+            onAction={() => {
+              void copyToClipboard({ text: RTMP_SERVER_URL })
+              markCopied('rtmp')
+            }}
+          />
+          <SectionLabel text="Stream Key" />
+          <ReadOnlyField
+            value={visible ? videoTab.revealedKey : '************'}
+            actionLabel={wasCopied('key') ? 'Copied!' : 'Copy'}
+            onAction={() => {
+              if (visible) {
+                void copyToClipboard({ text: videoTab.revealedKey })
+                markCopied('key')
+                return
+              }
+              void (async () => {
+                const [failure, data] = await getStreamKey()
+                if (failure !== null) {
+                  setError(failure)
+                  return
+                }
+                void copyToClipboard({ text: data.streamingKey })
+                markCopied('key')
+              })()
+            }}
+          >
+            <UiEntity
+              uiTransform={{ width: 22, height: 22, margin: { right: 8 } }}
+              uiBackground={{
+                textureMode: 'stretch',
+                texture: { src: visible ? props.icons.eyeHide : props.icons.eyeShow },
+                color: COLORS.black
+              }}
+              onMouseDown={() => {
+                if (visible) {
+                  hideKey()
+                  return
+                }
+                void (async () => {
+                  const [failure, data] = await getStreamKey()
+                  if (failure !== null) {
+                    setError(failure)
+                    return
+                  }
+                  revealKey(data.streamingKey)
+                })()
+              }}
+            />
+          </ReadOnlyField>
+
+          <UiEntity
+            uiTransform={{ width: '100%', height: 4, display: visible ? 'flex' : 'none' }}
+            uiBackground={{ color: COLORS.line }}
+          >
+            <UiEntity
+              uiTransform={{ width: `${(revealRemaining() / REVEAL_SECONDS) * 100}%`, height: '100%' }}
+              uiBackground={{ color: COLORS.accent }}
+            />
+          </UiEntity>
+
+          <Row uiTransform={{ justifyContent: 'space-between', margin: { top: 12 } }}>
+            {endsAt > Date.now() ? (
+              <Column uiTransform={{ width: 'auto' }}>
+                <Hint text="Stream expires in:" color={COLORS.dim} />
+                <Hint text={formatRemaining(endsAt)} color={COLORS.dim} />
+              </Column>
+            ) : (
+              <ErrorNote
+                icon={props.icons.error}
+                text="Stream timed out. Please restart the stream in your broadcasting software."
+              />
+            )}
+            {active ? (
+              <Button
+                label="Deactivate"
+                variant="text"
+                uiTransform={{ width: 'auto' }}
+                onClick={() => props.controls.setSource('')}
+              />
+            ) : (
+              <Button
+                label="Activate"
+                variant="success"
+                uiTransform={{ width: 'auto' }}
+                onClick={() => props.controls.setSource(LIVEKIT_STREAM_SRC)}
+              />
+            )}
+          </Row>
+
+          <Volume
+            label="Stream Volume"
+            entity={props.entity}
+            icons={props.icons}
+            controls={props.controls}
+            soundDisabled={props.soundDisabled}
+          />
+
+          <Row uiTransform={{ margin: { top: 16 } }}>
+            <Button
+              label="Reset Stream Key"
+              variant="danger"
+              uiTransform={{ width: 'auto' }}
+              onClick={() => {
+                setError('')
+                videoTab.confirmReset = true
+              }}
+            />
+          </Row>
+        </Column>
+      ) : null}
+
+      {error !== '' ? <ErrorNote icon={props.icons.error} text={error} /> : null}
+    </Column>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/video/SpeakerShowcase.tsx

@@ -0,0 +1,112 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { sourceLabel, type CastParticipant, type CastTrack } from './api'
+import type { VideoIcons } from './icons'
+import { refreshSpeakers } from './speakers'
+import { videoTab } from './state'
+import { Button, COLORS, Column, Divider, Hint, Row } from './ui'
+
+function ParticipantRow(props: {
+  key?: string
+  participant: CastParticipant
+  icons: VideoIcons
+  onSelect: (track: CastTrack) => void
+}): ReactEcs.JSX.Element {
+  return (
+    <Column>
+      <Row uiTransform={{ justifyContent: 'space-between', margin: { top: 6, bottom: 6 } }}>
+        <Row uiTransform={{ width: 'auto' }}>
+          <UiEntity
+            uiTransform={{ width: 20, height: 20, margin: { right: 8 } }}
+            uiBackground={{
+              textureMode: 'stretch',
+              texture: { src: props.icons.person },
+              color: COLORS.white
+            }}
+          />
+          <Label
+            value={`<b>${props.participant.name}</b>`}
+            fontSize={14}
+            color={COLORS.white}
+            textAlign="middle-left"
+          />
+        </Row>
+        <Row uiTransform={{ width: 'auto' }}>
+          {props.participant.tracks.map((track) => (
+            <Button
+              key={track.sid}
+              label={sourceLabel(track.sourceType)}
+              variant={videoTab.activeTrackSid === track.sid ? 'primary' : 'secondary'}
+              icon={videoTab.activeTrackSid === track.sid ? props.icons.star : undefined}
+              fontSize={14}
+              uiTransform={{ width: 'auto', height: 32, margin: { left: 6 } }}
+              onClick={() => props.onSelect(track)}
+            />
+          ))}
+        </Row>
+      </Row>
+      <Divider />
+    </Column>
+  )
+}
+
+export function SpeakerShowcase(props: {
+  icons: VideoIcons
+  onSelectTrack: (track: CastTrack) => void
+  onAutomatic: () => void
+}): ReactEcs.JSX.Element {
+  const automatic = videoTab.activeTrackSid === undefined
+  return (
+    <Column uiTransform={{ margin: { top: 12 } }}>
+      <Row uiTransform={{ justifyContent: 'space-between' }}>
+        <Label
+          value={`<b>SPEAKER SHOWCASE</b> (${videoTab.participants.length})`}
+          fontSize={16}
+          color={COLORS.white}
+          textAlign="middle-left"
+        />
+        <Button
+          label="Refresh"
+          variant="text"
+          fontSize={14}
+          uiTransform={{ width: 'auto', height: 30 }}
+          onClick={refreshSpeakers}
+        />
+      </Row>
+      <Row uiTransform={{ justifyContent: 'space-between', margin: { top: 8, bottom: 8 } }}>
+        <Column uiTransform={{ width: '60%' }}>
+          <Label
+            value="Automatic Showcase"
+            fontSize={14}
+            color={COLORS.white}
+            textAlign="middle-left"
+            uiTransform={{ height: 20 }}
+          />
+          <Hint text="Speakers are featured automatically when they speak." />
+        </Column>
+        <Button
+          label={automatic ? 'Active' : 'Turn On'}
+          icon={automatic ? props.icons.star : undefined}
+          variant={automatic ? 'primary' : 'secondary'}
+          fontSize={14}
+          disabled={automatic}
+          uiTransform={{ width: 'auto', height: 32 }}
+          onClick={props.onAutomatic}
+        />
+      </Row>
+      <Divider />
+      <Column uiTransform={{ maxHeight: 260, overflow: 'scroll' }}>
+        {videoTab.participants.length === 0 ? (
+          <Hint text="No active participants in the Cast room." />
+        ) : null}
+        {videoTab.participants.map((participant) => (
+          <ParticipantRow
+            key={participant.identity}
+            participant={participant}
+            icons={props.icons}
+            onSelect={props.onSelectTrack}
+          />
+        ))}
+      </Column>
+    </Column>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/video/VideoUrl.tsx

@@ -0,0 +1,107 @@
+import ReactEcs, { Input } from '@dcl/sdk/react-ecs'
+import { openExternalUrl } from '~system/RestrictedActions'
+import { VideoPlayer, type Entity } from '@dcl/sdk/ecs'
+import { isVideoUrl, type VideoControls } from './controls'
+import type { VideoIcons } from './icons'
+import { Volume } from './Volume'
+import { Button, COLORS, Column, Hint, Row, SectionLabel, SubHeader } from './ui'
+
+const HELP_URL = 'https://docs.decentraland.org/creator/scene-editor/interactivity/video-screen'
+
+export function VideoUrl(props: {
+  entity: Entity
+  icons: VideoIcons
+  controls: VideoControls
+  soundDisabled: boolean
+}): ReactEcs.JSX.Element {
+  const video = VideoPlayer.getOrNull(props.entity)
+  const src = video?.src ?? ''
+  const active = isVideoUrl(src)
+  const [draft, setDraft] = ReactEcs.useState(active ? src : '')
+
+  ReactEcs.useEffect(() => {
+    setDraft(isVideoUrl(src) ? src : '')
+  }, [props.entity])
+
+  return (
+    <Column>
+      <SubHeader
+        icon={props.icons.sourceVideo}
+        title="Video URL"
+        helpIcon={props.icons.help}
+        onHelp={() => {
+          void openExternalUrl({ url: HELP_URL })
+        }}
+      />
+      <Hint text="Play videos by pasting an .m3u8 video URL below." />
+      <SectionLabel text="Video URL" />
+      <Input
+        value={draft}
+        onChange={setDraft}
+        fontSize={15}
+        textAlign="middle-left"
+        placeholder="Paste your video URL"
+        placeholderColor={COLORS.gray}
+        color={COLORS.black}
+        uiBackground={{ color: COLORS.offWhite }}
+        uiTransform={{ width: '100%', height: 44, borderRadius: 8 }}
+      />
+      <Row uiTransform={{ justifyContent: 'flex-end', margin: { top: 10 } }}>
+        {active ? (
+          <Button
+            label="Deactivate"
+            variant="text"
+            uiTransform={{ width: 'auto', margin: { right: 8 } }}
+            onClick={() => props.controls.setSource('')}
+          />
+        ) : null}
+        {draft !== src ? (
+          <Button
+            label={active ? 'Update' : 'Activate'}
+            variant="success"
+            disabled={!isVideoUrl(draft)}
+            uiTransform={{ width: 'auto' }}
+            onClick={() => props.controls.setSource(draft)}
+          />
+        ) : null}
+      </Row>
+      <SectionLabel text="Video Playback" />
+      <Row>
+        <Button
+          label="Play"
+          icon={props.icons.play}
+          disabled={!active}
+          uiTransform={{ width: 'auto', margin: { right: 8 } }}
+          onClick={props.controls.play}
+        />
+        <Button
+          label="Pause"
+          icon={props.icons.pause}
+          disabled={!active}
+          uiTransform={{ width: 'auto', margin: { right: 8 } }}
+          onClick={props.controls.pause}
+        />
+        <Button
+          label="Restart"
+          disabled={!active}
+          uiTransform={{ width: 'auto', margin: { right: 8 } }}
+          onClick={props.controls.restart}
+        />
+        <Button
+          icon={props.icons.loop}
+          variant={video?.loop === true ? 'primary' : 'secondary'}
+          disabled={!active}
+          uiTransform={{ width: 46 }}
+          onClick={() => props.controls.setLoop(video?.loop !== true)}
+        />
+      </Row>
+      <Volume
+        label="Video Volume"
+        entity={props.entity}
+        icons={props.icons}
+        controls={props.controls}
+        soundDisabled={props.soundDisabled}
+      />
+    </Column>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/video/Volume.tsx

@@ -0,0 +1,69 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { DEFAULT_VOLUME, VOLUME_STEP, volumeOf, type VideoControls } from './controls'
+import type { VideoIcons } from './icons'
+import { Button, COLORS, Column, Row, SectionLabel } from './ui'
+import type { Entity } from '@dcl/sdk/ecs'
+
+export function Volume(props: {
+  label: string
+  entity: Entity
+  icons: VideoIcons
+  controls: VideoControls
+  soundDisabled: boolean
+}): ReactEcs.JSX.Element {
+  if (props.soundDisabled) {
+    return (
+      <Row uiTransform={{ margin: { top: 12 } }}>
+        <UiEntity
+          uiTransform={{ width: 22, height: 22, margin: { right: 8 } }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: props.icons.mute },
+            color: COLORS.gray
+          }}
+        />
+        <Label
+          value="Sound is disabled for all screens"
+          fontSize={14}
+          color={COLORS.gray}
+          textAlign="middle-left"
+        />
+      </Row>
+    )
+  }
+
+  const volume = volumeOf(props.entity)
+  const percentage = `${Math.round((volume ?? DEFAULT_VOLUME) * 100)}%`
+
+  return (
+    <Column uiTransform={{ margin: { top: 12 } }}>
+      <SectionLabel text={props.label} />
+      <Row>
+        <Button
+          icon={props.icons.volumeMinus}
+          disabled={volume === 0}
+          uiTransform={{ width: 46, margin: { right: 10 } }}
+          onClick={() => props.controls.stepVolume(-VOLUME_STEP)}
+        />
+        <Label
+          value={percentage}
+          fontSize={16}
+          color={COLORS.gray}
+          uiTransform={{ width: 56, margin: { right: 10 } }}
+        />
+        <Button
+          icon={props.icons.volumePlus}
+          disabled={volume === 1}
+          uiTransform={{ width: 46, margin: { right: 10 } }}
+          onClick={() => props.controls.stepVolume(VOLUME_STEP)}
+        />
+        <Button
+          icon={props.icons.mute}
+          variant={volume === 0 ? 'primary' : 'secondary'}
+          uiTransform={{ width: 46 }}
+          onClick={() => props.controls.setVolume(volume === 0 ? DEFAULT_VOLUME : 0)}
+        />
+      </Row>
+    </Column>
+  )
+}