feat: z index and opacity for UI elements (#1133)

* fix play video not updaing src property (#1129)

* add default emotes (#1132)

* feat: 4088 add z-index support for ui elements (#1127)

* Updated protocol pointers to dev branch

* Added zIndex to the react-ecs component and test

(cherry picked from commit 7ea5cfd)

* Added opacity property to ui elements

* Fixed tests

* Updated protocol

* Updated snapshots

* Removed redundant definitions. Added test coverage

* Adjusted the default value in test

* ui transform  test wip

* Added more tests. Refactored parseUiTransform utility function to properly handle the new properties

* Deep clean and snapshot

* Removed redundant tests, removed redundant defaults definitions.

* Updated snapshots

* Updated default value for opacity and updated snapshots

* Updated protocol and snapshots

---------

Co-authored-by: Gon Pombo <[email protected]>

Author: AlejandroAlvarezMelucciDCL

package-lock.json

@@ -6,7 +6,7 @@
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
     "@actions/core": "^1.10.0",
-    "@dcl/protocol": "1.0.0-15463532285.commit-444eb93",
+    "@dcl/protocol": "1.0.0-15561894653.commit-9a42a0f",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

package.json

@@ -2,7 +2,7 @@
   "name": "@dcl/inspector",
   "version": "0.1.0",
   "dependencies": {
-    "@dcl/asset-packs": "2.4.2",
+    "@dcl/asset-packs": "2.4.3",
     "ts-deepmerge": "^7.0.0"
   },
   "devDependencies": {

packages/@dcl/inspector/package-lock.json

@@ -80,8 +80,8 @@ const ActionMapOption: Record<string, string> = {
   [ActionType.OPEN_LINK]: 'Open Link',
   [ActionType.PLAY_AUDIO_STREAM]: 'Play Audio Stream',
   [ActionType.STOP_AUDIO_STREAM]: 'Stop Audio Stream',
-  [ActionType.PLAY_VIDEO_STREAM]: 'Play Video Stream',
-  [ActionType.STOP_VIDEO_STREAM]: 'Stop Video Stream',
+  [ActionType.PLAY_VIDEO_STREAM]: 'Play Video',
+  [ActionType.STOP_VIDEO_STREAM]: 'Stop Video',
   [ActionType.SHOW_TEXT]: 'Show Text',
   [ActionType.HIDE_TEXT]: 'Hide Text',
   [ActionType.START_DELAY]: 'Start Delay',

packages/@dcl/inspector/package.json

@@ -28,7 +28,23 @@ const emoteOptions = [
   { value: 'shrug', label: 'Shrug' },
   { value: 'disco', label: 'Disco' },
   { value: 'dab', label: 'Dab' },
-  { value: 'headexplode', label: 'Head Explode' }
+  { value: 'headexplode', label: 'Head Explode' },
+  { value: 'buttonDown', label: 'Button Down' },
+  { value: 'buttonFront', label: 'Button Front' },
+  { value: 'getHit', label: 'Get Hit' },
+  { value: 'knockOut', label: 'Knock Out' },
+  { value: 'lever', label: 'Lever' },
+  { value: 'openChest', label: 'Open Chest' },
+  { value: 'openDoor', label: 'Open Door' },
+  { value: 'punch', label: 'Punch' },
+  { value: 'push', label: 'Push' },
+  { value: 'swingWeaponOneHand', label: 'Swing Weapon One Hand' },
+  { value: 'swingWeaponTwoHands', label: 'Swing Weapon Two Hands' },
+  { value: 'throw', label: 'Throw' },
+  { value: 'sittingChair1', label: 'Sitting Chair 1' },
+  { value: 'sittingChair2', label: 'Sitting Chair 2' },
+  { value: 'sittingGround1', label: 'Sitting Ground 1' },
+  { value: 'sittingGround2', label: 'Sitting Ground 2' }
 ]
 
 const PlayDefaultEmoteAction: React.FC<Props> = ({ value, onUpdate }: Props) => {

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.tsx

@@ -26,22 +26,6 @@ const playModeOptions = [
   }
 ]
 
-enum VIDEO_SOURCE {
-  DCL_CAST = 'dcl-cast',
-  URL = 'url'
-}
-
-const videoSourceOptions = [
-  {
-    label: 'DCL Cast',
-    value: VIDEO_SOURCE.DCL_CAST
-  },
-  {
-    label: 'URL',
-    value: VIDEO_SOURCE.URL
-  }
-]
-
 const PlayVideoStreamAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
   const [payload, setPayload] = useState<Partial<ActionPayload<ActionType.PLAY_VIDEO_STREAM>>>({
     ...value
@@ -52,13 +36,6 @@ const PlayVideoStreamAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
     onUpdate(payload)
   }, [payload, onUpdate])
 
-  const handleChangeVideoSource = useCallback(
-    ({ target: { value } }: React.ChangeEvent<HTMLSelectElement>) => {
-      setPayload({ ...payload, dclCast: value === VIDEO_SOURCE.DCL_CAST })
-    },
-    [payload, setPayload]
-  )
-
   const handleChangeSrc = useCallback(
     ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
       setPayload({ ...payload, src: value })
@@ -96,42 +73,17 @@ const PlayVideoStreamAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
 
   return (
     <div className="PlayVideoStreamActionContainer">
+      <Block>
+        <TextField label={<>URL {renderUrlInfo()}</>} value={payload.src} onChange={handleChangeSrc} autoSelect />
+      </Block>
       <Block>
         <Dropdown
-          label="Video Source"
-          value={payload.dclCast ? VIDEO_SOURCE.DCL_CAST : VIDEO_SOURCE.URL}
-          options={videoSourceOptions}
-          onChange={handleChangeVideoSource}
-          info={
-            payload.dclCast && (
-              <>
-                DCL Cast only works when your scene is deployed to a World.{' '}
-                <a
-                  href="https://docs.decentraland.org/creator/development-guide/sdk7/video-playing/#streaming-using-decentraland-cast"
-                  target="_blank"
-                >
-                  Learn More
-                </a>
-              </>
-            )
-          }
+          label="Play Mode"
+          value={payload.loop ? PLAY_MODE.LOOP : PLAY_MODE.PLAY_ONCE}
+          options={playModeOptions}
+          onChange={handleChangePlayMode}
         />
       </Block>
-      {!payload.dclCast ? (
-        <>
-          <Block>
-            <TextField label={<>URL {renderUrlInfo()}</>} value={payload.src} onChange={handleChangeSrc} autoSelect />
-          </Block>
-          <Block>
-            <Dropdown
-              label="Play Mode"
-              value={payload.loop ? PLAY_MODE.LOOP : PLAY_MODE.PLAY_ONCE}
-              options={playModeOptions}
-              onChange={handleChangePlayMode}
-            />
-          </Block>
-        </>
-      ) : null}
       <Block>
         <RangeField
           label="Volume"

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/PlayDefaultEmoteAction/PlayDefaultEmoteAction.tsx

@@ -3260,6 +3260,7 @@ export interface PBUiTransform {
     // (undocumented)
     minWidth: number;
     minWidthUnit: YGUnit;
+    opacity?: number | undefined;
     overflow: YGOverflow;
     // (undocumented)
     paddingBottom: number;
@@ -3294,6 +3295,7 @@ export interface PBUiTransform {
     // (undocumented)
     width: number;
     widthUnit: YGUnit;
+    zIndex?: number | undefined;
 }
 
 // @public (undocumented)
@@ -4445,12 +4447,14 @@ export interface UiTransformProps {
     maxWidth?: PositionUnit;
     minHeight?: PositionUnit;
     minWidth?: PositionUnit;
+    opacity?: number;
     overflow?: OverflowType;
     padding?: Partial<Position> | PositionShorthand;
     pointerFilter?: PointerFilterType;
     position?: Partial<Position> | PositionShorthand;
     positionType?: PositionType;
     width?: PositionUnit | 'auto';
+    zIndex?: number;
 }
 
 // @public (undocumented)

packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/PlayVideoStreamAction/PlayVideoStreamAction.tsx

@@ -79,7 +79,9 @@ const defaultUiTransform: PBUiTransform = {
   flexBasisUnit: YGUnit.YGU_UNDEFINED,
   widthUnit: YGUnit.YGU_AUTO,
   heightUnit: YGUnit.YGU_UNDEFINED,
-  pointerFilter: PointerFilterMode.PFM_NONE
+  pointerFilter: PointerFilterMode.PFM_NONE,
+  opacity: 1,
+  zIndex: 0
 }
 
 /**

packages/@dcl/playground-assets/etc/playground-assets.api.md

@@ -150,4 +150,9 @@ export interface UiTransformProps {
   borderColor?: Record<keyof Partial<Position>, Color4> | Color4 | undefined
   borderRadius?: Partial<BorderRadius> | PositionUnit
   borderWidth?: Partial<Position> | PositionUnit
+
+  /** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
+  opacity?: number
+  /** default 0 */
+  zIndex?: number
 }

packages/@dcl/react-ecs/src/components/uiTransform/index.ts

@@ -13,7 +13,7 @@
     "@dcl/inspector": "file:../inspector",
     "@dcl/linker-dapp": "^0.14.2",
     "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be",
-    "@dcl/protocol": "1.0.0-15463532285.commit-444eb93",
+    "@dcl/protocol": "1.0.0-15561894653.commit-9a42a0f",
     "@dcl/quests-client": "^1.0.3",
     "@dcl/quests-manager": "^0.1.4",
     "@dcl/rpc": "^1.1.1",

packages/@dcl/react-ecs/src/components/uiTransform/types.ts

@@ -87,7 +87,9 @@ describe('UiTransform component', () => {
       borderTopColor: undefined,
       borderBottomColor: undefined,
       borderLeftColor: undefined,
-      borderRightColor: undefined
+      borderRightColor: undefined,
+      opacity: undefined,
+      zIndex: undefined
     })
   })
 })