feat: Add smart item Admin toolkit #136

cyaiox · 2025-01-31T22:12:03Z

Description

This PR introduces a new Admin Toolkit UI system for managing video players, smart items, and other administrative controls in Decentraland scenes.

Key Features

Core UI Components

Created new Button component with state management and variant support (primary/secondary/text)
Added VideoControl component for managing video players
Created SmartItemsControl for managing smart item actions

Video Control Features

Video player selection with support for multiple players
Play, pause, and restart controls
Volume control with visual feedback
URL input for video source management
"Link All" functionality to control multiple players simultaneously

Smart Items Control Features

Smart item selection dropdown
Action selection for each smart item
Show/Hide entity controls
Action restart functionality
Default action reset capability

State Management

Implemented Map-based state management for UI components
Created efficient state handling for video players
Added smart item state tracking
Proper state synchronization between components

Technical Details

Built using @dcl/react-ecs for UI components
Typescript-based implementation with proper type safety
Efficient state management using Maps
Consistent styling using predefined constants
Component-based architecture for better maintainability

Testing Instructions

Test video player controls:
- Select different video players
- Try play/pause/restart
- Adjust volume
- Test URL input and sharing
- Verify "Link All" functionality
Test smart item controls:
- Select different smart items
- Try different actions
- Test visibility toggling
- Verify action restart
- Check default action reset
Test text announcement controls:
- Write a message
- Close the message
- Write a few messages
- Clear all messages
Test rewards control:
- Release a new Airdrop item
- Test interaction with the rewards server

TODO (Future PRs)

High Priority

Moderation Control Panel
- Implement user moderation features
- Add ban/unban functionality
- Add user list management
- Include moderation logs
UI Style Improvements
- Enhance panels background with better contrast and transparency
- Add proper padding and spacing
- Improve overall visual hierarchy
- Add better error handling
- Enhance user feedback
Button Component Enhancement
- Refine button states visual feedback
- Add hover animations
- Improve disabled state visibility
- Add loading state support
Text announcements Enhancement
- Improve input writing delay
- Improve input length limitation

Nice to Have

New Dropdown Component
- Create custom dropdown implementation
- Add multi-select support
- Improve scrolling behavior
- Add search/filter functionality
- Support keyboard navigation

Type of change

New feature (non-breaking change which adds functionality)

Checklist

My code follows Decentraland's coding standards
I have added proper TypeScript types
Components are properly documented
All UI states are properly handled
The code is ready for review

Models and composers for AdminTools and CollectibleDispenser added in: #143

github-actions · 2025-02-06T22:54:51Z

Test this pull request

The package can be tested by running

npm i "https://sdk-team-cdn.decentraland.org/@dcl/asset-packs/branch/feat/add-admin-toolkit-smart-item/dcl-asset-packs-2.1.3-13597644643.commit-5b87229.tgz"

Remember, if new assets are added in the PR, they won't be avaliable on the CDN until it gets merged. So this can be used to test changes on the package's JS or the catalog.json, but won't work to test newly added items.

…ToolkitUI

today is not possible to know when an animation ends

nicoecheza · 2025-02-13T14:20:35Z

src/actions.ts

