decentraland-ui
Version:
Decentraland's UI components and styles
318 lines (317 loc) • 16 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WearablePreview = void 0;
/* eslint-disable @typescript-eslint/no-empty-function */
var React = __importStar(require("react"));
var deep_equal_1 = __importDefault(require("deep-equal"));
var preview_1 = require("@dcl/schemas/dist/dapps/preview");
var debounce_1 = require("../../lib/debounce");
var WearablePreview_controller_1 = require("./WearablePreview.controller");
require("./WearablePreview.css");
var config_1 = require("../../config");
var debounce = (0, debounce_1.createDebounce)();
var safeEncodeParam = function (key, value) {
if (value === undefined || value === null || value === '') {
return '';
}
// Handle arrays
if (Array.isArray(value)) {
return value.length > 0
? value
.map(function (item) { return "".concat(key, "=").concat(encodeURIComponent(String(item))); })
.join('&')
: '';
}
// Handle all other values (strings, numbers, booleans, objects, etc.)
return "".concat(key, "=").concat(encodeURIComponent(String(value)));
};
/**
* @deprecated Should start using the same component migrated to UI2.
*/
var WearablePreview = /** @class */ (function (_super) {
__extends(WearablePreview, _super);
function WearablePreview() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isReady: false,
pendingOptions: null,
lastOptions: null
};
_this.iframe = null;
_this.getUrl = function () {
var _a = _this.props, contractAddress = _a.contractAddress, tokenId = _a.tokenId, itemId = _a.itemId, profile = _a.profile, urns = _a.urns, urls = _a.urls, base64s = _a.base64s, skin = _a.skin, hair = _a.hair, eyes = _a.eyes, bodyShape = _a.bodyShape, emote = _a.emote, camera = _a.camera, projection = _a.projection, zoom = _a.zoom, background = _a.background, offsetX = _a.offsetX, offsetY = _a.offsetY, offsetZ = _a.offsetZ, cameraX = _a.cameraX, cameraY = _a.cameraY, cameraZ = _a.cameraZ, wheelZoom = _a.wheelZoom, wheelPrecision = _a.wheelPrecision, wheelStart = _a.wheelStart, disableBackground = _a.disableBackground, disableAutoRotate = _a.disableAutoRotate, disableAutoCenter = _a.disableAutoCenter, disableFace = _a.disableFace, disableDefaultWearables = _a.disableDefaultWearables, disableDefaultEmotes = _a.disableDefaultEmotes, disableFadeEffect = _a.disableFadeEffect, showSceneBoundaries = _a.showSceneBoundaries, showThumbnailBoundaries = _a.showThumbnailBoundaries, panning = _a.panning, lockAlpha = _a.lockAlpha, lockBeta = _a.lockBeta, lockRadius = _a.lockRadius, dev = _a.dev, baseUrl = _a.baseUrl, peerUrl = _a.peerUrl, nftServerUrl = _a.nftServerUrl, type = _a.type, unity = _a.unity, unityMode = _a.unityMode;
var contractParam = safeEncodeParam('contract', contractAddress);
var tokenParam = safeEncodeParam('token', tokenId);
var itemParam = safeEncodeParam('item', itemId);
var profileParam = safeEncodeParam('profile', profile);
var urnParams = safeEncodeParam('urn', urns);
var urlsParams = safeEncodeParam('url', urls);
var base64sParams = safeEncodeParam('base64', base64s);
var skinParam = safeEncodeParam('skin', skin);
var hairParam = safeEncodeParam('hair', hair);
var eyesParam = safeEncodeParam('eyes', eyes);
var bodyShapeParam = safeEncodeParam('bodyShape', bodyShape);
var emoteParam = safeEncodeParam('emote', emote);
var cameraParam = safeEncodeParam('camera', camera);
var projectionParam = safeEncodeParam('projection', projection);
var zoomParam = safeEncodeParam('zoom', zoom);
var backgroundParam = safeEncodeParam('background', background);
var offsetXParam = safeEncodeParam('offsetX', offsetX);
var offsetYParam = safeEncodeParam('offsetY', offsetY);
var offsetZParam = safeEncodeParam('offsetZ', offsetZ);
var cameraXParam = safeEncodeParam('cameraX', cameraX);
var cameraYParam = safeEncodeParam('cameraY', cameraY);
var cameraZParam = safeEncodeParam('cameraZ', cameraZ);
var wheelZoomParam = safeEncodeParam('wheelZoom', wheelZoom);
var wheelPrecisionParam = safeEncodeParam('wheelPrecision', wheelPrecision);
var wheelStartParam = safeEncodeParam('wheelStart', wheelStart);
var disableBackgroundParam = safeEncodeParam('disableBackground', disableBackground);
var disableAutoRotateParam = safeEncodeParam('disableAutoRotate', disableAutoRotate);
var disableAutoCenterParam = safeEncodeParam('disableAutoCenter', disableAutoCenter);
var disableFaceParam = safeEncodeParam('disableFace', disableFace);
var disableDefaultWearablesParam = safeEncodeParam('disableDefaultWearables', disableDefaultWearables);
var disableDefaultEmotesParam = safeEncodeParam('disableDefaultEmotes', disableDefaultEmotes);
var disableFadeEffectParam = safeEncodeParam('disableFadeEffect', disableFadeEffect);
var showSceneBoundariesParam = safeEncodeParam('showSceneBoundaries', showSceneBoundaries);
var showThumbnailBoundariesParam = safeEncodeParam('showThumbnailBoundaries', showThumbnailBoundaries);
var peerUrlParam = safeEncodeParam('peerUrl', peerUrl);
var nftServerUrlParam = safeEncodeParam('nftServerUrl', nftServerUrl);
var typeParam = safeEncodeParam('type', type);
var panningParam = safeEncodeParam('panning', panning);
var lockAlphaParam = safeEncodeParam('lockAlpha', lockAlpha);
var lockBetaParam = safeEncodeParam('lockBeta', lockBeta);
var lockRadiusParam = safeEncodeParam('lockRadius', lockRadius);
var envParam = safeEncodeParam('env', dev ? 'dev' : undefined);
var unityParam = safeEncodeParam('unity', unity);
var unityModeParam = safeEncodeParam('mode', unityMode);
var url = baseUrl +
'?' +
[
contractParam,
tokenParam,
itemParam,
profileParam,
urnParams,
urlsParams,
base64sParams,
skinParam,
hairParam,
eyesParam,
bodyShapeParam,
emoteParam,
cameraParam,
projectionParam,
zoomParam,
backgroundParam,
offsetXParam,
offsetYParam,
offsetZParam,
cameraXParam,
cameraYParam,
cameraZParam,
wheelZoomParam,
wheelPrecisionParam,
wheelStartParam,
disableBackgroundParam,
disableAutoRotateParam,
disableAutoCenterParam,
disableFaceParam,
disableDefaultWearablesParam,
disableDefaultEmotesParam,
disableFadeEffectParam,
showSceneBoundariesParam,
showThumbnailBoundariesParam,
peerUrlParam,
nftServerUrlParam,
typeParam,
panningParam,
lockAlphaParam,
lockBetaParam,
lockRadiusParam,
envParam,
unityParam,
unityModeParam
]
.filter(function (param) { return !!param; })
.join('&');
return url;
};
_this.getOptions = function () {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var _a = _this.props, dev = _a.dev, rest = __rest(_a, ["dev"]);
var options = {};
for (var key in rest) {
if (typeof rest[key] !== 'function') {
options[key] = rest[key];
}
}
return options;
};
_this.handleMessage = function (event) {
var _a = _this.props, baseUrl = _a.baseUrl, onLoad = _a.onLoad, onError = _a.onError;
var origin = event.origin;
if (origin === baseUrl) {
if (event.data && event.data.type) {
var type = event.data.type;
switch (type) {
case preview_1.PreviewMessageType.LOAD: {
var payload = event.data
.payload;
onLoad(payload === null || payload === void 0 ? void 0 : payload.renderer);
break;
}
case preview_1.PreviewMessageType.ERROR: {
var payload = event.data
.payload;
onError(new Error(payload.message));
break;
}
case preview_1.PreviewMessageType.READY: {
var _b = _this.state, isReady = _b.isReady, pendingOptions = _b.pendingOptions;
// ignore if already flagged as ready
if (isReady) {
return;
}
if (pendingOptions !== null) {
// if there were pending options, flush them and flag as ready
_this.sendUpdate(pendingOptions);
_this.setState({ isReady: true, pendingOptions: null });
}
else {
// otherwise just flag as ready
_this.setState({ isReady: true });
}
break;
}
default:
// do nothing
}
}
}
};
_this.handleUpdate = function () {
if (_this.iframe) {
// SSR check
if (window) {
var options = _this.getOptions();
if (_this.state.isReady) {
// if the iframe is ready, send the update
_this.sendUpdate(options);
}
else {
// otherwise store last update in state until it's ready
_this.setState({ pendingPreviewOptions: options });
}
}
}
else {
console.warn("Could not send update, iframe is not referenced");
}
};
_this.sendUpdate = function (options) {
var lastOptions = _this.state.lastOptions;
// only send update if new options are different
if (!lastOptions || !(0, deep_equal_1.default)(options, lastOptions)) {
// send message to iframe
(0, preview_1.sendMessage)(_this.iframe.contentWindow, preview_1.PreviewMessageType.UPDATE, {
options: options
});
// callback
var onUpdate = _this.props.onUpdate;
onUpdate(options);
// store options on state
_this.setState({ lastOptions: options });
}
};
_this.refIframe = function (iframe) {
_this.iframe = iframe;
};
return _this;
}
WearablePreview.createController = function (id) {
return (0, WearablePreview_controller_1.createController)(id);
};
WearablePreview.prototype.componentDidMount = function () {
window.addEventListener('message', this.handleMessage, false);
// set url in state
this.setState({ url: this.getUrl() });
// if there's a blob in the props, it can't be passed via URL, so we send it via postMessage
if (this.props.blob) {
this.handleUpdate();
}
};
WearablePreview.prototype.componentWillUnmount = function () {
window.removeEventListener('message', this.handleMessage, false);
};
WearablePreview.prototype.componentDidUpdate = function () {
debounce(this.handleUpdate, 500);
};
WearablePreview.prototype.render = function () {
if (this.props.tokenId && this.props.itemId) {
console.warn('You should NOT use `tokenId` and `itemId` props simultaneously');
}
return (React.createElement("iframe", { id: this.props.id, className: "WearablePreview", src: this.state.url, width: "100%", height: "100%", frameBorder: "0", ref: this.refIframe, allow: "autoplay" }));
};
WearablePreview.defaultProps = {
dev: false,
baseUrl: config_1.config.get('WEARABLE_PREVIEW_URL'),
unity: false,
onLoad: function () { },
onError: function () { },
onUpdate: function () { }
};
return WearablePreview;
}(React.PureComponent));
exports.WearablePreview = WearablePreview;