decentraland-ui
Version:
Decentraland's UI components and styles
519 lines (518 loc) • 38.6 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UnityModes = exports.WithLockedRadius = exports.WithLockedBeta = exports.WithLockedAlpha = exports.WithoutPanning = exports.WithoutFadeEffect = exports.CustomPeerUrl = exports.DifferentProjections = exports.CameraFromTheTop = exports.CameraFromTheFront = exports.WithOffset = exports.EmoteThumbnailPicker = exports.PreviewFromAFile = exports.EmoteEvents = exports.WithSound = exports.WithEmoteControls = exports.WithZoomControls = exports.WithTranslationControls = exports.TakeScreenshotAndMetrics = exports.WithCustomBackgroundColor = exports.WithoutBackgroundOrTransparentBackground = exports.WithoutAutoRotation = exports.FromBase64 = exports.FromUrl = exports.WithHotReload = exports.UseAsHero = exports.UsingOnErrorCallback = exports.UsingOnLoadCallback = exports.UsingStaticCamera = exports.UsingAWearablePreviewProfileEmote = exports.UsingAProfileEmote = exports.UsingAProfile = exports.UsingCustomShape = exports.UsingCustomHair = exports.UsingCustomSkin = exports.PreviewATextureWearable = exports.PreviewATokenFromMumbai = exports.PreviewAToken = exports.PreviewAnItem = void 0;
var react_1 = __importStar(require("react"));
var preview_1 = require("@dcl/schemas/dist/dapps/preview");
var item_1 = require("@dcl/schemas/dist/platform/item");
var schemas_1 = require("@dcl/schemas");
var Button_1 = require("../Button/Button");
var Navbar_1 = require("../Navbar/Navbar");
var Tabs_1 = require("../Tabs/Tabs");
var Page_1 = require("../Page/Page");
var Hero_1 = require("../Hero/Hero");
var Container_1 = require("../Container/Container");
var Header_1 = require("../Header/Header");
var Footer_1 = require("../Footer/Footer");
var Row_1 = require("../Row/Row");
var Radio_1 = require("../Radio/Radio");
var Center_1 = require("../Center/Center");
var SliderField_1 = require("../SliderField/SliderField");
var WearablePreview_1 = require("./WearablePreview");
var EmoteControls_1 = require("./EmoteControls");
var ZoomControls_1 = require("./ZoomControls");
var TranslationControls_1 = require("./TranslationControls");
require("./WearablePreview.stories.css");
var getRandomHex = function () {
return '#' + Math.random().toString(16).slice(2, 8);
};
var getRandomProfile = function () {
return "default".concat(Math.floor(Math.random() * 160) + 1);
};
var RandomConfigProvider = function (props) {
var _a = react_1.default.useState(getRandomHex()), hair = _a[0], setHair = _a[1];
var _b = react_1.default.useState(getRandomHex()), skin = _b[0], setSkin = _b[1];
var _c = react_1.default.useState(getRandomProfile()), profile = _c[0], setProfile = _c[1];
react_1.default.useEffect(function () {
setInterval(function () {
setHair(getRandomHex());
setSkin(getRandomHex());
setProfile(getRandomProfile());
}, 5000);
}, []);
return props.children(hair, skin, profile);
};
function toWearableWithBlobs(file) {
return {
id: 'some-id',
name: '',
description: '',
image: '',
thumbnail: '',
i18n: [],
data: {
category: schemas_1.WearableCategory.HAT,
hides: [],
replaces: [],
tags: [],
representations: [
{
bodyShapes: [item_1.BodyShape.MALE, item_1.BodyShape.FEMALE],
mainFile: 'model.glb',
contents: [
{
key: 'model.glb',
blob: file
}
],
overrideHides: [],
overrideReplaces: []
}
]
}
};
}
function toEmoteWithBlobs(file) {
return {
id: 'some-id',
name: '',
description: '',
image: '',
thumbnail: '',
i18n: [],
emoteDataADR74: {
category: item_1.EmoteCategory.DANCE,
tags: [],
representations: [
{
bodyShapes: [item_1.BodyShape.MALE, item_1.BodyShape.FEMALE],
mainFile: 'model.glb',
contents: [
{
key: 'model.glb',
blob: file
}
]
}
],
loop: false
}
};
}
exports.default = {
title: 'WearablePreview',
component: WearablePreview_1.WearablePreview,
parameters: {
layout: 'fullscreen'
}
};
var PreviewAnItem = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488", itemId: "5" }))); };
exports.PreviewAnItem = PreviewAnItem;
exports.PreviewAnItem.storyName = 'Preview an item';
var PreviewAToken = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488", tokenId: "1" }))); };
exports.PreviewAToken = PreviewAToken;
exports.PreviewAToken.storyName = 'Preview a token';
var PreviewATokenFromMumbai = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xf88951ddd9ff334ae98901e26042edbb8f6d52e5", tokenId: "1", dev: true }))); };
exports.PreviewATokenFromMumbai = PreviewATokenFromMumbai;
exports.PreviewATokenFromMumbai.storyName = 'Preview a token from mumbai';
var PreviewATextureWearable = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xfeb52cbf71b9adac957c6f948a6cf9980ac8c907", tokenId: "3073" }))); };
exports.PreviewATextureWearable = PreviewATextureWearable;
exports.PreviewATextureWearable.storyName = 'Preview a texture wearable';
var UsingCustomSkin = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0x994684b980d6faff06ff36b13c243c31d1b3aa0e", itemId: "0", skin: "ff0000" }))); };
exports.UsingCustomSkin = UsingCustomSkin;
exports.UsingCustomSkin.storyName = 'Using custom skin';
var UsingCustomHair = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xe3d2c4ec777fb88dd219905cd896f79a592adf30", itemId: "0", hair: "00ff00" }))); };
exports.UsingCustomHair = UsingCustomHair;
exports.UsingCustomHair.storyName = 'Using custom hair';
var UsingCustomShape = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xe3d2c4ec777fb88dd219905cd896f79a592adf30", itemId: "0", hair: "00ff00", bodyShape: item_1.BodyShape.FEMALE }))); };
exports.UsingCustomShape = UsingCustomShape;
exports.UsingCustomShape.storyName = 'Using custom shape';
var UsingAProfile = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6" }))); };
exports.UsingAProfile = UsingAProfile;
exports.UsingAProfile.storyName = 'Using a profile';
var UsingAProfileEmote = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", emote: preview_1.PreviewEmote.FASHION }))); };
exports.UsingAProfileEmote = UsingAProfileEmote;
exports.UsingAProfileEmote.storyName = 'Using a profile + emote';
var UsingAWearablePreviewProfileEmote = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0x186c788f9c172934b790b868faf3b78b84e34e89", itemId: "0", profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", emote: preview_1.PreviewEmote.FASHION }))); };
exports.UsingAWearablePreviewProfileEmote = UsingAWearablePreviewProfileEmote;
exports.UsingAWearablePreviewProfileEmote.storyName =
'Using a wearable + profile + emote';
var UsingStaticCamera = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", camera: preview_1.PreviewCamera.STATIC }))); };
exports.UsingStaticCamera = UsingStaticCamera;
exports.UsingStaticCamera.storyName = 'Using static camera';
var UsingOnLoadCallback = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488", itemId: "5", onLoad: function () { return console.log('loaded!'); } }))); };
exports.UsingOnLoadCallback = UsingOnLoadCallback;
exports.UsingOnLoadCallback.storyName = 'Using onLoad callback';
var UsingOnErrorCallback = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "invalidAddress", itemId: "invalidItem", onError: function (error) { return console.error(error.message); } }))); };
exports.UsingOnErrorCallback = UsingOnErrorCallback;
exports.UsingOnErrorCallback.storyName = 'Using onError callback';
var UseAsHero = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(Navbar_1.Navbar, { activePage: "marketplace" }),
react_1.default.createElement(Tabs_1.Tabs, { isFullscreen: true },
react_1.default.createElement(Tabs_1.Tabs.Tab, { active: true }, "Atlas"),
react_1.default.createElement(Tabs_1.Tabs.Tab, null, "Market"),
react_1.default.createElement(Tabs_1.Tabs.Tab, null, "My Assets")),
react_1.default.createElement(Page_1.Page, { isFullscreen: true },
react_1.default.createElement(Hero_1.Hero, { height: 420 },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xee8ae4c668edd43b34b98934d6d2ff82e41e6488", itemId: "5" })),
react_1.default.createElement(Container_1.Container, null,
react_1.default.createElement(Header_1.Header, null, "Hello Wolrd"),
react_1.default.createElement("p", null, "This page has a hero"))),
react_1.default.createElement(Footer_1.Footer, null))); };
exports.UseAsHero = UseAsHero;
exports.UseAsHero.storyName = 'Use as hero';
var WithHotReload = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(RandomConfigProvider, null, function (hair, skin, profile) { return (react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: profile, hair: hair, skin: skin, onLoad: function () { return console.log('loaded!'); } })); }))); };
exports.WithHotReload = WithHotReload;
exports.WithHotReload.storyName = 'With hot reload';
var FromUrl = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { urls: [
'https://gist.githubusercontent.com/cazala/7e66253d2b86f018ee599cf9da007b81/raw/dfb411a0cff38d1b128efe4f7eca80fa2e04e84d/wearable.json'
] }))); };
exports.FromUrl = FromUrl;
exports.FromUrl.storyName = 'From URL';
var FromBase64 = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { base64s: [
'eyJpZCI6InVybjpkZWNlbnRyYWxhbmQ6bWF0aWM6Y29sbGVjdGlvbnMtdjI6MHhlNzkzODAxODI5ZTBlMGY5YWE1YmFmOTg3NzMyMDA1OWQ5ZjRhNjU0OjAiLCJuYW1lIjoiV2Fja3kgQWxpZW4gQnVja2V0IEhhdCIsImRlc2NyaXB0aW9uIjoiU2xpbXkgSGFpciBpcyBhIGZpeGVkIGNvbG91ci4uLiIsImNvbGxlY3Rpb25BZGRyZXNzIjoiMHhlNzkzODAxODI5ZTBlMGY5YWE1YmFmOTg3NzMyMDA1OWQ5ZjRhNjU0IiwicmFyaXR5IjoibGVnZW5kYXJ5IiwiaTE4biI6W3siY29kZSI6ImVuIiwidGV4dCI6IldhY2t5IEFsaWVuIEJ1Y2tldCBIYXQifV0sImRhdGEiOnsicmVwbGFjZXMiOltdLCJoaWRlcyI6WyJoYWlyIl0sInRhZ3MiOlsid2Fja3lhbGllbiIsIndhY2t5IiwiYWxpZW4iLCJidWNrZXRoYXQiLCJzbGltZSIsIjE2MjAiLCJqdWRhc2p1ZGFzIl0sImNhdGVnb3J5IjoiaGF0IiwicmVwcmVzZW50YXRpb25zIjpbeyJib2R5U2hhcGVzIjpbInVybjpkZWNlbnRyYWxhbmQ6b2ZmLWNoYWluOmJhc2UtYXZhdGFyczpCYXNlTWFsZSJdLCJtYWluRmlsZSI6Im1hbGUvZnJvZ2dseU1BTEVfYmFzZS5nbGIiLCJjb250ZW50cyI6W3sia2V5IjoibWFsZS9mcm9nZ2x5TUFMRV9iYXNlLmdsYiIsInVybCI6Imh0dHBzOi8vcGVlci1lYzEuZGVjZW50cmFsYW5kLm9yZy9jb250ZW50L2NvbnRlbnRzL1FtZUNxNzV2TE1EdGtYeWFXWTNKejc3RmdEQ2paaTNGSFQxWjVKbTR6VG9HcG0ifV0sIm92ZXJyaWRlSGlkZXMiOlsiaGFpciJdLCJvdmVycmlkZVJlcGxhY2VzIjpbXX0seyJib2R5U2hhcGVzIjpbInVybjpkZWNlbnRyYWxhbmQ6b2ZmLWNoYWluOmJhc2UtYXZhdGFyczpCYXNlRmVtYWxlIl0sIm1haW5GaWxlIjoiZmVtYWxlL2Zyb2dnbHlGRU1BTEVfYmFzZS5nbGIiLCJjb250ZW50cyI6W3sia2V5IjoiZmVtYWxlL2Zyb2dnbHlGRU1BTEVfYmFzZS5nbGIiLCJ1cmwiOiJodHRwczovL3BlZXItZWMxLmRlY2VudHJhbGFuZC5vcmcvY29udGVudC9jb250ZW50cy9RbVFGa0xHczUzMnhjZUZjb0NKYm5xWXExVlBzOGRleDVLMXdrWm8yQXhqajdZIn1dLCJvdmVycmlkZUhpZGVzIjpbImhhaXIiXSwib3ZlcnJpZGVSZXBsYWNlcyI6W119XX0sImltYWdlIjoiaHR0cHM6Ly9wZWVyLWVjMS5kZWNlbnRyYWxhbmQub3JnL2NvbnRlbnQvY29udGVudHMvUW1XUEczY0phVmMxaEVCa0tpZ2E2NWtVeGIzZ2g0cFp6RDN3Y0pWb1laR0VwQiIsInRodW1ibmFpbCI6Imh0dHBzOi8vcGVlci1lYzEuZGVjZW50cmFsYW5kLm9yZy9jb250ZW50L2NvbnRlbnRzL1FtWUY3OXZZNkNFamVyUlFEOU1Hd01WWTV0NWJlWjY5UjlEMmQ5U0tKRFNQNzUiLCJtZXRyaWNzIjp7InRyaWFuZ2xlcyI6MTQ4NywibWF0ZXJpYWxzIjoyLCJ0ZXh0dXJlcyI6MiwibWVzaGVzIjoyLCJib2RpZXMiOjIsImVudGl0aWVzIjoxfX0='
] }))); };
exports.FromBase64 = FromBase64;
exports.FromBase64.storyName = 'From base64';
var WithoutAutoRotation = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "default", disableAutoRotate: true }))); };
exports.WithoutAutoRotation = WithoutAutoRotation;
exports.WithoutAutoRotation.storyName = 'Without auto Rotation';
var WithoutBackgroundOrTransparentBackground = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "default", disableBackground: true }))); };
exports.WithoutBackgroundOrTransparentBackground = WithoutBackgroundOrTransparentBackground;
exports.WithoutBackgroundOrTransparentBackground.storyName =
'Without background or transparent background';
var WithCustomBackgroundColor = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "default", background: "ff0000" }))); };
exports.WithCustomBackgroundColor = WithCustomBackgroundColor;
exports.WithCustomBackgroundColor.storyName = 'With custom background color';
var TakeScreenshotAndMetrics = function () {
var _a = react_1.default.useState(''), screenshot = _a[0], setScreenshot = _a[1];
var _b = react_1.default.useState(null), metrics = _b[0], setMetrics = _b[1];
var ref = react_1.default.useRef(null);
var onLoad = react_1.default.useCallback(function () {
var _a;
ref.current = (_a = ref.current) !== null && _a !== void 0 ? _a : WearablePreview_1.WearablePreview.createController('some-id');
}, []);
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "some-id", contractAddress: "0x186c788f9c172934b790b868faf3b78b84e34e89", itemId: "0", disableAutoRotate: true, disableBackground: true, onLoad: onLoad }),
react_1.default.createElement(Row_1.Row, { className: "controls" },
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () {
return ref.current.scene.getScreenshot(1024, 1024).then(setScreenshot);
} }, "Screenshot"),
screenshot && react_1.default.createElement("img", { src: screenshot }),
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () { return ref.current.scene.getMetrics().then(setMetrics); } }, "Metrics"),
metrics && react_1.default.createElement("p", null, JSON.stringify(metrics)))));
};
exports.TakeScreenshotAndMetrics = TakeScreenshotAndMetrics;
exports.TakeScreenshotAndMetrics.storyName = 'Take screenshot and metrics';
var WithTranslationControls = function () {
var _a = react_1.default.useState(TranslationControls_1.VerticalPosition.LEFT), verticalPosition = _a[0], setVerticalPosition = _a[1];
var togglePosition = verticalPosition === TranslationControls_1.VerticalPosition.LEFT
? TranslationControls_1.VerticalPosition.RIGHT
: TranslationControls_1.VerticalPosition.LEFT;
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "some-id", profile: "default", emote: preview_1.PreviewEmote.DANCE, disableBackground: true, disableAutoRotate: true, disableFace: true, disableDefaultWearables: true, skin: "000000" }),
react_1.default.createElement(TranslationControls_1.TranslationControls, { vertical: true, verticalPosition: verticalPosition, wearablePreviewId: "some-id" }),
react_1.default.createElement(Row_1.Row, { className: "controls" },
react_1.default.createElement(Radio_1.Radio, { toggle: true, checked: verticalPosition === TranslationControls_1.VerticalPosition.LEFT, label: "".concat(verticalPosition, " side"), onClick: function () { return setVerticalPosition(togglePosition); }, style: { textTransform: 'capitalize' } }))));
};
exports.WithTranslationControls = WithTranslationControls;
exports.WithTranslationControls.storyName = 'With translation controls';
var WithZoomControls = function () {
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "some-id", profile: "default", emote: preview_1.PreviewEmote.DANCE, disableBackground: true, disableAutoRotate: true, disableFace: true, disableDefaultWearables: true, skin: "000000", zoom: 100, wheelZoom: 2 }),
react_1.default.createElement(ZoomControls_1.ZoomControls, { wearablePreviewId: "some-id" })));
};
exports.WithZoomControls = WithZoomControls;
exports.WithZoomControls.storyName = 'With zoom controls';
var WithEmoteControls = function () {
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "some-id", profile: "default", emote: preview_1.PreviewEmote.DANCE, disableBackground: true, disableAutoRotate: true, disableFace: true, disableDefaultWearables: true, skin: "000000" }),
react_1.default.createElement(EmoteControls_1.EmoteControls, { wearablePreviewId: "some-id" })));
};
exports.WithEmoteControls = WithEmoteControls;
exports.WithEmoteControls.storyName = 'With emote controls';
var WithSound = function () {
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "some-id", profile: "default", contractAddress: "0x8d8a55def3df0f3979819e52d67047e77c12aaaa", itemId: "0", dev: true, disableBackground: true, disableAutoRotate: true, disableFace: true, disableDefaultWearables: true, skin: "000000" }),
react_1.default.createElement(EmoteControls_1.EmoteControls, { wearablePreviewId: "some-id" })));
};
exports.WithSound = WithSound;
exports.WithSound.storyName = 'With sound';
var EmoteEvents = function () {
var _a = react_1.default.useState('0'), goTo = _a[0], setGoTo = _a[1];
var _b = react_1.default.useState(''), screenshot = _b[0], setScreenshot = _b[1];
var _c = react_1.default.useState(''), length = _c[0], setLength = _c[1];
var ref = react_1.default.useRef(null);
var onLoad = react_1.default.useCallback(function () {
var _a;
ref.current = (_a = ref.current) !== null && _a !== void 0 ? _a : WearablePreview_1.WearablePreview.createController('some-id');
}, []);
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "some-id", profile: "default", emote: preview_1.PreviewEmote.DANCE, disableBackground: true, disableAutoRotate: true, disableFace: true, disableDefaultWearables: true, skin: "000000", onLoad: onLoad }),
react_1.default.createElement(Row_1.Row, { className: "controls" },
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () { return ref.current.emote.play(); } }, "Play"),
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () { return ref.current.emote.pause(); } }, "Pause"),
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () { return ref.current.emote.stop(); } }, "Stop"),
react_1.default.createElement("input", { className: "seconds", type: "number", value: goTo, onChange: function (e) { return setGoTo(e.target.value); } }),
react_1.default.createElement(Button_1.Button, { primary: true, className: "goto", onClick: function () {
var parsed = parseFloat(goTo);
if (!isNaN(parsed)) {
ref.current.emote.goTo(parsed);
}
} }, "Go To"),
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () {
return ref.current.scene.getScreenshot(1024, 1024).then(setScreenshot);
} }, "Screenshot"),
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () {
return ref.current.emote
.getLength()
.then(function (value) { return setLength(value.toFixed(2)); });
} }, "Get Length"),
screenshot && react_1.default.createElement("img", { src: screenshot }),
!!length && react_1.default.createElement("p", null,
"Length: ",
length,
" seconds"))));
};
exports.EmoteEvents = EmoteEvents;
exports.EmoteEvents.storyName = 'Emote events';
var PreviewFromAFile = function () {
var inputRef = react_1.default.useRef();
var _a = react_1.default.useState(null), file = _a[0], setFile = _a[1];
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" }, file ? (react_1.default.createElement(WearablePreview_1.WearablePreview, { blob: toWearableWithBlobs(file) })) : (react_1.default.createElement(Center_1.Center, null,
react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function () { return setFile(inputRef.current.files[0]); } })))));
};
exports.PreviewFromAFile = PreviewFromAFile;
exports.PreviewFromAFile.storyName = 'Preview from a file';
var EmoteThumbnailPicker = function () {
var inputRef = react_1.default.useRef();
var _a = react_1.default.useState(null), file = _a[0], setFile = _a[1];
var _b = react_1.default.useState(''), screenshot = _b[0], setScreenshot = _b[1];
var _c = react_1.default.useState(0), length = _c[0], setLength = _c[1];
var ref = react_1.default.useRef(null);
var onLoad = react_1.default.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
var _a;
var _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
ref.current =
(_b = ref.current) !== null && _b !== void 0 ? _b : WearablePreview_1.WearablePreview.createController('thumbnail-picker');
_a = setLength;
return [4 /*yield*/, ref.current.emote.getLength()];
case 1:
_a.apply(void 0, [_c.sent()]);
return [2 /*return*/];
}
});
}); }, []);
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" }, file ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(WearablePreview_1.WearablePreview, { id: "thumbnail-picker", blob: file ? toEmoteWithBlobs(file) : undefined, profile: "default", disableBackground: true, disableAutoRotate: true, disableFace: true, disableDefaultWearables: true, skin: "000000", wheelZoom: 2, onLoad: onLoad, disableDefaultEmotes: true }),
react_1.default.createElement(Row_1.Row, { className: "controls" },
react_1.default.createElement(Button_1.Button, { primary: true, onClick: function () {
return ref.current.scene.getScreenshot(1024, 1024).then(setScreenshot);
} }, "Screenshot"),
screenshot && react_1.default.createElement("img", { src: screenshot }),
length > 0 && (react_1.default.createElement("span", { className: "slider" },
react_1.default.createElement(SliderField_1.SliderField, { header: "", min: 0, max: length * 100, onChange: function (_, value) { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, ref.current.emote.pause()];
case 1:
_a.sent();
return [4 /*yield*/, ref.current.emote.goTo(value / 100)];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); } })))),
react_1.default.createElement(EmoteControls_1.EmoteControls, { wearablePreviewId: "thumbnail-picker" }))) : (react_1.default.createElement(Center_1.Center, null,
react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function () { return setFile(inputRef.current.files[0]); } })))));
};
exports.EmoteThumbnailPicker = EmoteThumbnailPicker;
exports.EmoteThumbnailPicker.storyName = 'Emote thumbnail picker';
var WithOffset = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "default", offsetY: 0.5, offsetX: 0.5 }))); };
exports.WithOffset = WithOffset;
exports.WithOffset.storyName = 'With offset';
var CameraFromTheFront = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0x9449bc0ef0108d2af6f1031aa5a51a3a830d59c2", itemId: "0", cameraX: 0, cameraY: 0, cameraZ: 3, disableAutoRotate: true }))); };
exports.CameraFromTheFront = CameraFromTheFront;
exports.CameraFromTheFront.storyName = 'Camera from the front';
var CameraFromTheTop = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", cameraX: 0, cameraY: 2, cameraZ: 0, disableAutoRotate: true }))); };
exports.CameraFromTheTop = CameraFromTheTop;
exports.CameraFromTheTop.storyName = 'Camera from the top';
var DifferentProjections = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement("div", { style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%'
} },
react_1.default.createElement("div", { style: { width: 512, height: 512, display: 'inline-block' } },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", projection: preview_1.PreviewProjection.ORTHOGRAPHIC, disableAutoRotate: true })),
react_1.default.createElement("div", { style: { width: 512, height: 512, display: 'inline-block' } },
react_1.default.createElement(WearablePreview_1.WearablePreview, { contractAddress: "0xf3eb38b1649bdccc8761f3a0526b3173597a0363", itemId: "2", projection: preview_1.PreviewProjection.PERSPECTIVE, disableAutoRotate: true }))))); };
exports.DifferentProjections = DifferentProjections;
exports.DifferentProjections.storyName = 'Different projections';
var CustomPeerUrl = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "default", peerUrl: "https://peer.decentraland.zone" }))); };
exports.CustomPeerUrl = CustomPeerUrl;
exports.CustomPeerUrl.storyName = 'Custom peer url';
var WithoutFadeEffect = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", disableFadeEffect: true }))); };
exports.WithoutFadeEffect = WithoutFadeEffect;
exports.WithoutFadeEffect.storyName = 'Without fade effect';
var WithoutPanning = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", panning: false }))); };
exports.WithoutPanning = WithoutPanning;
exports.WithoutPanning.storyName = 'Without panning';
var WithLockedAlpha = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", lockAlpha: true }))); };
exports.WithLockedAlpha = WithLockedAlpha;
exports.WithLockedAlpha.storyName = 'With locked alpha';
var WithLockedBeta = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", lockBeta: true }))); };
exports.WithLockedBeta = WithLockedBeta;
exports.WithLockedBeta.storyName = 'With locked beta';
var WithLockedRadius = function () { return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, { profile: "0xc85a0a34d5f9f2239ab0622a41a2c2560ff119c6", lockRadius: true }))); };
exports.WithLockedRadius = WithLockedRadius;
exports.WithLockedRadius.storyName = 'With locked radius';
var UnityModes = function () {
var _a = react_1.default.useState('marketplace'), unityMode = _a[0], setUnityMode = _a[1];
var previewProps = (0, react_1.useMemo)(function () {
switch (unityMode) {
case 'marketplace':
case 'builder':
return {
contractAddress: '0xee8ae4c668edd43b34b98934d6d2ff82e41e6488',
itemId: '5'
};
case 'profile':
return {
profile: getRandomProfile()
};
case 'authentication':
return {
profile: getRandomProfile()
};
case 'configurator':
return {
username: 'DclUsername'
};
default:
return {};
}
}, [unityMode]);
return (react_1.default.createElement("div", { className: "WearablePreview-story-container" },
react_1.default.createElement(WearablePreview_1.WearablePreview, __assign({ key: unityMode }, previewProps, { unity: true, unityMode: unityMode, onLoad: function () {
return console.log("WearablePreview loaded with mode: ".concat(unityMode));
}, onError: function (error) {
return console.error("WearablePreview error with mode ".concat(unityMode, ":"), error);
} })),
react_1.default.createElement(Row_1.Row, { className: "controls" },
react_1.default.createElement("div", { style: { marginBottom: '16px', fontSize: '12px', color: '#666' } }, "Debug: Check browser console for generated URL"),
react_1.default.createElement("select", { value: unityMode, onChange: function (e) {
var newMode = e.target.value;
console.log("Switching to mode: ".concat(newMode));
setUnityMode(newMode);
}, style: { padding: '8px', marginTop: '16px' } },
react_1.default.createElement("option", { value: "marketplace" }, "Marketplace"),
react_1.default.createElement("option", { value: "profile" }, "Profile"),
react_1.default.createElement("option", { value: "authentication" }, "Authentication"),
react_1.default.createElement("option", { value: "builder" }, "Builder"),
react_1.default.createElement("option", { value: "configurator" }, "Configurator")))));
};
exports.UnityModes = UnityModes;
exports.UnityModes.storyName = 'Unity modes';