Skybox time settings - Versioning SceneMetada component by alejandralevy · Pull Request #1184 · decentraland/js-sdk-toolchain

alejandralevy · 2025-07-31T11:44:04Z

Add skybox config on scene settings (skybox time and trasition)
The skybox sets the time of the scene while the transition sets how the skybox moves from the current time to the scene time
When the skybox value is setted, it cannot be changed from the scene itself
Run migration to move data from SceneMetadata componente to SceneMetadata-v1 component
Support easy versioning for future changes of properties

To test:
As it includes a migration of the scene metada componente, please test this feature in new scenes and old scenes.

Screen.Recording.2025-08-04.at.16.25.44.mov

Screen.Recording.2025-07-31.at.13.41.57.mov

github-actions · 2025-07-31T11:48:30Z

Test this pull request

The @dcl/sdk package can be tested in scenes by running

npm install "https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/feat/skybox-time-settings/dcl-sdk-7.9.3-16727417707.commit-d248c5e.tgz"

To test with npx init

export SDK_COMMANDS="https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/feat/skybox-time-settings/dcl-sdk-commands-7.9.3-16727417707.commit-d248c5e.tgz"
npx $SDK_COMMANDS init

The @dcl/inspector package can be tested by visiting this url

Or by installing it via NPM

npm install "https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/feat/skybox-time-settings/@dcl/inspector/dcl-inspector-7.9.3-16727417707.commit-d248c5e.tgz"

The /changerealm command to test test in-world

/changerealm https://sdk-team-cdn.decentraland.org/ipfs/feat/skybox-time-settings-e2e

You can preview this build entering:
https://playground.decentraland.org/?sdk-branch=feat/skybox-time-settings

cloudflare-workers-and-pages · 2025-07-31T12:36:01Z

Deploying js-sdk-toolchain with Cloudflare Pages

Latest commit:	`5f40711`
Status:	✅ Deploy successful!
Preview URL:	https://cd6f4b3b.js-sdk-toolchain.pages.dev
Branch Preview URL:	https://feat-skybox-time-settings.js-sdk-toolchain.pages.dev

View logs

nicoecheza · 2025-08-01T13:27:08Z

+            onChange={handleSkyboxAutoChange}
+          />
+          <RangeHourField
+            value={componentValue.skyboxConfig?.fixedTime || MIDDAY_SECONDS}


in case fixedTime is 0, this will default to MIDDAY_SECONDS. Is this correct? (maybe replace it with ??)

nicoecheza · 2025-08-01T13:28:49Z

+    skyboxConfig: {
+      fixedTime: Number(inputs.skyboxConfig.fixedTime || MIDDAY_SECONDS),
+      transitionMode: TransitionMode.TM_FORWARD
+    },


same as above for all the previous ones

nicoecheza · 2025-08-01T13:31:40Z

+  rightLabel?: string
+  error?: string | boolean
+  info?: React.ReactNode
+  isValidValue?: (value: any) => boolean


value: number

I finally removed this prop

nicoecheza · 2025-08-01T13:32:01Z

+export type Props = React.InputHTMLAttributes<Omit<HTMLElement, 'type'>> & {
+  label?: React.ReactNode
+  rightLabel?: string
+  error?: string | boolean


I think this one should be string | undefined

Also removed the error prop

nicoecheza · 2025-08-01T13:33:09Z

+    info,
+    value = 0,
+    min = 0,
+    max = 86400,


maybe give this a meaningful name? 🤔

the min and the max value are now set in the component itself

nicoecheza · 2025-08-01T13:34:46Z

+  useEffect(() => {
+    const numValue = Number(value)
+    if (numValue !== inputValue) {
+      setInputValue(numValue)
+      setTextValue(formatHour(numValue))
+    }
+  }, [value])


I think this one is not necessary 🤔

it updates the state after a value is received by prop, because the value is not being directly used, it's on the useState

nicoecheza · 2025-08-01T13:36:58Z

+  const [inputValue, setInputValue] = useState<number>(Number(value))
+  const [textValue, setTextValue] = useState(formatHour(Number(value)))


seems like this two always change together, maybe we can const [value, setValue] = useState<{ timeInSeconds: number; timeInHHMM: string; }> ?

nicoecheza · 2025-08-01T13:56:34Z

+      if (value.length <= 5) {
+        setTextValue(value)
+
+        // Si es un formato válido de hora, actualizar el slider
+        if (isValidTimeFormat(value)) {
+          const seconds = parseTimeInput(value)
+          if (seconds >= Number(min) && seconds <= Number(max)) {
+            setInputValue(seconds)
+            onChange &&
+              onChange({
+                ...e,
+                target: { ...e.target, value: seconds.toString() }
+              } as React.ChangeEvent<HTMLInputElement>)
+          }
+        }
+      }
+    },


I think we should split the logic for handling changes on the value input and the text input so we end up with something like:

handleChangeRange => does what handleChange is currently doing + call handleChange

handleChangeTime => does what handleChangeTextField is currently doing + call handleChange

handleChange => check if whole value ({ timeInSeconds, timeInHHMM }) is valid and calls props.onChange

I'll double check this logic because now that I'm using a native time input, the validation is done by the input itself, so I don't think I need most of these validations

nicoecheza · 2025-08-01T14:05:15Z

+export function migrateSceneMetadata(engine: IEngine) {
+  const latestComponent = getCompositeLatestSceneComponent(engine)
+
+  if (!latestComponent) return
+
+  const { component, value } = latestComponent
+
+  const latestComponentVersion = getLatestSceneComponentVersion()
+  const isRunningLatestVersion = component.componentName === latestComponentVersion.key
+
+  if (isRunningLatestVersion) return
+
+  const oldComponent = component
+  oldComponent.deleteFrom(engine.RootEntity)
+  engine.removeComponentDefinition(oldComponent.componentName)
+
+  const SceneMetadata = engine.getComponent(latestComponentVersion.key) as EditorComponents['Scene']
+  SceneMetadata.createOrReplace(engine.RootEntity, value)
+}


🚀 🚀 🚀 🚀

(remember to delete all definitions except the latest one)

codecov · 2025-08-04T11:43:27Z

Codecov Report

❌ Patch coverage is 91.61290% with 26 lines in your changes missing coverage. Please review.
✅ Project coverage is 59.53%. Comparing base (63d0108) to head (06af810).
⚠️ Report is 24 commits behind head on main.

Files with missing lines	Patch %	Lines
...er/host/utils/migrations/migrate-scene-metadata.ts	86.66%	7 Missing and 1 partial ⚠️
...nspector/src/components/ui/RangeHourField/types.ts	0.00%	6 Missing and 1 partial ⚠️
.../inspector/src/lib/sdk/components/SceneMetadata.ts	95.56%	7 Missing ⚠️
...components/EntityInspector/SceneInspector/types.ts	0.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1184      +/-   ##
==========================================
- Coverage   62.00%   59.53%   -2.47%     
==========================================
  Files         621      631      +10     
  Lines       20903    23065    +2162     
  Branches     2536     2585      +49     
==========================================
+ Hits        12960    13731     +771     
- Misses       7501     8889    +1388     
- Partials      442      445       +3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

alejandralevy and others added 10 commits July 28, 2025 16:05

feat: add components to change skybox configs

5d5688f

tmp

8e08ee1

feat: add properties to v1

c634e19

feat: merge migration

93be272

feat: Fix prop name and initial value

ecab779

feat: Fix issue with range selector

949a05d

feat: Add hour selector

4e70308

feat: Add gradient to hour range field

520ba10

feat: Remove import and comment

00508d4

feat: fix test and remove seconds value

0f9284b

feat: fix test value

1d027eb

cyaiox reviewed Jul 31, 2025

View reviewed changes

Comment thread packages/@dcl/inspector/src/components/EntityInspector/SceneInspector/types.ts Outdated

alejandralevy added 3 commits July 31, 2025 21:10

feat: add skybox config on root level

0f6c8c3

feat: add direction to skybox config

5ee129f

feat: fix type errror

2df97c7

nicoecheza requested changes Aug 1, 2025

View reviewed changes

alejandralevy added 6 commits August 1, 2025 16:07

feat: remove old components definitions

85507f9

fix: wrong parameter on function and enum values

bae6765

feat: handle transition mode change with getInputProps hoook

e4acf71

feat: fix transition mode not being sent

4b21fd0

feat: refactor range hour component

ae9919d

feat: remove unnecessary useEffect

06af810

alejandralevy added 3 commits August 4, 2025 15:37

feat: add useEffect to update state

4287992

feat: fix breaking test

237cd90

Merge branch 'main' into feat/skybox-time-settings

1474bb5

alejandralevy mentioned this pull request Aug 4, 2025

feat: link inspector version decentraland/creator-hub#720

Closed

feat: fix css issue

5f40711

nicoecheza approved these changes Aug 6, 2025

View reviewed changes

nicoecheza merged commit d7bbd0b into main Aug 6, 2025
9 checks passed

nicoecheza deleted the feat/skybox-time-settings branch August 6, 2025 13:22

		const [inputValue, setInputValue] = useState<number>(Number(value))
		const [textValue, setTextValue] = useState(formatHour(Number(value)))

Uh oh!

Conversation

alejandralevy commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test this pull request

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying js-sdk-toolchain with Cloudflare Pages

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alejandralevy Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Aug 4, 2025

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alejandralevy commented Jul 31, 2025 •

edited

Loading

github-actions Bot commented Jul 31, 2025 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 31, 2025 •

edited

Loading

alejandralevy Aug 4, 2025 •

edited

Loading