decentraland-ui2 0.25.2-16910073436.commit-67b56ad → 0.25.2-17073455092.commit-a1cbc3e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/JumpIn/JumpIn.js +13 -3
- package/dist/components/JumpIn/JumpIn.js.map +1 -1
- package/dist/components/JumpIn/JumpIn.types.d.ts +12 -2
- package/dist/components/JumpIn/JumpIn.types.js +7 -1
- package/dist/components/JumpIn/JumpIn.types.js.map +1 -1
- package/dist/components/WearablePreview/WearablePreview.controller.d.ts +2 -0
- package/dist/components/WearablePreview/WearablePreview.controller.js +124 -0
- package/dist/components/WearablePreview/WearablePreview.controller.js.map +1 -0
- package/dist/components/WearablePreview/WearablePreview.d.ts +7 -0
- package/dist/components/WearablePreview/WearablePreview.js +235 -0
- package/dist/components/WearablePreview/WearablePreview.js.map +1 -0
- package/dist/components/WearablePreview/WearablePreview.stories.d.ts +20 -0
- package/dist/components/WearablePreview/WearablePreview.stories.js +278 -0
- package/dist/components/WearablePreview/WearablePreview.stories.js.map +1 -0
- package/dist/components/WearablePreview/WearablePreview.stories.styled.d.ts +5 -0
- package/dist/components/WearablePreview/WearablePreview.stories.styled.js +8 -0
- package/dist/components/WearablePreview/WearablePreview.stories.styled.js.map +1 -0
- package/dist/components/WearablePreview/WearablePreview.styled.d.ts +5 -0
- package/dist/components/WearablePreview/WearablePreview.styled.js +9 -0
- package/dist/components/WearablePreview/WearablePreview.styled.js.map +1 -0
- package/dist/components/WearablePreview/WearablePreview.types.d.ts +68 -0
- package/dist/components/WearablePreview/WearablePreview.types.js +10 -0
- package/dist/components/WearablePreview/WearablePreview.types.js.map +1 -0
- package/dist/components/WearablePreview/index.d.ts +3 -0
- package/dist/components/WearablePreview/index.js +3 -0
- package/dist/components/WearablePreview/index.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/debounce.d.ts +1 -0
- package/dist/lib/debounce.js +10 -0
- package/dist/lib/debounce.js.map +1 -0
- package/package.json +7 -3
@@ -4,6 +4,7 @@ import { Typography } from "@mui/material";
|
|
4
4
|
import { launchDesktopApp } from "../../modules/jumpIn";
|
5
5
|
import { JumpInIcon, LocationIcon } from "../Icon";
|
6
6
|
import { DownloadModal } from "../Modal/DownloadModal";
|
7
|
+
import { JumpInEventType } from "./JumpIn.types";
|
7
8
|
import { LocationIconContainer, StyledContainer, StyledIcon, StyledJumpInButton, StyledJumpInLink, StyledPosition, } from "./JumpIn.styled";
|
8
9
|
const DEFAULT_DOWNLOAD_URL = "https://decentraland.org/download";
|
9
10
|
const JumpIn = React.memo((props) => {
|
@@ -13,16 +14,25 @@ const JumpIn = React.memo((props) => {
|
|
13
14
|
e.stopPropagation();
|
14
15
|
e.preventDefault();
|
15
16
|
const hasLauncher = await launchDesktopApp(desktopAppOptions);
|
16
|
-
!hasLauncher && setIsModalOpen(true);
|
17
17
|
onTrack?.({
|
18
|
+
type: hasLauncher
|
19
|
+
? JumpInEventType.JUMP_IN
|
20
|
+
: JumpInEventType.OPEN_DOWNLOAD_MODAL,
|
21
|
+
url: hasLauncher ? undefined : downloadUrl,
|
18
22
|
has_launcher: hasLauncher,
|
19
23
|
});
|
20
|
-
|
24
|
+
!hasLauncher && setIsModalOpen(true);
|
25
|
+
}, [onTrack, downloadUrl, desktopAppOptions]);
|
21
26
|
const handleDownloadClick = useCallback((e) => {
|
22
27
|
e.stopPropagation();
|
23
28
|
e.preventDefault();
|
29
|
+
onTrack?.({
|
30
|
+
type: JumpInEventType.DOWNLOAD,
|
31
|
+
url: downloadUrl,
|
32
|
+
has_launcher: false,
|
33
|
+
});
|
24
34
|
window.open(downloadUrl, "_blank");
|
25
|
-
}, [downloadUrl]);
|
35
|
+
}, [onTrack, downloadUrl]);
|
26
36
|
if (props.variant === "button") {
|
27
37
|
return (_jsxs(_Fragment, { children: [_jsxs(StyledJumpInButton, { ...props.buttonProps, onClick: handleClick, disabled: loading, size: "small", variant: "contained", children: [_jsx("span", { children: buttonText }), _jsx(JumpInIcon, {})] }), _jsx(DownloadModal, { ...modalProps, open: isModalOpen, onClose: () => setIsModalOpen(false), onDownloadClick: handleDownloadClick })] }));
|
28
38
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"JumpIn.js","sourceRoot":"","sources":["../../../src/components/JumpIn/JumpIn.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;
|
1
|
+
{"version":3,"file":"JumpIn.js","sourceRoot":"","sources":["../../../src/components/JumpIn/JumpIn.tsx"],"names":[],"mappings":"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"}
|
@@ -1,5 +1,15 @@
|
|
1
1
|
import { ButtonProps, LinkProps } from "@mui/material";
|
2
2
|
import { DownloadModalProps } from "../Modal/DownloadModal/DownloadModal.types";
|
3
|
+
declare enum JumpInEventType {
|
4
|
+
JUMP_IN = "JUMP_IN",
|
5
|
+
OPEN_DOWNLOAD_MODAL = "OPEN_DOWNLOAD_MODAL",
|
6
|
+
DOWNLOAD = "DOWNLOAD"
|
7
|
+
}
|
8
|
+
type JumpInTrackingData = {
|
9
|
+
type: JumpInEventType;
|
10
|
+
url?: string;
|
11
|
+
has_launcher: boolean;
|
12
|
+
};
|
3
13
|
type JumpInBaseProps = {
|
4
14
|
/** Position coordinates in format "x,y" or server name for worlds */
|
5
15
|
position?: string;
|
@@ -8,7 +18,7 @@ type JumpInBaseProps = {
|
|
8
18
|
/** Whether the component is in loading state */
|
9
19
|
loading?: boolean;
|
10
20
|
/** Optional callback for tracking events with flexible data */
|
11
|
-
onTrack?: (data:
|
21
|
+
onTrack?: (data: JumpInTrackingData) => void;
|
12
22
|
/** Text to display in the button variant */
|
13
23
|
buttonText?: string;
|
14
24
|
/** URL to open when clicking the download button */
|
@@ -28,4 +38,4 @@ type JumpInProps = JumpInBaseProps & ({
|
|
28
38
|
variant: "link";
|
29
39
|
linkProps?: Omit<LinkProps, keyof JumpInBaseProps>;
|
30
40
|
});
|
31
|
-
export
|
41
|
+
export { JumpInBaseProps, JumpInProps, JumpInEventType, JumpInTrackingData };
|
@@ -1,2 +1,8 @@
|
|
1
|
-
|
1
|
+
var JumpInEventType;
|
2
|
+
(function (JumpInEventType) {
|
3
|
+
JumpInEventType["JUMP_IN"] = "JUMP_IN";
|
4
|
+
JumpInEventType["OPEN_DOWNLOAD_MODAL"] = "OPEN_DOWNLOAD_MODAL";
|
5
|
+
JumpInEventType["DOWNLOAD"] = "DOWNLOAD";
|
6
|
+
})(JumpInEventType || (JumpInEventType = {}));
|
7
|
+
export { JumpInEventType };
|
2
8
|
//# sourceMappingURL=JumpIn.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"JumpIn.types.js","sourceRoot":"","sources":["../../../src/components/JumpIn/JumpIn.types.ts"],"names":[],"mappings":""}
|
1
|
+
{"version":3,"file":"JumpIn.types.js","sourceRoot":"","sources":["../../../src/components/JumpIn/JumpIn.types.ts"],"names":[],"mappings":"AAGA,IAAK,eAIJ;AAJD,WAAK,eAAe;IAClB,sCAAmB,CAAA;IACnB,8DAA2C,CAAA;IAC3C,wCAAqB,CAAA;AACvB,CAAC,EAJI,eAAe,KAAf,eAAe,QAInB;AA0CD,OAAO,EAAgC,eAAe,EAAsB,CAAA"}
|
@@ -0,0 +1,124 @@
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
2
|
+
import { PreviewMessageType, sendMessage, } from "@dcl/schemas/dist/dapps/preview";
|
3
|
+
import { default as future } from "fp-future";
|
4
|
+
import mitt from "mitt";
|
5
|
+
const promises = new Map();
|
6
|
+
const emoteEvents = new Map();
|
7
|
+
window.onmessage = function handleMessage(event) {
|
8
|
+
if (event.data && event.data.type) {
|
9
|
+
switch (event.data.type) {
|
10
|
+
case PreviewMessageType.CONTROLLER_RESPONSE: {
|
11
|
+
const payload = event.data
|
12
|
+
.payload;
|
13
|
+
const { id } = payload;
|
14
|
+
const promise = promises.get(id);
|
15
|
+
if (promise) {
|
16
|
+
if (payload.ok) {
|
17
|
+
promise.resolve(payload.result);
|
18
|
+
}
|
19
|
+
else if (payload.ok === false) {
|
20
|
+
promise.reject(new Error(payload.error));
|
21
|
+
}
|
22
|
+
}
|
23
|
+
break;
|
24
|
+
}
|
25
|
+
case PreviewMessageType.EMOTE_EVENT: {
|
26
|
+
const payload = event.data
|
27
|
+
.payload;
|
28
|
+
const { type, payload: eventPayload } = payload;
|
29
|
+
const events = event.source ? emoteEvents.get(event.source) : null;
|
30
|
+
if (events && type) {
|
31
|
+
events.emit(type, eventPayload);
|
32
|
+
}
|
33
|
+
break;
|
34
|
+
}
|
35
|
+
default:
|
36
|
+
// nothing to do, invalid message
|
37
|
+
}
|
38
|
+
}
|
39
|
+
};
|
40
|
+
let nonce = 0;
|
41
|
+
function createSendRequest(id) {
|
42
|
+
return function sendRequest(namespace, method, params) {
|
43
|
+
const iframe = document.getElementById(id);
|
44
|
+
const messageId = id + "-" + nonce;
|
45
|
+
const promise = future();
|
46
|
+
promises.set(messageId, promise);
|
47
|
+
const type = PreviewMessageType.CONTROLLER_REQUEST;
|
48
|
+
const message = { id: messageId, namespace, method, params };
|
49
|
+
if (iframe.contentWindow) {
|
50
|
+
sendMessage(iframe.contentWindow, type, message);
|
51
|
+
}
|
52
|
+
nonce++;
|
53
|
+
return promise;
|
54
|
+
};
|
55
|
+
}
|
56
|
+
export function createController(id) {
|
57
|
+
const iframe = document.getElementById(id);
|
58
|
+
if (!iframe) {
|
59
|
+
throw new Error(`Could not find an iframe with id="${id}"`);
|
60
|
+
}
|
61
|
+
const events = iframe.contentWindow
|
62
|
+
? emoteEvents.get(iframe.contentWindow) ?? mitt()
|
63
|
+
: mitt();
|
64
|
+
if (iframe.contentWindow) {
|
65
|
+
emoteEvents.set(iframe.contentWindow, events);
|
66
|
+
}
|
67
|
+
const sendRequest = createSendRequest(id);
|
68
|
+
return {
|
69
|
+
scene: {
|
70
|
+
getScreenshot(width, height) {
|
71
|
+
return sendRequest("scene", "getScreenshot", [width, height]);
|
72
|
+
},
|
73
|
+
getMetrics() {
|
74
|
+
return sendRequest("scene", "getMetrics", []);
|
75
|
+
},
|
76
|
+
changeZoom: function (zoom) {
|
77
|
+
return sendRequest("scene", "changeZoom", [zoom]);
|
78
|
+
},
|
79
|
+
panCamera: function (offset) {
|
80
|
+
return sendRequest("scene", "panCamera", [offset]);
|
81
|
+
},
|
82
|
+
changeCameraPosition: function (position) {
|
83
|
+
return sendRequest("scene", "changeCameraPosition", [position]);
|
84
|
+
},
|
85
|
+
cleanup() {
|
86
|
+
return sendRequest("scene", "cleanup", []);
|
87
|
+
},
|
88
|
+
setUsername: function (username) {
|
89
|
+
return sendRequest("scene", "setUsername", [username]);
|
90
|
+
},
|
91
|
+
},
|
92
|
+
emote: {
|
93
|
+
getLength() {
|
94
|
+
return sendRequest("emote", "getLength", []);
|
95
|
+
},
|
96
|
+
isPlaying() {
|
97
|
+
return sendRequest("emote", "isPlaying", []);
|
98
|
+
},
|
99
|
+
goTo(seconds) {
|
100
|
+
return sendRequest("emote", "goTo", [seconds]);
|
101
|
+
},
|
102
|
+
play() {
|
103
|
+
return sendRequest("emote", "play", []);
|
104
|
+
},
|
105
|
+
pause() {
|
106
|
+
return sendRequest("emote", "pause", []);
|
107
|
+
},
|
108
|
+
stop() {
|
109
|
+
return sendRequest("emote", "stop", []);
|
110
|
+
},
|
111
|
+
enableSound() {
|
112
|
+
return sendRequest("emote", "enableSound", []);
|
113
|
+
},
|
114
|
+
disableSound() {
|
115
|
+
return sendRequest("emote", "disableSound", []);
|
116
|
+
},
|
117
|
+
hasSound() {
|
118
|
+
return sendRequest("emote", "hasSound", []);
|
119
|
+
},
|
120
|
+
events,
|
121
|
+
},
|
122
|
+
};
|
123
|
+
}
|
124
|
+
//# sourceMappingURL=WearablePreview.controller.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"WearablePreview.controller.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.controller.ts"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { createController } from "./WearablePreview.controller";
|
2
|
+
import { WearablePreviewProps } from "./WearablePreview.types";
|
3
|
+
declare const WearablePreview: {
|
4
|
+
(props: WearablePreviewProps): import("react/jsx-runtime").JSX.Element;
|
5
|
+
createController: typeof createController;
|
6
|
+
};
|
7
|
+
export { WearablePreview };
|
@@ -0,0 +1,235 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
3
|
+
import { PreviewMessageType, sendMessage, } from "@dcl/schemas/dist/dapps/preview";
|
4
|
+
import equal from "deep-equal";
|
5
|
+
import { createController } from "./WearablePreview.controller";
|
6
|
+
import { config } from "../../config";
|
7
|
+
import { createDebounce } from "../../lib/debounce";
|
8
|
+
import { StyledWearablePreview } from "./WearablePreview.styled";
|
9
|
+
const debounce = createDebounce();
|
10
|
+
const safeEncodeParam = (key, value) => {
|
11
|
+
if (value === undefined || value === null || value === "") {
|
12
|
+
return "";
|
13
|
+
}
|
14
|
+
// Handle arrays
|
15
|
+
if (Array.isArray(value)) {
|
16
|
+
return value.length > 0
|
17
|
+
? value
|
18
|
+
.map((item) => `${key}=${encodeURIComponent(String(item))}`)
|
19
|
+
.join("&")
|
20
|
+
: "";
|
21
|
+
}
|
22
|
+
// Handle all other values (strings, numbers, booleans, objects, etc.)
|
23
|
+
return `${key}=${encodeURIComponent(String(value))}`;
|
24
|
+
};
|
25
|
+
const WearablePreview = (props) => {
|
26
|
+
const { dev = false, baseUrl = config.get("WEARABLE_PREVIEW_URL"), unity = false, onLoad = () => { }, onError = () => { }, onUpdate = () => { }, ...restProps } = props;
|
27
|
+
const [state, setState] = useState({
|
28
|
+
isReady: false,
|
29
|
+
pendingOptions: null,
|
30
|
+
});
|
31
|
+
const iframeRef = useRef(null);
|
32
|
+
const lastOptionsRef = useRef(null);
|
33
|
+
const url = useMemo(() => {
|
34
|
+
const { contractAddress, tokenId, itemId, profile, urns, urls, base64s, skin, hair, eyes, bodyShape, emote, camera, projection, zoom, background, offsetX, offsetY, offsetZ, cameraX, cameraY, cameraZ, wheelZoom, wheelPrecision, wheelStart, disableBackground, disableAutoRotate, disableAutoCenter, disableFace, disableDefaultWearables, disableDefaultEmotes, disableFadeEffect, showSceneBoundaries, showThumbnailBoundaries, panning, lockAlpha, lockBeta, lockRadius, peerUrl, nftServerUrl, type, unityMode, } = restProps;
|
35
|
+
const contractParam = safeEncodeParam("contract", contractAddress);
|
36
|
+
const tokenParam = safeEncodeParam("token", tokenId);
|
37
|
+
const itemParam = safeEncodeParam("item", itemId);
|
38
|
+
const profileParam = safeEncodeParam("profile", profile);
|
39
|
+
const urnParams = safeEncodeParam("urn", urns);
|
40
|
+
const urlsParams = safeEncodeParam("url", urls);
|
41
|
+
const base64sParams = safeEncodeParam("base64", base64s);
|
42
|
+
const skinParam = safeEncodeParam("skin", skin);
|
43
|
+
const hairParam = safeEncodeParam("hair", hair);
|
44
|
+
const eyesParam = safeEncodeParam("eyes", eyes);
|
45
|
+
const bodyShapeParam = safeEncodeParam("bodyShape", bodyShape);
|
46
|
+
const emoteParam = safeEncodeParam("emote", emote);
|
47
|
+
const cameraParam = safeEncodeParam("camera", camera);
|
48
|
+
const projectionParam = safeEncodeParam("projection", projection);
|
49
|
+
const zoomParam = safeEncodeParam("zoom", zoom);
|
50
|
+
const backgroundParam = safeEncodeParam("background", background);
|
51
|
+
const offsetXParam = safeEncodeParam("offsetX", offsetX);
|
52
|
+
const offsetYParam = safeEncodeParam("offsetY", offsetY);
|
53
|
+
const offsetZParam = safeEncodeParam("offsetZ", offsetZ);
|
54
|
+
const cameraXParam = safeEncodeParam("cameraX", cameraX);
|
55
|
+
const cameraYParam = safeEncodeParam("cameraY", cameraY);
|
56
|
+
const cameraZParam = safeEncodeParam("cameraZ", cameraZ);
|
57
|
+
const wheelZoomParam = safeEncodeParam("wheelZoom", wheelZoom);
|
58
|
+
const wheelPrecisionParam = safeEncodeParam("wheelPrecision", wheelPrecision);
|
59
|
+
const wheelStartParam = safeEncodeParam("wheelStart", wheelStart);
|
60
|
+
const disableBackgroundParam = safeEncodeParam("disableBackground", disableBackground);
|
61
|
+
const disableAutoRotateParam = safeEncodeParam("disableAutoRotate", disableAutoRotate);
|
62
|
+
const disableAutoCenterParam = safeEncodeParam("disableAutoCenter", disableAutoCenter);
|
63
|
+
const disableFaceParam = safeEncodeParam("disableFace", disableFace);
|
64
|
+
const disableDefaultWearablesParam = safeEncodeParam("disableDefaultWearables", disableDefaultWearables);
|
65
|
+
const disableDefaultEmotesParam = safeEncodeParam("disableDefaultEmotes", disableDefaultEmotes);
|
66
|
+
const disableFadeEffectParam = safeEncodeParam("disableFadeEffect", disableFadeEffect);
|
67
|
+
const showSceneBoundariesParam = safeEncodeParam("showSceneBoundaries", showSceneBoundaries);
|
68
|
+
const showThumbnailBoundariesParam = safeEncodeParam("showThumbnailBoundaries", showThumbnailBoundaries);
|
69
|
+
const peerUrlParam = safeEncodeParam("peerUrl", peerUrl);
|
70
|
+
const nftServerUrlParam = safeEncodeParam("nftServerUrl", nftServerUrl);
|
71
|
+
const typeParam = safeEncodeParam("type", type);
|
72
|
+
const panningParam = safeEncodeParam("panning", panning);
|
73
|
+
const lockAlphaParam = safeEncodeParam("lockAlpha", lockAlpha);
|
74
|
+
const lockBetaParam = safeEncodeParam("lockBeta", lockBeta);
|
75
|
+
const lockRadiusParam = safeEncodeParam("lockRadius", lockRadius);
|
76
|
+
const envParam = safeEncodeParam("env", dev ? "dev" : undefined);
|
77
|
+
const unityParam = safeEncodeParam("unity", unity);
|
78
|
+
const unityModeParam = safeEncodeParam("mode", unityMode);
|
79
|
+
const url = baseUrl +
|
80
|
+
"?" +
|
81
|
+
[
|
82
|
+
contractParam,
|
83
|
+
tokenParam,
|
84
|
+
itemParam,
|
85
|
+
profileParam,
|
86
|
+
urnParams,
|
87
|
+
urlsParams,
|
88
|
+
base64sParams,
|
89
|
+
skinParam,
|
90
|
+
hairParam,
|
91
|
+
eyesParam,
|
92
|
+
bodyShapeParam,
|
93
|
+
emoteParam,
|
94
|
+
cameraParam,
|
95
|
+
projectionParam,
|
96
|
+
zoomParam,
|
97
|
+
backgroundParam,
|
98
|
+
offsetXParam,
|
99
|
+
offsetYParam,
|
100
|
+
offsetZParam,
|
101
|
+
cameraXParam,
|
102
|
+
cameraYParam,
|
103
|
+
cameraZParam,
|
104
|
+
wheelZoomParam,
|
105
|
+
wheelPrecisionParam,
|
106
|
+
wheelStartParam,
|
107
|
+
disableBackgroundParam,
|
108
|
+
disableAutoRotateParam,
|
109
|
+
disableAutoCenterParam,
|
110
|
+
disableFaceParam,
|
111
|
+
disableDefaultWearablesParam,
|
112
|
+
disableDefaultEmotesParam,
|
113
|
+
disableFadeEffectParam,
|
114
|
+
showSceneBoundariesParam,
|
115
|
+
showThumbnailBoundariesParam,
|
116
|
+
peerUrlParam,
|
117
|
+
nftServerUrlParam,
|
118
|
+
typeParam,
|
119
|
+
panningParam,
|
120
|
+
lockAlphaParam,
|
121
|
+
lockBetaParam,
|
122
|
+
lockRadiusParam,
|
123
|
+
envParam,
|
124
|
+
unityParam,
|
125
|
+
unityModeParam,
|
126
|
+
]
|
127
|
+
.filter((param) => !!param)
|
128
|
+
.join("&");
|
129
|
+
return url;
|
130
|
+
}, [restProps, baseUrl, dev, unity]);
|
131
|
+
const options = useMemo(() => {
|
132
|
+
const opts = {};
|
133
|
+
for (const key in restProps) {
|
134
|
+
if (typeof restProps[key] !== "function") {
|
135
|
+
opts[key] = restProps[key];
|
136
|
+
}
|
137
|
+
}
|
138
|
+
return opts;
|
139
|
+
}, [restProps]);
|
140
|
+
const sendUpdate = useCallback((options) => {
|
141
|
+
// Use ref for lastOptions to avoid re-renders
|
142
|
+
const currentLastOptions = lastOptionsRef.current;
|
143
|
+
// only send update if new options are different
|
144
|
+
if (!currentLastOptions || !equal(options, currentLastOptions)) {
|
145
|
+
// send message to iframe
|
146
|
+
if (iframeRef.current?.contentWindow) {
|
147
|
+
sendMessage(iframeRef.current.contentWindow, PreviewMessageType.UPDATE, {
|
148
|
+
options,
|
149
|
+
});
|
150
|
+
}
|
151
|
+
// callback
|
152
|
+
onUpdate(options);
|
153
|
+
// Always store in ref to avoid re-renders
|
154
|
+
lastOptionsRef.current = options;
|
155
|
+
}
|
156
|
+
}, [onUpdate]);
|
157
|
+
const handleUpdate = useCallback(() => {
|
158
|
+
if (iframeRef.current) {
|
159
|
+
// SSR check
|
160
|
+
if (typeof window !== "undefined") {
|
161
|
+
if (state.isReady) {
|
162
|
+
// if the iframe is ready, send the update
|
163
|
+
sendUpdate(options);
|
164
|
+
}
|
165
|
+
else {
|
166
|
+
// otherwise store last update in state until it's ready
|
167
|
+
setState((prev) => ({ ...prev, pendingOptions: options, url }));
|
168
|
+
}
|
169
|
+
}
|
170
|
+
}
|
171
|
+
else {
|
172
|
+
console.warn(`Could not send update, iframe is not referenced`);
|
173
|
+
}
|
174
|
+
}, [options, state.isReady, sendUpdate]);
|
175
|
+
const handleMessage = useCallback((event) => {
|
176
|
+
const { origin } = event;
|
177
|
+
if (origin !== baseUrl || !event.data?.type)
|
178
|
+
return;
|
179
|
+
const type = event.data.type;
|
180
|
+
switch (type) {
|
181
|
+
case PreviewMessageType.LOAD: {
|
182
|
+
const payload = event.data
|
183
|
+
.payload;
|
184
|
+
onLoad(payload?.renderer);
|
185
|
+
break;
|
186
|
+
}
|
187
|
+
case PreviewMessageType.ERROR: {
|
188
|
+
const payload = event.data
|
189
|
+
.payload;
|
190
|
+
onError(new Error(payload.message));
|
191
|
+
break;
|
192
|
+
}
|
193
|
+
case PreviewMessageType.READY: {
|
194
|
+
setState((prev) => {
|
195
|
+
if (prev.isReady)
|
196
|
+
return prev;
|
197
|
+
if (prev.pendingOptions !== null) {
|
198
|
+
sendUpdate(prev.pendingOptions);
|
199
|
+
return {
|
200
|
+
...prev,
|
201
|
+
isReady: true,
|
202
|
+
pendingOptions: null,
|
203
|
+
};
|
204
|
+
}
|
205
|
+
return { ...prev, isReady: true };
|
206
|
+
});
|
207
|
+
break;
|
208
|
+
}
|
209
|
+
default:
|
210
|
+
// do nothing
|
211
|
+
}
|
212
|
+
}, [baseUrl, onLoad, onError, sendUpdate]);
|
213
|
+
useEffect(() => {
|
214
|
+
window.addEventListener("message", handleMessage, false);
|
215
|
+
return () => {
|
216
|
+
window.removeEventListener("message", handleMessage, false);
|
217
|
+
};
|
218
|
+
}, [handleMessage]);
|
219
|
+
useEffect(() => {
|
220
|
+
// if there's a blob in the props, it can't be passed via URL, so we send it via postMessage
|
221
|
+
if (props.blob) {
|
222
|
+
handleUpdate();
|
223
|
+
}
|
224
|
+
}, [props.blob, handleUpdate]);
|
225
|
+
useEffect(() => {
|
226
|
+
debounce(handleUpdate, 500);
|
227
|
+
}, [handleUpdate]);
|
228
|
+
if (props.tokenId && props.itemId) {
|
229
|
+
console.warn("You should NOT use `tokenId` and `itemId` props simultaneously");
|
230
|
+
}
|
231
|
+
return (_jsx(StyledWearablePreview, { id: props.id, src: url, ref: iframeRef, allow: "autoplay" }));
|
232
|
+
};
|
233
|
+
WearablePreview.createController = createController;
|
234
|
+
export { WearablePreview };
|
235
|
+
//# sourceMappingURL=WearablePreview.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"WearablePreview.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { Meta, StoryObj } from "@storybook/react";
|
2
|
+
import { WearablePreview } from "./WearablePreview";
|
3
|
+
declare const meta: Meta<typeof WearablePreview>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof WearablePreview>;
|
6
|
+
export declare const PreviewAnItem: Story;
|
7
|
+
export declare const PreviewAToken: Story;
|
8
|
+
export declare const UsingAProfile: Story;
|
9
|
+
export declare const UsingCustomSkin: Story;
|
10
|
+
export declare const UsingCustomHair: Story;
|
11
|
+
export declare const WithEmote: Story;
|
12
|
+
export declare const UsingStaticCamera: Story;
|
13
|
+
export declare const WithoutAutoRotation: Story;
|
14
|
+
export declare const WithoutBackground: Story;
|
15
|
+
export declare const WithCustomBackgroundColor: Story;
|
16
|
+
export declare const TakeScreenshotAndMetrics: Story;
|
17
|
+
export declare const DifferentProjections: Story;
|
18
|
+
export declare const PreviewFromFile: Story;
|
19
|
+
export declare const UnityModes: Story;
|
20
|
+
export declare const ConfiguratorWithUsernameControl: Story;
|
@@ -0,0 +1,278 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
/* eslint-disable import/no-default-export, import/exports-last, import/group-exports */
|
3
|
+
/* cspell:words gltf */
|
4
|
+
import { useCallback, useRef, useState } from "react";
|
5
|
+
import { WearableCategory } from "@dcl/schemas";
|
6
|
+
import { PreviewCamera, PreviewEmote, PreviewProjection, } from "@dcl/schemas/dist/dapps/preview";
|
7
|
+
import { BodyShape } from "@dcl/schemas/dist/platform/item";
|
8
|
+
import { WearablePreview } from "./WearablePreview";
|
9
|
+
import { PreviewUnityMode } from "./WearablePreview.types";
|
10
|
+
import { WearablePreviewContainer } from "./WearablePreview.stories.styled";
|
11
|
+
const getRandomProfile = () => {
|
12
|
+
return `default${Math.floor(Math.random() * 160) + 1}`;
|
13
|
+
};
|
14
|
+
const meta = {
|
15
|
+
title: "Decentraland UI/Wearable Preview",
|
16
|
+
component: WearablePreview,
|
17
|
+
parameters: {
|
18
|
+
layout: "fullscreen",
|
19
|
+
},
|
20
|
+
argTypes: {
|
21
|
+
contractAddress: { control: "text" },
|
22
|
+
tokenId: { control: "text" },
|
23
|
+
itemId: { control: "text" },
|
24
|
+
profile: { control: "text" },
|
25
|
+
skin: { control: "text" },
|
26
|
+
hair: { control: "text" },
|
27
|
+
eyes: { control: "text" },
|
28
|
+
bodyShape: {
|
29
|
+
control: "select",
|
30
|
+
options: [BodyShape.MALE, BodyShape.FEMALE],
|
31
|
+
},
|
32
|
+
camera: {
|
33
|
+
control: "select",
|
34
|
+
options: [PreviewCamera.INTERACTIVE, PreviewCamera.STATIC],
|
35
|
+
},
|
36
|
+
projection: {
|
37
|
+
control: "select",
|
38
|
+
options: [PreviewProjection.PERSPECTIVE, PreviewProjection.ORTHOGRAPHIC],
|
39
|
+
},
|
40
|
+
emote: {
|
41
|
+
control: "select",
|
42
|
+
options: [
|
43
|
+
PreviewEmote.IDLE,
|
44
|
+
PreviewEmote.CLAP,
|
45
|
+
PreviewEmote.DAB,
|
46
|
+
PreviewEmote.DANCE,
|
47
|
+
PreviewEmote.FASHION,
|
48
|
+
PreviewEmote.LOVE,
|
49
|
+
PreviewEmote.MONEY,
|
50
|
+
],
|
51
|
+
},
|
52
|
+
disableBackground: { control: "boolean" },
|
53
|
+
disableAutoRotate: { control: "boolean" },
|
54
|
+
disableAutoCenter: { control: "boolean" },
|
55
|
+
disableFace: { control: "boolean" },
|
56
|
+
disableDefaultWearables: { control: "boolean" },
|
57
|
+
disableDefaultEmotes: { control: "boolean" },
|
58
|
+
dev: { control: "boolean" },
|
59
|
+
unity: { control: "boolean" },
|
60
|
+
unityMode: {
|
61
|
+
control: "select",
|
62
|
+
options: [
|
63
|
+
"marketplace",
|
64
|
+
"profile",
|
65
|
+
"authentication",
|
66
|
+
"builder",
|
67
|
+
"configurator",
|
68
|
+
],
|
69
|
+
},
|
70
|
+
},
|
71
|
+
};
|
72
|
+
export default meta;
|
73
|
+
export const PreviewAnItem = {
|
74
|
+
args: {
|
75
|
+
contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
|
76
|
+
itemId: "5",
|
77
|
+
},
|
78
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
79
|
+
};
|
80
|
+
export const PreviewAToken = {
|
81
|
+
args: {
|
82
|
+
contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
|
83
|
+
tokenId: "1",
|
84
|
+
},
|
85
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
86
|
+
};
|
87
|
+
export const UsingAProfile = {
|
88
|
+
args: {
|
89
|
+
profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6",
|
90
|
+
},
|
91
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
92
|
+
};
|
93
|
+
export const UsingCustomSkin = {
|
94
|
+
args: {
|
95
|
+
contractAddress: "0x994684b980d6faff06ff36b13c243c31d1b3aa0e",
|
96
|
+
itemId: "0",
|
97
|
+
skin: "ff0000",
|
98
|
+
},
|
99
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
100
|
+
};
|
101
|
+
export const UsingCustomHair = {
|
102
|
+
args: {
|
103
|
+
contractAddress: "0xe3d2c4ec777fb88dd219905cd896f79a592adf30",
|
104
|
+
itemId: "0",
|
105
|
+
hair: "00ff00",
|
106
|
+
},
|
107
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
108
|
+
};
|
109
|
+
export const WithEmote = {
|
110
|
+
args: {
|
111
|
+
profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6",
|
112
|
+
emote: PreviewEmote.FASHION,
|
113
|
+
},
|
114
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
115
|
+
};
|
116
|
+
export const UsingStaticCamera = {
|
117
|
+
args: {
|
118
|
+
profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6",
|
119
|
+
camera: PreviewCamera.STATIC,
|
120
|
+
},
|
121
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
122
|
+
};
|
123
|
+
export const WithoutAutoRotation = {
|
124
|
+
args: {
|
125
|
+
profile: getRandomProfile(),
|
126
|
+
disableAutoRotate: true,
|
127
|
+
},
|
128
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
129
|
+
};
|
130
|
+
export const WithoutBackground = {
|
131
|
+
args: {
|
132
|
+
profile: getRandomProfile(),
|
133
|
+
disableBackground: true,
|
134
|
+
},
|
135
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
136
|
+
};
|
137
|
+
export const WithCustomBackgroundColor = {
|
138
|
+
args: {
|
139
|
+
profile: getRandomProfile(),
|
140
|
+
background: "ff0000",
|
141
|
+
},
|
142
|
+
render: (args) => (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args }) })),
|
143
|
+
};
|
144
|
+
export const TakeScreenshotAndMetrics = {
|
145
|
+
render: () => {
|
146
|
+
const [screenshot, setScreenshot] = useState("");
|
147
|
+
const [metrics, setMetrics] = useState(null);
|
148
|
+
const ref = useRef(null);
|
149
|
+
const onLoad = useCallback(() => {
|
150
|
+
ref.current = ref.current ?? WearablePreview.createController("some-id");
|
151
|
+
}, []);
|
152
|
+
return (_jsxs("div", { style: { padding: "20px" }, children: [_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { id: "some-id", contractAddress: "0x186c788f9c172934b790b868faf3b78b84e34e89", itemId: "0", disableAutoRotate: true, disableBackground: true, onLoad: onLoad }) }), _jsxs("div", { style: {
|
153
|
+
display: "flex",
|
154
|
+
gap: "10px",
|
155
|
+
justifyContent: "center",
|
156
|
+
marginTop: "20px",
|
157
|
+
}, children: [_jsx("button", { onClick: () => ref.current?.scene.getScreenshot(1024, 1024).then(setScreenshot), children: "Take Screenshot" }), _jsx("button", { onClick: () => ref.current?.scene.getMetrics().then(setMetrics), children: "Get Metrics" })] }), screenshot && (_jsx("div", { style: { textAlign: "center", marginTop: "20px" }, children: _jsx("img", { src: screenshot, alt: "Screenshot", style: { maxWidth: "256px" } }) })), metrics && (_jsx("div", { style: {
|
158
|
+
marginTop: "20px",
|
159
|
+
padding: "10px",
|
160
|
+
background: "#f0f0f0",
|
161
|
+
}, children: _jsx("pre", { children: JSON.stringify(metrics, null, 2) }) }))] }));
|
162
|
+
},
|
163
|
+
};
|
164
|
+
export const DifferentProjections = {
|
165
|
+
render: () => (_jsxs("div", { style: {
|
166
|
+
display: "flex",
|
167
|
+
gap: "20px",
|
168
|
+
justifyContent: "center",
|
169
|
+
padding: "20px",
|
170
|
+
}, children: [_jsxs("div", { children: [_jsx("h3", { style: { textAlign: "center" }, children: "Orthographic" }), _jsx("div", { style: { width: "256px", height: "256px" }, children: _jsx(WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", projection: PreviewProjection.ORTHOGRAPHIC, disableAutoRotate: true }) })] }), _jsxs("div", { children: [_jsx("h3", { style: { textAlign: "center" }, children: "Perspective" }), _jsx("div", { style: { width: "256px", height: "256px" }, children: _jsx(WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", projection: PreviewProjection.PERSPECTIVE, disableAutoRotate: true }) })] })] })),
|
171
|
+
};
|
172
|
+
function toWearableWithBlobs(file) {
|
173
|
+
return {
|
174
|
+
id: "some-id",
|
175
|
+
name: "",
|
176
|
+
description: "",
|
177
|
+
image: "",
|
178
|
+
thumbnail: "",
|
179
|
+
i18n: [],
|
180
|
+
data: {
|
181
|
+
category: WearableCategory.HAT,
|
182
|
+
hides: [],
|
183
|
+
replaces: [],
|
184
|
+
tags: [],
|
185
|
+
representations: [
|
186
|
+
{
|
187
|
+
bodyShapes: [BodyShape.MALE, BodyShape.FEMALE],
|
188
|
+
mainFile: "model.glb",
|
189
|
+
contents: [
|
190
|
+
{
|
191
|
+
key: "model.glb",
|
192
|
+
blob: file,
|
193
|
+
},
|
194
|
+
],
|
195
|
+
overrideHides: [],
|
196
|
+
overrideReplaces: [],
|
197
|
+
},
|
198
|
+
],
|
199
|
+
},
|
200
|
+
};
|
201
|
+
}
|
202
|
+
export const PreviewFromFile = {
|
203
|
+
render: () => {
|
204
|
+
const inputRef = useRef(null);
|
205
|
+
const [file, setFile] = useState(null);
|
206
|
+
return (_jsx("div", { style: { padding: "20px" }, children: file ? (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { blob: toWearableWithBlobs(file) }) })) : (_jsxs("div", { style: { textAlign: "center", padding: "50px" }, children: [_jsx("input", { type: "file", ref: inputRef, accept: ".glb,.gltf", onChange: () => setFile(inputRef.current?.files?.[0] || null) }), _jsx("p", { children: "Select a .glb or .gltf file to preview" })] })) }));
|
207
|
+
},
|
208
|
+
};
|
209
|
+
export const UnityModes = {
|
210
|
+
args: {
|
211
|
+
unity: true,
|
212
|
+
unityMode: PreviewUnityMode.Marketplace,
|
213
|
+
contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
|
214
|
+
itemId: "5",
|
215
|
+
},
|
216
|
+
render: (args) => {
|
217
|
+
// Different configurations for each Unity mode
|
218
|
+
const modeConfigs = {
|
219
|
+
marketplace: {
|
220
|
+
contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
|
221
|
+
itemId: "5",
|
222
|
+
},
|
223
|
+
profile: {
|
224
|
+
profile: getRandomProfile(),
|
225
|
+
contractAddress: undefined,
|
226
|
+
itemId: undefined,
|
227
|
+
},
|
228
|
+
builder: {
|
229
|
+
contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
|
230
|
+
itemId: "5",
|
231
|
+
disableBackground: true,
|
232
|
+
},
|
233
|
+
authentication: {
|
234
|
+
profile: getRandomProfile(),
|
235
|
+
contractAddress: undefined,
|
236
|
+
itemId: undefined,
|
237
|
+
disableAutoRotate: true,
|
238
|
+
},
|
239
|
+
configurator: {
|
240
|
+
contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488",
|
241
|
+
itemId: "5",
|
242
|
+
disableBackground: true,
|
243
|
+
disableAutoRotate: true,
|
244
|
+
},
|
245
|
+
};
|
246
|
+
const config = modeConfigs[args.unityMode] ||
|
247
|
+
modeConfigs.marketplace;
|
248
|
+
return (_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { ...args, ...config }) }));
|
249
|
+
},
|
250
|
+
};
|
251
|
+
export const ConfiguratorWithUsernameControl = {
|
252
|
+
render: () => {
|
253
|
+
const [username, setUsername] = useState("player123");
|
254
|
+
const ref = useRef(null);
|
255
|
+
const updateUsername = useCallback(() => {
|
256
|
+
ref.current?.scene.setUsername(username);
|
257
|
+
}, [username]);
|
258
|
+
return (_jsxs("div", { style: { padding: "20px" }, children: [_jsx(WearablePreviewContainer, { children: _jsx(WearablePreview, { id: "configurator-id", unity: true, unityMode: PreviewUnityMode.Configurator }) }), _jsxs("div", { style: {
|
259
|
+
display: "flex",
|
260
|
+
gap: "10px",
|
261
|
+
justifyContent: "center",
|
262
|
+
alignItems: "center",
|
263
|
+
marginTop: "20px",
|
264
|
+
}, children: [_jsx("input", { type: "text", value: username, onChange: (e) => setUsername(e.target.value), placeholder: "Enter username", style: {
|
265
|
+
padding: "8px",
|
266
|
+
borderRadius: "4px",
|
267
|
+
border: "1px solid #ccc",
|
268
|
+
} }), _jsx("button", { onClick: updateUsername, style: {
|
269
|
+
padding: "8px 16px",
|
270
|
+
borderRadius: "4px",
|
271
|
+
border: "none",
|
272
|
+
backgroundColor: "#007bff",
|
273
|
+
color: "white",
|
274
|
+
cursor: "pointer",
|
275
|
+
}, children: "Update Username" })] })] }));
|
276
|
+
},
|
277
|
+
};
|
278
|
+
//# sourceMappingURL=WearablePreview.stories.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"WearablePreview.stories.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.stories.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
declare const WearablePreviewContainer: import("@emotion/styled").StyledComponent<{
|
2
|
+
theme?: import("@emotion/react").Theme;
|
3
|
+
as?: import("react").ElementType;
|
4
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
5
|
+
export { WearablePreviewContainer };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"WearablePreview.stories.styled.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.stories.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7C,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,WAAW;CACpB,CAAC,CAAA;AAEF,OAAO,EAAE,wBAAwB,EAAE,CAAA"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
declare const StyledWearablePreview: import("@emotion/styled").StyledComponent<{
|
2
|
+
theme?: import("@emotion/react").Theme;
|
3
|
+
as?: import("react").ElementType;
|
4
|
+
}, import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, {}>;
|
5
|
+
export { StyledWearablePreview };
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import styled from "@emotion/styled";
|
2
|
+
const StyledWearablePreview = styled("iframe")(({ theme }) => ({
|
3
|
+
background: theme.palette.background.default,
|
4
|
+
border: 0,
|
5
|
+
width: "100%",
|
6
|
+
height: "100%",
|
7
|
+
}));
|
8
|
+
export { StyledWearablePreview };
|
9
|
+
//# sourceMappingURL=WearablePreview.styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"WearablePreview.styled.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,qBAAqB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7D,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IAC5C,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC,CAAA;AAEH,OAAO,EAAE,qBAAqB,EAAE,CAAA"}
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import { BodyShape } from "@dcl/schemas";
|
2
|
+
import { EmoteWithBlobs, PreviewCamera, PreviewEmote, PreviewOptions, PreviewProjection, PreviewType, WearableWithBlobs } from "@dcl/schemas/dist/dapps/preview";
|
3
|
+
declare enum PreviewUnityMode {
|
4
|
+
Authentication = "authentication",
|
5
|
+
Builder = "builder",
|
6
|
+
Marketplace = "marketplace",
|
7
|
+
Profile = "profile",
|
8
|
+
Configurator = "configurator"
|
9
|
+
}
|
10
|
+
type WearablePreviewProps = {
|
11
|
+
id?: string;
|
12
|
+
contractAddress?: string;
|
13
|
+
tokenId?: string;
|
14
|
+
itemId?: string;
|
15
|
+
profile?: string;
|
16
|
+
urns?: string[];
|
17
|
+
urls?: string[];
|
18
|
+
base64s?: string[];
|
19
|
+
blob?: WearableWithBlobs | EmoteWithBlobs;
|
20
|
+
skin?: string;
|
21
|
+
hair?: string;
|
22
|
+
eyes?: string;
|
23
|
+
emote?: PreviewEmote;
|
24
|
+
bodyShape?: BodyShape;
|
25
|
+
camera?: PreviewCamera;
|
26
|
+
projection?: PreviewProjection;
|
27
|
+
zoom?: number;
|
28
|
+
background?: string;
|
29
|
+
offsetX?: number;
|
30
|
+
offsetY?: number;
|
31
|
+
offsetZ?: number;
|
32
|
+
cameraX?: number;
|
33
|
+
cameraY?: number;
|
34
|
+
cameraZ?: number;
|
35
|
+
wheelZoom?: number;
|
36
|
+
wheelPrecision?: number;
|
37
|
+
wheelStart?: number;
|
38
|
+
disableBackground?: boolean;
|
39
|
+
disableAutoRotate?: boolean;
|
40
|
+
disableAutoCenter?: boolean;
|
41
|
+
disableFace?: boolean;
|
42
|
+
disableDefaultWearables?: boolean;
|
43
|
+
disableDefaultEmotes?: boolean;
|
44
|
+
disableFadeEffect?: boolean;
|
45
|
+
showSceneBoundaries?: boolean;
|
46
|
+
showThumbnailBoundaries?: boolean;
|
47
|
+
panning?: boolean;
|
48
|
+
lockAlpha?: boolean;
|
49
|
+
lockBeta?: boolean;
|
50
|
+
lockRadius?: boolean;
|
51
|
+
dev?: boolean;
|
52
|
+
baseUrl?: string;
|
53
|
+
peerUrl?: string;
|
54
|
+
nftServerUrl?: string;
|
55
|
+
type?: PreviewType;
|
56
|
+
unityMode?: PreviewUnityMode;
|
57
|
+
unity?: boolean;
|
58
|
+
onLoad?: (renderer?: string) => void;
|
59
|
+
onError?: (error: Error) => void;
|
60
|
+
onUpdate?: (options: PreviewOptions) => void;
|
61
|
+
};
|
62
|
+
type WearablePreviewState = {
|
63
|
+
url?: string;
|
64
|
+
isReady: boolean;
|
65
|
+
pendingOptions: PreviewOptions | null;
|
66
|
+
};
|
67
|
+
export { PreviewUnityMode };
|
68
|
+
export type { WearablePreviewProps, WearablePreviewState };
|
@@ -0,0 +1,10 @@
|
|
1
|
+
var PreviewUnityMode;
|
2
|
+
(function (PreviewUnityMode) {
|
3
|
+
PreviewUnityMode["Authentication"] = "authentication";
|
4
|
+
PreviewUnityMode["Builder"] = "builder";
|
5
|
+
PreviewUnityMode["Marketplace"] = "marketplace";
|
6
|
+
PreviewUnityMode["Profile"] = "profile";
|
7
|
+
PreviewUnityMode["Configurator"] = "configurator";
|
8
|
+
})(PreviewUnityMode || (PreviewUnityMode = {}));
|
9
|
+
export { PreviewUnityMode };
|
10
|
+
//# sourceMappingURL=WearablePreview.types.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"WearablePreview.types.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/WearablePreview.types.ts"],"names":[],"mappings":"AAWA,IAAK,gBAMJ;AAND,WAAK,gBAAgB;IACnB,qDAAiC,CAAA;IACjC,uCAAmB,CAAA;IACnB,+CAA2B,CAAA;IAC3B,uCAAmB,CAAA;IACnB,iDAA6B,CAAA;AAC/B,CAAC,EANI,gBAAgB,KAAhB,gBAAgB,QAMpB;AA6DD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/WearablePreview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA"}
|
package/dist/index.d.ts
CHANGED
@@ -25,5 +25,6 @@ export * from "./components/Navbar";
|
|
25
25
|
export * from "./components/Notifications";
|
26
26
|
export * from "./components/UserMenu";
|
27
27
|
export * from "./components/Banner";
|
28
|
+
export * from "./components/WearablePreview";
|
28
29
|
export * as dclNetworkUtils from "./lib/network";
|
29
30
|
export * from "./modules/jumpIn";
|
package/dist/index.js
CHANGED
@@ -26,6 +26,7 @@ export * from "./components/Navbar";
|
|
26
26
|
export * from "./components/Notifications";
|
27
27
|
export * from "./components/UserMenu";
|
28
28
|
export * from "./components/Banner";
|
29
|
+
export * from "./components/WearablePreview";
|
29
30
|
export * as dclNetworkUtils from "./lib/network";
|
30
31
|
export * from "./modules/jumpIn";
|
31
32
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAA;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAA;AAE/C,gBAAgB;AAChB,OAAO,EACL,KAAK,IAAI,UAAU,EACnB,IAAI,IAAI,SAAS,EACjB,aAAa,IAAI,gBAAgB,GAClC,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAA;AAE3C,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAA;AAC9D,cAAc,sBAAsB,CAAA;AACpC,OAAO,KAAK,eAAe,MAAM,iCAAiC,CAAA;AAClE,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,OAAO,KAAK,QAAQ,MAAM,oBAAoB,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,YAAY,MAAM,gBAAgB,CAAA;AAC9C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAA;AAE/C,gBAAgB;AAChB,OAAO,EACL,KAAK,IAAI,UAAU,EACnB,IAAI,IAAI,SAAS,EACjB,aAAa,IAAI,gBAAgB,GAClC,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAA;AAE3C,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAA;AAC9D,cAAc,sBAAsB,CAAA;AACpC,OAAO,KAAK,eAAe,MAAM,iCAAiC,CAAA;AAClE,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,OAAO,KAAK,QAAQ,MAAM,oBAAoB,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAE5C,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,cAAc,kBAAkB,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function createDebounce(): (fn: (...args: unknown[]) => unknown, ms: number, ...args: unknown[]) => void;
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/lib/debounce.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc;IAC5B,IAAI,OAAO,GAA0B,IAAI,CAAA;IACzC,OAAO,CACL,EAAmC,EACnC,EAAU,EACV,GAAG,IAAe,EAClB,EAAE;QACF,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,OAAO,CAAC,CAAA;QACvB,CAAC;QACD,OAAO,GAAG,UAAU,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,CAAA;IACvC,CAAC,CAAA;AACH,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "decentraland-ui2",
|
3
|
-
"version": "0.25.2-
|
3
|
+
"version": "0.25.2-17073455092.commit-a1cbc3e",
|
4
4
|
"description": "Decentraland's UI components and styles",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"types": "dist/index.d.ts",
|
@@ -39,7 +39,7 @@
|
|
39
39
|
"dependencies": {
|
40
40
|
"@contentful/rich-text-react-renderer": "^16.0.1",
|
41
41
|
"@dcl/hooks": "^0.0.4",
|
42
|
-
"@dcl/schemas": "^18.
|
42
|
+
"@dcl/schemas": "^18.1.0",
|
43
43
|
"@dcl/ui-env": "^1.5.1",
|
44
44
|
"@emotion/react": "^11.11.4",
|
45
45
|
"@emotion/styled": "^11.11.5",
|
@@ -47,7 +47,10 @@
|
|
47
47
|
"@mui/material": "^5.16.0",
|
48
48
|
"autoprefixer": "^10.4.19",
|
49
49
|
"date-fns": "^3.6.0",
|
50
|
+
"deep-equal": "^2.2.3",
|
50
51
|
"ethereum-blockies": "^0.1.1",
|
52
|
+
"fp-future": "^1.0.1",
|
53
|
+
"mitt": "^3.0.1",
|
51
54
|
"radash": "^11.0.0",
|
52
55
|
"react": "^17.0.2",
|
53
56
|
"react-dom": "^17.0.2",
|
@@ -69,6 +72,7 @@
|
|
69
72
|
"@storybook/react": "^7.6.20",
|
70
73
|
"@storybook/react-webpack5": "^7.6.20",
|
71
74
|
"@storybook/testing-library": "^0.2.2",
|
75
|
+
"@types/deep-equal": "^1.0.4",
|
72
76
|
"@types/jest": "^29.5.12",
|
73
77
|
"@types/react": "^17.0.80",
|
74
78
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
@@ -94,5 +98,5 @@
|
|
94
98
|
"files": [
|
95
99
|
"dist"
|
96
100
|
],
|
97
|
-
"commit": "
|
101
|
+
"commit": "a1cbc3e56a211ca161de0df372bee418485fc37f"
|
98
102
|
}
|