+    try {
+      const response = await signedFetch({
+        url: url,
+        ...(init ? { init } : {}),


I think you can use init here

as init could be undefined, this way we avoid errors when attempting to spread it

nicoecheza · 2025-02-13T14:21:45Z

src/actions.ts

+    fetchCampaignsByDispenserKey(dispenserKey).then((campaigns) => {
+      const campaign = campaigns.find((c: any) => c.campaign_id === campaignId)
+      if (campaign && campaign.enabled) {
+        console.log('campaign', { campaign })


just pointing out these logs to be sure if we want them

removing them

nicoecheza · 2025-02-28T12:45:37Z

src/admin-toolkit-ui/utils.ts

+      const sceneOwnersResponse = await fetch(LAND_MANAGER_URL, {
+        method: 'POST',
+        body: JSON.stringify({
+          query: `query getLands\n{\n  parcels(where: {x: ${deployment.sceneBasePosition[0]}, y: ${deployment.sceneBasePosition[1]}}) {\n    id\n    x\n    y\n    owners {\n      id\n      address\n    }\n  }\n}`,


is there a way to format this string so it's readable?

nicoecheza · 2025-02-28T12:47:48Z

src/admin-toolkit.ts

+  sdkHelpers?: ISDKHelpers,
+  playersHelper?: IPlayersHelper,
+) {
+  let adminToolkitEntity: Entity | null = null


since this var is local to this fn, it is possible for someone to create multiple admin toolkit systems. idk if that's a problem we should care or not but just pointing it out

good catch, fixing it!

cyaiox force-pushed the feat/add-admin-toolkit-smart-item branch 4 times, most recently from a831f0c to 169b334 Compare February 14, 2025 04:46

cyaiox force-pushed the feat/add-admin-toolkit-smart-item branch 3 times, most recently from 9525335 to 7bfe862 Compare February 25, 2025 13:51

cyaiox force-pushed the feat/add-admin-toolkit-smart-item branch from b61516e to ebbd249 Compare February 27, 2025 13:41

cyaiox mentioned this pull request Feb 27, 2025

feat: Add AdminTools Smart Item decentraland/js-sdk-toolchain#1066

Open

cyaiox added 20 commits February 27, 2025 16:15

feat: Add smart item admin toolkit

153a304

fix: Update ui text align type

df2941d

feat: Add Text Announcement UI logic

6f452f6

feat: Add pointer events system and players system to the createAdmin…

b6cf6e9

…ToolkitUI

fix: VideoPlayer reference

7fe8499

feat: Add Rewards component and Claim Airdrop action

ad15682

fix: IEngine and PlayersHelper reference

ced26f5

feat: Add NFT_Dispenser smart item

9260461

WIP

21daa30

feat: Add UiInput and UiInputResult components

78745d9

wip

3599c41

fix: Update NFT Dispenser actions

3a4910a

fix: Remove Batch animation action

11e4b4b

today is not possible to know when an animation ends

fix: Update AdminTools properties name

f30ab9e

feat: Add custom Button component

4e0962a

feat: Add showPrompt util

042bb20

feat: Use the engine's PointerEvent system in the action system

f05d347

feat: Add AdminTool panel

91b74a2

feat: Add VideoControl panel

3f2bee3

feat: Add RewardsControl panel

1910151

cyaiox added 21 commits February 27, 2025 16:16

refactor: Update video player control state component

6deb2b3

fix: Show Captcha component

e20c0d0

fix: Limit text announcements to one

97c9e2b

fix: TextAnnouncements to only show one announcement

3e4e6ae

fix: Switching tabs

e169759

fix: VideoControl Share button should play video

1b751c8

fix: AdminTools button styles

9adb7d9

fix: Captcha container style

b8ecae1

fix: Remove prev and next buttons

3621e92

fix: Add logs for rewards requests

d18f7dd

fix: Initialize smart items sync component

4829fdf

fix: Clear text

3e12cd3

fix: Remove unused assets

431aa87

feat: Add sync status for Rewards Items

170dde3

fix: Disable Rewards Control

c601486

fix: Remove Link All Video Players logic

e97037a

fix: Update Smart Items Control logic

bb95235

fix: Button text padding

79f21ff

fix: VideoPlayer input placeholder

ab2a5ef

fix: smart item name

bd88f24

fix: Smart Item Action selection

d7a1ec9

cyaiox marked this pull request as ready for review February 27, 2025 19:16

cyaiox force-pushed the feat/add-admin-toolkit-smart-item branch from 9461020 to d7a1ec9 Compare February 27, 2025 19:16

cyaiox added 2 commits February 27, 2025 16:22

fix: Update CONTENT_URL

6fd0338

fix: Remove unused file

877f8b8

nicoecheza requested changes Feb 28, 2025

View reviewed changes

cyaiox added 2 commits February 28, 2025 18:25

fix: Move variable declaration outside the init

418c968

fix: Remove console.log

7f321a2

cyaiox requested a review from nicoecheza February 28, 2025 22:05

fix: Format query string

25d51a6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add smart item Admin toolkit #136

feat: Add smart item Admin toolkit #136

cyaiox commented Jan 31, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

nicoecheza Feb 13, 2025

cyaiox Feb 28, 2025

nicoecheza Feb 13, 2025

cyaiox Feb 28, 2025

nicoecheza Feb 28, 2025

nicoecheza Feb 28, 2025

cyaiox Feb 28, 2025

feat: Add smart item Admin toolkit #136

Are you sure you want to change the base?

feat: Add smart item Admin toolkit #136

Conversation

cyaiox commented Jan 31, 2025 • edited Loading

Description

Key Features

Core UI Components

Video Control Features

Smart Items Control Features

State Management

Technical Details

Testing Instructions

TODO (Future PRs)

High Priority

Nice to Have

Type of change

Checklist

github-actions bot commented Feb 6, 2025 • edited Loading

Test this pull request

nicoecheza Feb 13, 2025

Choose a reason for hiding this comment

cyaiox Feb 28, 2025

Choose a reason for hiding this comment

nicoecheza Feb 13, 2025

Choose a reason for hiding this comment

cyaiox Feb 28, 2025

Choose a reason for hiding this comment

nicoecheza Feb 28, 2025

Choose a reason for hiding this comment

nicoecheza Feb 28, 2025

Choose a reason for hiding this comment

cyaiox Feb 28, 2025

Choose a reason for hiding this comment

cyaiox commented Jan 31, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading